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. :)

DASHTICZ mintakonfiguráció 2.

(M.Z. kolléga küldte az alábbi, IP kamerákkal és egyéb nyalánkságokkal megspékelt konfigurációt, érdeklődők kedvéért - az IP címek és azonosítókat be kell helyettesíteni - vastagon szedett xxx pontok)

50914595_2463474380333427_6789344779504189440_n.jpg

A custom mappába kerülő CONFIG.js:

var config = {}
config['language'] = 'hu_HU';
config['domoticz_ip'] = 'http://xxx.xxx.xxx.xxx:8080';
config['app_title'] = 'Dashticz';
config['domoticz_refresh'] = '5';
config['dashticz_refresh'] = '60';
config['dashticz_php_path']= 'http://xxx.xxx.xxx.xxx:80/';
config['calendar_parse_localy']= 1;
config['standard_graph'] = 'day';
config['wu_api'] = 'xxxxxxxxxx';
config['wu_city'] = 'xxxxx';
config['wu_country'] = 'HU';
config['loginEnabled'] = 0;
config['standby_after'] = 10;
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['selector_instead_of_buttons'] = 1;
config['auto_positioning'] = 1;
config['use_favorites'] = 0;
config['last_update'] = 0;
config['hide_topbar'] = 0;
config['hide_seconds'] = 1;
config['use_fahrenheit'] = 0;
config['static_weathericons'] = 0;
config['longdate'] = 'YYYY-MM-DD';
config['boss_stationclock'] = 'RedBoss';
config['hide_seconds_stationclock'] = 1;
config['spot_clientid'] = 'xxxxxxxxxxxxxxxxxxxx';
config['owm_api'] = 'xxxxxxxxxxxxx';
config['owm_city'] = 'xxxxx';
config['owm_name'] = 'xxxxxxxi időjárás';
config['owm_country'] = 'hu';

var buttons = {}
buttons.slide0={width:3,title:'Főmenü',slide:1}
buttons.slide1={width:2,title:'Mérések',slide:2}
buttons.slide2={width:2,title:'Vezérlés',slide:3}
buttons.slide3={width:2,title:'Biztonság',slide:4}
buttons.slide4={width:3,title:'Okosotthon',slide:5}

buttons.buienradar = {width:12, isimage:true, refreshimage:60000, image: 'https://www.metnet.hu/img/radaranim.gif'} // Best UK inclusive radar I could find
buttons.buienradar2 = {width:6, isimage:true, refreshimage:60000, image: 'https://www.metnet.hu/img/radaranim.gif'} // Best UK inclusive radar I could find
buttons.cctv1 = {width:6, isimage:true, refreshimage:5000, image: 'http://xxx'}
buttons.cctv2 = {width:6, isimage:true, refreshimage:5000, image: 'http://xxx'}
buttons.cctv3 = {width:6, isimage:true, refreshimage:1000, image: 'http://xxx'} // JPEG snapshot IP cím!!
buttons.cctv4 = {width:6, isimage:true, refreshimage:1000, image: 'http://xxx'}

var _STREAMPLAYER_TRACKS = [
{"track":1,"name":"Kossuth","file":"http://stream001.radio.hu:8080/mr1.mp3"},
{"track":2,"name":"Petőfi","file":"http://stream001.radio.hu:8080/mr2.mp3"},
{"track":3,"name":"Jazzy","file":"http://94.199.183.186/jazzy.mp3"},
{"track":4,"name":"TREND FM","file":"http://radio.nordtelekom.hu:8000/gazdasagiradio"},
{"track":5,"name":"RockFM","file":"http://cloudfront20.lexanetwork.com:8080/cloudstream4151.mp3"},
];

