User manual
Za parametrem HEAD je nezbytná definice parametru BODY, který zahrnuje obsah website.
Na úvod parametru BODY se pak udávají další parametry jako je pozadí webu a barva fontu.
Tyto parametry pak mžete upravovat podle vlastních požadavk i pozdji. Typ písma a jeho
velikost uruje parametr FONT.
<BODY bgcolor="#FFFF99" text="#000000">
<FONT size="6" FACE="Verdana">
Switch LED
</FONT>
Další ást dokumentu obsahuje parametr <HR>, kterým se definuje horizontální ádek webových
stránek. Parametr <BR> pak zajišuje pechod (jump) na další ádek.
<HR>
<BR>
<FONT size="3" FACE="Verdana">
Switch the LED <BR>
on D9 ON and OFF
<BR>
<BR>
Všechny dosud prezentované parametry jsou používány pi návrhu webových stránek.
Dalším dležitým prvkem celého projektu bude ovládání LED.
<form method="GET">
<button type="submit" name="led" value="1">LED ON</button>
<button type="submit" name="led" value="0">LED OFF</button>
</form>
Form-elements, neboli prvky formuláe tvoí podstatu on-line formuláe. Díky nim je možné na webové
stránce používat napíklad registraní formuláe. Data vložená uživatelem (návštvníkem webu)
pak mohou být rzným zpsobem transformována. Pro tyto úely se používá metoda GET,
která zajišuje pevod vložených dat na webový server za použití URL. Tato metoda používá celkem
2 tlaítek a pevod dat po stisku (výbru) jednoho z tlaítek. Ob tlaítka jsou pojmenovány led, avšak
mají naprosto rozdílné hodnoty. Po stisku prvního tlaítka LED ON dojde k znovunatení aktuální URL
s tím, že za URL (v tomto pípad za IP modulu) se zapíše /?led=1. Tento text je programem Arduino
vyhledáván a peten íslicový parametr píkazem parselnt() a penesen do LED.
Tímto jednoduchým zpsobem pak mžete aktivaci LED ovládat.
<BR>
<HR>
</font>
</HTML>
Poslední ádek HTML zdrojového kódu pak nepináší nic nového. Pechod na další ádek
a konfigurace horizontálního ádku má za úkol dokonit vzhled webu pedtím, než je dokument
ukonen pomocí parametru </HTML>. Vyberte následn jiný website v piloženém adresái
(sketch folder). Vyzkoušejte si sami zmnit napíklad barvu pozadí a na web pidat svj vlastní text.
Vyhnte se však tomu, aby došlo k peplnní website, vzhledem k tomu, že pam SRAM dosáhne
svou maximální kapacitu velmi rychle. Po dokonení úprav webu, dokument peneste do programu
Arduino. Zkopírujte proto text do schránky a pejdte na web Weiss Converter Tool:
http://www.percederberg.net/tools/text_converter.html
Vložte text ze schránky do ásti 2. Select Output: set C/C++/PHP – StringText a UTF-8 – Unix (LF).
Po natení upraveného programu s novými hodnotami mžete spatit nový web po zadání IP modulu
do svého prohlížee.
Ovládání RGB–LED prostřednictvím TCP
Tento projekt se zabývá ovládáním RGB–LED z website na webovém serveru.
Správná struktura rozhraní pak mže být použita pro zmny barev LED. Website bude snadno
pizpsobitelná pro zobrazení i na smartphone. Z hardwarové výbavy bude zapotebí jen deska
spoj (nepájivé pole), modul NanoESP, 1 RGB–LED, 3 rezistory 1 k a vodie.
Program
Nov penášený web je znovu naten do programové pamti. Naleznete jej také v adresái s HTML
weby (Sketch folder). Po konfiguraci WLAN dat a natení programu bude webový server dosažitelný
prostednictvím IP modulu. Hlavní strana webu má obdobný design jako v pedchozím experimentu.
Na tomto webu však bude použito zcela nového prvku a to HTML5 Color Picker, kterým se bude
ovládat barevná paleta LED. Zobrazení aplikace Color Picker se mže výrazn lišit v závislosti na
použitém prohlížei. Rozdílnost této aplikace od pedchozí spoívá v nkolika málo detailech. Jako
první zásadní zmna je v záhlaví HTML dokumentu a ádku:
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
Tento ádek a jeho píkazy zajišují pozastavení snahy prohlížee naíst „Favicon“ (Favorite icon)
po natení website. Vtšina web má svou vlastní Favicon, kterou je web snadno identifikován.
Pro natení této identifikace prohlížeem dochází k odesílání druhého dotazu po aktualizaci samotné
stránky. Tento druhý request proto mžete eliminovat a nezatžovat jím modul. K tomu slouží výše
uvedený píkazový ádek. Doporuuje se tento ádek u vašich vlastních HTML stránek použít.
Druhá speciální vlastnost v tomto dokumentu je u použití prvku Color Picker, který nahrazuje
tlaítka z pedchozího projektu. Jedná se o relativn nový element HTML5. V pedchozím pípad
bylo použito tlaítek pro odeslání zápisu hodnot a jejich dalšímu penosu. Pro okamžitý penos dat
z formuláe je navíc možné použitý velmi jednoduchý a krátký JavaScrip kód
(onchange=“this.form“submi()“
Pi tomto zápisu nebude zapotebí použití zvláštního tlaítka:
<form method="GET">
<input type="color" name="rgb" onchange="this.form.submit()"><BR>
</form>
Vybrané barvy jsou nyní aplikovány pomocí zápisu /?rgb=%23, po nmž následuje 6 znak.
Výraz %23 pedstavuje hexadecimální íslo. Pro bílou barvu je URL následující:
[IP]/?rgb=%23ffffff