Začínám pracovat na menším projektu s pracovním názvem ESP32 online. Cílem je obousměrná komunikace s vývojovou deskou s jednočipem ESP32 přes internet.
Data se budou ukládat do Firebase Realtime Database, každá deska bude mít svůj objekt JSON v databázi se šesti klíči (položky), s pevně danými názvy A až F; tedy deska s názvem devA bude mít objekt v /devboards/devA a klíč F bude dostupný přes referenci /devboards/devA/values/F. Klíčů (položek) je pro každou desku šest, A až F. Pevné názvy jsou zvoleny záměrně, kvůli snadnější implementaci.
Každá deska může mít naprosto odlišný kód a používat klíče A až F různým způsobem, libovolně pro čtení hodnot i pro jejich zápis. Přes wifi bude připojena do internetu a k databázi Firebase.
Mobilní/webová aplikace bude mít dashboard, kde bude možnost data nejen zobrazit, ale i měnit; a to nejen pro jednu konkrétní desku, ale i pro více různých desek.
Řekněme, že desky devA až devC budou obsahovat čidlo teploty, tlaku a relativní vlhkosti a každá z nich tyto hodnoty publikuje v klíčích A až C do databáze.
Na PC/tabletu/mobilu půjde zobrazit na Dashboard tyto informace různým způsobem. Dashboardy totiž půjde vytvářet a uloženy budou také v databázi a dostupné přes referenci /dashboards/dashboardA atd.
Na dashboard budou různé komponenty, některé jen hodnotu zobrazí (to dává smysl třeba pro teplotu, tlak, relativní vlhkost), některé komponenty umožní data i měnit a deska tyto data použije v programu (třeba hodnotu intenzity osvětlení, dobu sepnutí světla, …).
Projekt je v počáteční fázi a vše se ještě stokrát změní.
Zatím mám strukturu dat v realtime databázi pro /devboards a /dashboards a několik komponent pro vizualizaci a příp. nastavení dat, konkrétně TextComponent, SliderComponent, InputComponent a ButtonsComponent. Používám VueJS verze 3 (option api), Quasar Framework a taky pomoc od AI.
JSON objekt pro desku vypadá takhle:
Kód: Vybrat vše
{
"devA":
{
"values": {
"A": "246",
"B": 82,
"C": 10,
"D": "20",
"E": "Yes",
"F": "No"
}
}Kód: Vybrat vše
[
{
"component": "slider",
"devboard": "devA",
"key": "B"
},
{
"class": "text-white",
"component": "text",
"conditions": [
{
"class": "bg-red",
"expression": "value < 50"
},
{
"class": "bg-green",
"expression": "value >= 50"
}
],
"devboard": "devA",
"key": "B",
"props": {
"next": "%",
"prev": "rel. vlhkost"
}
}
]Druhý JSON objekt reprezentuje text, zdánlivě jednoduchou komponentu, ale je v ní implementováno i něco logiky. Odkazuje se na stejnou desku (devA) a stejný klíč (B), tím se dá snadno ověřit, že změna hodnoty na slideru se opravdu propíše do databáze a v této komponentě text se správně zobrazí.
Komponenta toho umí ale daleko víc, než jen prosté zobrazení číselné hodnoty. Klíče prev a next umožní zobrazit text před a za hodnotou z databáze (klíč B z desky devA). Dokonce je možnost dynamicky měnit vizuální reprezentaci hodnoty, to zajišťují klíče class (CSS třída, která se aplikuje) a expression (podmínka, za které se CSS třída aplikuje). V tomto konkrétním případě se hodnoty menší než 50 zobrazí jako bílý text na červeném pozadí (CSS třída bg-red znamená červené pozadí) a hodnoty větší než 50 se zobrazí s pozadím zeleným (CSS třída bg-green).
Dashboard jako JSON objekt píšu ručně a vložím ho do databáze.
To je současná fáze projektu, občas si sem uložím myšlenku nebo pokrok.
