Dashticz - Show your dashboard and how-to's!

[Luppie]

I also disabled block by block starting in column 2 until I ended up in column1.
Only if both columns are disabled I have a low CPU consumption.

[astrapowerrr]

This is mine:

config.js

Spoiler: show

var _LANGUAGE = 'nl_NL';
var _HOST_DOMOTICZ = 'http://192.168.x.x:8080';
var _DOMOTICZ_REFRESH = 5; //in seconds
var _HOST_ZIGGO_HORIZON = 'http://192.168.x.x/dasboard/switch_horizon.php';
var _APIKEY_WUNDERGROUND = 'xxx';
var _WEATHER_CITY = 'Sneek';
var _WEATHER_CITYNAME = ''; //show a different city name, leave empty if same as _WEATHER_CITY
var _WEATHER_COUNTRY = 'NL';
var _USE_AUTO_POSITIONING = false; //don't want to configure positions, use auto positioning
var _USE_FAVORITES = false; //only used when using auto positioning
var _HIDE_SECONDS_IN_CLOCK = true; //do not show the seconds in the clock
var _HIDE_MEDIAPLAYER_WHEN_OFF = false; //when you have a mediaplayer connected, hide it if nothing is playing
var _NEWS_RSSFEED = 'https://crossorigin.me/http://feeds.fee ... ers/nieuws';
var _USE_FAHRENHEIT = false;
var _USE_BEAUFORT = true; //Bft instead of m/s
var _TRANSLATE_SPEED = false; //windspeed, north northwest instead of NNW
var _STANDBY_AFTER_MINUTES = 5;
var _SCROLL_NEWS_AFTER = 7000; //milliseconds, so 7000 is 7 seconds
var _SHOW_LASTUPDATE = false;
var _LASTUPDATE_FORMAT = 'DD-MM-YY HH:mm';
var _SCREENSLIDER_EFFECT = 'slide'; //'slide' or 'fade' or 'cube' or 'coverflow' or 'flip'

var _APIKEY_MAPS = 'xxx';
var _MAPS_LATITUDE = xxx;
var _MAPS_LONGITUDE = xxx;
var _MAPS_ZOOMLEVEL = 8;

var buttons = {}
buttons.buienradar = {width:12, isimage:true, image: 'http://api.buienradar.nl/image/1.0/Rada ... =445&h=296', url: 'http://www.weer.nl/verwachting/nederland/son/189656/'}
buttons.radio = {width:12, image: 'img/radio_on.png', title: 'Radio', url: 'http://nederland.fm'}
buttons.nunl = {width:12, icon: 'fa-newspaper-o', title: 'Nu.nl', url: 'http://www.nu.nl'}

/*
CUSTOM POSITIONING:

*/
var blocks = {}

blocks[314] = {}
blocks[314]['width'] = 3;
blocks[322] = {}
blocks[322]['width'] = 3;
blocks[348] = {}
blocks[348]['width'] = 6;
blocks[349] = {}
blocks[349]['width'] = 6;
blocks[350] = {}
blocks[350]['width'] = 6;

blocks[334] = {}
blocks[334]['width'] = 3;
blocks[335] = {}
blocks[335]['width'] = 3;
blocks[336] = {}
blocks[336]['width'] = 3;
blocks[337] = {}
blocks[337]['width'] = 3;

blocks[17] = {}
blocks[17]['width'] = 3;
blocks[23] = {}
blocks[23]['width'] = 3;
blocks[231] = {}
blocks[231]['width'] = 3;
blocks[242] = {}
blocks[242]['width'] = 3;

blocks[507] = {}
blocks[507]['icon'] = 'fa-moon-o';
blocks[26] = {}
blocks[26]['icon'] = 'fa-home';
blocks[26]['width'] = 3;
blocks[511] = {}
blocks[511]['icon'] = 'fa-apple';
blocks[511]['width'] = 3;
blocks[513] = {}
blocks[513]['icon'] = 'fa-android';
blocks[513]['width'] = 3;
blocks[472] = {}
blocks[472]['icon'] = 'fa-tv';
blocks[472]['width'] = 3;

blocks['blocktitle_1'] = {}
blocks['blocktitle_1']['type'] = 'blocktitle';
blocks['blocktitle_1']['title'] = 'Schakelaars';

blocks['blocktitle_2'] = {}
blocks['blocktitle_2']['type'] = 'blocktitle';
blocks['blocktitle_2']['title'] = 'Toon';

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

blocks['blocktitle_4'] = {}
blocks['blocktitle_4']['type'] = 'blocktitle';
blocks['blocktitle_4']['title'] = 'HDD verbruik';

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

var columns = {}

columns[1] = {}
columns[1]['blocks'] = ['blocktitle_1',348,349,350,314,322,'blocktitle_2',336,335,334,337,340,341,'blocktitle_4',17,23,231,242]
columns[1]['width'] = 5;

columns[2] = {}
columns[2]['blocks'] = ['clock','sunrise','horizon',buttons.buienradar,'trafficmap','news']
columns[2]['width'] = 2;

columns[3] = {}
columns[3]['blocks'] = ['blocktitle_5','weather',481,482,483,11,'blocktitle_3',456,459,507,26,511,513,472]
columns[3]['width'] = 5;

//var columns_standby = {}
//columns_standby[1] = {}
//columns_standby[1]['blocks'] = ['clock','currentweather_big','weather']
//columns_standby[1]['width'] = 12;

var screens = {}
screens[1] = {}
screens[1]['background'] = 'bg6.jpg';
//screens[1]['background_morning'] = 'bg_morning.jpg';
//screens[1]['background_noon'] = 'bg_noon.jpg';
//screens[1]['background_afternoon'] = 'bg_afternoon.jpg';
//screens[1]['background_night'] = 'bg_night.jpg';
screens[1]['columns'] = [1,2,3]

dashboard.jpg

If I use the idx of my toon Electra I get 5 buttons and like you have.
How do you select what you want on your dashboard and what not.
Now I get energie verbruik ,energie verbruik vandaag, energie verbruik totaal,
P1 totaal,p2 totaal.
I only want energie vandaag. And maybe in graph to.

How did you filter? Or did you do this in domoticz?

Greets marco

[EdwinK]

You can use 'idx_1' to 'idx_5' to select your buttons

[astrapowerrr]

You can use 'idx_1' to 'idx_5' to select your buttons

Thanks. That did the trick.
Do you also maybe know how to make a graph of verbruik vandaag?

I now use 'graph_idx' but that gives me a graph with totaal verbruik as topic and the graph gives me all the 5 idxes in one graph. I would like my p1 low and and my p1 high in one graph.
One single line that starts with the low en follows with the high...

My graph now...

[Luppie]

Is there a way to limit the amount of API calls to Wunderground ?
Right now I have 760 API calls/day, that is an average of every 2 minutes a call, while my WU developer license only allows 500 API calls.

Any ideas on this one ?
Every day that I'm using Dashticz now, it costst me one Raindrop. Resulting that I have to stop my weather forcast within 25 days



BTW, Weather Underground only reports when I exceed the 500 API calls, not that it is exceding with +/- 750 ~ 800 API Calls a day.
Is there a way to limit the amount of API calls to Wunderground ?