var calendars = {}
calendars.business = { maxitems: 5, icalurl: 'https://calendar.google.com/calendar/ical/xxxx'

var frames = {}
frames.weather = {refreshiframe:100000,height:240,frameurl:"//forecast.io/embed/#lat=47.xxx&lon=18.xxx&name=xxx&color=#00aaff&font=Helvetica&fontcolor=#ffffff&units=si&text-color=#fff&lang=hu",width:12}

 

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'] = 'Naptár';

blocks['blocktitle_3'] = {}
blocks['blocktitle_3']['key'] = 'blocktitle_3';
blocks['blocktitle_3']['type'] = 'blocktitle';
blocks['blocktitle_3']['title'] = 'Radar';

blocks['blocktitle_4'] = {}
blocks['blocktitle_4']['key'] = 'blocktitle_4';
blocks['blocktitle_4']['type'] = 'blocktitle';
blocks['blocktitle_4']['title'] = 'Média';

blocks['blocktitle_5'] = {}
blocks['blocktitle_5']['key'] = 'blocktitle_5';
blocks['blocktitle_5']['type'] = 'blocktitle';
blocks['blocktitle_5']['title'] = 'Raspberry';

blocks['blocktitle_6'] = {}
blocks['blocktitle_6']['key'] = 'blocktitle_6';
blocks['blocktitle_6']['type'] = 'blocktitle';
blocks['blocktitle_6']['title'] = 'Földszinti hőmérsékletek';

blocks['blocktitle_7'] = {}
blocks['blocktitle_7']['key'] = 'blocktitle_7';
blocks['blocktitle_7']['type'] = 'blocktitle';
blocks['blocktitle_7']['title'] = 'Emeleti hőmérsékletek';

blocks['blocktitle_15'] = {}
blocks['blocktitle_15']['key'] = 'blocktitle_15';
blocks['blocktitle_15']['type'] = 'blocktitle';
blocks['blocktitle_15']['title'] = 'Fűtési rendszer';

blocks['blocktitle_8'] = {}
blocks['blocktitle_8']['key'] = 'blocktitle_8';
blocks['blocktitle_8']['type'] = 'blocktitle';
blocks['blocktitle_8']['title'] = 'Világítás';

blocks['blocktitle_9'] = {}
blocks['blocktitle_9']['key'] = 'blocktitle_9';
blocks['blocktitle_9']['type'] = 'blocktitle';
blocks['blocktitle_9']['title'] = 'Klíma';

blocks['blocktitle_10'] = {}
blocks['blocktitle_10']['key'] = 'blocktitle_10';
blocks['blocktitle_10']['type'] = 'blocktitle';
blocks['blocktitle_10']['title'] = 'Porszívó';

blocks['blocktitle_11'] = {}
blocks['blocktitle_11']['key'] = 'blocktitle_11';
blocks['blocktitle_11']['type'] = 'blocktitle';
blocks['blocktitle_11']['title'] = 'Légtisztító';

blocks['blocktitle_16'] = {}
blocks['blocktitle_16']['key'] = 'blocktitle_16';
blocks['blocktitle_16']['type'] = 'blocktitle';
blocks['blocktitle_16']['title'] = 'Légnedvesítő';

blocks['blocktitle_12'] = {}
blocks['blocktitle_12']['key'] = 'blocktitle_12';
blocks['blocktitle_12']['type'] = 'blocktitle';
blocks['blocktitle_12']['title'] = 'Elektromos mérések';

blocks['blocktitle_13'] = {}
blocks['blocktitle_13']['key'] = 'blocktitle_13';
blocks['blocktitle_13']['type'] = 'blocktitle';
blocks['blocktitle_13']['title'] = 'Ajtók';

blocks['blocktitle_14'] = {}
blocks['blocktitle_14']['key'] = 'blocktitle_14';
blocks['blocktitle_14']['type'] = 'blocktitle';
blocks['blocktitle_14']['title'] = 'Mozgásérzékelők';

blocks['blocktitle_17'] = {}
blocks['blocktitle_17']['key'] = 'blocktitle_17';
blocks['blocktitle_17']['type'] = 'blocktitle';
blocks['blocktitle_17']['title'] = 'Kamerák';

blocks['blocktitle_18'] = {}
blocks['blocktitle_18']['key'] = 'blocktitle_18';
blocks['blocktitle_18']['type'] = 'blocktitle';
blocks['blocktitle_18']['title'] = 'Vészjelzések';

 

blocks['blocktitle_spotify'] = {} //nem használom
blocks['blocktitle_spotify']['key'] = 'blocktitle_spotify';
blocks['blocktitle_spotify']['type'] = 'blocktitle';
blocks['blocktitle_spotify']['title'] = 'Spotify';

 

blocks['blocktitle_19'] = {}
blocks['blocktitle_19']['key'] = 'blocktitle_19';
blocks['blocktitle_19']['type'] = 'blocktitle';
blocks['blocktitle_19']['title'] = 'Eszközök';

blocks['blocktitle_20'] = {}
blocks['blocktitle_20']['key'] = 'blocktitle_20';
blocks['blocktitle_20']['type'] = 'blocktitle';
blocks['blocktitle_20']['title'] = 'Mikrotik';

blocks['blocktitle_21'] = {}
blocks['blocktitle_21']['key'] = 'blocktitle_21';
blocks['blocktitle_21']['type'] = 'blocktitle';
blocks['blocktitle_21']['title'] = 'Node-Red';

 

//Ajtók

blocks['656'] = {}
blocks[656]['width'] = 3;
blocks['656']['speakOn'] = 'Konyha ajtó nyitva';
blocks['656']['title'] = 'Konyha';

blocks['655'] = {}
blocks[655]['width'] = 3;
blocks['655']['speakOn'] = 'Bejárati ajtó nyitva';
blocks['655']['title'] = 'Bejárat';

blocks['145'] = {}
blocks[145]['width'] = 3;
blocks['145']['speakOn'] = 'Kapu nyitva';
blocks['145']['title'] = 'Kapu';

//Kapcsolók

blocks['807'] = {}
blocks[807]['width'] = 3;
blocks[807]['icon'] = 'fas fa-key';
blocks['807']['title'] = 'Kapunyitás';

blocks['854'] = {}
blocks[854]['width'] = 3;
blocks[854]['icon'] = 'fas fa-tv';
blocks['854']['title'] = 'TV';

blocks['725'] = {}
blocks[725]['width'] = 3;
blocks['725']['title'] = 'LED';

blocks['722'] = {}
blocks[722]['width'] = 3;
//blocks[722]['icon'] = 'fas fa-whale';
blocks['722']['title'] = 'Akvárium';

blocks['754'] = {}
blocks[754]['width'] = 3;
blocks[754]['icon'] = 'fas fa-plug';
blocks['754']['title'] = 'Terasz konnektor';

blocks['755'] = {}
blocks[755]['width'] = 3;
blocks['755']['title'] = 'Terasz lámpa';

blocks['768'] = {}
blocks[768]['width'] = 3;
blocks['768']['title'] = 'Karácsonyfa';

//Klíma

blocks['864'] = {}
blocks[864]['width'] = 3;
blocks['864']['title'] = '';

blocks['865'] = {}
blocks[865]['width'] = 3;
blocks['865']['title'] = '';

blocks['866'] = {}
blocks[866]['width'] = 3;
blocks['866']['title'] = '';

blocks['867'] = {}
blocks[867]['width'] = 3;
blocks['867']['title'] = '';

blocks['869'] = {}
blocks[869]['width'] = 3;
blocks['869']['title'] = '';

//Porszívó
blocks['98'] = {}
blocks[98]['width'] = 3;
blocks[98]['icon'] = 'fas fa-recycle';
blocks['98']['title'] = '';

blocks['97'] = {}
blocks[97]['width'] = 6;
blocks[97]['icon'] = 'fas fa-power-off';
blocks['97']['title'] = '';
//blocks['97']['image'] = 'Hombot48_Off.png';

blocks['99'] = {}
blocks[99]['width'] = 3;
blocks[99]['icon'] = 'fas fa-battery-three-quarters';
blocks['99']['title'] = '';

//Légtisztító
blocks['440'] = {}
blocks[440]['width'] = 3;
blocks['440']['title'] = 'Nappali';

blocks['441'] = {}
blocks[441]['width'] = 3;
blocks['441']['title'] = 'Nappali';
blocks['441']['switch'] = false;

blocks['442'] = {}
blocks[442]['width'] = 3;
blocks['442']['title'] = '';
blocks[442]['icon'] = 'fab fa-pagelines';
blocks['442']['switch'] = true;

blocks['446'] = {}
blocks[446]['width'] = 9;
blocks[446]['icon'] = 'fas fa-power-off';
blocks['446']['title'] = '';

blocks['443'] = {}
blocks[443]['width'] = 3;
blocks['443']['title'] = '';
blocks[443]['icon'] = 'fas fa-recycle';

blocks['444'] = {}
blocks[444]['width'] = 3;
blocks[444]['icon'] = 'fas fa-power-off';
blocks['444']['title'] = '';

//Légnedvesítő
blocks['714'] = {}
blocks[714]['width'] = 3;
blocks['714']['title'] = 'Nappali';

blocks['715'] = {}
blocks[715]['width'] = 3;
blocks['715']['title'] = 'Nappali';
blocks['715']['switch'] = true;

blocks['720'] = {}
blocks[720]['width'] = 8;
blocks[720]['icon'] = 'fas fa-power-off';
blocks['720']['title'] = '';

blocks['721'] = {}
blocks[721]['width'] = 6;
blocks[721]['icon'] = 'fas fa-tint';
blocks['721']['title'] = '';

blocks['717'] = {}
blocks[717]['width'] = 2;
blocks[717]['icon'] = 'fas fa-recycle';
blocks['717']['title'] = '';

blocks['716'] = {}
blocks[716]['icon'] = 'fas fa-power-off';
blocks[716]['width'] = 2;
blocks['716']['title'] = '';

//Lámpák
blocks['816'] = {}
blocks[816]['width'] = 3;//bejárat
blocks['816']['title'] = 'Bejárat';

blocks['844'] = {}
blocks[844]['width'] = 3;//bejárat
blocks['844']['title'] = 'Garázsbejárat';

blocks['842'] = {}
blocks[842]['width'] = 3;
blocks['842']['title'] = 'Fürdő bal spot';

blocks['843'] = {}
blocks[843]['width'] = 3;
blocks['843']['title'] = 'Fürdő jobb spot';

blocks['814'] = {}
blocks[814]['width'] = 3; //konyha
blocks['814']['title'] = 'Konyha';

blocks['815'] = {}
blocks[815]['width'] = 3; //könyves
blocks['815']['title'] = 'Könyvespolc';

blocks['812'] = {}
blocks[812]['width'] = 3; //halas
blocks['812']['title'] = 'Halaspolc';

blocks['810'] = {}
blocks[810]['width'] = 3; //dolgozó
blocks['810']['title'] = 'Iroda';

blocks['817'] = {}
blocks[817]['width'] = 3; //háló oldalam
blocks['817']['title'] = 'Háló';

blocks['210'] = {}
blocks[210]['width'] = 3; //kültér

blocks['726'] = {}
blocks[726]['width'] = 3; //spot

blocks['805'] = {}
blocks[805]['width'] = 3; //lépcsőház
blocks['805']['title'] = 'Lépcsőház';

blocks['802'] = {}
blocks[802]['width'] = 3; //háló

blocks['806'] = {}
blocks[806]['width'] = 3; //gardrobe

blocks['803'] = {}
blocks[803]['width'] = 3; //Gyerekszoba

blocks['808'] = {}
blocks[808]['width'] = 3; //Emeleti fürdő

blocks['804'] = {}
blocks[804]['width'] = 3; //Előszoba
blocks['804']['title'] = 'Előszoba';

 

//Időjárásállomás

blocks[303] = {} //hőfok és pára
blocks[303]['width'] = 3;
blocks[303]['title'] = '';
blocks[303]['show_lastupdate'] = true;

blocks[212] = {} //szél
blocks[212]['width'] = 3
blocks[212]['title'] = '';
blocks[212]['show_lastupdate'] = false;

blocks['294'] = {} //eső
blocks[294]['width'] = 3;
blocks['294']['title'] = '';
blocks['294']['show_lastupdate'] = true;

//Raspberry

blocks['161'] = {} //CPU
blocks[161]['width'] = 4;
blocks['161']['title'] = 'CPU';
blocks['161']['switch'] = true;
blocks['161']['image'] = 'rpi3.png';

blocks['162'] = {} //Temp
blocks[162]['width'] = 4;
blocks['162']['title'] = 'Hőmérséklet';
blocks['162']['switch'] = true;
blocks['162']['image'] = 'rpi3.png';

blocks['163'] = {} //MEM
blocks[163]['width'] = 4;
blocks['163']['title'] = 'Memória';
blocks['163']['switch'] = true;
blocks['163']['image'] = 'rpi3.png';

//Raspberry Zero

blocks['847'] = {} //CPU
blocks[847]['width'] = 4;
blocks['847']['title'] = 'CPU';
blocks['847']['switch'] = true;
blocks['847']['image'] = 'rpi3.png';

blocks['846'] = {} //Temp
blocks[846]['width'] = 4;
blocks['846']['title'] = 'Hőmérséklet';
blocks['846']['switch'] = true;
blocks['846']['image'] = 'rpi3.png';

blocks['848'] = {} //MEM
blocks[848]['width'] = 4;
blocks['848']['title'] = 'Memória';
blocks['848']['switch'] = true;
blocks['848']['image'] = 'rpi3.png';

//Napelem

blocks['457'] = {}
blocks[457]['width'] = 4;
blocks['457']['title'] = 'Napelem';

//Fogyasztók

blocks['378'] = {}
blocks[378]['width'] = 4;
//blocks['378']['title'] = '';
blocks['378']['switch'] = true;

//Hőmérők

blocks['74'] = {}
blocks[74]['width'] = 3;
blocks['74']['title'] = 'Iroda';
blocks['74']['switch'] = false;

blocks['670'] = {}
blocks[670]['width'] = 3;
blocks['670']['title'] = 'WC';
blocks['670']['switch'] = false;

//Esernyőhöz

blocks[678] = {} //Buienradar (text)
blocks[678]['title'] = '';
blocks[678]['switch'] = false;
blocks[678]['width'] = 3;
blocks[678]['icon'] = 'fas fa-umbrella';
blocks[679] = {} //RegenData (rain sensor) not on dashboard
blocks[679]['title'] = 'Eső';
blocks[680] = {} //Paraplu (switch) not on dashboard

//Uptime Domoticz

blocks[681] = {} //Uptime (text)
blocks[681]['title'] = 'Domoticz Uptime';
blocks[681]['image'] = 'Domoticz.png';
blocks[681]['switch'] = true;
blocks[681]['width'] = 12;

//Uptime Node-Red

blocks[845] = {} //Uptime (text)
blocks[845]['title'] = 'Node-Red Uptime';
blocks[845]['image'] = 'nodered2.png';
blocks[845]['switch'] = true;
blocks[845]['width'] = 12;

 

//Vészjelzések

blocks['376'] = {}
blocks[376]['width'] = 4;
blocks[376]['icon'] = 'fas fa-tint';
blocks['376']['title'] = 'Csőtörés emelet';

blocks['764'] = {}
blocks[764]['width'] = 6;
//blocks[764]['icon'] = 'fas fa-exclamation-triangle;
//blocks[764]['icon'] = '';
//blocks['764']['title'] = 'Vészjelzés ma';

blocks['765'] = {}
blocks[765]['width'] = 6;
//blocks[765]['icon'] = '';
//blocks['765']['title'] = 'Vészjelzés holnap';

//Mikrotik

blocks['841'] = {}
blocks[841]['width'] = 6;
blocks[841]['icon'] = 'fas fa-wifi';
//blocks['841']['title'] = '';

blocks['839'] = {}
blocks[839]['width'] = 3;
blocks[839]['icon'] = 'fas fa-upload';
blocks['839']['title'] = 'Bandwith UP';

blocks['840'] = {}
blocks[840]['width'] = 3;
blocks[840]['icon'] = 'fas fa-download';
blocks['840']['title'] = 'Bandwith Down';

//Eszközök

blocks['778'] = {}
blocks[778]['width'] = 3;
blocks[778]['icon'] = 'fas fa-check-circle';
//blocks['778']['title'] = 'PX';

blocks['779'] = {}
blocks[779]['width'] = 3;
blocks[779]['icon'] = 'fas fa-check-circle';
//blocks['779']['title'] = 'NAS';

blocks['782'] = {}
blocks[782]['width'] = 3;
blocks[782]['icon'] = 'fas fa-check-circle';
//blocks['782']['title'] = 'Zero';

 

//Oszlopok

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

columns[3] = {}
columns[3]['blocks'] = [655,656,145] //ajtók
columns[3]['width'] = 4;

columns[4] = {}
columns[4]['blocks'] = [121,74,162,869,205,206,207,208,435,440] //hőmérsékletek
columns[4]['width'] = 4;

columns[5] = {}
columns[5]['blocks']=[buttons.slide0,buttons.slide1,buttons.slide2,buttons.slide3,buttons.slide4,buttons.slide5] //top gombok
columns[5]['width'] = 12;

//Világítás bal oszlop

columns[19] = {}
columns[19]['blocks']=['blocktitle_8',816,844,842,843,814,815,812,810,817,320,725,726,804,805,802,808,806,803,755,754,210,722]
columns[19]['width'] = 12;

columns[20] = {}
columns[20]['blocks']=['blocktitle_11',440,441,442,443,444,446,'blocktitle_16',714,715,721,717,716,720]
columns[20]['width'] = 6;

//Világítás PC -egyben

columns[21] = {}
columns[21]['blocks']=['blocktitle_8',816,844,842,843,814,815,812,810,817,320,725,726,804,805,802,808,806,803,755,754,210,722]
columns[21]['width'] = 6;

 

//Légkezelés
columns[7] = {}
columns[7]['blocks']=['blocktitle_10',98,99,97,'blocktitle_9',864,865,866,867,869]
columns[7]['width'] = 6;

//Légkezelés jobb oszlop PC
columns[14] = {}
columns[14]['blocks']=['blocktitle_10',98,99,97,'blocktitle_9',864,865,866,867,869,'blocktitle_11',440,441,442,443,444,446,'blocktitle_16',714,715,721,717,716,720]
columns[14]['width'] = 6;

//Nyitókép bal soszlop
columns[8] = {};
columns[8]['blocks'] = [656,655,145,807,854,725,726,804,805,722,755,768,buttons.cctv1, buttons.cctv2, buttons.cctv3, buttons.cctv4] //816,814,815,448,
columns[8]['width'] = 5;

//Nyitókép középső oszlop
columns[9] = {};
columns[9]['blocks'] = [frames.weather,764,765,303,294,212,731,732,'blocktitle_2',calendars.business,71,57,332,146,706,708,710,712] //currentweather_big_owm','weather_owm,frames.weather, calendars.business,
columns[9]['width'] = 5;

//Nyitókép jobb oszlop
columns[10] = {};//jobb szél
columns[10]['blocks'] = ['blocktitle_3',buttons.buienradar,'blocktitle_5',681,'blocktitle_21',845,'blocktitle_4','streamplayer','spotify',173]
columns[10]['width'] = 2;

//Tablet Nyitókép bal soszlop
columns[12] = {};
columns[12]['blocks'] = [656,655,145,807,854,725,726,804,805,722,755,768, buttons.cctv1, buttons.cctv2,buttons.cctv4,buttons.buienradar2] //
columns[12]['width'] = 6;

//Tablet Nyitókép jobb oszlop
columns[13] = {};
columns[13]['blocks'] = [frames.weather,764,765,303,294,212,'blocktitle_2',calendars.business ] //currentweather_big_owm','weather_owm,frames.weather,calendars.business
columns[13]['width'] = 6;

//Mérések bal oszlop
columns[11] = {};
columns[11]['blocks'] = ['blocktitle_6',440,441,74,670,'blocktitle_7',205,206,207,208,435,436,'blocktitle_15',671,672,673]
columns[11]['width'] = 6;

//Mérések jobb oszlop
columns[15] = {};
columns[15]['blocks'] = ['blocktitle_12',739,740,741,742,743,744,747,748,749,750,745,746,457,650,642,378,"209_1",168,675]
columns[15]['width'] = 6;

//Biztonság bal oszlop

columns[16] = {};
columns[16]['blocks'] = ['blocktitle_13',656,655,145,'blocktitle_14',791,708,710,706,712,789,146,795,793,794]
columns[16]['width'] = 6;

//Biztonság jobb oszlop

columns[17] = {};
columns[17]['blocks'] = ['blocktitle_18',143,376]
columns[17]['width'] = 6;

//Rendszer bal oszlop

columns[18] = {};
columns[18]['blocks'] = ['blocktitle_5',681,161,162,163,'blocktitle_21',845,847,846,848,'blocktitle_20',841,839,840]
columns[18]['width'] = 6;

//Rendszer jobb oszlop

columns[22] = {};
columns[22]['blocks'] = ['blocktitle_19',778,779,782]
columns[22]['width'] = 6;

var screens = {}
screens[1] = {} // nyitokepernyo
screens[1]['background'] = 'bg_noon.jpg';
screens[1]['columns'] = [5,8,9,10]
screens[1]['background_morning'] = 'bg_morning.jpg';
screens[1]['background_noon'] = 'bg_noon.jpg';
screens[1]['background_afternoon'] = 'bg1.jpg';
screens[1]['background_night'] = 'bg_night.jpg';

screens[2] = {} // mérések
screens[2]['background'] = 'bg1.jpg';
screens[2]['columns'] = [5,11,15]

screens[3] = {} // vezérlések
screens[3]['background'] = 'bg7.jpg';
screens[3]['columns'] = [5,21,14]

screens[4] = {} // biztonság
screens[4]['background'] = 'bg6.jpg';
screens[4]['columns'] = [5,16,17]

screens[5] = {} //eszközök
screens[5]['background'] = 'bg6.jpg';
screens[5]['columns'] = [5,18,22]

screens['tablet'] = {}
screens['tablet']['maxwidth'] = 1280;
screens['tablet']['maxheight'] = 800;
screens['tablet'][1] = {}
screens['tablet'][1]['background'] = 'bg9.jpg';
screens['tablet'][1]['columns'] = [12,13]
screens['tablet'][2] = {}
screens['tablet'][2]['background'] = 'bg6.jpg';
screens['tablet'][2]['columns'] = [11,15]
screens['tablet'][3] = {}
screens['tablet'][3]['background'] = 'bg6.jpg';
screens['tablet'][3]['columns'] = [19]
screens['tablet'][4] = {}
screens['tablet'][4]['background'] = 'bg6.jpg';
screens['tablet'][4]['columns'] = [7,20]
screens['tablet'][5] = {}
screens['tablet'][5]['background'] = 'bg6.jpg';
screens['tablet'][5]['columns'] = [16,17]
screens['tablet'][6] = {}
screens['tablet'][6]['background'] = 'bg6.jpg';
screens['tablet'][6]['columns'] = [18,22]

Bár a fenti példa igen hosszú, jusson eszünkbe, hogy egyrészt törölni mindig gyorsabb, mint új dolgokat létrehozni, másrészt egy működő példából sokat lehet tanulni, ha valahol elakadunk. :)
Aki csak az IP kamerák használatár kíváncsi, a "buttons.cctv"-t tartalmazó sorokat vizslassa bőszen.

