Domoticz információs panel (Dashticz-DBoard)
2018. június 13. írta: eNeS

Domoticz információs panel (Dashticz-DBoard)

A Raspberry Infopanel projekt záró akkordjaként beállítottam az általam szükségesnek ítélt eszközöket a Dashticz felületen. És ekkor kellemetlen meglepetés várt rám, ugyanis az elsőre vállalható sebességű program csigalassúvá vált, ahogy befejeztem a kapcsolók és hőmérők felvitelét a négy külön lapra (screen).
Nézegettem a memóriafelhasználást, a Chromium persze nagyvonalúan használja az RPI Zero egyébként szűkös 512Mbyte-nyi memóriáját, de nem sokkal jobb a helyzet Firefox-al sem. Mert a Dashticz-ot leginkább úgy lehetne jellemezni, hogy egy böngészőben futó interaktív honlap. Sajnos a többi alternatív böngésző sem jelentett ezúttal megoldást, méghozzá a Dashticz erőteljes Javascript használata miatt. (vagy nincs megfelelő Javascript támogatás a kisebb böngészőkben pl Dillo és társai, vagy ugyanolyan lassú, mint a Firefox Javascript motorja) Némi konzolos sasolás után beigazolódott ez a sejtésem, az alábbi figyelemreméltó hibaüzenet győzött meg leginkább:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.

Ráadásul az 512MB sem annyi egészen, ugyanis első körben 128MB memóriát hagytam az integrált GPU-nak, hogy minden gyorsítási funkciója működjön, amit aztán csökkentettem 64MB-ra, ha jól értem, ezzel feláldozva bizonyos mozgókép-lejátszási funkciók gyorsítását, viszont több memóriát hagyva az alaprendszernek és a böngészőnek. Sajnos ahogy megfigyeltem, minél több eszköz van felvéve minél több lapra, annál lassabb az egész rendszer, nagyon úgy tűnik, hogy minden - még a nem látható - eszköz státuszát is állandóan frissítgeti-lekérdezgeti a háttérben. Talán még ki is egyeznék a lassúsággal, ha nem menne a kezelhetőség rovására, de a jobbra-balra lapozás közben is fura dolgok történnek, néha bevadul és eszközkapcsolás után oda-vissza ugrál a különböző képernyők között (ez a touch és lapozás funkciók problémája lehet ötvözve a lassú reakciósebességgel)... Szóval RPI Zerora ez nem annyira ajánlott megoldás, de erősebb géppel rendelkezők számára (RPI3 vagy többmagos tablet 1GB RAM-al) azért leírom a beüzemelés lépéseit. A hozzám hasonló Zero tulajok számára pedig javaslok utána más alternatívát - kinek mi szimpatikus.

DASHTICZ

A Dashticz-ot többféleképpen telepíthetjük, legegyszerűbb megoldásként ajánlják, ha a már feltelepített Domoticz könyvtárába (domoticz/www) másoljuk és onnan megnyitható a Domoticz-ba integrált webszerver segítségével. Ez a megoldás ugyanakkor nem ajánlott akkor, ha portnyitással kiengedtük a netre a Domoticz-ot, mert a Dashticz alapvetően nem kér jelszót. (bár az új verzióban bekapcsolható a jelszókérés)
A másik megoldás, hogy telepítünk egy másik portra egy másik webszervert, ami akár lehet az egyszerű lighttpd vagy a komolyabb Apache webszerver is.

Lighttpd webszerver telepítése Raspbianra:

sudo apt-get install lighttpd

A letöltött Dashticz-ot kicsomagoljuk a /var/www/html mappa alá, pl dashticz nevű almappába, ízlés szerint. Ezt kell majd beírnunk a böngészőbe, pl ha a gép IP címe 192.168.1.2, akkor a http://192.168.1.2/dashticz címen érhetjük el. Alapból a http port 80-as lesz.

