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

Dashticz, alternative dashboard based on HTML, CSS, jQuery

Moderators: leecollings, htilburgs, robgeerts

User avatar
Luppie
Posts: 16
Joined: Thursday 08 October 2015 14:23
Target OS: Raspberry Pi / ODroid
Domoticz version: LastBeta
Location: Netherlands
Contact:

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

Post by 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.
Raspberry Pi2B | RFLink | MySensors Gateway | 18B20 | P1 | 9x KaKu Old | 3x Kaku New | KaKu PIR | 2x Flamingo Smoke Detector | Chuango PIR | Chuango Door Contact |3x Chinese Therm. Hum. Sensor | 2x SelectPlus DoorBell | RPi 7" Touch Control Panel
astrapowerrr
Posts: 141
Joined: Tuesday 31 January 2017 20:34
Target OS: -
Domoticz version:
Contact:

Re: Show your Dashticz v2.0 and how-to's!

Post by astrapowerrr »

Martijn85 wrote: Wednesday 26 April 2017 16:01 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
User avatar
EdwinK
Posts: 1820
Joined: Sunday 22 January 2017 21:46
Target OS: Raspberry Pi / ODroid
Domoticz version: BETA
Location: Rhoon
Contact:

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

Post by EdwinK »

You can use 'idx_1' to 'idx_5' to select your buttons
Running latest BETA on a Pi-3 | Toon® Thermostat (rooted) | Hue | Tuya | IKEA tradfri | Dashticz V3 on Lenovo Huawei Tablet | Conbee
astrapowerrr
Posts: 141
Joined: Tuesday 31 January 2017 20:34
Target OS: -
Domoticz version:
Contact:

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

Post by astrapowerrr »

EdwinK wrote: Monday 21 May 2018 9:39 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...
Image
User avatar
Luppie
Posts: 16
Joined: Thursday 08 October 2015 14:23
Target OS: Raspberry Pi / ODroid
Domoticz version: LastBeta
Location: Netherlands
Contact:

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

Post by Luppie »

Luppie wrote: Thursday 17 May 2018 20:39 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.

Image
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 :roll:

Image

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 ?
Raspberry Pi2B | RFLink | MySensors Gateway | 18B20 | P1 | 9x KaKu Old | 3x Kaku New | KaKu PIR | 2x Flamingo Smoke Detector | Chuango PIR | Chuango Door Contact |3x Chinese Therm. Hum. Sensor | 2x SelectPlus DoorBell | RPi 7" Touch Control Panel
User avatar
Luppie
Posts: 16
Joined: Thursday 08 October 2015 14:23
Target OS: Raspberry Pi / ODroid
Domoticz version: LastBeta
Location: Netherlands
Contact:

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

Post by 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'.
Raspberry Pi2B | RFLink | MySensors Gateway | 18B20 | P1 | 9x KaKu Old | 3x Kaku New | KaKu PIR | 2x Flamingo Smoke Detector | Chuango PIR | Chuango Door Contact |3x Chinese Therm. Hum. Sensor | 2x SelectPlus DoorBell | RPi 7" Touch Control Panel
yfands
Posts: 67
Joined: Monday 04 July 2016 10:16
Target OS: Raspberry Pi / ODroid
Domoticz version: latest B
Location: Netherlands
Contact:

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

Post by 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
Posts: 2262
Joined: Monday 29 August 2016 22:40
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

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

Post by Lokonli »

Hi Frank, yfands

For me it's running fine with latest beta (I've installed yesterday's version).
yfands
Posts: 67
Joined: Monday 04 July 2016 10:16
Target OS: Raspberry Pi / ODroid
Domoticz version: latest B
Location: Netherlands
Contact:

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

Post by 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
Posts: 2262
Joined: Monday 29 August 2016 22:40
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

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

Post by Lokonli »

yfands wrote: Monday 04 June 2018 20:23 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
Posts: 67
Joined: Monday 04 July 2016 10:16
Target OS: Raspberry Pi / ODroid
Domoticz version: latest B
Location: Netherlands
Contact:

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

Post by 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
Posts: 16
Joined: Thursday 16 November 2017 20:02
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

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

Post by 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
Posts: 3
Joined: Thursday 31 May 2018 13:38
Target OS: Windows
Domoticz version: 3.8153
Location: Netherlands
Contact:

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

Post by 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
Home.jpg (291.77 KiB) Viewed 3830 times
When you push the button verlichting (lightning)
Verlichting.jpg
Verlichting.jpg (267.11 KiB) Viewed 3830 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');
}
}



Attachments
Verlichting.jpg
Verlichting.jpg (267.11 KiB) Viewed 3831 times
User avatar
EdwinK
Posts: 1820
Joined: Sunday 22 January 2017 21:46
Target OS: Raspberry Pi / ODroid
Domoticz version: BETA
Location: Rhoon
Contact:

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

Post by EdwinK »

Danigympie wrote: Friday 08 June 2018 14:00
That looks great. :) Trying to copy it, but isn't something that is done easy.
Running latest BETA on a Pi-3 | Toon® Thermostat (rooted) | Hue | Tuya | IKEA tradfri | Dashticz V3 on Lenovo Huawei Tablet | Conbee
Danigympie
Posts: 3
Joined: Thursday 31 May 2018 13:38
Target OS: Windows
Domoticz version: 3.8153
Location: Netherlands
Contact:

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

Post by Danigympie »

EdwinK wrote: Friday 08 June 2018 18:41
Danigympie wrote: Friday 08 June 2018 14:00
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
Posts: 67
Joined: Monday 04 July 2016 10:16
Target OS: Raspberry Pi / ODroid
Domoticz version: latest B
Location: Netherlands
Contact:

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

Post by 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
User avatar
EdwinK
Posts: 1820
Joined: Sunday 22 January 2017 21:46
Target OS: Raspberry Pi / ODroid
Domoticz version: BETA
Location: Rhoon
Contact:

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

Post by EdwinK »

Danigympie wrote: Saturday 09 June 2018 9:08
EdwinK wrote: Friday 08 June 2018 18:41
Danigympie wrote: Friday 08 June 2018 14:00
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.
Running latest BETA on a Pi-3 | Toon® Thermostat (rooted) | Hue | Tuya | IKEA tradfri | Dashticz V3 on Lenovo Huawei Tablet | Conbee
rldn
Posts: 16
Joined: Thursday 16 November 2017 20:02
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

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

Post by 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;
}
User avatar
HansieNL
Posts: 957
Joined: Monday 28 September 2015 15:13
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

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

Post by 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.
Blah blah blah
hoeby
Posts: 528
Joined: Saturday 02 June 2018 11:05
Target OS: Raspberry Pi / ODroid
Domoticz version: V2022.1
Location: Echt, Netherlands
Contact:

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

Post by 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)
Image
Thin-client --> Docker Domoticz main environment
Pi3A+ --> Google home (GAssistPi)
Pi3B+ --> Docker (P1monitor, Domoticz test environment, Ubiquity controller)
Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest