Pojďme programovat elektroniku

Programování elektroniky: Jak zveřejnit data z vlastních čidel na internetu a s hezkými grafy

  • Před dvěma týdny jsme si postavili automatické zavlažování květináče
  • Funguje na jedničku a skrze Wi-Fi posílá data na web
  • Dnes si ukážeme, jak je zobrazit v grafu na české službě TMEP

Před dvěma týdny jsme si ověřili funkci primitivního automatického zavlažovacího systému pro květináč. Tvořilo jej maličké slaboproudé čerpadlo, tranzistorový spínač, kapacitní detektor vláhy v půdě a česká prototypovací deska s Wi-Fi ESP32-LPKit.

Jelikož je deska vybavená nabíjecím obvodem a konektorem pro připojení jednočlánkového lithiového akumulátoru (4,2 V), mohli jsme nevzhlednou hromádku drátků umístit na naše redakční schodiště, kde není žádný síťový zdroj elektrické energie, a baterii dobíjet skrze USB konektor desky pomocí laciného fotovoltaického panelu s 5V regulovaným výstupem.

Tehdy to ale byla jen teorie, nevěděli jsme totiž, jestli v podzimním šeru panel baterii vůbec dokáže dobít a jestli čerpadlo nezpůsobí po prvním spuštění brownout – podpětí – a řídící čip se resetuje.

Funguje to!

Po dvou týdnech můžeme směle konstatovat, že náš hrubý bastl funguje na jedničku a s bezchybnou pravidelností se každou hodinu probouzí, provádí měření, odesílá data na web a případně spustí čerpadlo, pokud vláha v půdě klesne pod 50 %. Stane se to zhruba jednou týdně.

Klepněte pro větší obrázek
Automatický zavlažovač rýmovníku dostal e-inkový displej a bezchybně funguje už dva týdny. Vláhu půdy měří každou hodinu

Pro lepší přehled jsme k obvodu připojili ještě 2,9“ einkový displej, který nepřetržitě zobrazuje stav baterie a vláhy v půdě, a malý superkondenzátor, jenž pro jistotu zvyšuje kapacitu regulovaného 3,3V zdroje na desce, který používáme vedle napájení hlavního čipu i k pohonu elektromotoru čerpadla. 

Graf kreslí Chart.js

Co se vlastně děje s daty na webu? Neukládají se do žádné sofistikované SQL databáze, ale do prachsprostého textového logu, který čte javascriptová aplikace a pomocí knihovny Chart.js vykresluje jednoduchý složený bodový graf s nasycením půdy a stavem baterie v procentech. Bohatě to stačí – vždyť je to jen hloupý květináč a žádná jaderná elektrárna!

Klepněte pro větší obrázek
Webové rozhraní s grafem vláhy v půdě a stavem lithiového akumulátoru, který přes den dobíjí malý solární panel

Ale mně se nechce nic složitě programovat!

Na stranu druhou, zatímco v Arduinu napíšete podobný firmware na několika desítkách řádků kódu, pokud nemáte vlastní server a s ním spojené zkušenosti, spuštění i sebehloupější webové aplikace může být pořádný oříšek.

Zatímco na čipu poběží primitivní kód, rozběhnutí vlastního hostingu nebo třeba celého linuxového serveru (nemusí to stát ani jednu korunu), zaregistrování domény a naprogramování serverové a klientské aplikace pro webový prohlížeč je už práce pro full-stack vývojáře, která svojí komplexností nejspíše odradí nejednoho začínajícího bastlíře.

Český hosting pro čidla TMEP

Naštěstí je tu celý zástup no-code řešení a jedním z nich, které se těší velké oblibě právě mezi tuzemskými kutily, je projekt TMEP, za kterým stojí český programátor Michal Ševčík.

Klepněte pro větší obrázek
Úvodní karta našeho čidla se stavem rýmovníku. K dispozici máte tmavé i světlé téma a jak vidno, zatím nám pro působivější graf chybí dostatek dat

Stručně řečeno, TMEP je internetová databáze s HTTP rozhraním a webovými grafy pro vaše čidlo, které poběží na vlastní subdoméně nazevcidla.tmep.eu nebo nazevcidla.tmep.cz.