A dashticz alatti custom mappában található CONFIG_DEFAULT.js állományt átnevezzük CONFIG.js névre, megnyitjuk szövegszerkesztővel és ízlés szerint szerkesztjük. A CONFIG.js fájlban az alapbeállítások (config) után a blokkok adják az alapköveket (blocks), ezek indexét a Domoticz rendszerben található IDX-re kell állítani. A maximális személyreszabhatóság érdekében a config['auto_positioning'] és config['use_favorites'] értékét 0-ra kell állítani. A blokkokat oszlopokba (columns) lehet rendezni, az oszlopokat pedig képernyőkbe (screens), amik között jobbra-balra tudunk touchpad vagy egér, vagy billentyűzet (bal-jobb gomb) segítségével váltogatni. (Kézikönyv) Az egyes képernyők háttérképe külön állítható és adott időponttól függően is lehet más. Jah és blokkból vannak egyedi, előre elkészítettek is, pl sunrise, miniclock. A méreteket általában szélességben adhatjuk meg, az egész képernyő 12 egység szélesnek van deklarálva, és alapból egy normál blokk 4 egység széles - tehát 3 blokk fér egymás mellé, kivéve ha átállítjuk, mert erre blokkonként is lehetőség van akár. Ez meglehetősen dinamikus beállításokat tesz lehetővé. És ami a Domoticz alap GUI-hoz képest jelentős haladás, egyedi IFRAME-eket, weboldalakat, akár IP kamera állóképeket is beállíthatunk blokkokba.

Az általam használt CONFIG.js:

var config = {}
config['language'] = 'hu_HU';
config['domoticz_ip'] = 'http://192.168.1.2:8080';
config['app_title'] = 'Dashticz';
config['domoticz_refresh'] = '10';
config['dashticz_refresh'] = '60';
config['loginEnabled'] = 0;
config['standby_after'] = 0;
config['auto_swipe_back_to'] = 1;
config['auto_swipe_back_after'] = 120;
config['timeformat'] = 'YY-MM-DD HH:mm';
config['calendarformat'] = 'yyyy-MM-dd HH:mm' ;
config['calendarlanguage'] = 'hu_HU';
config['wu_api'] = 'WUNDERGROUND_API_REGISZTRÁLT_SAJÁT_KULCS';
config['wu_city'] = 'Bekescsaba';
config['wu_country'] = 'HU';
config['selector_instead_of_buttons'] = 1;
config['auto_positioning'] = 0;
config['use_favorites'] = 0;
config['last_update'] = 1;
config['hide_topbar'] = 0;
config['hide_seconds'] = 1;
config['use_fahrenheit'] = 0;
config['static_weathericons'] = 1;
config['shortdate'] = 'MMM Do';
config['longdate'] = 'YYYY-MM-DD';
config['boss_stationclock'] = 'RedBoss';
config['hide_seconds_stationclock'] = 1;

var buttons = {}
buttons.slide0={width:3,title:'Főmenü',slide:1}
buttons.slide1={width:3,title:'Kapcsolók',slide:2}
buttons.slide2={width:3,title:'Vezérlések',slide:3}
buttons.slide3={width:3,title:'Hőmérők',slide:4}

var blocks = {}
blocks['blocktitle_1'] = {}
blocks['blocktitle_1']['key'] = 'blocktitle_1';
blocks['blocktitle_1']['type'] = 'blocktitle';
blocks['blocktitle_1']['title'] = 'Kapcsolók';

blocks['blocktitle_2'] = {}
blocks['blocktitle_2']['key'] = 'blocktitle_2';
blocks['blocktitle_2']['type'] = 'blocktitle';
blocks['blocktitle_2']['title'] = 'Hőmérsékletek';

blocks[1] = {}
blocks[1]['width'] = 4; //1 to 12, remove this line if you want to use the default (4)
blocks[1]['title'] = 'Konyha mennyezeti világítás'
blocks[1]['switch'] = true; //if you want to switch the title and data
blocks[1]['hide_data'] = true; //if you want to hide the data of this block
blocks[1]['show_lastupdate'] = true; //if you want to show the last update specific for this block

blocks[2] = {}
blocks[2]['title'] = 'Konyha szekrény világítás'
blocks[2]['switch'] = true; //if you want to switch the title and data
blocks[2]['hide_data'] = true; //if you want to hide the data of this block
blocks[2]['show_lastupdate'] = true; //if you want to show the last update specific for this block