[Luppie]

Any help on this one is appreciated, still 20 day's left for me.

As a workaround I have enabled the standby-screen where I dont use any weather underground widgets, so the API calls now are limited to 440 calls/day.

I also have a new issue with showing my calendar. The dashboard loads and shows the calendar button. When pressed an empty (white) popup shows.
In developer-mode I see the following error:

Code: Select all

(index):1 Refused to display 'https://calendar.google.com/calendar/r' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

[yfands]

Hello,

Been a while that I updated Dashticz, I still run a version from november 2017, but it suits me and made some modifications to my liking.
But exploring the latest beta versions I see some nice additions and bugfixes. Downloaded beta version 2.3.5.

Here is my problem:
In my old version if I look at my temperature/hygro values I could see the values/last update time change every 40 seconds. (set in config.js domoticz 40 dashticz with a value of 60) even if the temp/hygro values remain the same the last update time will change..

In version 2.3.5 I dont see anything happen no change in values/ last update time, no page refresh at all!!. The settings in config.js are the same as in my old version. The only refresh of the page I get is if I 'manualy' flip a switch. The entire page will be updated and so of course also the temp/hygro value (if changed) and last update time..

What do/did I miss ?, I cant find anything relevant on the forum or the wiki,

Regards
Frank

[Lokonli]

Hi Frank, yfands

For me it's running fine with latest beta (I've installed yesterday's version).

[yfands]

Hai Lokonli,

Thanks for the reply, I figured it was not the beta version. But even not even on linux or windows platform the page would refresh.
attached is the most basic version of the config.js Get al the sensors from Domoticz and display them.
Maybe you can take a look and see something I missed.

Code: Select all

var config = {}
config['domoticz_ip'] = 'http://xxx.xxx.xxx.xxx:xxxx';
config['user_name'] = '';
config['pass_word'] = '';
config['app_title'] = 'Dashticz';
config['room_plan'] = '0';
config['domoticz_refresh'] = '45';
config['dashticz_refresh'] = '120';
config['default_news_url'] = 'http://www.nu.nl/rss/algemeen';
config['news_scroll_after'] = '7';
config['theme'] = 'default';
config['background_image'] = 'img/bg2.jpg';
config['standby_after'] = '0';
config['auto_swipe_back_to'] = 1;
config['auto_swipe_back_after'] = '10';
config['auto_slide_pages'] = '';
config['slide_effect'] = 'slide';
config['standard_graph'] = 'hours';
config['language'] = 'en_US';
config['timeformat'] = 'DD-MM-YY HH:mm';
config['calendarformat'] = 'dd DD.MM HH:mm';
config['calendarlanguage'] = 'en_US';
config['calendarurl'] = '';
config['boss_stationclock'] = 'RedBoss';
config['gm_api'] = '';
config['gm_zoomlevel'] = '';
config['gm_latitude'] = '';
config['gm_longitude'] = '';
config['speak_lang'] = 'en-US';
config['wu_api'] = '';
config['wu_city'] = 'Amsterdam';
config['wu_name'] = '';
config['wu_country'] = 'NL';
config['idx_moonpicture'] = '';
config['switch_horizon'] = '';
config['host_nzbget'] = '';
config['spot_clientid'] = '';
config['sonarr_url'] = '';
config['sonarr_apikey'] = '';
config['sonarr_maxitems'] = '';
config['garbage_company'] = '';
config['garbage_icalurl'] = '';
config['google_api_key'] = '';
config['garbage_calendar_id'] = '';
config['garbage_zipcode'] = '';
config['garbage_street'] = '';
config['garbage_housenumber'] = '';
config['garbage_housenumberadd'] = '';
config['garbage_maxitems'] = '';
config['garbage_width'] = '';
config['loginEnabled'] = '0';
config['no_rgb'] = '0';
config['auto_positioning'] = 1;
config['use_favorites'] = '0';
config['disable_googleanalytics'] = 1;
config['last_update'] = 1;
config['hide_topbar'] = '0';
config['edit_mode'] = '0';
config['hide_seconds'] = '0';
config['hide_seconds_stationclock'] = '0';
config['use_fahrenheit'] = '0';
config['use_beaufort'] = '0';
config['translate_windspeed'] = 1;
config['static_weathericons'] = '0';
config['hide_mediaplayer'] = '0';
config['garbage_hideicon'] = '0';
config['garbage_icon_use_colors'] = 1;
config['garbage_use_colors'] = '0';
config['garbage_use_names'] = '0';
config['garbage_use_cors_prefix'] = 1;

[Lokonli]

Hai Lokonli,

Thanks for the reply, I figured it was not the beta version. But even not even on linux or windows platform the page would refresh.
attached is the most basic version of the config.js Get al the sensors from Domoticz and display them.
Maybe you can take a look and see something I missed.

Code: Select all

var config = {}
config['domoticz_ip'] = 'http://xxx.xxx.xxx.xxx:xxxx';
config['user_name'] = '';
config['pass_word'] = '';
config['app_title'] = 'Dashticz';
config['room_plan'] = '0';
config['domoticz_refresh'] = '45';
config['dashticz_refresh'] = '120';
config['default_news_url'] = 'http://www.nu.nl/rss/algemeen';
config['news_scroll_after'] = '7';
config['theme'] = 'default';
config['background_image'] = 'img/bg2.jpg';
config['standby_after'] = '0';
config['auto_swipe_back_to'] = 1;
config['auto_swipe_back_after'] = '10';
config['auto_slide_pages'] = '';
config['slide_effect'] = 'slide';
config['standard_graph'] = 'hours';
config['language'] = 'en_US';
config['timeformat'] = 'DD-MM-YY HH:mm';
config['calendarformat'] = 'dd DD.MM HH:mm';
config['calendarlanguage'] = 'en_US';
config['calendarurl'] = '';
config['boss_stationclock'] = 'RedBoss';
config['gm_api'] = '';
config['gm_zoomlevel'] = '';
config['gm_latitude'] = '';
config['gm_longitude'] = '';
config['speak_lang'] = 'en-US';
config['wu_api'] = '';
config['wu_city'] = 'Amsterdam';
config['wu_name'] = '';
config['wu_country'] = 'NL';
config['idx_moonpicture'] = '';
config['switch_horizon'] = '';
config['host_nzbget'] = '';
config['spot_clientid'] = '';
config['sonarr_url'] = '';
config['sonarr_apikey'] = '';
config['sonarr_maxitems'] = '';
config['garbage_company'] = '';
config['garbage_icalurl'] = '';
config['google_api_key'] = '';
config['garbage_calendar_id'] = '';
config['garbage_zipcode'] = '';
config['garbage_street'] = '';
config['garbage_housenumber'] = '';
config['garbage_housenumberadd'] = '';
config['garbage_maxitems'] = '';
config['garbage_width'] = '';
config['loginEnabled'] = '0';
config['no_rgb'] = '0';
config['auto_positioning'] = 1;
config['use_favorites'] = '0';
config['disable_googleanalytics'] = 1;
config['last_update'] = 1;
config['hide_topbar'] = '0';
config['edit_mode'] = '0';
config['hide_seconds'] = '0';
config['hide_seconds_stationclock'] = '0';
config['use_fahrenheit'] = '0';
config['use_beaufort'] = '0';
config['translate_windspeed'] = 1;
config['static_weathericons'] = '0';
config['hide_mediaplayer'] = '0';
config['garbage_hideicon'] = '0';
config['garbage_icon_use_colors'] = 1;
config['garbage_use_colors'] = '0';
config['garbage_use_names'] = '0';
config['garbage_use_cors_prefix'] = 1;