Služba je do konce letošního roku zdarma, pak za první čidlo zaplatíte 100 korun ročně a za každé další vedené pod vaším účtem 50 korun pro stejné období. Tolik dnes nestojí ani jedno pořádně natočené pivo v centru Brna, TMEP je tedy opravdu skoro za pusu.

Klepněte pro větší obrázek
Správa vlastních čidel na webu TMEP

Druhou možností je spuštění celé aplikace, která staví na PHP a MYSQL, na vlastním serveru, zdrojové kódy TMEPu jsou totiž k dispozici na GitHubu.

Zavlažovací systém posílá data na TMEP

Pojďme si to vyzkoušet v praxi. Jak už jsme si řekli výše, každé čidlo běží na vlastní doméně 3. řádu, jejíž jméno musí být samozřejmě volné. Pokud bude na hlavní adrese tmep.cz už obsazené, můžete zkusit alternativní tmep.eu.

V našem případě bude čidlem závlahový systém rýmovníku, který poběží na adrese rymovnik.tmep.eu. Každé čidlo může kreslit graf pro tři různé proměnné, které odešleme skrze HTTP, přičemž lze připojit ještě údaj RSSI o kvalitě bezdrátové komunikace a napětí baterie, které se zobrazí v záhlaví stránky.

Klepněte pro větší obrázek
Proužek se stavem baterie a kvalitou signálu Wi-Fi

Názvy proměnných, které budeme do databáze posílat jako běžné HTTP GET parametry, si vytvoříme přímo ve formuláři čidla na službě TMEP. A jelikož chceme posílat údaj o nasycení půdy vodou, náš parametr se bude jmenovat třeba nasyceni. Pevně dané parametry pro RSSI a napětí baterie jsou rssi a v.

Klepněte pro větší obrázek
Každé čidlo může zaznamenávat tři uživatelské proměnné, které službě odešleme jako parametry URL. V našem případě to bude parametr „nasyceni“ 

Celá webová adresa, jejímž zavoláním uložíme údaje do databáze, bude pro jeden z případů vypadat takto:

https://rymovnik.tmep.eu/index.php?nasyceni=60&v=4.146&rssi=-66

Pro jednoduché spojení z nejrůznějších čipů nicméně služba podporuje i prosté HTTP bez šifrování:

http://rymovnik.tmep.eu/index.php?nasyceni=60&v=4.146&rssi=-66

V tomto případě se tedy jedná o:

  • Nasycení půdy vodou: 60 %
  • Napětí baterie: 4,146 V
  • RSSI: -66 dBm

Na čipu ESP32 a v prostředí Arduino můžeme stejné informace odeslat pomocí vestavěné knihovny HttpClient. Nejjednodušší možný příklad s nešifrovaným HTTP spojením bez ověřování certifikátů vypadá třeba takto:

uint8_t nasyceni = 60;
float napeti = 4.146;
HTTPClient http;

http.begin("http://rymovnik.tmep.eu/index.php?nasyceni=" + String(nasyceni) + "&v=" + String(napeti) + "&rssi=" + String(WiFi.RSSI()));

int httpKod = http.GET();
if (httpKod == HTTP_CODE_OK){
    Serial.println("Odeslano!");
    Serial.printf("Pripadna odpoved serveru: %s\r\n", http.getString().c_str());
}
else{
    Serial.printf("Chyba: %d\r\n", httpKod);
}

http.end();

Jedná se samozřejmě jen o úryvek, který předpokládá, že je už čip korektně připojený k Wi-Fi. Celý kód s internetovou komunikací najdete v původním článku, ve kterém jsme stavěli zavlažovací systém.

A co zabezpečení?

V roce 2022 asi leckoho zarazí, že URL výše není na první prohled chráněné žádným heslem, API klíčem, autentizací typu OAuth a tak podobně.

Klepněte pro větší obrázek
Jednou z cest alespoň nějakého zabezpečení je nestandardní pojmenování URL parametrů

Se službou můžeme zároveň komunikovat i skrze prosté HTTP, a veškeré pakety pak poletí prostorem nešifrovaně. Na stranu druhou, ze stejného důvodu nemusíme na drobném čipu řešit jakýkoliv management ověřovacích certifikátů pro HTTPS, který je i po letech docela komplexní. O technologiích OAuth aspol. raději ani nemluvě.