blocks[3] = {}
blocks[3]['title'] = 'Előszoba világítás'
blocks[3]['switch'] = true; //if you want to switch the title and data
blocks[3]['hide_data'] = true; //if you want to hide the data of this block
blocks[3]['show_lastupdate'] = true; //if you want to show the last update specific for this block

blocks[4] = {}
blocks[4]['title'] = 'Háló világítás'
blocks[4]['switch'] = true; //if you want to switch the title and data
blocks[4]['hide_data'] = true; //if you want to hide the data of this block
blocks[4]['show_lastupdate'] = true; //if you want to show the last update specific for this block

blocks[5] = {}
blocks[5]['title'] = 'WC világítás'
blocks[5]['switch'] = true; //if you want to switch the title and data
blocks[5]['hide_data'] = true; //if you want to hide the data of this block
blocks[5]['show_lastupdate'] = true; //if you want to show the last update specific for this block

blocks[7] = {}
blocks[7]['title'] = 'Fürdő szekrény világítás'
blocks[7]['switch'] = true; //if you want to switch the title and data
blocks[7]['hide_data'] = true; //if you want to hide the data of this block
blocks[7]['show_lastupdate'] = true; //if you want to show the last update specific for this block

blocks[8] = {}
blocks[8]['title'] = 'Fürdő mennyezeti világítás'
blocks[8]['switch'] = true; //if you want to switch the title and data
blocks[8]['hide_data'] = true; //if you want to hide the data of this block
blocks[8]['show_lastupdate'] = true; //if you want to show the last update specific for this block

blocks[9] = {}
blocks[9]['title'] = 'Dolgozó világítás'
blocks[9]['switch'] = true; //if you want to switch the title and data
blocks[9]['hide_data'] = true; //if you want to hide the data of this block
blocks[9]['show_lastupdate'] = true; //if you want to show the last update specific for this block

blocks[10] = {}
blocks[10]['title'] = 'Nappali világítás'
blocks[10]['switch'] = true; //if you want to switch the title and data
blocks[10]['hide_data'] = true; //if you want to hide the data of this block
blocks[10]['show_lastupdate'] = true; //if you want to show the last update specific for this block

blocks[11] = {}
blocks[11]['title'] = 'Spájz világítás'
blocks[11]['switch'] = true; //if you want to switch the title and data
blocks[11]['hide_data'] = true; //if you want to hide the data of this block
blocks[11]['show_lastupdate'] = true; //if you want to show the last update specific for this block

blocks[46] = {}
blocks[46]['title'] = 'Háló LED'
blocks[46]['switch'] = true; //if you want to switch the title and data
blocks[46]['hide_data'] = true; //if you want to hide the data of this block
blocks[46]['show_lastupdate'] = true; //if you want to show the last update specific for this block

blocks[82] = {}
blocks[82]['title'] = 'Nappali hangulatvilágítás'
blocks[82]['switch'] = true; //if you want to switch the title and data
blocks[82]['hide_data'] = true; //if you want to hide the data of this block
blocks[82]['show_lastupdate'] = true; //if you want to show the last update specific for this block

blocks[12] = {}
blocks[12]['title'] = 'Konyha hőmérő'
blocks[12]['switch'] = false; //if you want to switch the title and data
blocks[12]['hide_data'] = false; //if you want to hide the data of this block
blocks[12]['show_lastupdate'] = true; //if you want to show the last update specific for this block

blocks[22] = {}
blocks[22]['title'] = 'Előszoba hőmérő'
blocks[22]['switch'] = false; //if you want to switch the title and data
blocks[22]['hide_data'] = false; //if you want to hide the data of this block
blocks[22]['show_lastupdate'] = true; //if you want to show the last update specific for this block

blocks[39] = {}
blocks[39]['title'] = 'Háló hőmérő'
blocks[39]['switch'] = false; //if you want to switch the title and data
blocks[39]['hide_data'] = false; //if you want to hide the data of this block
blocks[39]['show_lastupdate'] = true; //if you want to show the last update specific for this block

blocks[53] = {}
blocks[53]['title'] = 'Dolgozó hőmérő'
blocks[53]['switch'] = false; //if you want to switch the title and data
blocks[53]['hide_data'] = false; //if you want to hide the data of this block
blocks[53]['show_lastupdate'] = true; //if you want to show the last update specific for this block