Change
config['edit_mode'] = '0';
to
config['edit_mode'] = 0;


I'm not sure this is the intended behavior. Probably the other settings have to be verified as well ...

[yfands]

Hai Lokonli,

Spot on, config['edit_mode'] = 0 is correct and the page will refresh.

There is an error in the settings mode. If you save the config file via settingsmode config['edit_mode'] will be saved as '0' wich is a fault.

Also any streetname (config['garbage_street'] = 1blablabla) starting with a 1 like mine is treated as a number and the loading of the config will fail.

Thanks..

[rldn]

Can anyone explain how to change the popup size to fit the content? For example the security panel page is too wide and the height isnt big enough. How can i make this dynamic change for the content?

[Danigympie]

Thsi is how i made the dash. There are multiple slide witch are connected thrue a button. So swipping is possible but you can hit the burron and go straight to it.
1) 2 buttons 1 for home back to begin slide and the other one to set the alarm
2) If the alarm is on er off
3) Who is home is with ping to the smartphone. Red not home, green home or withing range of the router.
4) the buttons witch willl direct to that slide
5) Air quality (dutch only)
6) 2 Webcam small
7) Temp in dioffrent rooms and outside. Chage color when it get's a pre defined temperatuur. Green, orange or red

Home.jpg (291.77 KiB) Viewed 3839 times

When you push the button verlichting (lightning)

Verlichting.jpg (267.11 KiB) Viewed 3839 times

Config.js

Spoiler: show

var config = {}
config['theme'] = '';
config['domoticz_ip'] = '';
config['user_name'] = '';
config['pass_word'] = '';
config['loginEnabled'] = 0;
config['app_title'] = ';
config['domoticz_refresh'] = '4';
config['dashticz_refresh'] = '60';
config['default_news_url'] = 'http://www.nu.nl/rss/algemeen';
config['news_scroll_after'] = '7';
config['standby_after'] = 0;
config['auto_swipe_back_to'] = 1;
config['auto_swipe_back_after'] = '30';
config['auto_slide_pages'] = 0;
config['slide_effect'] = 'flip';
config['standard_graph'] = 'month';
config['language'] = 'nl_NL';
config['timeformat'] = 'DD-MM-YY HH:mm';
config['calendarformat'] = 'dd DD.MM HH:mm';
config['calendarlanguage'] = 'nl_NL';
config['calendarurl'] = 0;
config['boss_stationclock'] = 'RedBoss';
config['gm_api'] = '';
config['gm_zoomlevel'] = 15;
config['gm_latitude'] = ;
config['gm_longitude'] = ;
config['wu_api'] = '';
config['wu_city'] = '';
config['wu_name'] = '';
config['wu_country'] = 'NL';
config['idx_moonpicture'] = 0;
config['switch_horizon'] = 1;
config['host_nzbget'] = '';
config['sonarr_url'] = '';
config['sonarr_apikey'] = '';
config['spot_clientid'] = '';
config['selector_instead_of_buttons'] = 0;
config['auto_positioning'] = 0;
config['use_favorites'] = 1;
config['last_update'] = 0;
config['hide_topbar'] = 1;
config['hide_seconds'] = 1;
config['hide_seconds_stationclock'] = 0;
config['use_fahrenheit'] = 0;
config['use_beaufort'] = 0;
config['translate_windspeed'] = 1;
config['static_weathericons'] = 1;
config['hide_mediaplayer'] = 0;
config['settings_icons'] = ["settings", "fullscreen"];
config['shortdate'] = 'D MMM';
config['longdate'] = 'D MMMM YYYY';
config['shorttime'] = 'HH:mm';
config['longtime'] = 'HH:mm:ss';
config['weekday'] = 'dddd';
config['no_rgb'] = 1;
config['standby_call_url'] = '' ;
config['standby_call_url_on_end'] = '' ;
config['longfonds_zipcode'] = '';
config['longfonds_housenumber'] = '';


//Ziggo horizon
var _HOST_ZIGGO_HORIZON = '';

//Trash options
var trashcan = {}
trashcan.afvalwijzer = { trashapp: 'mijnafvalwijzer', maxitems: 10, width:12, zipcode:'', housenumber:'' }
trashcan.recyclemanager = { trashapp: 'recyclemanager', width:12, zipcode:'', housenumber:'' }

//info bus 9292ov
var publictransport = {}
publictransport.ovinfobus= { show_via: false, station: '', provider: '9292-bus', icon: 'bus', width:6, results: 10 }
publictransport.ovinfotrein= { show_via: false, station: '', provider: '9292-train', icon: 'train', width:6, results: 10}

//treinen vertrek informatie webcam Valtho
var frames = {}
frames.treinen = {refreshiframe:30000,height:800,frameurl:"https://www.rijdendetreinen.nl/vertrekt ... ",width:10}
frames.valtho = {refreshiframe:30000,height:195,frameurl:"https://www.skaping.com/valthorens/lamaison",width:5}
frames.weer = {refreshiframe:30000,height:700,frameurl:"https://weerdata.weerslag.nl/image/1.0/ ... ",width:10}


//TV gids
var tvguide = {}
tvguide.dutch = { key:'dutch', icon: 'fa-television', width:12, channels: [1,2,3,4,31,36,460,46,37,34,92,466], maxitems: 40 }


var calendars = {}
//calendars.f1 = { maxitems: 5, icalurl: 'https://www.gpupdate.net/en/calendar/27 ... -calendar/' }
calendars.f1 = {maxitems: 15, icon: '' , image: 'F1.png', icalurl:'webcal://www.gpupdate.net/nl/kalender/273/formul ... lendar.ics'}
calendars.google = {maxitems: 15, icon: 'fa-mars', image:'', icalurl:''}

//Stream players voor radio stations
var _STREAMPLAYER_TRACKS = [
{"track":1,"name":"Q-music","file":"http://icecast-qmusic.cdp.triple-it.nl/ ... ive_96.mp3"},
{"track":2,"name":"Radio 2","file":"http://icecast.omroep.nl/radio2-bb-mp3"},
{"track":3,"name":"Radio 538","file":"http://18973.live.streamtheworld.com/RADIO538.mp3"},
{"track":4,"name":"Slam!","file":"http://stream.radiocorp.nl/web10_mp3"},
{"track":5,"name":"100%NL","file":"http://stream.100p.nl/100pctnl.mp3"},
];