Alapvetően a screens-be felvett képernyőfelosztás alkalmazza, de lehet definiálni egyéb felosztásokat, amiket a kliens képernyőfelbontása alapján használ. Pl a fenti példában ha 1280x800 méretű a kitölthető tér, akkor a screens["tablet"] felosztást alkalmazza.

A fentihez tartozó, megjelenítést javító CSS stílusleíró (custom.css), amit mellé kell másolni:

/*
CUSTOM CSS FILE
*/

#graphoutput43 {height: 120px;}

/* Rounded buttons to blocks */
.transbg.col-xs-1,
.transbg.col-xs-2,
.transbg.col-xs-3,
.transbg.col-xs-4,
.transbg.col-xs-5,
.transbg.col-xs-6,
.transbg.col-xs-7,
.transbg.col-xs-8,
.transbg.col-xs-9,
.transbg.col-xs-10,
.transbg.col-xs-11,
.transbg.col-xs-12 {
padding-top:10px;
padding-bottom:10px;
border: 1px solid rgba(255,255,255,0)
opacity: 0.8;
background: rgba(0,0,0,0.8);
background-clip: padding-box;
border-radius: 20px; /* Rounded corners */
}
/*Kisebb blokkcímek */

div.mh.titlegroups {
height: 50px !important; /* default height=75px */
padding-top: 0px; /* center text for new height */
}
/*Színes izzók*/
.fas.fa-lightbulb {
color:#F1C300;
}
.far.fa-lightbulb {
color:#fff;
}