blocks[59] = {}
blocks[59]['title'] = 'Fürdő hőmérő'
blocks[59]['switch'] = false; //if you want to switch the title and data
blocks[59]['hide_data'] = false; //if you want to hide the data of this block
blocks[59]['show_lastupdate'] = true; //if you want to show the last update specific for this block

blocks[90] = {}
blocks[90]['title'] = 'Nappali hőmérő'
blocks[90]['switch'] = false; //if you want to switch the title and data
blocks[90]['hide_data'] = false; //if you want to hide the data of this block
blocks[90]['show_lastupdate'] = true; //if you want to show the last update specific for this block

blocks['s4'] = {}
blocks['s4']['title'] = 'Némítás'
blocks['s4']['switch'] = false; //if you want to switch the title and data
blocks['s4']['hide_data'] = true; //if you want to hide the data of this block
blocks['s4']['show_lastupdate'] = true; //if you want to show the last update specific for this block

blocks[38] = {}
blocks[38]['title'] = 'Konyha rádió'
blocks[38]['switch'] = false; //if you want to switch the title and data
blocks[38]['hide_data'] = true; //if you want to hide the data of this block
blocks[38]['show_lastupdate'] = true; //if you want to show the last update specific for this block

blocks[93] = {}
blocks[93]['title'] = 'Nappali rádió'
blocks[93]['switch'] = false; //if you want to switch the title and data
blocks[93]['hide_data'] = true; //if you want to hide the data of this block
blocks[93]['show_lastupdate'] = false; //if you want to show the last update specific for this block

blocks[62] = {}
blocks[62]['title'] = 'Fürdő párátlanító'
blocks[62]['switch'] = false; //if you want to switch the title and data
blocks[62]['hide_data'] = true; //if you want to hide the data of this block
blocks[62]['show_lastupdate'] = false; //if you want to show the last update specific for this block

blocks[71] = {}
blocks[71]['title'] = 'WC elszívó'
blocks[71]['switch'] = false; //if you want to switch the title and data
blocks[71]['hide_data'] = true; //if you want to hide the data of this block
blocks[71]['show_lastupdate'] = false; //if you want to show the last update specific for this block

blocks[85] = {}
blocks[85]['title'] = 'Dolgozó venti'
blocks[85]['switch'] = false; //if you want to switch the title and data
blocks[85]['hide_data'] = true; //if you want to hide the data of this block
blocks[85]['show_lastupdate'] = false; //if you want to show the last update specific for this block

var columns = {}
columns['bar'] = {}
columns['bar']['blocks'] = ['sunrise','miniclock','settings']

columns[1] = {}
columns[1]['blocks'] = ['clock','currentweather_big']
columns[1]['width'] = 5;

columns[2] = {}
columns[2]['blocks'] = ['sunrise','weather']
columns[2]['width'] = 7;

columns[3] = {}
columns[3]['blocks'] = [1,2,3,4,46,5,7,8,10,82,9,11]
columns[3]['width'] = 12;

columns[4] = {}
columns[4]['blocks'] = ['12_1', '22_1', '39_1', '59_1', '90_1','53_1']
columns[4]['width'] = 12;

columns[5] = {}
columns[5]['blocks']=[buttons.slide0,buttons.slide1,buttons.slide2,buttons.slide3]
columns[5]['width'] = 12;

columns[6] = {}
columns[6]['blocks']=['s4',38,93]
columns[6]['width'] = 6;

columns[7] = {}
columns[7]['blocks']=[62,71,85]
columns[7]['width'] = 6;

var columns_standby = {}
columns_standby[1] = {}
columns_standby[1]['blocks'] = ['clock']
columns_standby[1]['width'] = 12;

var screens = {}
screens[1] = {} // nyitokepernyo
screens[1]['background'] = 'bg_noon1.jpg';
screens[1]['columns'] = [5,1,2]
screens[1]['background_morning'] = 'bg_morning.jpg';
screens[1]['background_noon'] = 'bg_noon1.jpg';
screens[1]['background_afternoon'] = 'bg_noon1.jpg';
screens[1]['background_night'] = 'bg_night.jpg';