//Buttons hier maak je de knoppen met link aan OOK voor camera links
var buttons = {}
buttons.buienradar = {width:12, isimage:true, image: 'https://api.buienradar.nl/image/1.0/Rad ... =0&forc=48', url: 'https://www.weeronline.nl/Europa/Nederland/'}
buttons.calendar = {width:4, icon: 'fa-calendar', title: 'Kalender', url: 'https://www.formula1.com/sp/static/f1/2 ... r/ical.ics'}
buttons.radio = {width:4, image: 'img/radio_on.png', title: 'Radio', url: 'http://nederland.fm'}
buttons.nunl = {width:4, icon: 'fa-newspaper-o', title: 'Nu.nl', url: 'http://www.nu.nl'}
buttons.nzbget = {width:4, icon: 'fa-download', title: 'NZBget', url: ''}
buttons.moon= {width:12, isimage:true, refreshimage:60000, image: 'moon'}
buttons.webcam1 = {width:6, isimage:true, image: '', url: ''}
buttons.webcam2 = {width:6, isimage:true, image: '', url: ''}
buttons.alarm = {key:'alarm', width:12, image: 'img/alarm2.png', title: 'Security Panel', url: 'secpanel.html'}
buttons.sonarr = {width:4, image: 'img/sonarr.png', title: 'Sonarr' ,slide:10 }
buttons.hoofdmenu = {width:12, image: 'img/main.png', title: 'Hoofdmenu' ,slide:0 }
buttons.huismodus = {width:4, image: 'img/home-icon.png', title: 'Huismodus' ,slide:1 }
buttons.trein = {width:4, image: 'img/trein.png', title: 'Trein',slide: 2}
buttons.verkeer = {width:4, image: 'img/verkeer.png', title: 'Verkeer' ,slide:3 }
buttons.verlichting = {width:4, image: 'img/Verlichting.png', title: 'Verlichting',slide: 4}
buttons.temperatuur = {width:4, image: 'img/temperatuur.png', title: 'Temperatuur' ,slide:5 }
buttons.webcam = {width:4, image: 'img/webcam.png', title: 'Webcam',slide: 6}
buttons.kalender = {width:4, image: 'img/calendar.png', title: 'Kalender' ,slide:7 }
buttons.tvgids = {width:4, image: 'img/tvgids2.png', title: 'TV Gids',slide: 8}
buttons.weer = {width:4, image: 'img/weer.png', title: 'Weer' ,slide:9 }

var blocks = {}
//Open camera als er iemand aan de deur staat
blocks[75] = {}
blocks[75]['playsound'] = 'sounds/doorbell.mp3';
blocks[75]['openpopup'] = {}
blocks[75]['openpopup']['url'] = '';
blocks[75]['openpopup']['auto_close'] = 60; //seconds


///////////////////////// Harmony /////////////////////////////////////

blocks[1] = {} //all uit harmony
blocks[1]['width'] = 3;
blocks[1]['icon'] = 'fa-power-off';
blocks[1]['hide_data'] = true;
blocks[1]['show_lastupdate'] = false;
blocks[1]['speakOn'] = 'Device is on' //speak text when device changes to On
blocks[1]['speakOff'] = 'Device is off' //speak text when device changes to Off

blocks[2] = {} //tv aan harmony
blocks[2]['width'] = 3;
blocks[2]['icon'] = 'fa-tv';
blocks[2]['hide_data'] = true;
blocks[2]['speakOn'] = 'Device is on' //speak text when device changes to On
blocks[2]['speakOff'] = 'Device is off' //speak text when device changes to Off

blocks[3] = {} //stream radio harmony
blocks[3]['width'] = 3;
blocks[3]['icon'] = 'fa-volume-down';
blocks[3]['hide_data'] = true;

blocks[4] = {} //Smart tv kijken harmony
blocks[4]['width'] = 3;
blocks[4]['icon'] = 'fa-android';
blocks[4]['hide_data'] = true;

blocks[5] = {} //raspberry pi harmony
blocks[5]['width'] = 3;
blocks[5]['icon'] = 'fa-codiepie';
blocks[5]['hide_data'] = true;

blocks[6] = {} //Computer harmony
blocks[6]['width'] = 3;
blocks[6]['icon'] = 'fa-desktop';
blocks[6]['hide_data'] = true;

blocks[7] = {} // radio ziggo harmony
blocks[7]['width'] = 3;
blocks[7]['icon'] = 'fa-volume-down';
blocks[7]['hide_data'] = true;

blocks[8] = {} //cast no tv harmony
blocks[8]['width'] = 3;
blocks[8]['icon'] = 'fa-chrome';
blocks[8]['hide_data'] = true;

blocks[9] = {} //radio ether harmony
blocks[9]['width'] = 3;
blocks[9]['icon'] = 'fa-volume-down';
blocks[9]['hide_data'] = true;

///////////////////////// ONKYO /////////////////////////////////////

blocks[10] = {} //Onkyo Master power
blocks[10]['width'] = 6;
blocks[10]['icon'] = 'fa-tv';

blocks[11] = {} //Onkyo volume master
blocks[11]['width'] = 12;
blocks[11]['icon'] = 'fa-tv';

///////////////////////// KAKU /////////////////////////////////////

blocks[110] = {} //Kaku Lamp dressoir
blocks[110]['width'] = 12
blocks[110]['hide_data'] = true;

blocks[15] = {} //Kaku Led lamp
blocks[15]['width'] = 3;
blocks[15]['hide_data'] = true;

blocks[17] = {} //Kaku Lamp bank
blocks[17]['width'] = 3;
blocks[17]['hide_data'] = true;

blocks[18] = {} //Kaku Eettafel lamp
blocks[18]['width'] = 12;
blocks[18]['hide_data'] = true;

blocks[19] = {} //Kaku Led TV
blocks[19]['width'] = 3;
blocks[19]['hide_data'] = true;

blocks[41] = {} //Kaku Lampen aan
blocks[41]['width'] = 3;
blocks[41]['hide_data'] = true;

blocks[57] = {} //Kaku Woonkamer
blocks[57]['width'] = 12;
blocks[57]['hide_data'] = true;

///////////////////////// LED Strip /////////////////////////////////////

blocks[61] = {} //Ledstrip 1
blocks[61]['width'] = 12;
blocks[61]['title'] = 'Ledstrip 1'
blocks[61]['hide_data'] = true;

blocks[68] = {} //Ledstrip 2
blocks[68]['width'] = 12;
blocks[68]['title'] = 'Ledstrip 2'
blocks[68]['hide_data'] = true;

///////////////////////// Schakel knoppen /////////////////////////////////////

blocks[49] = {} //Avond
blocks[49]['width'] = 3;
blocks[49]['hide_data'] = true;
blocks[49]['show_lastupdate'] = false;

blocks[59] = {} //Naar bed
blocks[59]['width'] = 3;
blocks[59]['image'] = 'sleep.png';
blocks[59]['hide_data'] = true;
blocks[59]['show_lastupdate'] = false;
blocks[59]['title'] = 'Naar bed'

///////////////////////// Temperatuur /////////////////////////////////////

blocks[60] = {} //Alecto Temp
blocks[60]['width'] = 3;
blocks[60]['title'] = 'Temp Buiten'

blocks[64] = {} //Temp Baby Kamer
blocks[64]['width'] = 3;
blocks[64]['title'] = 'Baby kamer'
blocks[64]['icon'] = 'fa-thermometer-half';
blocks[64]['switch'] = true;

