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ě.

b3256737-d729-42c9-abde-58955988399a
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!

f1423556-c0d8-4483-8890-97ad5fdb8bfb
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.

5ce3f2de-0562-489e-a130-09618cb22567
Ú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.

4d8e01c7-7138-47a4-8e06-dbe35857dd3d
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.

4c7f730d-3bb4-48fe-9bfb-58404fce650c
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.

4ae51378-45cb-45c6-8179-82ad9a3d23d0
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ě.

6b94112f-8f89-4740-8554-4278d367187d
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.

d4b1be4d-d4ce-42e3-8c63-39ba377b5c3f
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.

0b41dd6a-8beb-4e1a-9d7d-244c6700a9335f133bba-063d-4284-bf95-fb8e3b65c7214824d3bc-d62f-40b5-a812-6467aea28a3fed514537-715e-4ee1-a7e1-679e34541126
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.

5280dc30-70fd-499c-9cf4-5fdb6101fffd
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.

e37e3f5f-bee1-4472-9b61-96794fed8f0fc811b213-54a7-47b5-abab-0b70d5e8f608
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: , , , , , , , , , , , , , , , , , , , , , , , , ,