/*Vízbetörés*/
.fa-tint.on { color: #004df1;}
.fa-tint.off {color: #FFF;}

/* Kulcs */
.fa-key.on { color: #F1C300;}
.fa-key.off {color: #FFF;}

/* wifi */

.fa-wifi.on { color: #F1C300;}
.fa-wifi.off {color: #FFF;}

/* Plug */

.fa-plug.on { color: #F1C300;}
.fa-plug.off {color: #FFF;}

/* Power */

.fa-power-off.on { color: #F1C300;}
.fa-power-off.off {color: #FFF;}

/* TV */
.fa-tv.on { color: #F1C300;}
.fa-tv.off {color: #FFF;}

.far.fa-tv:before{
font-size: 16px;
}

.fas.fa-tv:before{
font-size: 16px;
}

/* Pipa */
.fa-check-circle.on { color: #18c318;}
.fa-check-circle.off {color: #FF0000;}

 

/* Nagyobb betűk a naptárban */
.containsicalendar {
}

.containsicalendar .items {
font-size: 130%;
}

/*
CUSTOM CSS FILE
*/

A bejegyzés trackback címe:

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

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.

Gutyek 2021.04.02. 21:44:43

D-BOARD kérés, kérdés. Bocs a láma kérdés miatt, de ha kézzel frissítem az oldalt, vagy kisebbre veszem a "pagerefresh_sec"-et, akkor látom a kapcsolók állapot változását, de magától MQTT-n keresztül nem. Vezérelni sem tudom a kapcsolókkal az eszközöket, csak látom az állapotukat. Kell külön telepítenem a PAHO-t, vagy anélkül is kellene, hogy működjön? Külső websocket-es publish-al mennek a dolgok, de a D-BOARD-on keresztül sajnos nem. Merre keressem a hibát? Köszönöm előre is!

eNeS 2021.04.03. 17:27:11

Nos igen, a Paho MQTT-t használja ez a PHP forrás. Pont a héten gondolkoztam, hogy archiválom a repositoryt, már évek óta nem nyúltam a kódhoz, nem is tudtam, hogy használja bárki. :) Lehet gond persze az új mosquitto szerver is, változott a konfig fájl egy kicsit a 2.x verzióban. Nálam az 1.4 jól működik még mindig. www.domoticz.com/forum/viewtopic.php?f=28&t=35706

Támogatók:
okosotthon.jpg
allterco.jpg

Utolsó kommentek

  • szenorb: Hello. Bekötöttem 12V-ra , a bemetére egy mozgás érzékelőt kötöttem. Szépen kapcsol a relé a késle... (2023.06.14. 06:48) Shelly okosrelé (Shelly1)
  • Melanoheliophobia: Üdv! Kb. 2 éve vásároltam két ugyanilyen okos izzót. Sajnos az egyik még garancia idő alatt eltávo... (2023.05.03. 16:50) Shelly Vintage okosizzó
  • eNeS: Lehetséges, bár az ESP8266-ot lassan ideje elfelejteni, ha nem helyi hálózatra akarsz vele forgalm... (2023.04.02. 08:43) Tasmota szkriptek
  • eNeS: @tomih: Thonnyban rebootot nyomva nekem se megy az NTP. De mikor lekapcsoltam a Thonnyt és rebooto... (2023.04.02. 08:40) Raspberry Pico és a LAN (W5100S-EVB-Pico)
  • krump_lee: Kedves eNeS! ESP8266 tasmota-val szenvedek, hiemq kapcsolat sehogy nem jön össze, sehol nem talál... (2023.04.02. 08:31) Tasmota szkriptek
  • Utolsó 20

Címkék

433mhz (12) alkatrész (22) alternatív kapcsoló (2) amg8833 (1) analóg (2) android (1) arduinoeasy (5) audio (1) automatizálás (3) bemenet (3) bk7231n (1) ble (1) blitzwolf (4) bluetooth (9) bridge (2) camhi (2) csináld magad (22) dimmer (1) diy (28) do-it-yourself (27) domoticz (11) ds18b20 (1) ebay (3) érintő (2) érintőkapcsoló (7) érzékelő (11) esp-01 (2) esp32 (11) esp8266 (21) espeasy (2) espurna (1) esp projekt (18) Eview7 (1) ewelink (1) feldolgozó (1) felhő (1) fényérzékelő (1) firmware (7) flame detector (1) fogyasztásmérő (5) ftdi (1) füstérzékelő (1) gázérzékelő (1) gpio (1) hang (4) hangjelző (1) hőmérséklet (22) https (1) ikea (1) impulzus relé (1) izzó (2) javascript (1) jelenlétérzékelő (3) kamera (18) keresztkapcsoló (1) kézmozdulat (1) kijelző (3) kimenet (21) konnektor (8) lan (9) lángérzékelő (2) led (3) linux (4) logic level converter (1) lua (1) lux (1) maple mini (2) mcu (3) micropython (1) mikrovezérlő (2) milkv (1) mobil (1) mosfet (1) mozgás (5) mpyeasy (4) mq-2 (2) mqtt (3) működtető rendszer (5) multiroom (1) nedvesség (1) neo (1) neopixel (1) Node-RED (1) nvr (4) nyitás (7) okosház (4) okosizzó (3) okosotthon (8) oled (1) onvif (8) openbeken (1) opencv (1) openwrt (4) orange pi (4) páratartalom (6) php (1) pico (1) pi pico (2) poe (1) programozás (9) projekt (25) proximity olvasó (1) python (2) raspberry (14) raspberry projekt (6) raspbian (1) reed (1) relé (27) rf (2) rgb (6) rock pi (1) rögzítő (2) rp2 (1) rpieasy (1) rtc (1) shelly (24) smartwise (1) solid state relay (1) sonoff (20) SonOTA (1) soros (1) ssl (1) ssr (1) stm32 (4) szenzor (11) szilárdtest relé (1) szintillesztő (2) sziréna (1) szkript (3) szünetmentesítés (4) t1 (1) tasmota (8) távirányító (3) Telegram (1) termékteszt (85) termosztát (2) touch (2) ups (5) usb (7) usb hub (1) valós idejű óra (1) vezérlések (20) vezérlő (5) világítás (5) villanykapcsoló (12) webkamera (1) wiegand (1) wifi (32) ws2812 (1) xiaomi (5) xm (4) xmeye (4) yoosee (1) zigbee (16) zwave (3) Címkefelhő
süti beállítások módosítása