Otevře se na nové kartě

Čtyři webové nástroje chiptron.cz: sériový monitor, dashboard SerialView, flasher pro ESP32 a převodník soustav

Stručně: Na Chiptronu najdete čtyři nástroje, které běží celé ve vašem prohlížeči a nic si nemusíte instalovat. Serial Monitor na serialmonitor.chiptron.cz čte sériový výstup z desky a umí ho vykreslit do grafu. SerialView na serialview.chiptron.cz zobrazuje přijatá data jako dashboard s grafy, budíky a limity. ESP32 Web Flasher na esp32flasher.chiptron.cz nahraje do desky zkompilovaný firmware a pohlídá offsety. Převodník číselných soustav na hexdecbin.chiptron.cz překlápí hodnoty mezi DEC, BIN, HEX a ASCII a poskládá bitovou masku i s hotovým kódem.

První tři potřebují Web Serial API, tedy Chrome, Edge nebo Operu na počítači. Převodník funguje v čemkoliv.

Chromium má už několik let Web Serial API, přes které se webová stránka po vašem svolení připojí na sériový port stejně jako desktopová aplikace. Tím padá hlavní důvod, proč by tyhle drobné nástroje měly být programy. Každý z nich je jedna HTML stránka: komunikace probíhá mezi prohlížečem a deskou, na server neputuje nic, ani nahrávaný firmware, a nastavení se ukládá jen do localStorage prohlížeče. Všechny čtyři mají stejný vzhled, přepínač češtiny a angličtiny i tmavý a světlý režim.

Nástroje jsou zdarma a bez reklam. Když vám některý ušetří večer hledání, kde je chyba, potěší mě kafe.

Serial Monitor: výstup z desky a graf v jednom

Klasický sériový monitor, jaký znáte z Arduino IDE, jen s několika věcmi navíc. Vyberete rychlost přenosu, kliknete na Připojit, prohlížeč se zeptá na port a od té chvíle vidíte, co deska posílá.

  • Baud rate od 9600 po 921600 plus vlastní hodnota. Změna se projeví až po novém připojení, nástroj na to upozorní.
  • Formát příjmu ASCII, HEX nebo BIN. U ASCII se dá zvolit kódování (UTF-8, ISO-8859-2, Windows-1250), což oceníte u starších zařízení sypajících diakritiku ve Windows-1250.
  • Časové značky vypnuté, u každého řádku, nebo na samostatném řádku po zvoleném intervalu. Ta třetí varianta se hodí u rychle chodících dat.
  • Filtr schová řádky bez hledaného textu a shody ve zbylých podbarví. Se zaškrtnutým Regex vytáhnete třeba jen chyby přes ^(E|ERROR|CHYBA). Neplatný výraz filtr jen vypne.
  • Odesílání s historií pod šipkami, volbou konce řádku (LF, CR, CRLF, žádný) a přepínačem ASCII versus HEX. V režimu HEX napíšete DEAD BEEF a odejdou čtyři bajty.
  • Reset zařízení pulzuje DTR a RTS, takže deska restartuje bez vytahování USB. Oba signály jdou držet i ručně.
  • Export výstupu do .txt nebo .csv s časovými značkami v milisekundách i v ISO tvaru.

Plotter: číselná data rovnou do grafu

Záložka Plotter kreslí čísla přicházející po sériové lince do grafu. Stačí je posílat oddělené středníkem:

Serial.printf("teplota:%.2f;vlhkost:%.1f;rosny_bod:%.2f\n", t, h, dp);

Názvy sérií jsou volitelné, 23.5;60;1013 funguje taky. Výchozí středník má důvod: čárka pak zůstává volná jako desetinná, takže projde i 23,5. Osa Y se přizpůsobuje sama, ale dá se zafixovat, a graf jde uložit jako PNG nebo vyexportovat do CSV.

Dvě věci, které je dobré vědět dopředu. Plotter si vezme každé číslo, které v řádku najde, takže bootovací log ESP32 mu nadělá série z ničeho. A nemíchejte veličiny s hodně odlišnými rozsahy: tlak kolem 1013 hPa udělá z teploty kolem 23 °C rovnou čáru u dna. SerialView (viz níže) bootovací log ignoruje a každou veličinu zobrazí v samostatném widgetu.

Serial Monitor najdete https://serialmonitor.chiptron.cz/


SerialView: dashboard pro data ze sériové linky

SerialView zobrazuje data ze sériové linky jako dashboard. Vychází z desktopové aplikace Serial Studio, ale běží v prohlížeči přes Web Serial API.