screens[2] = {} // kapcsolok
screens[2]['background'] = 'bg_switch.jpg';
screens[2]['columns'] = [5,3]

screens[3] = {} // vezerlesek
screens[3]['background'] = 'bg_switch.jpg';
screens[3]['columns'] = [5,6,7]

screens[4] = {} // homersekletek
screens[4]['background'] = 'bg_thermo.jpg';
screens[4]['columns'] = [5,4]

A fenti beállításokkal és néhány egyedi háttérkép hozzáadása után az alábbi interaktív képernyők álltak elő.

Dashticz főképernyő:
dashticz1.jpg

2. képernyő: Kapcsolók

dashticz2.jpg

3. képernyő: vezérlések

dashticz3.jpg

Itt látható, hogy a Dashticz a Domoticzban beállított egyedi ikonokkal nem foglalkozik (persze kézzel lehet beállítani másik ikont Dashticzban is), valamint a "Selector Switch" típus támogatása sok opció esetén nem az igazi.

4. képernyő: Hőmérők

dashticz4.jpg

  

D-Board

Mint már írtam az elején, a Dashticz kinézetével és beállítási lehetőségeivel elégedett voltam, a sebességével viszont sajnos nem. És mivel nem akartam lecserélni a Zerot erősebbre, ezért inkább írtam egy olyan alkalmazást, ami megelégszik a kisebb erőforrásokkal. Nyomatékosan felhívom a figyelmet, hogy ez még erősen bétaverzió, csak az általam is használt eszközöket támogatja, igyekeztem minél inkább optimalizálni a gyengébb számítási teljesítményű és relatív kis megjelenítővel (5") rendelkező eszközökhöz.

A telepítés ugyanúgy kezdődik, mint a Dashticz esetében: (ez telepíthető a Domoticz szerver mellé akár)

sudo apt-get install lighttpd

Mivel a Javascript a legnagyobb probléma, igyekeztem minimálisra csökkenteni a mennyiségét a kliensoldalon, inkább szerveroldali PHP-ba tettem a betöltő funkciókat. (Domoticz JSON URL alapján!)

Így aztán ide kell a PHP CGI is:

sudo apt-get install php5-common php5-cgi php5 php5-mysql
sudo lighttpd-enable-mod fastcgi
sudo lighttpd-enable-mod fastcgi-php
sudo /etc/init.d/lighttpd restart

Mivel a Dashticz kinézetével semmi gondom, csak a sebességével, így igyekeztem leutánozni a kinézetét, olyan szinten, hogy a DIV és CLASS nevek majdnem ugyanazok legyenek, így a CSS-el történő formázás majdnem ugyanolyan eredménnyel használható. Mivel 5"-os kijelzőt használok, kicsit optimalizáltam a gombokat és betűméreteket ehhez, hogy könnyebb legyen eltalálni egy ujjal, és látható is legyen nagyjából.

Ez után töltsük le a DBoard-ot. Majd helyezzük a tartalmát /var/www/html mappa alá, a beállításokat a config.php állomány szerkesztésével módosíthatjuk.

$serverip a Domoticz szerver IP címe, $serverdport a Domoticz portja, amin az API elérhető, $serverwport az MQTT szerver websocket portja (nem a 1883-as, ezt külön kell beállítani általában, lásd lejjebb!), feltételezi a szkript, hogy az IP cím megegyezik a Domoticz szerver IP címével, bár elvileg másik gépen is lehetnének...
A username, password a Domoticz _és_ MQTT felé küldött azonosítóadatok, a $wuapi egy általunk beregisztrált azonosító a Wunderground-ra, alatta a nyelv, ország és helybeállítással.

Ez alatt a vizuális felépítés váza rakható össze a $disp tömbben 0-3 között látható a négy aloldal (lehet több és kevesebb is, ízlés szerint, csak figyelni kell a megfelelő szerkezetre és vesszőkre.), ezek alatti tömbben a hivatkozásra szolgáló gomb neve (name), az oldal háttérképe (background) és az oldalon megjeleníteni kívánt MQTT eszköz Domoticz IDX-ek. (devs) A főképernyőn az alábbi mintában nem kértem MQTT eszközöket, az első (0.) képernyőn az alábbi különleges beállítások élnek:
$mainscreen_order : megadható a speciális widgetek közül melyik milyen sorrendben jelenjen meg, vagy ha kihagyjuk valamelyiket, akkor egyáltalán nem jelenik meg, ezek 'CL': digitális óra, 'S': napfelkelte/naplemente, 'WN': időjárás most, 'W': az elkövetkező órák időjárása.
Az elkövetkező órák időjárása a $weather_nexthours tömbben adható meg, 0 és 35 között megadható a jelenlegihez képest hány órával következő időpont időjárását jelenítse meg egy blokkban. Ezen blokkok szélessége a $weather_width beállításával szabályozható - figyelembe véve a maximális 12 egységnyi szélességet.
További főképernyőre érvényes beállítások: $clock_width= digitális óra szélessége (1-12), $currentweather_width= jelenlegi hőmérsékletadat szélessége (1-12), $sunrise_width= napfelkelte/naplemente blokk szélesség.

Minden oldalra érvényes beállítás a $pagerefresh_sec ami a megadott másodpercek után újratölti az oldalt - praktikus módon újra lekérve pl az időjárásadatokat, ez 30-60 perc között optimális véleményem szerint. A $returnhome_sec segítségével pedig a megadott számú másodperc múlva visszatér a legelső oldalra, bármelyiken is 'ragadt'.
Az óra fixen percenként frissül - nem jelenít meg másodperceket, a látható MQTT eszközöknek nincs frissítési idejük, ezek gyakorlatilag azonnal frissülnek websocket-en keresztül.

Mintabeállítások (config.php):

$serverip = '192.168.2.100'; // Domoticz server IP
$serverdport = '8081'; // Domoticz API port
$serverwport = '9001'; // MQTT WebSocket port
$serveraddr = "http://".$serverip.":".$serverdport;
$username = 'user';
$password = 'secret';
$mqtt_topic1 = "domoticz/in";
$mqtt_topic2 = "domoticz/out";
$wuapi = "xxxxxxxxxxxxxxxx";
$wulang = "HU";
$wucountr = "HU";
$wulocation = "Bekescsaba";

$disp = array(
0 =>
array(
'name' => 'Főképernyő',
'background' => 'bg_noon1.jpg',
'devs' => array()
),
1 =>
array(
'name' => 'Kapcsolók',
'background' => 'bg_switch.jpg',
'devs' => array(1,2,3,4,46,5,7,8,10,82,9,11)
),
2 =>
array(
'name' => 'Vezérlések',
'background' => 'bg_switch.jpg',
'devs' => array(38,93,62,71,85)
),
3 =>
array(
'name' => 'Hőmérők',
'background' => 'bg_thermo.jpg',
'devs' => array(12,22,39,59,90,53)
)
);

$weather_nexthours = array(3,6,10,15,24,34);
$clock_width = 6;
$currentweather_width = 6;
$sunrise_width = 5;
$weather_width = 2;
$mainscreen_order = array('CL','S','WN','W');
$pagerefresh_sec = 1800; // refreshing every 1/2 hour
$returnhome_sec = 120; // return to main page after x sec

Látható, hogy sokmindent kölcsönöztem a Dashticztől, de jelentősen le van egyszerűsítve, nyilván nem is tud annyit. Ha mindent beállítottunk, fut a webszerver, akkor a http:/DOMOTICZ_IP/dboard címen böngészőből elérhető bármilyen eszközről, legyen akár tablet, okostelefon vagy PC. Arra már most felhívom a figyelmet, hogy ennek kiengedése a NET-re semmiképpen sem ajánlott, mivel a dashboard-ok között divatos "insecure by design" elven készült: nem kér jelszót, de ha kérne se lenne jó ötlet kirakni, mivel a Javascript miatt egyes jelszavak simán kiolvashatóak a HTML forrásból. De helyi hálózaton ez nem akkora probléma, vagy ha probléma, akkor igazából nem ez a probléma, hanem inkább a teljes helyi hálózat védelmén erősítsünk (tűzfal-erősebb wifi jelszó, stb).

Főképernyő:

dboard1.jpg

A WUnderGround-ról a szerveroldalon PHP tölti le az időjárásadatokat, amit memóriában és lemezen is tárol, így a kézi frissítgetés, valamint a további kliensek által kért adatok nem jelentenek plusz lekérést a WUnderGround felé - mert mint azt a regisztrációkor mindenki megtekintheti, az ingyenes havi lekérések száma limitált. Alapból fél óránként frissül, de állítható. Ha a Wunderground-ról nem jön információ, a betöltés nem áll meg, csak hiányozni fognak ezek az információk.. csendesen jegyzem meg, hogy a Dashticz semmit nem jelenít meg ilyen esetben, elakad a betöltés, ha nem érhető el a Wunderground, mert mondjuk éppen nincs net, vagy túlléptük a havi lekérési limitet, ez volt a másik ok, amiért a DBoard fejlesztésébe belefogtam.

Az órát javascript frissíti, a böngésző helyi idejével, a napfelkelte és naplemente a Domoticz-tól jön. Amennyiben nincs IDX megadva a kezdőképernyőhöz, nem kapcsolódik az MQTT szerverhez a Javascript, így erőforrást nem foglal.

2. képernyő: Kapcsolók

dboard2.jpg

Itt a képernyők nincsenek a memóriában, nem futnak állandóan a háttérben, ezért nem lapozódik, hanem új oldalbetöltés történik a fenti menüben történő váltáskor: a szerveroldali PHP szkript legenerálja (tehát ennek sebessége csak a szervertől függ) a kapcsolók aktuális állapotát (amit kapcsolóknál eltérő háttér jelez), valamint kapcsolódik websocket-en keresztül a böngészőben futó Javascript az MQTT szerverhez (alapból 9001-es port), és valós időben mutatja az állapotváltozásokat. Ez a megoldás kevésbé terheli a kliensoldalt, mint a Dashticz időközi frissítése, és valamivel gyorsabb is. De a fő az, hogy a menüpontok nem ugrálnak össze-vissza, ha aktiválok valamit, és tovább nyomom az ujjammal a képernyőt.

Mosquitto MQTT bróker beállításaihoz az alábbiakat kell hozzáadni a websocket támogatás engedélyezéséhez a szerveroldalon: (/etc/mosquitto/mosquitto.conf)

listener 9001
protocol websockets

3. képernyő: Vezérlések

dboard3.jpg

Kicsit javítottam az egyedi ikonok támogatásán, illetve konkrétan legördülő menübe kerülnek a "Selector Switch"-ek opciói, így nem takarják egymást a gombok. Természetesen MQTT-n keresztül valós időben az aktuális állapot látszik mindig.

4. képernyő: Hőmérők

dboard4.jpg

Minden szentnek maga felé hajlik a keze.. egyelőre csak a hőmérőket implementáltam a szenzorok közül, illetve bárminek az első értékét meg tudja jeleníteni, csak mögé írja, hogy Celsius. :)
De kis munkával bővíthető, a forrása elérhető, vagy ha éppen ráérek és kéri valaki, mást is megjeleníthet.

És ha ilyen ügyes vagyok miért nem segítek inkább a Dashticz fejlesztésében?
- Egyrészt nem vagyok ilyen ügyes, csak problémákat oldok meg, nekem ez volt a problémám és megoldottam. Másrészt a Dashticz tisztán Javascript és nem látok nagy fantáziát benne, a fent már sorolt teljesítménybeli problémák miatt.
Miért nem fejlesztek még bele xy képességet?
- Mert szimplán nincs szükségem rá.. egyelőre. :)

 

A bejegyzés trackback címe:

https://bitekmindenhol.blog.hu/api/trackback/id/tr2114043980

Kommentek:

A hozzászólások a vonatkozó jogszabályok  értelmében felhasználói tartalomnak minősülnek, értük a szolgáltatás technikai  üzemeltetője semmilyen felelősséget nem vállal, azokat nem ellenőrzi. Kifogás esetén forduljon a blog szerkesztőjéhez. Részletek a  Felhasználási feltételekben és az adatvédelmi tájékoztatóban.

Nincsenek hozzászólások.