Stručně řečeno, kdo zná formát URL, ten může odesílat data. Služba se nicméně orientuje na co nejvyšší jednoduchost pro bastlíře a není určená k ukládání citlivých údajů z jaderné elektrárny v Temelíně a jiné kritické infrastruktury ČR. Je-li cílovkou domácí kutil, lze to akceptovat.

Klepněte pro větší obrázek
Majitelé veřejných IP mohou nastavit adresy, ze kterých je povoleno posílat údaje

Aby byl zápis dat alespoň nějak chráněný, autor nabízí filtrování skrze IPv4 adresu. Pokud tedy bude čidlo odesílat data ze sítě s pevnou a veřejnou IP, lze ji vyplnit do formuláře a TMEP odmítne spojení od všech ostatních vtipálků, kteří by vám chtěli znehodnotit pečlivě naměřená data.

Samotná webová stránka s grafy může být veřejně přístupná jako v našem příkladu, samozřejmě ji lze ale v nastavení zamknout a zobrazení statistiky bude vyžadovat přihlášení majitele.

TMEP myslí i na korekci dat

Veškerá práce s grafy je už na bedrech služby TMEP. V konfiguračním formuláři můžeme proměnné a čidlo pojmenovat, nastavit číselné rozsahy třeba pro nejnižší a nejvyšší napětí baterie, aby jej TMEP přepočítal na procenta, a podobně nastavit i hraniční hodnoty ukládaných proměnných.

Klepněte pro větší obrázekKlepněte pro větší obrázekKlepněte pro větší obrázekKlepněte pro větší obrázek
Nastavení proměnných, grafu a korekce dat

TMEP se tedy dokáže postarat i o případné odfiltrování zjevně chybných hodnot, pokud to nedokáže přímo váš firmware. Typickým případem by mohla být třeba chybně změřená teplota s hodnotou 4 000. To je nesmysl, a tak ve formuláři nastavíte povolené minimum a maximum.

Stejně tak umí TMEP hodnoty zaokrouhlovat, dokáže filtrovat neobvyklé skoky hodnot a pomocí e-mailu reagovat i na neaktivitu čidla, pokud po delší dobu neobdrží žádná nová data, anebo pokud stav baterie klesne pod určitou hodnotu.

Widget pro mobil

Svá čidla nakonec můžete sledovat i na mobilu pomocí aplikace pro Android a iOS. Spárování aplikace s čidlem je snadné skrze QR kód a nechybí ani podpora jednoduchého widgetu.

Klepněte pro větší obrázek
Díky mobilní aplikaci s widgetem mám stav rýmovníku stále na očích

O grafy se vůbec nemusíte starat

Jak už jsme si řekli v úvodu, naše vlastní webová aplikace kreslí grafy pomocí knihovny Chart.js, to je ale programování v Javascriptu, CSS a HTML, kterému se chceme vyvarovat. V případě TMEP se o nic nemusíme starat. Jakmile začneme posílat data, služba se už postará prakticky o kompletní vzhled stránky čidla s grafy pro aktuální den i historii.

Klepněte pro větší obrázekKlepněte pro větší obrázek
Zobrazení historických dat a nastavení upozornění pro některé typy proměnných

Můžeme se podívat na předchozí den, můžeme si nechat zobrazit údaje pro konkrétní datum, TMEP nabídne také srovnání aktuálních dat s těmi minulými a v konfiguraci nechybí ani ruční oprava.

Čas od času sice narazíte na nějaké drobné nedostatky – některé pokročilé funkce se například týkají jen určitých fyzikálních veličin –, služba jako taková ale funguje a grafy kreslí na jedničku.

Funguje to za pár kaček

Pokud jste tedy právě zbastlili nějaké to čidlo s internetovou konektivitou a chcete rychle někam umístit naměřená data bez jakéhokoliv dalšího programování, TMEP je asi neschůdnější cesta za pár kaček a se snadno zapamatovatelnou adresou na vlastní doméně 3. řádu.

Možná by si jen zasloužil lepší značku. V české kutilské komunitě má sice název TMEP už své lety ověřené jméno, historií nepolíbený nováček by ale jistě ocenil doménové jméno, které každého trkne na první dobrou. Stručně řečeno, čidlo na adrese rymovnik.cidlo.cz by bylo ještě o kousíček více sexy.