Po připojení desky vytvoří pro každou přijatou veličinu widget. Formát dat rozpozná automaticky: hodnoty oddělené středníkem, čárkou nebo mezerou, dvojice klíč:hodnota (teplota:23.5°C), JSON na jednom řádku i frame formát Serial Studia (/*23.5,60*/). Jednotku uvedenou za číslem převezme do widgetu.

Widget může být graf, budík (gauge), nebo číselná hodnota se sparkline. Typ se přepíná ikonou v záhlaví widgetu a historie dat zůstane. Do jednoho grafu jde přetáhnout víc veličin. Graf zobrazuje minimum a maximum v časovém okně. Okno se nastavuje časem, nebo počtem posledních vzorků pro data posílaná nepravidelně.

Typ widgetu jde nastavit i ze sketche direktivou #sv:

Serial.println("#sv teplota gauge -10 40 °C");
Serial.println("#sv vlhkost value %");
Serial.printf("teplota:%.2f°C;vlhkost:%.1f%%\n", t, h);
  • Limity pro každou veličinu. Při překročení se widget zvýrazní červeně a v grafu se obarví úsek mimo limit.
  • Barevné zóny budíku s nastavitelnými hranicemi, i v obráceném pořadí, třeba pro napětí baterie.
  • Pauza (klávesa P) zastaví vykreslování. Data se dál zaznamenávají.
  • Export do CSV, uložení projektu včetně naměřených dat do jednoho JSON souboru a sdílení rozložení dashboardu odkazem.
  • Konzole s filtrem a odesíláním příkazů do zařízení, reset přes DTR/RTS a automatické znovupřipojení po restartu ESP32.

Pro dlouhodobá měření má každá veličina buffer na 50 000 vzorků. Po jeho zaplnění se starší data decimují na minimum a maximum z každých 4 vzorků. Spotřeba paměti tak neroste a špičky v datech zůstanou. V záhlaví konzole je čas prvního a posledního vzorku a délka měření.

Bootovací log ESP32 ani neúplný řádek po připojení falešný widget nevytvoří. Nová veličina se založí až ve chvíli, kdy přijde aspoň ve dvou řádcích.

Bez připojené desky jde SerialView vyzkoušet v demo režimu se simulovanou meteostanicí. Ten funguje i ve Firefoxu.

Za otestování SerialView děkuji Petru Vavřínovi.

SerialView najdete na https://serialview.chiptron.cz/


ESP32 Web Flasher: nahrání firmwaru bez esptoolu

Nahrát do ESP32 hotový .bin je pořád zbytečně krkolomné. Buď instalujete Python a esptool.py, nebo v Arduino IDE otevíráte projekt, který kompilovat nechcete. A hlavně musíte znát offsety, na které jednotlivé soubory patří – u původního ESP32 leží bootloader jinde než u novějších S3 a C3, což je nejčastější důvod, proč deska po ručním flashování naběhne do restartové smyčky. Flasher stojí na esptool-js, oficiálním JavaScriptovém portu esptoolu od Espressifu, a tohle za vás pohlídá: offsety dosadí sám podle vybraného čipu a po připojení si z hardwaru přečte, co je na desce doopravdy, takže při neshodě s vaším výběrem zápis vůbec nespustí. Kroky jsou čtyři a další se odemkne vždy až po tom předchozím.

Přetáhnete .bin soubory do plochy a nástroj si přečte jejich hlavičku. Obraz firmwaru začíná bajtem 0xE9, partition tabulka dvojicí 0xAA 0x50, bootloader se od aplikace pozná velikostí. Sloučený obraz (firmware.factory.bin z esptool merge_bin) se pozná podle partition tabulky uvnitř sebe na 0x8000, zapisuje se celý na 0x0 a nástroj k němu odmítne přidat další soubory. V hlavičce je na offsetu 12 také chip_id, takže firmware pro cizí čip neprojde.

Soubor boot_app0.bin hledat nemusíte. Arduino IDE ani PlatformIO ho neexportují, přitom bez něj se deska s OTA rozdělením nemusí rozjet. Je to 8 kB vyplněných hodnotou 0xFF, tedy prázdný OTA oddíl, a flasher ho má vestavěný.

Před zápisem se dá spustit kontrola bez zápisu, která projede všechna pravidla a vypíše plán, ale do desky nezapíše. Volitelně se po nahrání porovná kontrolní součet MD5 a spustí se sériový monitor. Tlačítko Zálohovat stávající přečte celou flash do souboru, což se vyplatí u desky s firmwarem, který už nikde jinde nemáte. U 4 MB to trvá kolem minuty.