blocks[65] = {} //Temp Slaapkamer
blocks[65]['width'] = 3;
blocks[65]['title'] = 'Slaapkamer'

blocks[66] = {} //Temp Badkamer
blocks[66]['width'] = 3;
blocks[66]['title'] = 'Badkamer'

blocks[76] = {} //Temperatuur + Luchtvochtigheid + Barometer
blocks[76]['width'] = 3;
blocks[76]['title'] = 'THB'

blocks[77] = {} //Windsnelheid
blocks[77]['width'] = 3;
blocks[77]['title'] = 'Windsnelheid'

blocks[79] = {} //Zicht buiten
blocks[79]['width'] = 3;
blocks[79]['title'] = 'Zicht'

blocks[93] = {} //UV Zonkracht
blocks[93]['width'] = 12;
blocks[93]['title'] = 'Zonkracht'
blocks[93]['switch'] = true;

///////////////////////// Wie is er thuis /////////////////////////////////////

blocks[48] = {} // thuis ping
blocks[48]['width'] = 12;
blocks[48]['title'] = 'Male';
blocks[48]['icon'] = 'fa-mobile';
blocks[48]['hide_data'] = false;
blocks[48]['show_lastupdate'] = false;

blocks[43] = {} // thuis ping
blocks[43]['width'] = 12;
blocks[43]['title'] = 'Female';
blocks[43]['icon'] = 'fa-mobile';
blocks[43]['hide_data'] = false;
blocks[43]['show_lastupdate'] = false;

///////////////////////// Verkeer /////////////////////////////////////

blocks['trafficmap'] = {} //trafficmap
blocks['trafficmap']['width'] = 4;

///////////////////////// Nieuws /////////////////////////////////////

blocks['news_2'] = {}
blocks['news_2']['feed'] = 'https://cors-anywhere.herokuapp.com/htt ... s/algemeen';

blocks['news_tv'] = {} // TVGIDS
blocks['news_tv']['feed'] = 'https://cors-anywhere.herokuapp.com/htt ... nieuws.rss';


blocks[106] = {}
blocks[106]['hide_stop'] = true;

blocks[102] = {} //Alarm
blocks[102]['width'] = 12;
blocks[102]['title'] = 'Alarm status';
blocks[102]['icon'] = 'fa-bell';
blocks[102]['hide_data'] = false;


blocks[114] = {} //Kodi Touch
blocks[114]['width'] = 12;
blocks[114]['title'] = 'Alarm status';
blocks[114]['icon'] = 'fa-bell';
blocks[114]['hide_data'] = false;


///////////////////////// Columns /////////////////////////////////////

var columns = {}

//Main scherm in alle screens toegevoegd
columns[1] ={}
columns[1]['blocks']=[buttons.hoofdmenu,buttons.alarm,102,'clock','sunrise',buttons.buienradar,43,48]
columns[1]['width']=2;

//Buttons naar screens
columns[2] = {}
columns[2]['blocks'] = [buttons.sonarr, buttons.trein, buttons.verkeer, buttons.verlichting, buttons.temperatuur, buttons.webcam, buttons.kalender, buttons.tvgids, buttons.weer, 'currentweather_big', 'longfonds', buttons.webcam1, buttons.webcam2]
columns[2]['width'] = 5;

//Screen trein
columns[3] = {}
columns[3]['blocks'] = [frames.treinen]
columns[3]['width'] = 10;

//Screen verkeer
columns[4] = {}
columns[4]['blocks'] = [maps.]
columns[4]['width'] = 10;

//Screen verlichting
columns[5] = {}
columns[5]['blocks'] = [1,2,3,4,5,6,7,8,9,28,15,17,29,19,110,18,57,61,68,59,49]
columns[5]['width'] = 10;

//Screen temperatuur
columns[6] = {}
columns[6]['blocks'] = ['64_1','65_1','66_1','60_1','64_2','65_2','66_2','60_2',76,77,79]
columns[6]['width'] = 10;

//Screen webcam
columns[7] = {}
columns[7]['blocks'] = [buttons.webcam2,buttons.webcam1]
columns[7]['width'] = 10;

//Screen Calender
columns[8] = {}
columns[8]['blocks'] = [calendars.f1,calendars.google]
columns[8]['width'] = 10;

//Quick knoppen
columns[9] = {}
columns[9]['blocks'] = [1,2,7,9,49,41,59,19,15,110,57,'64_1','65_1','66_1','60_1',publictransport.ovinfobus,publictransport.ovinfotrein]
columns[9]['width'] = 5;

//TV GIDS
columns[10] = {}
columns[10]['blocks'] = [tvguide.dutch,'news_tv'];
columns[10]['width'] = 10;

//Weer
columns[11] = {}
columns[11]['blocks'] = [frames.weer];
columns[11]['width'] = 10;

//sonarr
columns[12] = {}
columns[12]['blocks'] = ['sonarr'];
columns[12]['width'] = 10;

///////////////////////////////STANDBY SCHERM////////////////////////////////
var columns_standby = {}

columns_standby[1] = {}
columns_standby[1]['blocks'] = ['clock','currentweather_big','weather',buttons.webcam2,buttons.webcam1] //specify blocks for the standby mode
columns_standby[1]['width'] = 12;


///////////////////////////////SCHERMEN//////////////////////////////

var screens = {}
screens['default'] = {}
screens['default']['maxwidth'] = 1920;
screens['default']['maxheight'] = 1080;

screens['default'][1] = {}
screens['default'][1]['background'] = 'bg1.jpg';
screens['default'][1]['background_morning'] = 'bg_morning_winter.jpg';
screens['default'][1]['background_noon'] = 'bg_noon_winter.jpg';
screens['default'][1]['background_afternoon'] = 'bg_afternoon_winter.jpg';
screens['default'][1]['background_night'] = 'bg_night_winter.jpg';
screens['default'][1]['columns'] = [1,2,9]

/*trein*/
screens['default'][2] = {}
screens['default'][2]['background'] = 'bg1.jpg';
screens['default'][2]['background_morning'] = 'bg_morning_winter.jpg';
screens['default'][2]['background_noon'] = 'bg_noon_winter.jpg';
screens['default'][2]['background_afternoon'] = 'bg_afternoon_winter.jpg';
screens['default'][2]['background_night'] = 'bg_night_winter.jpg';
screens['default'][2]['columns'] = [1,3]

/*verkeer*/
screens['default'][3] = {}
screens['default'][3]['background'] = 'bg1.jpg';
screens['default'][3]['background_morning'] = 'bg_morning_winter.jpg';
screens['default'][3]['background_noon'] = 'bg_noon_winter.jpg';
screens['default'][3]['background_afternoon'] = 'bg_afternoon_winter.jpg';
screens['default'][3]['background_night'] = 'bg_night_winter.jpg';
screens['default'][3]['columns'] = [1,4]

/*verlichting*/
screens['default'][4] = {}
screens['default'][4]['background'] = 'bg1.jpg';
screens['default'][4]['background_morning'] = 'bg_morning_winter.jpg';
screens['default'][4]['background_noon'] = 'bg_noon_winter.jpg';
screens['default'][4]['background_afternoon'] = 'bg_afternoon_winter.jpg';
screens['default'][4]['background_night'] = 'bg_night_winter.jpg';
screens['default'][4]['columns'] = [1,5]