Diskuze (30) Další článek: Chybovat může i IT specialista. Jak se vyhnout útokům hackerů?

Témata článku: Internet, Programování, Web, Pojďme programovat elektroniku, Android, iOS, Wi-Fi, GitHub, Arduino, Baterie, Brno, API, Javascript, C++, Data, Půda, Elektronika, MySQL, Čidlo, Temelín, Graf, String, OAuth, Nováček, URL, Telefony s Androidem na Heureka.cz



Co taky umí smartphone? Třeba vyhodnotit technický stav mostů. A to levněji než samostatná měřidla

Co taky umí smartphone? Třeba vyhodnotit technický stav mostů. A to levněji než samostatná měřidla

** Vědci z amerického MIT našli další využití pro telefony ** Budou měřit technický stav mostů ** Dokáže se tím prodloužit jejich životnost až o třetinu

Martin Chroust
MěřeníMITSmartphony
Konec českého poskytovatele internetu v přímém přenosu. Připomíná to krachující energetické firmy
Lukáš Václavík
CETINPoskytovatelé internetuPřipojení k internetu
Google není jen vyhledávač: 15 užitečných funkcí, o kterých možná ani nevíte

Google není jen vyhledávač: 15 užitečných funkcí, o kterých možná ani nevíte

** Google umí kromě vyhledávání i spoustu dalších věcí ** Vybrali jsme více než 15 užitečných funkcí a schopností ** Stačí zadat do vyhledávače ta správná klíčová slova

Karel Kilián
TipyVyhledávačeGoogle
Máte rádi malé telefony? Pak si oblíbíte tohoto třípalcového drobečka, který není větší než platební karta

Máte rádi malé telefony? Pak si oblíbíte tohoto třípalcového drobečka, který není větší než platební karta

** Dnešní telefony se předhánějí v tom, který z nich bude větší ** Malé telefony na trhu skoro vyhynuly... ** Čínská značka si připravila telefon do dlaně s třípalcovým displejem

Martin Chroust
InfraportKompaktní velikostSmartphony
Vyzkoušeli jsme levnou autodiagnostiku s Androidem. Servisy ohrnou nos, řidičům bude stačit

Vyzkoušeli jsme levnou autodiagnostiku s Androidem. Servisy ohrnou nos, řidičům bude stačit

** Smartphone s Androidem dnes využijete i pro autodiagnostiku ** Jednotku OBD-II dnes pořídíte za pár stovek ** Co se vše dokáže diagnostika s bezplatným SW v češtině?

Martin Chroust
DiagnostikaPro řidiče
Šedý trh s předplatným se vymyká kontrole. Spotify, Netflix nebo Disney+ můžete mít doslova za pár korun

Šedý trh s předplatným se vymyká kontrole. Spotify, Netflix nebo Disney+ můžete mít doslova za pár korun

** Sdílení účtů mezi kamarády je jen začátek ** Dnes letí nákupy předplatných v Indii nebo na Aliexpressu ** Superlevné „netflixy“ ale mohou nakonec spíš škodit

Lukáš Václavík
PředplatnéNetflixSpotify
Facebook má nejspíš vaše telefonní číslo, i když jste mu ho nikdy nedali. Tímto tajným nástrojem ho můžete smazat

Facebook má nejspíš vaše telefonní číslo, i když jste mu ho nikdy nedali. Tímto tajným nástrojem ho můžete smazat

**Meta poskytuje nástroj na vymazání telefonních čísel a e-mailových adres z Facebooku a Instagramu **V minulosti Mark Zuckebrg popřel, že by Facebook vytvářel stínové profily **Metě teď můžete sebrat klíčové iddentifikátory, pořád o vás ale nejspíš ví mnoho dalšího

Petr Urban
MetaSledováníSociální sítě
Tuto českou základnu plnou satelitů nesmíte vidět. V Mapy.cz je každá anténa pečlivě vyretušovaná

Tuto českou základnu plnou satelitů nesmíte vidět. V Mapy.cz je každá anténa pečlivě vyretušovaná

** Zapomeňte na rozčtverečkovaná místa, kterých si každý všimne ** Mapy.cz musely dokonale zakrýt desítky parabol ** Základnou se přitom na webu chlubí i její majitel. Kocourkov

Jakub Čížek
ČeskoMapy.czMapy