A jedna uklidňující věc na závěr: špatným firmwarem desku nezničíte. Flash paměť jde vždycky přepsat znovu. Nevratně zabít ESP32 lze jen zápisem eFuse pojistek, do kterých tento nástroj nikdy nesahá.

ESP32 flasher najdete na https://esp32flasher.chiptron.cz/


Převodník soustav: DEC, BIN, HEX, ASCII a bitové masky

Nejmenší ze tří a používám ho nejčastěji. Čtyři pole, do kteréhokoliv napíšete hodnotu a zbylá se dopočítají. Podstatná je volba šířky 8, 16, 32 nebo 64 bitů: hodnota se pak chová jako registr, co se nevejde, se ořízne, a nástroj to hlásí. Přepnutí na Signed ukáže zápornou interpretaci ve dvojkovém doplňku, přičemž bitový vzor zůstává stejný. To je přesně ten okamžik, kdy člověku docvakne, proč 0xFF je jednou 255 a jednou minus jedna.

Záložka Prefix a C typy vypíše tutéž hodnotu ve tvarech, které se dají vložit rovnou do kódu (0xFF, 0b11111111, 0o377, $FF, %11111111) a přidá odznaky C typů, do kterých se vejde. Bitová kalkulačka umí AND, OR, XOR, NOT a posuny, formát výsledku se řídí operandem A. A Bitmask helper je ta část, kvůli které jsem převodník psal:

uint16_t mask = 0x8421;  // (1U << 0) | (1U << 5) | (1U << 10) | (1U << 15)

// Nastavit bity:   reg |=  mask;
// Vymazat bity:    reg &= ~mask;
// Přepnout bity:   reg ^=  mask;
// Test bitů:       if (reg & mask) { ... }

Šířku si můžete nastavit i mimo obvyklé hodnoty, třeba na 24 bitů, a nastavené bity zůstanou zachované. Všechno se kopíruje jedním kliknutím a výsledek jde sdílet odkazem, protože se stav ukládá do adresy stránky.

Převodník mezi soustavami najdete na https://hexdecbin.chiptron.cz/


Co potřebujete

Serial Monitor, SerialView i Flasher stojí na Web Serial API, které podporují jen prohlížeče postavené na Chromiu: Chrome, Edge a Opera na počítači. Firefox a Safari ho nepodporují, na Androidu se podpora teprve rozjíždí a závisí na verzi Chromu i na zařízení, na iOS není vůbec. Převodník je čistý JavaScript a běží všude. Demo režim SerialView funguje taky v každém prohlížeči.

Pokud se deska v dialogu portu vůbec neobjeví, skoro vždy za to může kabel. Spousta USB kabelů umí jen napájení a nemá datové vodiče, takže se deska rozsvítí, ale počítač o ní neví. Když to nepomůže, chybí ovladač převodníku CP2102 nebo CH340. Desky s nativním USB (ESP32-S3 a C3) žádný nepotřebují.

Ptáte se

Odesílají se moje data nebo soubory někam na server?

Ne. Všechny čtyři nástroje běží celé ve vašem prohlížeči a komunikují jen se sériovým portem vaší desky. Firmware, který nahráváte, nikam neputuje, žádný backend tu není. Nastavení se ukládá do localStorage prohlížeče. Flasher si z internetu stahuje pouze knihovnu esptool-js. Odkaz ze Sdílet dashboard v SerialView obsahuje jen rozložení, žádná data.

Proč mi to nefunguje ve Firefoxu?

Firefox ani Safari nepodporují Web Serial API, bez kterého se prohlížeč k desce nepřipojí. Použijte Chrome, Edge nebo Operu na počítači. Převodník soustav funguje i ve Firefoxu, ten žádné sériové rozhraní nepotřebuje.

Jaký je rozdíl mezi Serial Monitorem a SerialView?

Serial Monitor slouží k ladění, zobrazuje výstup z desky a jednoduchý graf. SerialView zobrazuje přijatá data jako dashboard s grafy, budíky a číselnými hodnotami, hlídá limity a ukládá naměřená data. Oba nástroje čtou stejný formát dat, sketch není potřeba upravovat.

Jak dlouho může SerialView měřit?

Měření může běžet několik hodin. Každá veličina má buffer na 50 000 vzorků. Po jeho zaplnění se starší data decimují na minimum a maximum z každých 4 vzorků, spotřeba paměti proto neroste a graf zobrazuje celé měření.

