Image
7.11.2016 0 Comments

ARDUINO – programovanie mikrokontrolérov Atmel

(web server na SD karte – zobrazenie analógových hodnôt v grafickej podobe - teória)

V minulej časti sme si povedali, že ak chceme používať webovú stránku, v ktorej sa nachádzajú aj obrázky, narazíme na problém nedostatku pamäte Arduina. A keďže už vieme ukladať webovú stránku na externé médium, teda na  SD kartu, tak by sa na tejto karte mohli nachádzať aj prípadné obrázky. A tak sme sa naučili, ako tieto obrázky spolu s webovou stránkou z SD karty vyčítať a odosielať internetovému prehliadaču. Takto sme dosiahli, že sú naše webové stránky na web serveri Arduina krajšie a efektnejšie. A čo keby sme chceli túto vylepšenú stránku ešte obohatiť? Nie je problém! Pamätáme sa ešte na kapitolu, keď sme merali určité analógové hodnoty, snímané Arduinom a tieto zobrazovali na obrazovke web prehliadača? Tak my k tomu dnes pribalíme aj peknú grafiku! Budeme využívať prvky jazyka AJAX (Asynchronnous JavaScript + XML), čo je nástroj na tvorbu interaktívnych stránok, ktoré umožňujú meniť svoj obsah bez potreby ich kompletného znovunačítania zo servera.  

Schéma zapojenia

V dnešnom príklade využijeme poznatky z predchádzajúcich častí. Ako zdroj analógových hodnôt využijeme potenciometer pripojený k analógovému vstupu A2 (obr.č.1) napríklad tak, ako je to na obrázku č.2 alebo pomocou prepojovacieho poľa ako je to na obrázku č.3.

My už vieme, že hodnoty z druhého analógového vstupu sa načítavajú príkazom analogRead(2), ktoré môžeme uložiť do premennej, napríklad analog_val. Toto  využijeme pri tvorbe skeče.

AJAX

V predchádzajúcich častiach sme vytvorili webovú stránku, ktorá obsahovala určité meniace sa analógové či digitálne hodnoty. Túto stránku web server na Arduine odosielal klientskému počítaču s internetovým prehliadačom v určitých pravidelných intervaloch (nastavili sme si refresh po jednej sekunde). Táto stránka sa teda každú sekundu znovu načítavala zo servera a prehliadač ju opakovane každú sekundu prekresľoval na obrazovke počítača. Keďže sme každú sekundu posielali iba zdrojový text stránky v jazyku HTML a namerané hodnoty tiež v textovej hodnote, pravidelné zasielanie pomerne malého množstva dát nespôsobuje problémy v prenose ani vo vykresľovaní. Predstavme si však situáciu, že chceme použiť pomerne zložitú grafiku, napríklad merača v podobe budíka v aute tak, ako je na obrázku č. 4 a v ňom plynule (teda častejšie ako jednu sekundu) meniace sa hodnoty. Bolo by veľmi neefektívne každú desatinu sekundy preposielať celú stránku vrátane obrázku a následne ju vykresľovať. Asi by sme narazili na limity prenosových rýchlostí a pohyb ručičky by bol trhaný. Jednoduchšie je povedať internetovému prehliadaču „Namaľuj merač a ja ti budem zasielať iba hodnoty v textovej podobe. A ty podľa hodnoty namaľuješ ručičku merača!“. A presne takto sa to dá urobiť pomocou moderných postupov ako je JavaScriptXML, teda AJAX-u.

JavaScript a XML

JavaScript je skriptovací programovací jazyk, používaný najmä pri tvorbe webových stránok, vyvinutý  Brendanom Eichoch zo spoločnosti Netscape Communications. Nemýliť s jazykom Java, nemajú (skoro) nič spoločné!

XML znamená eXtensible Markup Language, v preklade rozšíriteľný značkovací jazyk, ktorý bol vyvinutý ako pokračovanie jazyka SGML a zovšeobecnenie jazyka HTML. Umožňuje jednoduché vytváranie konkrétnych značkovacích jazykov na rôzne účely a široké spektrum rôznych typov údajov. Jazyk je určený predovšetkým na výmenu údajov medzi aplikáciami a na zverejňovanie dokumentov.

Prečo používať Ajax s XML?

Výhodou použitia AJAX-u s XML je, že jednotlivé hodnoty môžu byť ľahko extrahované pomocou JavaScriptu na webových stránkach.