/*temperatuur*/
screens['default'][5] = {}
screens['default'][5]['background'] = 'bg1.jpg';
screens['default'][5]['background_morning'] = 'bg_morning_winter.jpg';
screens['default'][5]['background_noon'] = 'bg_noon_winter.jpg';
screens['default'][5]['background_afternoon'] = 'bg_afternoon_winter.jpg';
screens['default'][5]['background_night'] = 'bg_night_winter.jpg';
screens['default'][5]['columns'] = [1,6]

/*webcam*/
screens['default'][6] = {}
screens['default'][6]['background'] = 'bg1.jpg';
screens['default'][6]['background_morning'] = 'bg_morning_winter.jpg';
screens['default'][6]['background_noon'] = 'bg_noon_winter.jpg';
screens['default'][6]['background_afternoon'] = 'bg_afternoon_winter.jpg';
screens['default'][6]['background_night'] = 'bg_night_winter.jpg';
screens['default'][6]['columns'] = [1,7]

/*kalender*/
screens['default'][7] = {}
screens['default'][7]['background'] = 'bg1.jpg';
screens['default'][7]['background_morning'] = 'bg_morning_winter.jpg';
screens['default'][7]['background_noon'] = 'bg_noon_winter.jpg';
screens['default'][7]['background_afternoon'] = 'bg_afternoon_winter.jpg';
screens['default'][7]['background_night'] = 'bg_night_winter.jpg';
screens['default'][7]['columns'] = [1,8]

/*tv gids */
screens['default'][8] = {}
screens['default'][8]['background'] = 'bg1.jpg';
screens['default'][8]['background_morning'] = 'bg_morning_winter.jpg';
screens['default'][8]['background_noon'] = 'bg_noon_winter.jpg';
screens['default'][8]['background_afternoon'] = 'bg_afternoon_winter.jpg';
screens['default'][8]['background_night'] = 'bg_night_winter.jpg';
screens['default'][8]['columns'] = [1,10]

/*weer*/
screens['default'][9] = {}
screens['default'][9]['background'] = 'bg1.jpg';
screens['default'][9]['background_morning'] = 'bg_morning_winter.jpg';
screens['default'][9]['background_noon'] = 'bg_noon_winter.jpg';
screens['default'][9]['background_afternoon'] = 'bg_afternoon_winter.jpg';
screens['default'][9]['background_night'] = 'bg_night_winter.jpg';
screens['default'][9]['columns'] = [1,11]

/*sonarr*/
screens['default'][10] = {}
screens['default'][10]['background'] = 'bg1.jpg';
screens['default'][10]['background_morning'] = 'bg_morning_winter.jpg';
screens['default'][10]['background_noon'] = 'bg_noon_winter.jpg';
screens['default'][10]['background_afternoon'] = 'bg_afternoon_winter.jpg';
screens['default'][10]['background_night'] = 'bg_night_winter.jpg';
screens['default'][10]['columns'] = [1,12]

Custom.css

Spoiler: show

/*////////////////////////////////////// Zon opkomst en ondergang \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
.sunrise { font-size: 25px; font-size: 1vw; color: yellow;}
.wi-sunrise:before { color: yellow; font-size: 25px; font-size: 1vw;}
.sunset { font-size: 25px; font-size: 1vw; color: orange;}
.wi-sunset:before { color: orange; font-size: 25px; font-size: 1vw;}

/*Tekst_in_knoppen*/
.col-data .title
{
font-size: 15px;
font-size: 1vw;
font-weight: Bold;
color: white;
padding-top: 40px;
}

/*Tekst_in_knoppen*/
.buttonimg
{
max-width: 2vw;
}

/* Kleine tekst onderin knoppen, staat uit */
.col-data span
{
font-size:10px;
margin: 0px;
font-weight: 300;
color: white;
}

/*Smaller Title blocks (Height)[edit]*/
div.mh.titlegroups
{
height: 90px;
padding-top: 0px; /* default height=75px, */ /* center text for new height */
}

/*Change font size of 1 specific (text) device*/
.block_1100 .title { font-size:10px ;color:red !important;}

/* OV informatie */
.publictransport .title div {
font-size:10px;
font-size: 1vw;
}

.clock {

font-size: 17pt;
font-size: 1vw;

}

.clock .weekday, .date{

font-size: 12pt;
font-size: 1vw;

}


/* Space between blocks smaller en ronde hoeken */
.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:7px solid rgba(255,255,255,0); background:rgba(0,0,0,0.5); background-clip: padding-box; border-radius: 0px; }
/* border: 7px -> 3px - Smaller space between blocks */ /* Round corners */