Jak naměřená data sdílet?

Funkce Uložit projekt i s daty vytvoří JSON soubor s rozložením dashboardu i naměřenými hodnotami. Otevře se přes Načíst projekt / data. Pro tabulkový procesor slouží export do CSV. Odkaz ze Sdílet dashboard obsahuje jen rozložení.

Můžu špatným firmwarem zničit ESP32?

Ne. Flash paměť lze vždy přepsat znovu. Špatný firmware způsobí, že se deska zacyklí v restartech nebo nenaběhne, ale trvale ji nepoškodí. Nevratně zničit ESP32 lze pouze zápisem eFuse pojistek, což flasher nedělá.

Musím při flashování držet tlačítko BOOT?

U většiny desek ne, nástroj přepne čip do bootovacího režimu automaticky pomocí DTR a RTS. Pokud se deska nedaří připojit, podržte BOOT, krátce stiskněte RESET, BOOT pusťte a zkuste to znovu. Některé klony nemají osazené automatické resetovací tranzistory a tenhle postup vyžadují vždy.

V čem se liší soubory z Arduino IDE a z PlatformIO?

Jen názvy a umístění, obsah je stejný. Arduino IDE vytváří NazevSkici.ino.bin ve složce build (Sketch, Export Compiled Binary), PlatformIO firmware.bin v .pio/build/nazev-prostredi/. Flasher soubory rozpoznává podle obsahu, takže mezi prostředími nemusíte nic přepínat.
Sdílejte článek:
Komentáře:
12 komentářů na sociálních sítích
Long Khúc cituji z jineho prispevku Řada z vás mi psalo "to umí HA a ESPhome". Usecase ale tohohle online webového toolu, který je zdarma, je v tom, že můžete z jakéhokoliv zařízení posílat prostě nějaká data a tohle je převádí do vizuální podoby - nemusí to byt ESP32, může to být ATMega8, STM32, CH32 a a další. Připojené IMU, teploměr, zatížení procesoru. Nic se neinstaluje, běží to ve webovém prohlížeči nezávislé na operačním systému a data se nikam neposílají. ...více
Číst komentáře
- a -
Přidat svůj názor
Tričko Chiptron s potiskem Trust me, I'm a maker
Ukaž světu,
že jsi Maker!
Koupit tričko
Kafe pro Chiptrona
Dodej energii dalšímu článku
Buy Me a Coffee

Související články

Grafika webového Serial Monitoru a Plotteru s barevnými křivkami pro data z Arduina a ESP32

Každý, kdo někdy programoval Arduino nebo ESP32, zná ten rituál: nahraju kód, otevřu Serial Monitor v Arduino IDE a koukám na proud čísel, jestli senzor vrací rozumné hodnoty. Funguje to skvěle – dokud nesedíte u cizího počítače, na školním Chromebooku…

Webový serial monitor zdarma

Vyzkoušejte moderní webový Serial Monitor zdarma! Laďte Arduino, ESP32 nebo Raspberry Pi přímo v prohlížeči bez instalace. Podpora ASCII, HEX, binárních dat, exportu, časových značek a více kódování.

Ilustrace několika elektronických čidel a senzorů, včetně sondy s kovovým hrotem

Tenhle článek vznikl jako přehled čidel, která se na chiptron.cz objevují nejčastěji – v návodech, meteostanicích, projektech kvality vzduchu i DIY bastlení. Pro každé čidlo najdete klíčové parametry, knihovny pro Arduino / ESP32, případně odkaz na ESPHome nebo Home Assistant integraci, tipy,…

Webová bitová kalkulačka zobrazuje převod čísla 255 mezi desítkovou, šestnáctkovou a dvojkovou soustavou

Z jednoduchého převodníku DEC/BIN/HEX/ASCII vyrostl pořádný nástroj pro bastlíře. Signed/unsigned, bitová kalkulačka, bitmask helper s C kódem a prefix notace — zdarma a bez instalace.

Přenosná meteostanice s displejem zobrazujícím naměřené hodnoty a grafy vedle černého čidla

Meteostanice na LaskaKit ESPink-4.26, která nepotřebuje internet ani cloud. Sama rozpozná připojená čidla, kreslí grafy na e-paper a nastavíte ji přes USB nebo WiFi z telefonu. Nově i víc veličin v jednom grafu a kalibrace CO2, která čeká na ustálení…

Trendy