Jazyk XML používa značky podobne ako HTML alebo XHTML. Súbor má počiatočný tag, ktorý ho identifikuje ako súbor XML. Hlavný užívateľom definovaný tag značí, že obsahuje všetky ostatné značky. Tento výpis ukazuje štruktúru XML súboru:

   
   
   
Pre naše potreby teda vytvoríme XML súbor:
    obsah-premennej-analog_val

kde už vieme, že obsah premennej analog_val bude naplnený príkazom analogRead(2). Takto definovaný XML súbor bude odosielať Arduino zo svoje skeče.

Ako AJAX s XML pracuje

Aby sme aktualizovali hodnotu analógového vstupu Arduina na webovej stránke, musíme vykonať tieto kroky:

  • Požiadanie o stránku – klasicky internetový prehliadačpomocou IP adresy požiada Ardino Web Server o zaslanie web stránky napríklad takouto hlavičkou:
GET / HTTP/1.1
Host: 10.0.0.20
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:19.0) Gecko/20100101 Firefox/19.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-ZA,en-GB;q=0.8,en-US;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate
Connection: keep-alive
  • Odoslanie webovej stránky – Arduino Web Server príjme vyššie spomenutú požiadavku a odpovie zaslaním hlavičky:
HTTP/1.1 200 OK
Content-Type: text/html
Connection: keep-alive

Skeč Arduina načíta HTML kód webovej stránky z SD karty a odošle ju do webového prehliadača. Po obdržaní kódu webovej stránku sa táto zobrazí sa v internetovom prehliadači. Webová stránka obsahuje JavaScript, ktorý sa používa ako súčasť procesu AJAX. Všimnime si, že typ obsahu (Content-Type) v hlavičke HTTP pre webové stránky HTML je text/html.

  • Požiadavka AJAX – JavaScript na web stránke odošle požiadavku AJAX Arduinu (a toto opakuje v pravidelných intervaloch):
GET /ajax_inputs&nocache=299105.2747379479 HTTP/1.1
Host: 10.0.0.20
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:19.0) Gecko/20100101 Firefox/19.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-ZA,en-GB;q=0.8,en-US;q=0.5,en;q=0.3
Accept-Encoding: gzip
  •  Arduino reaguje na požiadavku AJAX – po prijatí požiadavky na XML súbor Arduino odpovie hlavičkou:
HTTP/1.1 200 OK
Content-Type: text/xml
Connection: keep-alive

nasledovanou XML súborom, ktorý obsahuje hodnotu vstupného pinu A2, napr. 474:

    474

Všimnime si, že Content-Type v hlavičke je už text/xml!

  • Zobrazenie dát na obrazovke – na záver JavaScript, ktorý je súčasťou prehliadača vytiahne hodnotu z XML súboru a zobrazí na obrazovke počítača

Keď už vieme teóriu, ako to funguje, tak si teraz vytvoríme internetovú stránku, ktorá bude obsahovať JavaScript a skeč Arduina s web serverom, kde sa bude snímať analógová hodnota na pine A2. Ale to nabudúce.


Nechajte si posielať prehľad najdôležitejších správ emailom

Mohlo by Vás zaujímať

ITPro

Made in Slovakia / Predstavujeme zaujímavé produkty, projekty a startupy

14.07.2019 10:53

Už takmer rok uverejňujeme v tejto rubrike úspešné IT produkty a IT projekty, semifinalistov súťaže z roku 2018, ktorej vyhodnotenie sa uskutočnilo vlani na jeseň na slávnostnom večeri IT GALA 2018. V ...

ITPro

Praktická kryptológia (26. časť) / Hašovacie nástroje

15.07.2019 10:49

V tejto časti seriálu vám v stručnosti predstavíme dva známe a veľmi často používané kryptografické nástroje, ktoré okrem iného ponúkajú možnosť výpočtu resumé správ, resp. hašov. Prvý z nich je robus ...

ITPro

Linux súkromne i pracovne v2.0 (41. časť) / Git branching a merging

14.07.2019 10:45

V tejto časti seriálu doplníme základné informácie týkajúce sa systému git o časti, ktoré majú súvis s aplikáciou vetvenia a spájania vývojových vetiev (línií). Budeme sa venovať obsahu git repozitáro ...

q

Žiadne komentáre

Vyhľadávanie

Najnovšie videá