.fa.fa-lightbulb-o.on:before {color: #5aff00;}
.fa.fa-lightbulb-o.off:before {color: #ffffff;}
.fa.fa-power-off.on:before {color: #5aff00;}
.fa.fa-power-off.off:before {color: #ffffff;}
.fa.fa-thermometer-half:before {color: #ffffff;}
.fa.fa-plug:before {color: #ffffff;}
.fa.fa-flash:before {color: #ffffff;}
.fa.fa-male.on:before {color: #5aff00;}
.fa.fa-female.on:before {color: #5aff00;}
.fa.fa-eye-slash.off:before {color: #ffffff;}
.fa.fa-eye.on:before {color: #5aff00;}
.fa.fa-mobile.on:before {color: #5aff00;}
.fa.fa-mobile.off:before {color: red;}
.fa.fa-tv.on:before {color: #5aff00;}
.fa.fa-tv.off:before {color: #ffffff;}
.fa.fa-android.on:before {color: #5aff00;}
.fa.fa-android.off:before {color: #ffffff;}
.fa.fa-volume-down.o:beforen {color: #5aff00;}
.fa.fa-volume-down.off:before {color: #ffffff;}
.fa.fa-codiepie.on:before {color: #5aff00;}
.fa.fa-codiepie.off:before {color: #ffffff;}
.fa.fa-desktop.on:before {color: #5aff00;}
.fa.fa-desktop.off:before {color: #ffffff;}
.fa.fa-chrome.on:before {color: #5aff00;}
.fa.fa-chrome.off:before {color: #ffffff;}


.Menu .col-xs-1,
.Menu .col-xs-2,
.Menu .col-xs-3,
.Menu .col-xs-4,
.Menu .col-xs-5,
.Menu .col-xs-6,
.Menu .col-xs-7,
.Menu .col-xs-8,
.Menu .col-xs-9,
.Menu .col-xs-10,
.Menu .col-xs-11,
.Menu .col-xs-12
{
padding-top: 2px !important;
padding-right: 2px !important;
padding-left: 2px !important;
}

/* Warning Rood */

.warningred
{
/* background-color: rgba(199,44,44,0.6) !important;*/
background-clip: padding-box;
border: 7px solid rgba(255,255,255,0.0);
}

.warningred .fa.fa-thermometer-half:before {color: red;}
.warningred .fa.fa-sun-o:before {color: red;}

/* Warning Oranje */

.warningorange
{
/* background-color: rgba(255,165,0,0.6) !important;*/
background-clip: padding-box;
border: 7px solid rgba(255,255,255,0.0);
}

.warningorange .fa.fa-thermometer-half:before {color: orange;}
.warningorange .fa.fa-sun-o:before {color: orange;}

/* Warning Groen */

.warninggreen
{
/* background-color: rgba(0,255,20,0.6) !important;*/
background-clip: padding-box;
border: 7px solid rgba(255,255,255,0.0);
}

.warninggreen .fa.fa-thermometer-half:before {color: rgba(0,255,20);}
.warninggreen .fa.fa-sun-o:before {color: rgba(0,255,20);}

/* Warning Blauw */

.warningblue
{
/* background-color: rgba(0,0,255,0.6) !important;*/
background-clip: padding-box;
border: 7px solid rgba(255,255,255,0.0);
}

.warningblue .fa.fa-thermometer-half:before {color: blue;}
.warningblue .fa.fa-sun-o:before {color: blue;}

.warning
{
background-color: rgba(0,0,0,0.6) !important;
background-clip: padding-box;
border: 7px solid rgba(255,255,255,0.0);
}

.warning .fa.fa-thermometer-half:before {color: red;}
.warning .fa.fa-sun-o:before {color: red;}

/*Laat achtergrond knop knipperen*/
/*
.warning {
background: rgba(199,44,44,0.3) !important;
background-clip: padding-box;
border: 7px solid rgba(255,255,255,0);
-webkit-animation: BLINK-ANIMATION 1s infinite;
-moz-animation: BLINK-ANIMATION 1s infinite;
-o-animation: BLINK-ANIMATION 1s infinite;
animation: BLINK-ANIMATION 1s infinite;
}

@-webkit-keyframes BLINK-ANIMATION {
0%, 49% {
background-color: rgba(0,0,0,0.4);
background-clip: padding-box;
border: 7px solid rgba(255,255,255,0.0);
}
50%, 100% {
background-color: rgba(199,44,44,0.7);
background-clip: padding-box;
border: 7px solid rgba(255,255,255,0.0);
}
}
*/


/* Animation code */

/* background-siren */
@keyframes background-siren {
from {background-color: red;}
to {background-color: blue;}
}

.lightswitch {
background: rgba(143,227,136,0.3) !important;
}


.alert_motion {
background: rgba(0,0,0,0.3) !important;
animation-name: background-siren;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

@-webkit-keyframes BLINK-ANIMATION {
0%, 49% {
background-color: rgba(255,0,0,0.5);
border: 3px solid red;
}
50%, 100% {
background-color: red;
border: 3px solid rgba(255,0,0.0.5);
}
}

/* Weather */

.weatherfull > div div.temp {font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
"Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
font-weight: medium;
font-weight: medium;
font-style: normal;
font-size: 17pt;
letter-spacing: 0.5pt;
text-transform: uppercase;
margin-top:0px;
opacity:1;
}

.weatherfull > div div.temp .nightT {font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
"Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
font-weight: medium;
font-style: normal;
font-size: 12pt;
letter-spacing: 0.5pt;
text-transform: uppercase;
margin:0px auto;
opacity:0.7;
display:block;
}

.weatherfull > div div.icon {font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
"Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
font-weight: medium;
font-style: normal;
font-size: 17pt;
letter-spacing: 0.5pt;
text-transform: uppercase;
margin:0px auto;
opacity:1;
display:block;
height:60px;
}

.weatherfull > div div.day {font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
"Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
font-weight: regular;
font-style: normal;
font-size: 11pt;
letter-spacing: 0.5pt;
text-transform: uppercase;
margin-top:0px;
opacity:0.9;
}



/* Clock
.standby .clock{
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
"Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
font-weight: medium;
font-style: normal;
font-size: 17pt;
letter-spacing: 0.5pt;
text-transform: uppercase;
padding:0px 5px 0px 5px;
margin-right:5px;
}
.standby .weekday,.standby .date{
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
"Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
font-weight: medium;
font-style: normal;
font-size: 17pt;
letter-spacing: 0.5pt;
text-transform: uppercase;
padding:0px 5px 0px 5px;
margin-right:5px;
}

*/
/* News ticker */
#newsTicker li {
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
"Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
font-weight: regular;
font-style: normal;
font-size: 12pt;
letter-spacing: 0.1pt;
min-height: 72px;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
color: white;
max-height: 250px; */ Set the maxim height of the news-ticker */
}

Custom.js

Spoiler: show

//add custom javascript in here
function afterGetDevices(){


}

function getExtendedBlockTypes(blocktypes){
//blocktypes.Type['Lighting 2'] = { icon: 'fa fa-lightbulb-o', title: '<Name>', value: 'ds' }
return blocktypes;
}

//////////////////////////////// Alarm aan of uit ////////////////////////////////////////

function getBlock_102(device,idx){ //change 233 to the idx of your device!
$('.block_'+idx).attr('onclick','switchDevice(this)');
var html='';
html+='<div class="col-xs-4 col-icon">';
if(device['Status']=='Off') html+=iconORimage(idx,'fa-toggle-off','','off icon');
else html+=iconORimage(idx,'fa-toggle-on','','on icon');
html+='</div>';
html+='<div class="col-xs-8 col-data">';
html+='<strong class="title">'+device['Name']+'</strong><br />';
if(device['Status']=='Normal') html+='<span class="state">Uitgeschakeld</span>';
else html+='<span class="state">Ingeschakeld</span>';

html+='</div>';
return html;
}

////////////////////// Aanwezig / Afwezig telefoon /////////////////////////////

function getBlock_48(device,idx){ //change 233 to the idx of your device!
$('.block_'+idx).attr('onclick','switchDevice(this)');
var html='';
html+='<div class="col-xs-4 col-icon">';
if(device['Status']=='Off') html+=iconORimage(idx,'fa-toggle-off','','off icon');
else html+=iconORimage(idx,'fa-toggle-on','','on icon');
html+='</div>';
html+='<div class="col-xs-8 col-data">';
html+='<strong class="title">'+device['Name']+'</strong><br />';
if(device['Status']=='Off') html+='<span class="state">Afwezig</span>';
else html+='<span class="state">Aanwezig</span>';

html+='</div>';
return html;
}

function getBlock_43(device,idx){ //change 233 to the idx of your device!
$('.block_'+idx).attr('onclick','switchDevice(this)');
var html='';
html+='<div class="col-xs-4 col-icon">';
if(device['Status']=='Off') html+=iconORimage(idx,'fa-toggle-off','','off icon');
else html+=iconORimage(idx,'fa-toggle-on','','on icon');
html+='</div>';
html+='<div class="col-xs-8 col-data">';
html+='<strong class="title">'+device['Name']+'</strong><br />';
if(device['Status']=='Off') html+='<span class="state">Afwezig</span>';
else html+='<span class="state">Aanwezig</span>';

html+='</div>';
return html;
}

///////////////////////Warning voor temperatuur //////////////////////////////////////

function getStatus_64_1(idx,value,device){ //Verander de IDX naar die van het device
if(parseFloat(device['Data'])>26){
$('div.block_64_1').removeClass('warning').removeClass('warningorange').removeClass('warninggreen').addClass('warningred');
}
else if(parseFloat(device['Data'])>23){
$('div.block_64_1').removeClass('warning').removeClass('warningred').removeClass('warninggreen').addClass('warningorange');
}
else if(parseFloat(device['Data'])>19){
$('div.block_64_1').removeClass('warningorange').removeClass('warningred').removeClass('warninggreen').addClass('warninggreen');
}
else if(parseFloat(device['Data'])>0){
$('div.block_64_1').removeClass('warningorange').removeClass('warningred').removeClass('warningblue').addClass('warningblue');
}
else {
$('div.block_64_1').removeClass('warning').removeClass('warningorange').removeClass('warninggreen').removeClass('warningred').removeClass('warningblue');
}
}

function getStatus_65_1(idx,value,device){
if(parseFloat(device['Data'])>26){
$('div.block_65_1').removeClass('warning').removeClass('warningorange').removeClass('warninggreen').addClass('warningred');
}
else if(parseFloat(device['Data'])>23){
$('div.block_65_1').removeClass('warning').removeClass('warningred').removeClass('warninggreen').addClass('warningorange');
}
else if(parseFloat(device['Data'])>19){
$('div.block_65_1').removeClass('warningorange').removeClass('warningred').removeClass('warninggreen').addClass('warninggreen');
}
else if(parseFloat(device['Data'])>0){
$('div.block_65_1').removeClass('warningorange').removeClass('warningred').removeClass('warningblue').addClass('warningblue');
}
else {
$('div.block_65_1').removeClass('warning').removeClass('warningorange').removeClass('warninggreen').removeClass('warningred').removeClass('warningblue');
}
}

function getStatus_66_1(idx,value,device){
if(parseFloat(device['Data'])>26){
$('div.block_66_1').removeClass('warning').removeClass('warningorange').removeClass('warninggreen').addClass('warningred');
}
else if(parseFloat(device['Data'])>23){
$('div.block_66_1').removeClass('warning').removeClass('warningred').removeClass('warninggreen').addClass('warningorange');
}
else if(parseFloat(device['Data'])>19){
$('div.block_66_1').removeClass('warningorange').removeClass('warningred').removeClass('warninggreen').addClass('warninggreen');
}
else if(parseFloat(device['Data'])>0){
$('div.block_66_1').removeClass('warningorange').removeClass('warningred').removeClass('warningblue').addClass('warningblue');
}
else {
$('div.block_66_1').removeClass('warning').removeClass('warningorange').removeClass('warninggreen').removeClass('warningred').removeClass('warningblue');
}
}

function getStatus_60_1(idx,value,device){
if(parseFloat(device['Data'])>26){
$('div.block_60_1').removeClass('warning').removeClass('warningorange').removeClass('warninggreen').addClass('warningred');
}
else if(parseFloat(device['Data'])>23){
$('div.block_60_1').removeClass('warning').removeClass('warningred').removeClass('warninggreen').addClass('warningorange');
}
else if(parseFloat(device['Data'])>19){
$('div.block_60_1').removeClass('warningorange').removeClass('warningred').removeClass('warninggreen').addClass('warninggreen');
}
else if(parseFloat(device['Data'])>0){
$('div.block_60_1').removeClass('warningorange').removeClass('warningred').removeClass('warningblue').addClass('warningblue');
}
else {
$('div.block_60_1').removeClass('warning').removeClass('warningorange').removeClass('warninggreen').removeClass('warningred').removeClass('warningblue');
}
}


///////////////////////Warning voor UV Zonkracht //////////////////////////////////////

function getStatus_93(idx,value,device){ //Verander de IDX naar die van het device
if(parseFloat(device['Data'])>7){
$('div.block_93').removeClass('warning').removeClass('warningorange').removeClass('warninggreen').addClass('warningred');
}
else if(parseFloat(device['Data'])>4){
$('div.block_93').removeClass('warning').removeClass('warningred').removeClass('warninggreen').addClass('warningorange');
}
else if(parseFloat(device['Data'])>0){
$('div.block_93').removeClass('warningorange').removeClass('warningred').removeClass('warningblue').addClass('warninggreen');
}
else {
$('div.block_93').removeClass('warning').removeClass('warningorange').removeClass('warninggreen').removeClass('warningred').removeClass('warningblue');
}
}

[EdwinK]

That looks great. Trying to copy it, but isn't something that is done easy.

[Danigympie]

That looks great. Trying to copy it, but isn't something that is done easy.

You can PM me in dutch so I can help you with some settings, or give you some hints

[yfands]

Hai
Dashticz version Beta 2.3.5
raspberry pi 3

Playing with the speak option

In the config.js
config['speak_lang'] = 'nl-NL';

and in a block definition the following dutch sentence (translated: The temperature has changed)
blocks['636_1']['speak'] = 'Temperatuur is gewijzigd';

The lady tries her best but can't pronounce the dutch sentence it is still english based.
So, what must I do for her to understand the sentence is dutch?
Isn't config['speak_lang'] = 'nl-NL'; in the config file enough ?

regards
Frank

[EdwinK]

That looks great. Trying to copy it, but isn't something that is done easy.

You can PM me in dutch so I can help you with some settings, or give you some hints

Later, I think. Now other things to work on.

[rldn]

Can someone tell me how to change the icon image whenever a status change? For the font awesome i can get it done, but for an image instead of icon its not working. I only see the static white image deur_open.png. Not even a transparancy when the door is closed.
And of course, its not changing to deur_closed.png when the status is 'Dicht'.

I have made a block in config.js with:
blocks[21] = {} // DEURCONTACT VOORDEUR
blocks[21]['title'] = 'Voordeur';
blocks[21]['width'] = 12;
blocks[21]['image'] = 'deur_open.png';


And in custom.js i made this:
// CHANGE STATUS VOOR DEURCONTACT VOOR
function getBlock_21(device,idx){
$('.block_'+idx).attr('onclick','switchDevice(this)');
var html='';
html+='<div class="col-xs-4 col-icon">';
if(device['Status']=='Closed') html+=iconORimage(idx,'deur_dicht.off','','off icon');
else html+=iconORimage(idx,'deur_open.on','','on icon');
html+='</div>';
html+='<div class="col-xs-8 col-data">';
html+='<strong class="title">'+device['Name']+'</strong><br />';
if(device['Status']=='Open') html+='<span class="state">Deur is open</span>';
else html+='<span class="state">Deur is dicht</span>';
html+='</div>';
return html;
}

[HansieNL]

can you change:
if(device['Status']=='Closed') html+=iconORimage(idx,'deur_dicht.off','','off icon');
else html+=iconORimage(idx,'deur_open.on','','on icon');
to:
if(device['Status']=='Closed') html+='<img src="img/deur_dicht.off" class="off icon" />';
else html+='<img src="img/deur_open.on" class="on icon" />';

I suppose you have the two images in the img map of Dashticz.

[hoeby]

Maybe someone can help me.
I would like to make Multi screens.
But having the buttons for going to the Multi screens in the bottom of Dashticz, not a column function, but more a row function.
Does somebody has an idea, how to make that?
I can make the buttons on the bottom of a column, but prefer to get it separate to the other buttons

Looking for this idea (the home, lighting, devices, activities, environment row)