User manual
Program
Tento program odesílá o nco složitjší webpage, než která byla použita v pedchozím projektu.
Pipojit mžete zárove LED do pinu D9 modulu. LED pak bude indikovat aktuální zmny stavu.
Zadejte WLAN data a natte program do modulu. IP modulu se zobrazuje v sériovém rozhraní.
Otevete prohlíže a zadejte IP modulu. V textu zobrazeném v záhlaví bude popsáno jakým
zpsobem bude ízena LED indikace. Tento program pak aplikuje pln automatizovaný webový
server.
void loop() {
if (esp8266.available()) // check if the esp is sending a message
{
if (esp8266.find("+IPD,"))
{
debug("Incoming Request");
int connectionId = esp8266.parseInt();
if (esp8266.findUntil("LED","\n")) digitalWrite(LED, !digitalRead(LED));
String webpage = "<h1>Hello World!</h1>Open [IP]/LED to Toggle LED on D9";
if (sendCom("AT+CIPSEND=" + String(connectionId) + "," + String(webpage.length()),
">"))
{
sendCom(webpage,"SEND OK");
sendCom("AT+CIPCLOSE=" + String(connectionId),"OK");
debug("Send and Close");
}
}
}
}
Ke spuštní funkce serveru znovu použijte velmi jednoduchý píkaz configTCPServer(), který jste
již manuáln zadali. Loop-routine pak oekává další píchozí data. Pakliže tato data obsahují „LED“,
dojde k pepnutí na LED indikaci, bez ohledu na to v jaké ásti programu je text „LED“ umístn.
V tomto experimentu proto program obsahuje text:
<h1>Hello World!</h1>
002 Open [IP]/LED to Toggle LED on D9
<h1> je instrukce pro prohlíže k zobrazení textu </h1> coby záhlaví zápisu 1. V tomto pípad
se však doposud nejedná o správný HTML kód, ale pouze o jednoduchou formu textového
formátování. Délka website se provádí pomocí funkce webpage.lenght() (string class function)
a píkazu CIPSEND, kterým dojde ke penosu webpage.
Website s tlačítky
V tomto experimentu je samotný website daleko sofistikovanjší. Na webu bude použito ovládacích
prvk, které zajišují mnohem pohodlnjší ovládání LED. Pesto se hlavní konfigurace píliš neliší
od pedchozí aplikace. LED je pipojena k pinu D9 a je ovládána modulem. Zdrojový text pak obsahuje
jen velmi nepatrné zmny.
Program
Po natení programu pejdte na website modulu. Jednoduše
zadejte IP modulu do sériového rozhraní. Uložení website probíhá
oproti pedchozímu projektu jen s velmi nepatrnými zmnami.
Zatímco tento jednoduchý web je obsažen v obdobném zdrojovém
textu, webpage se nyní ukládá do Progmem (Program Memory).
Tato technologie ukládání využívá SRAM modulu a disponuje
zárove možností ukládat i promnné hodnoty. SRAM disponuje
pouze 2 kB pamti a je využívána použitými etzci.
Funkce programu tím dokáže udržovat obsah website v programové
pamti, která dosahuje již 32 kB. Pístup k datm je však proto
o nco komplexnjší.
const char site[] PROGMEM = {
"<HTML><HEAD>\n<meta name=\"viewport\" content=\"width=device-width, initial-
scale=2.0,
(…)
};
V tomto pípad se jedná o delší HTML dokument ve formátu C-compatible.
Tento formát je charakterizován uvozovkami v podob \" a nový ádek \n.
Tato forma je však dobe známa z jiných projekt, které používají programové etzce.
String createWebsite()
{
String xBuffer;
for (int i = 0; i <= sizeof(site); i++)
{
char myChar = pgm_read_byte_near(site + i);
xBuffer += myChar;
}
return xBuffer;
}
Funkce píkazu createWebsite() zajišuje natení obsahu Progmem a vrácení v podob etzce.
boolean sendWebsite(int connectionId, String webpage)
{
boolean success = true;
if (sendCom("AT+CIPSEND=" + String(connectionId) + "," +
String(webpage.length()), ">"))
{
esp8266.print(webpage);
esp8266.find("SEND OK");
success &= sendCom("AT+CIPCLOSE=" + String(connectionId),
"OK");
}
else
{
success = false;
}
return success;
}
Programový loop-routine v té chvíli oekává request query. Poté, co jej obdrží, dojde k aplikaci
funkce sendWebsite() s výstupem funkce createWebsite() a zadaného parametru.
Délka textu se v tomto pípad definuje pomocí funkce lengh(). Po penosu website
se komunikace ukonuje píkazem AT+CIPCLOSE. Aktivace LED je souástí programového procesu.
Rychlokurz HTML / HTML Crash course
V této ásti se budeme krátce zabývat tvorbou HTML a konkrétn vytvoením website pro ovládání
modulu NanoESP. Dozvíte se více o základní struktue HTML dokumentu, vytváení vstupních
a výstupních prvk a na závr také dojde k integraci vašeho vlastního webu do programu Arduino.
Soubor HTML je vždy definován <HTML> na zaátku dokumentu. Konec dokumentu pak musí
obsahovat </HTML>. Záhlaví dokumentu obsahuje dležité informace jako je název samotné website
pro zobrazení v prohlížei. V následujícím píkladu však záhlaví bude obsahovat ást pídavných
informací, které napíklad umožují komfortní prezentaci na mobilním zaízení (smartphone) (<meta
name ="viewport" …). Tyto ádky mžete použít kdykoliv na vaší HTML website.
<HTML><HEAD>
<meta name="viewport" content="width=device-width, initial-scale=2.0, userscalable=
yes">
<title>
Switch LED
</title>
</HEAD>