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

[HansieNL]

@pieter1964 : 1st: to post code use the full editor and select </>
2nd: The values of the variables are not in Domoticz, so Dashticz will not show a moon picture. The temp file must be written. Did you do the chown part? Can you check if that file is written and has the right permisions?

[pvklink]

Hi I also made my first dashboard with dashticz. What an amazing functionality!
I have some issues, i cant fix, and need some help.

my dashboard

dashboard.jpg (399.11 KiB) Viewed 3471 times

Problems:
1. my newsitems dont not show
2. my publictransport.ovinfotram does not show
3. i dont want a time stamp with my temperaturesensors
4. my tv s (ping devices), when they are on, i want them the same color as the lightbulbs when they are on
5. my denonvolume selectorbuttons dont fit in the block, can i make them smaller
6. my security devices, i like to have them yellow when on, just as the light bulbs do

Code: Select all

.swiper-pagination-bullet {width: 0px;height: 0px;}
.fas.fa-lightbulb {color:#F1C300;}
.far.fa-lightbulb {color:#fff;}
.fa.fa-tv.on:before {color:#F1C300;}
.fa.fa-tv.off:before {color:#fff;}
.swiper-pagination-bullet {width: 35px !important;height: 35px !important;}
.swiper-pagination {text-align: left !important;}
.block_353 {font-size:10px !important;}

Code: Select all

var config = {}
config['domoticz_ip'] = 'http://x.x.x.x';
config['user_name'] = '';
config['pass_word'] = '';
config['app_title'] = 'Domotica familie xxxx';
config['room_plan'] = '0';
config['domoticz_refresh'] = '5';
config['dashticz_refresh'] = '60';

config['default_news_url'] = 'http://www.nu.nl/rss/algemeen';
config['news_scroll_after'] = '60';

config['theme'] = 'default';
config['background_image'] = 'img/bg2.jpg';
config['standby_after'] = '0';
config['auto_swipe_back_to'] = '';
config['auto_swipe_back_after'] = '';
config['auto_slide_pages'] = '';
config['slide_effect'] = 'slide';
config['standard_graph'] = 'hours';
config['language'] = 'nl_NL';
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'] = '0';
config['selector_instead_of_buttons'] = '1';
config['use_favorites'] = '0';
config['disable_googleanalytics'] = '0';
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';


var _STREAMPLAYER_TRACKS = [
{"track":1,"name":"3fm","file":"	http://icecast.omroep.nl/3fm-bb-mp3"},
{"track":2,"name":"538","file":"http://18973.live.streamtheworld.com/RADIO538.mp3"},
{"track":3,"name":"Q-Music","file":"http://icecast-qmusic.cdp.triple-it.nl/Qmusic_nl_live_96.mp33"},
{"track":4,"name":"Radio10","file":"http://stream.radio10.nl/radio10"},
{"track":5,"name":"Veronica","file":"http://playerservices.streamtheworld.com/api/livestream-redirect/VERONICA.mp3"},
{"track":6,"name":"Skyradio","file":"http://playerservices.streamtheworld.com/api/livestream-redirect/SKYRADIO.mp3"},
]

var publictransport = {}
publictransport.ovinfotrain = { show_via: true, station: 'station-den-haag-centraal', title:'NS-Den Haag centraal', provider: '9292-train', show_lastupdate:true, icon: 'train', width: 5, results: 6 };
publictransport.ovinfotram = { show_via: false, station: 'rijswijk-zh/tramhalte-aletta-jacobsstraat', provider: '9292-tram', show_lastupdate:true, icon: '9292-tram', width:5, results: 6 };

var tvguide = {}
tvguide.dutch = { key:'dutch', icon: 'fa-tv', width:12, channels: [1,2,3,4,31,36,37,34,466,420], maxitems: 10 }

var buttons = {}
buttons.radio = {width:8, image: 'radio', title: '/img/radio_on.png', url: 'http://nederland.fm'}
buttons.buienradar = {width:8, isimage:true, refreshimage:60000, image: 'http://api.buienradar.nl/image/1.0/RadarMapNL?w=285&h=256', url: 'http://www.weer.nl/verwachting/nederland/son/189656/'}
buttons.webcam = {width:12, isimage:true, refresh:2000, image: 'http://192.168.20.50/cgi-bin/snapshot.cgi?chn=1&u=xxxx&p=xxxxx', url: 'http://192.168.20.50/cgi-bin/snapshot.cgi?chn=1&u=xxxxxx&p=xxxxx'}
//buttons.calendar = {width:4, icon: 'fa-calendar', title: 'Kalender', url: 'https://calendar.google.com/calendar'}
//buttons.nunl = {width:4, icon: 'fa-newspaper-o', title: 'Nu.nl', url: 'http://www.nu.nl'}
//buttons.moon= {width:12, isimage:true, refreshimage:60000, image: 'moon'}

var blocks = {}
//
// TITELBLOKKEN 
//
blocks['1'] = {}
blocks['1']['type'] = 'blocktitle';
blocks['1']['title'] = 'Scenes'; 

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

blocks['1b'] = {}
blocks['1b']['type'] = 'blocktitle';
blocks['1b']['title'] = 'Tuin';

blocks['2a'] = {}
blocks['2a']['type'] = 'blocktitle';
blocks['2a']['title'] = 'Amusement'; 

blocks['2b'] = {}
blocks['2b']['type'] = 'blocktitle';
blocks['2b']['title'] = 'Netwerk'; 

blocks['3'] = {}
blocks['3']['type'] = 'blocktitle';
blocks['3']['title'] = 'Klimaat'; 

blocks['3b'] = {}
blocks['3b']['type'] = 'blocktitle';
blocks['3b']['title'] = 'Security'; 

blocks['4'] = {}
blocks['4']['type'] = 'blocktitle';
blocks['4']['title'] = 'Thuis'; 

blocks['4a'] = {}
blocks['4a']['type'] = 'blocktitle';
blocks['4a']['title'] = 'Tv'; 

blocks['4b'] = {}
blocks['4b']['type'] = 'blocktitle';
blocks['4b']['title'] = 'Pc en tablet'; 
//
// WEER
//
blocks[768] = {}
blocks[768]['title'] = 'Vorstalarm 4c';
blocks[768]['hide_data'] = true

blocks[457] = {}
blocks[457]['title'] = 'Temperatuur tuin';
blocks[457]['hide_data'] = true

blocks[948] = {}
blocks[948]['title'] = 'Zuiderpark';
blocks[948]['hide_data'] = true

blocks[455] = {}
blocks[455]['title'] = 'Zolder';
blocks[455]['hide_data'] = true

blocks[1025] = {}
blocks[1025]['title'] = 'Zolder radiator';
blocks[1025]['hide_data'] = true
//
// NEWS FEED
//
blocks['news_2'] = {} 
blocks['news_2']['feed'] = 'https://crossorigin.me/http://www.nu.nl/rss/Algemeen';

blocks['news_3'] = {} 
blocks['news_3']['feed'] = 'https://crossorigin.me/http://www.nu.nl/rss/Sport';

blocks['news_4'] = {}
blocks['news_4']['feed'] = 'https://cors-anywhere.herokuapp.com/http://feeds.feedburner.com/tweakers/nieuws';

blocks['news_5'] = {}
blocks['news_5']['feed'] = 'https://cors-anywhere.herokuapp.com/http://www.nu.nl/rss';
//
//SCENES
//
blocks['s13'] = {}
blocks['s13']['title'] = 'Sfeerverlichting binnen';
blocks['s13']['hide_data'] = true

blocks['s14'] = {}
blocks['s14']['title'] = 'Nachtverlichting';
blocks['s14']['hide_data'] = true

blocks['s15'] = {}
blocks['s15']['title'] = 'Sfeerverlichting buiten';
blocks['s15']['hide_data'] = true

blocks['s16'] = {}
blocks['s16']['title'] = 'Opstaan';
blocks['s16']['hide_data'] = true

blocks['s18'] = {}
blocks['s18']['title'] = 'Beneden/weg';
blocks['s18']['hide_data'] = true

blocks['s19'] = {}
blocks['s19']['title'] = 'Aanwezigheid';
blocks['s19']['hide_data'] = true

blocks[969] = {}
blocks[969]['title'] = 'Sproei grasveld';
blocks[969]['hide_data'] = true

blocks[972] = {}
blocks[972]['title'] = 'Sproei borders 1';
blocks[972]['hide_data'] = true

blocks[973] = {}
blocks[973]['title'] = 'Sproei borders 2';
blocks[973]['hide_data'] = true

blocks[985] = {}
blocks[985]['title'] = 'Visite';
blocks[985]['hide_data'] = true

blocks[1049] = {}
blocks[1049]['title'] = 'Zolder default heating';
blocks[1049]['hide_data'] = true
//
// SCHAKELAARS
//
blocks[86] = {}
blocks[86]['title'] = 'Rolluik';
blocks[86]['hide_data'] = true

blocks[263] = {}
blocks[263]['title'] = 'Accu';
blocks[263]['hide_data'] = true

blocks[997] = {}
blocks[997]['title'] = 'Lamp TV links';
blocks[997]['hide_data'] = true

blocks[1002] = {}
blocks[1002]['title'] = 'Lantaarn';
blocks[1002]['hide_data'] = true

blocks[1012] = {}
blocks[1012]['title'] = 'Maak een foto';
blocks[1012]['hide_data'] = true

blocks[1005] = {}
blocks[1005]['title'] = 'Wii en Tv';
blocks[1005]['hide_data'] = true

blocks[260] = {}
blocks[260]['title'] = 'Edge router';
blocks[260]['hide_data'] = true

blocks[145] = {}
blocks[145]['title'] = 'Printer';
blocks[145]['hide_data'] = true
//
// ENTERTAINMENT
//
blocks[354] = {}
blocks[354]['title'] = 'Denon volume';

blocks[353] = {}
blocks[353]['title'] = 'Denon source';

blocks[134] = {}
blocks[134]['title'] = 'Denon zenders';

blocks[139] = {}
blocks[139]['title'] = 'Denon mixer';

blocks[277] = {}
blocks[277]['title'] = 'TV Woonkamer';
blocks[277]['icon'] = 'fa-tv'
blocks[277]['hide_data'] = true

blocks[827] = {}
blocks[827]['title'] = 'TV Werkkamer';
blocks[827]['icon'] = 'fa-tv'
blocks[827]['hide_data'] = true

blocks[805] = {}
blocks[805]['title'] = 'TV Niels';
blocks[805]['icon'] = 'fa-tv'
blocks[805]['hide_data'] = true

blocks[675] = {}
blocks[675]['title'] = 'TV Sonia';
blocks[675]['icon'] = 'fa-tv'
blocks[675]['hide_data'] = true
//
// NETWORK 
//
blocks[287] = {}
blocks[287]['title'] = 'Zyxel';
blocks[287]['width'] = 3;
blocks[287]['hide_data'] = true

blocks[286] = {}
blocks[286]['title'] = 'Unify';
blocks[286]['width'] = 3;
blocks[286]['hide_data'] = true

blocks[289] = {}
blocks[289]['title'] = 'Qnap';
blocks[289]['width'] = 3;
blocks[289]['hide_data'] = true

blocks[283] = {}
blocks[283]['title'] = 'Edge router';
blocks[283]['width'] = 3;
blocks[283]['hide_data'] = true

blocks[284] = {}
blocks[284]['title'] = 'Ziggo lan';
blocks[284]['width'] = 3;
blocks[284]['hide_data'] = true

blocks[285] = {}
blocks[285]['title'] = 'Ziggo wan';
blocks[285]['width'] = 3;
blocks[285]['hide_data'] = true
//
// SECURITY
//
blocks[273] = {}
blocks[273]['title'] = 'Monique 06';
blocks[273]['hide_data'] = true

blocks[274] = {}
blocks[274]['title'] = 'Peter 06';
blocks[274]['hide_data'] = true

blocks[275] = {}
blocks[275]['title'] = 'Sonia 06';
blocks[275]['hide_data'] = true

blocks[276] = {}
blocks[276]['title'] = 'Niels 06';
blocks[276]['hide_data'] = true
//
// ALARMEN
//
blocks[207] = {}
blocks[207]['title'] = 'Huis afgesloten';

blocks[210] = {}
blocks[210]['title'] = 'Alarm';

blocks[968] = {}
blocks[968]['title'] = 'Rook hal';

blocks[966] = {}
blocks[966]['title'] = 'Rook trap';

blocks[272] = {}
blocks[272]['title'] = 'Alarm knop';

blocks[975] = {}
blocks[975]['title'] = 'Bel tuin';
//
// pc en tablet
//
blocks[786] = {}
blocks[786]['title'] = 'Niels pc ziggo';
blocks[786]['hide_data'] = true

blocks[278] = {}
blocks[278]['title'] = 'Niels pc vlan';
blocks[278]['hide_data'] = true

blocks[279] = {}
blocks[279]['title'] = 'Niels ptb';
blocks[279]['hide_data'] = true

blocks[676] = {}
blocks[676]['title'] = 'Niels pc vlan wifi';
blocks[676]['hide_data'] = true

blocks[280] = {}
blocks[280]['title'] = 'Sonia ptb';
blocks[280]['hide_data'] = true

blocks[282] = {}
blocks[282]['title'] = 'Peter pc vlan';
blocks[282]['hide_data'] = true

blocks[281] = {}
blocks[281]['title'] = 'Peter ptb';
blocks[281]['hide_data'] = true

blocks[678] = {}
blocks[678]['title'] = 'Peter tablet';
blocks[678]['hide_data'] = true

blocks[291] = {}
blocks[291]['title'] = 'Monique tablet';
blocks[291]['hide_data'] = true

blocks[677] = {}
blocks[677]['title'] = 'Sonia tablet';
blocks[677]['hide_data'] = true
//
// KOLOMMEN
//
var columns = {}
columns[1] = {}
columns[1]['blocks'] = ['1','s16','s18','s19','s13','s15','s14',985,'1a',1012,263,997,1002,1005,86,260,145,'1b', 969,972,973]
columns[1]['width'] = 3;

columns[2] = {}
columns[2]['blocks'] = ['2a','streamplayer',tvguide.dutch,354,353,134,139,'2b',287,286,289,283,285,284]
columns[2]['width'] = 3;

columns[3] = {}
columns[3]['blocks'] = ['3','sunrise',buttons.buienradar,457,948,455,1025,1049,'3b',207,210,272,968,966,975,768] 
columns[3]['width'] = 3; 

columns[4] = {}
columns[4]['blocks'] = ['4',buttons.webcam,274,273,276,275,'4a',277,805,675,'4b',282,281,678,291,786,278,676,279,280,677]
columns[4]['width'] = 3; 

columns[5] = {}
columns[5]['blocks'] = ['clock','sunrise',buttons.buienradar,768,457,455,1025,'news_4','news_5',publictransport.ovinfotrain,publictransport.ovinfotram]
columns[5]['width'] = 3; 

columns[6] = {}
columns[6]['blocks'] = ['1','s16','s18','s19','s13','s15','s14',969,972,973,985,1049,'1a',1012,263,997,1002,1005,86,260,145]
columns[6]['width'] = 3; 

columns[7] = {}
columns[7]['blocks'] = ['2a','streamplayer',tvguide.dutch,354,277,353,827,134,805,139,675,'2b',287,286,289,283,285,284]
columns[7]['width'] = 3; 

columns[8] = {}
columns[8]['blocks'] = [buttons.webcam,274,273,276,275,282,281,678,291,786,278,676,279,280,677,'3b',207,210,272,968,966,975]
columns[8]['width'] = 3; 
//
// SCHERMEN
//
var screens = {}
screens[1] = {}
screens[1]['background'] = 'bg1.jpg';
screens[1]['columns'] = [5,6,7,8]

[Lokonli]

Problems:
1. my newsitems dont not show
2. my publictransport.ovinfotram does not show

for 1:
You can remove the https://crossorigin.me/ part: In one of the beta's a CORS proxy has been integrated into Dashticz.

For 2:
There is no 9292-tram provider, only 9292-tram-bus, but I noticed that one doesn't work anymore for tram.
I'll create a fix.

[Lokonli]

3. i dont want a time stamp with my temperaturesensors

You can hide the timestamp by setting the 'last_update' parameter to false, like

Code: Select all

blocks[455]['last_update'] = false

I'll update the Wiki as well.

[Lokonli]

4. my tv s (ping devices), when they are on, i want them the same color as the lightbulbs when they are on

Currently you use the following two lines:

Code: Select all

.fa.fa-tv.on:before {color:#F1C300;}
.fa.fa-tv.off:before {color:#fff;}

The 'fa' class belongs to a previous version of Fontawesome. It's not used any more.
The following probably will work:

Code: Select all

.fa-tv.on {color:#F1C300;}
.fa-tv.off {color:#fff;}

[pvklink]

i tried:

.fa-tv.on {color:#F1C300;}
.fa-tv.off {color:#fff;} that works!

Can i also use the icons from https://fontawesome.com/icons/laptop?style=solid ?
do i have to download these or just use the name of these devices as mentioned on the site ?
example: mobile gives a rule like <i class="fas fa-mobile"></i> on this site...
do i use this in my css
.fa-mobile.on {color:#F1C300;}
.fa-mobile.off {color:#fff;} in this example ?

blocks[455]['last_update'] = false did not do the right thing, still date in the thermo device...

Remove https://crossorigin.me/ also works !

I now use:
publictransport.ovinfotram = { show_via: false, station: 'rijswijk-zh/tramhalte-aletta-jacobsstraat', title:'HTM',provider: '9292-tram-bus', show_lastupdate:true, icon: '9292-tram', width:5, results: 6 };

do i have to use .ovinfotram or ovinfotrambus as property for publictransport ?
it is not waiting anymore, gives now no data only a notice Last update with a date

[Lokonli]

5. my denonvolume selectorbuttons dont fit in the block, can i make them smaller

Add the following to custom.css:

Code: Select all

.mh .btn  {
  font-size: 75% !important;
}

[Lokonli]

Can i also use the icons from https://fontawesome.com/icons/laptop?style=solid ?

yes, that should work as well.

do i have to download these or just use the name of these devices as mentioned on the site ?
example: mobile gives a rule like <i class="fas fa-mobile"></i> on this site...
do i use this in my css
.fa-mobile.on {color:#F1C300;}
.fa-mobile.off {color:#fff;} in this example ?

You can just use the names. Don't forget to change the icon in your block definition, like:

Code: Select all

blocks[827]['icon'] = 'fas fa-laptop'

blocks[455]['last_update'] = false did not do the right thing, still date in the thermo device...

It should work... Can you check the spelling?

You can also add the following to CONFIG.js:

Code: Select all

config['last_update'] = 0;

I now use:
publictransport.ovinfotram = { show_via: false, station: 'rijswijk-zh/tramhalte-aletta-jacobsstraat', title:'HTM',provider: '9292-tram-bus', show_lastupdate:true, icon: '9292-tram', width:5, results: 6 };

do i have to use .ovinfotram or ovinfotrambus as property for publictransport ?
it is not waiting anymore, gives now no data only a notice Last update with a date

It's a bug in Dashticz. Probably it will be fixed in the next beta release of Dashticz.
If you don't want to wait, insert the following line on line 80 of js/publictransport.js:

Code: Select all

					 (data[d][t]['id']=='tram' && provider == '9292-tram-bus')  ||

[paalkr]

Hi

I would like to change the background color when a button (defined in the var buttons = {} list) is clicked. Like in the attached picture where I have grayed out the button "Hovedside". How would I proceed to make this happen? Any suggestion?

main_screen.jpg (242.47 KiB) Viewed 3430 times

[ronald89]

After spending quite some time on tweaking my dashboard it's time to share it here as well

dashticz1.jpg (214.61 KiB) Viewed 3413 times

dashticz2.jpg (129.66 KiB) Viewed 3413 times

dashticz3.jpg (108.76 KiB) Viewed 3413 times

Using a Lenovo tab that's mounted with velcro on my refrigerator:

[Lokonli]

Hi

I would like to change the background color when a button (defined in the var buttons = {} list) is clicked. Like in the attached picture where I have grayed out the button "Hovedside". How would I proceed to make this happen? Any suggestion?

main_screen.jpg

The buttons are used to slide to a specific screen?
So, if you press a new button, and go to the new screen, all other buttons should get the default background color?

[pvklink]

@ronaldo89 looks great!
Can you share your code?

@lokonli
(data[d][t]['id']=='tram' && provider == '9292-tram-bus') || works !!! GREATTTT

these are my rules on block 948
blocks[948] = {}
blocks[948]['title'] = 'Zuiderpark';
blocks[948]['hide_data'] = true;
blocks[948]['last_update'] = false; this does not work

config['last_update'] = '0'; this does work!

[paalkr]

Hi

I would like to change the background color when a button (defined in the var buttons = {} list) is clicked. Like in the attached picture where I have grayed out the button "Hovedside". How would I proceed to make this happen? Any suggestion?

main_screen.jpg

The buttons are used to slide to a specific screen?
So, if you press a new button, and go to the new screen, all other buttons should get the default background color?

Hi, and thanks for the feedback.

Yes, the buttons are used as shortcuts to slide to a desired screen. I would like the button to stay marked (different background) even after the slide to screen action is finished. All other buttons should have the default background. Actually, I think linking the button background color change to a screen load is actually better. Then the right button will be marked if I either slide to a page or press the shortcut button.

I have attached my current config and some updated screenshots below (this is still work in progress, and the gray background on the shortcut buttons are just a mock up for now to illustrate what I would like to achieve).

main_page.jpg (246.93 KiB) Viewed 3341 times

Hall.jpg (167.57 KiB) Viewed 3341 times

Korridor.jpg (162.25 KiB) Viewed 3341 times

config.js

Code: Select all

// Declare dictionaries //
var config = {}
var buttons = {}
var blocks = {}
var columns = {}
var screens = {}
var frames = {}

//// Config ////
config['domoticz_ip'] = 'http://192.168.86.22:8080';
config['user_name'] = '';
config['pass_word'] = '';
config['app_title'] = 'Jotunstua ControlCenter';
config['room_plan'] = '0';
config['domoticz_refresh'] = '5';
config['dashticz_refresh'] = '60';
//config['default_news_url'] = 'https://www.vg.no/rss/feed/forsiden/';
config['news_scroll_after'] = '7';
config['default_cors_url'] = 'https://cors-anywhere.herokuapp.com/'
config['dashticz_php_path'] = './vendor/dashticz/';
config['standby_call_url'] = '';
config['standby_call_url_on_end'] = '';
config['theme'] = 'default';
//config['background_image'] = 'img/hytta/IMG_20181222_202020.jpg';
config['background_image'] = 'img/bg9.jpg';
config['standby_after'] = '0';
config['auto_swipe_back_to'] = '1';
config['auto_swipe_back_after'] = '20';
config['auto_slide_pages'] = '0';
config['slide_effect'] = 'fade';
config['standard_graph'] = 'month';
config['lineColors'] = ['#e00', '#0e0', '#00e'];        // Graph line colors
config['language'] = 'nb_NO';
config['timeformat'] = 'DD-MM-YY HH:mm';
config['calendarformat'] = 'dd DD.MM HH:mm';
config['calendarlanguage'] = 'nb_NO';
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'] = 'xxx';
//config['wu_city'] = 'Beito';
//config['wu_name'] = '';
//config['wu_country'] = 'NO';
//config['owm_api'] = '';
//config['owm_city'] = 'Mainaschaff';
//config['owm_name'] = '';
//config['owm_country'] = 'de';
//config['owm_lang'] = '';
//config['owm_cnt'] = '4';
config['idx_moonpicture'] = '5';
config['longfonds_zipcode'] = '';
config['longfonds_housenumber'] = '';
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['disable_update_check'] = 0;
config['no_rgb'] = 0;
config['use_favorites'] = 1;
config['disable_googleanalytics'] = 0;
config['last_update'] = 1;
config['security_button_icons'] = 0;
config['edit_mode'] = 0;
config['hide_seconds'] = 0;
config['hide_seconds_stationclock'] = 0;
config['owm_days'] = 0;
config['owm_min'] = 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;
config['setpoint_min'] = 5;
config['setpoint_max'] = 40;
config['auto_positioning'] = 0;

// Top bar //
config['hide_topbar'] = 0;
columns['bar'] = {}
columns['bar']['blocks'] = ['logo','miniclock']

//Page navigation and shortcut buttons
buttons.shortcut_Main = {key:'Main', icon:'fa fa-home', width:6, title:'Hovedside', slide:1}
buttons.shortcut_Hall = {key:'Hall', icon:'fa fa-link', width:6, title:'Hall', slide:2}
buttons.shortcut_Korridor = {key:'Korridor', icon:'fa fa-link', width:6, title:'Korridor', slide:3}
buttons.shortcut_SovNora = {key:'SovNora', icon:'fa fa-link', width:6, title:'Sov Nora', slide:4}
buttons.shortcut_SovMarius = {key:'SovMarius', icon:'fa fa-link', width:6, title:'Sov Marius', slide:5}
buttons.shortcut_SoveBB = {key:'SovBB', icon:'fa fa-link', width:6, title:'Sov B&B', slide:6}
buttons.shortcut_SoveMP = {key:'SovMP', icon:'fa fa-link', width:6, title:'Sov M&P', slide:7}
buttons.shortcut_Stue = {key:'Stue', icon:'fa fa-link', width:6, title:'Stue / kjøkken', slide:8}
buttons.shortcut_WC = {key:'WC', icon:'fa fa-link', width:6, title:'WC', slide:9}
buttons.shortcut_Vask = {key:'Vask', icon:'fa fa-link', width:6, title:'Vaskerom', slide:10}
buttons.shortcut_Bad = {key:'Bad', icon:'fa fa-link', width:6, title:'Bad', slide:11}
buttons.shortcut_Trapperom = {key:'Trapperom', icon:'fa fa-link', width:6, title:'Trapperom', slide:12}
buttons.shortcut_SovHems = {key:'SovHems', icon:'fa fa-link', width:6, title:'Sov Hems', slide:13}
buttons.shortcut_Hems = {key:'Hems', icon:'fa fa-link', width:6, title:'Hems', slide:14}
buttons.shortcut_Bod = {key:'Bod', icon:'fa fa-link', width:6, title:'Bod', slide:15}
buttons.shortcut_Utebod = {key:'Utebod', icon:'fa fa-link', width:6, title:'Utebod', slide:16}
buttons.log_zwave = {key:'zwave_log', icon:'fa fa-microchip', width:6, title: 'Zwavelogg', log:true, level: 1}
buttons.log_script = {key:'script_log', icon:'fa fa-microchip', width:6, title: 'Scriptlogg', log:true, level: 2}

//Shared GUI blocks
//Column title blocks - fills the first row of a column 100% 
blocks['ch_Status'] = {}
blocks['ch_Status']['type'] = 'blocktitle';
blocks['ch_Status']['title'] = 'Status';

blocks['ch_Valg'] = {}
blocks['ch_Valg']['type'] = 'blocktitle';
blocks['ch_Valg']['title'] = 'Valg';

blocks['ch_Shortcuts'] = {}
blocks['ch_Shortcuts']['type'] = 'blocktitle';
blocks['ch_Shortcuts']['title'] = 'Snarveier';

blocks['ch_Weather'] = {}
blocks['ch_Weather']['type'] = 'blocktitle';
blocks['ch_Weather']['title'] = 'Vær';

blocks['ch_Forcast'] = {}
blocks['ch_Forcast']['type'] = 'blocktitle';
blocks['ch_Forcast']['title'] = 'Værmelding';

blocks['ch_Brytere'] = {}
blocks['ch_Brytere']['type'] = 'blocktitle';
blocks['ch_Brytere']['title'] = 'Brytere';

blocks['ch_Inneklima'] = {}
blocks['ch_Inneklima']['type'] = 'blocktitle';
blocks['ch_Inneklima']['title'] = 'Inneklima';

blocks['ch_Termostat'] = {}
blocks['ch_Termostat']['type'] = 'blocktitle';
blocks['ch_Termostat']['title'] = 'Termostat';

////Page and device configuration////
//  Shared left column menu  //
//This menu column has a width of 2,
//so all pages will have a width of 10 left to other columns
columns['Menu_L_C'] = {}
columns['Menu_L_C']['width'] = 2; 
columns['Menu_L_C']['blocks'] = [
								'clock','sunrise','ch_Shortcuts',
								buttons.shortcut_Main,buttons.shortcut_Hall,buttons.shortcut_Korridor,buttons.shortcut_SovNora,
								buttons.shortcut_SovMarius,buttons.shortcut_SoveBB,buttons.shortcut_SoveMP,
								buttons.shortcut_Bad,buttons.shortcut_WC,buttons.shortcut_Vask,buttons.shortcut_Stue,
								buttons.shortcut_Trapperom,buttons.shortcut_SovHems,buttons.shortcut_Hems,
								buttons.shortcut_Bod,buttons.shortcut_Utebod,buttons.log_zwave,buttons.log_script
								];

//Hovedside(1) - devices
blocks[359] = {} //hyttemodus
blocks[359]['width'] = 12; //block widths are relative to the colomn they ar placed in
blocks[359]['icon'] = 'fa fa-home';
blocks[359]['protected'] = true;
blocks[420] = {} //alarmpanel
blocks[420]['width'] = 12;
//blocks[420]['icon'] = 'fa fa-bell';
blocks[420]['image'] = 'alarm.png';
blocks[420]['title'] = 'Alarmstatus'
blocks[420]['protected'] = true;
blocks[376] = {} //lysmodus
blocks[376]['width'] = 12;
blocks[376]['image'] = 'bulb.png';
blocks[360] = {} //varmemodus
blocks[360]['width'] = 12;
blocks[360]['image'] = 'heating.png';
blocks[522] = {} //stuegardiner
blocks[522]['width'] = 12;
blocks[522]['title'] = 'Stuegardiner'
blocks[522]['image'] = 'blinds_open.png';
blocks['s16'] = {} //Alt lys på hems (gruppe)
blocks['s16']['width'] = 6;
blocks['s16']['title'] = 'Alt lys på hems'
blocks['s16']['image'] = 'bulb.png';
blocks['s16']['last_update'] = false;
blocks[509] = {} //Varme på trapp ute
blocks[509]['width'] = 6;
blocks[509]['title'] = 'Utvendig varme på trapp';
blocks[509]['image'] = 'heating.png';
blocks['s21'] = {} //Utelysgruppe
blocks['s21']['width'] = 12;
blocks['s21']['title'] = 'Utelys';
blocks['567_1'] = {} //utetemperatur
blocks['567_1']['title'] = 'Utetemperatur'
blocks['567_1']['width'] = 2;
blocks['567_1']['last_update'] = true; 
blocks['567_2'] = {} //luftfuktighet
blocks['567_2']['title'] = 'Luftfuktighet'
blocks['567_2']['width'] = 2;
blocks['567_2']['last_update'] = true; 
blocks['572_3'] = {} //lufttrykk
blocks['572_3']['title'] = 'Lufttrykk'
blocks['572_3']['width'] = 2;
blocks['572_3']['last_update'] = true; 
blocks[569] = {} //vind
blocks[569]['title'] = 'Vindhastighet'
blocks[569]['width'] = 3;
blocks[569]['last_update'] = true; 
blocks[568] = {} //nedbør
blocks[568]['title'] = 'Nedbør'
blocks[568]['width'] = 2;
blocks[568]['last_update'] = true; 
blocks[592] = {} //månefase
blocks[592]['title'] = 'Månefase'
blocks[592]['width'] = 3;
blocks[592]['switch'] = true;
blocks[592]['last_update'] = true; 
blocks[592]['icon'] = 'fa fa-moon';
blocks[590] = {} //Synlighet måne
blocks[590]['title'] = 'Synlighet'
blocks[590]['width'] = 3;
blocks[590]['switch'] = true;
blocks[590]['last_update'] = true; 
blocks[590]['icon'] = 'fa fa-moon';
buttons.moon = {
			width:2, isimage:true, refreshimage:60000,
			image: 'moon'
			}
buttons.yr = {
			width:12, isimage:true, refresh:1800000,
			image: 'https://www.yr.no/sted/Norge/Oppland/%C3%98ystre_Slidre/Beito/advanced_meteogram.png',
			url: 'https://www.yr.no/sted/Norge/Oppland/%C3%98ystre_Slidre/Beito/langtidsvarsel.html'
			}
//frames.yr = {refreshiframe:1800000,height:340,frameurl:"https://www.yr.no/sted/Norge/Oppland/%C3%98ystre_Slidre/Beito/advanced_meteogram.png",width:12}

//Hovedside(1) - column layout
columns['Main_c_1'] = {}
columns['Main_c_1']['width'] = 4;
columns['Main_c_1']['blocks'] = [
								'ch_Status',359,420,
								'ch_Valg',376,360,522,'s16',509,'s21'
								];
columns['Main_c_2'] = {}
columns['Main_c_2']['width'] = 6;
columns['Main_c_2']['blocks'] = [
								'ch_Forcast',buttons.yr,
								'ch_Weather',buttons.moon,
								592,'567_1',568,569,590,'567_2','572_3'						
								];

//Hovedside(1) - screen layout
screens[1] = {}
screens[1]['columns'] = ['Menu_L_C','Main_c_1','Main_c_2'];

//Hall(2) - devices
blocks[99] = {} //taklys (NB! brukes også i korridor)
blocks[99]['width'] = 12;
blocks[99]['title'] = 'Taklys'
blocks[99]['last_update'] = false;
blocks[445] = {} //kommodelampe
blocks[445]['title'] = 'Kommodelampe'
blocks[445]['width'] = 12;
blocks[445]['last_update'] = false;
blocks[423] = {} //vindulampe
blocks[423]['title'] = 'Lampe i vindu'
blocks[423]['width'] = 12;
blocks[423]['last_update'] = false;
blocks[473] = {} //gulvtemperatur
blocks[473]['title'] = 'Gulvtemperatur'
blocks[473]['switch'] = true;
blocks[473]['width'] = 12;
blocks[361] = {} //varmevelger
blocks[361]['title'] = 'Termostatinnstilling'
blocks[361]['width'] = 6;
blocks[361]['image'] = 'heating.png';
blocks[467] = {} //termostat
blocks[467]['title'] = 'Termostatmodus'
blocks[467]['switch'] = true;
blocks[467]['width'] = 6;
blocks[468] = {} //setpoint normal
blocks[468]['title'] = 'Normal'
blocks[468]['switch'] = false;
blocks[468]['width'] = 4;
blocks[469] = {} //setpoint lav
blocks[469]['title'] = 'Lav'
blocks[469]['switch'] = false;
blocks[469]['width'] = 4;
blocks[552] = {} //setpoint frost
blocks[552]['title'] = 'Frost'
blocks[552]['switch'] = false;
blocks[552]['width'] = 4;

//Hall(2) - column layout
blocks['sh_Hall'] = {}
blocks['sh_Hall']['type'] = 'blocktitle';
blocks['sh_Hall']['title'] = 'Hall';
columns['Hall_c_h'] = {} // Header
columns['Hall_c_h']['width'] = 10;
columns['Hall_c_h']['blocks'] = ['sh_Hall'];
columns['Hall_c_1'] = {} // Brytere
columns['Hall_c_1']['width'] = 3;
columns['Hall_c_1']['blocks'] = ['ch_Brytere',99,445,423];
columns['Hall_c_2'] = {} // Temperatur
columns['Hall_c_2']['width'] = 4;
columns['Hall_c_2']['blocks'] = ['ch_Inneklima','graph_473'];
columns['Hall_c_3'] = {} // Termostat
columns['Hall_c_3']['width'] = 3;
columns['Hall_c_3']['blocks'] = ['ch_Termostat',361,467,468,469,552];

//Hall(2) - screen layout
screens[2] = {}
screens[2]['columns'] = ['Menu_L_C','Hall_c_h','Hall_c_1','Hall_c_2','Hall_c_3'];

//Korridor(3) - devices
blocks[434] = {} //gulvtemperatur
blocks[434]['title'] = 'Gulvtemperatur'
blocks[434]['switch'] = true;
blocks[434]['width'] = 12;
blocks[369] = {} //varmevelger
blocks[369]['title'] = 'Termostatinnstilling'
blocks[369]['width'] = 6;
blocks[369]['image'] = 'heating.png';
blocks[431] = {} //termostat
blocks[431]['title'] = 'Termostatmodus'
blocks[431]['switch'] = true;
blocks[431]['width'] = 6;
blocks[432] = {} //setpoint normal
blocks[432]['title'] = 'Normal'
blocks[432]['switch'] = false;
blocks[432]['width'] = 4;
blocks[433] = {} //setpoint lav
blocks[433]['title'] = 'Lav'
blocks[433]['switch'] = false;
blocks[433]['width'] = 4;
blocks[556] = {} //setpoint frost
blocks[556]['title'] = 'Frost'
blocks[556]['switch'] = false;
blocks[556]['width'] = 4;

//Korridor(3) - column layout
blocks['sh_Korridor'] = {}
blocks['sh_Korridor']['type'] = 'blocktitle';
blocks['sh_Korridor']['title'] = 'Korridor';
columns['Korridor_c_h'] = {} // Header
columns['Korridor_c_h']['width'] = 10;
columns['Korridor_c_h']['blocks'] = ['sh_Korridor'];
columns['Korridor_c_1'] = {} // Brytere
columns['Korridor_c_1']['width'] = 3;
columns['Korridor_c_1']['blocks'] = ['ch_Brytere',99];
columns['Korridor_c_2'] = {} // Temperatur
columns['Korridor_c_2']['width'] = 4;
columns['Korridor_c_2']['blocks'] = ['ch_Inneklima','graph_434'];
columns['Korridor_c_3'] = {} // Termostat
columns['Korridor_c_3']['width'] = 3;
columns['Korridor_c_3']['blocks'] = ['ch_Termostat',369,431,432,433,556];

//Korridor(3) - screen layout
screens[3] = {} // Korridor
screens[3]['columns'] = ['Menu_L_C','Korridor_c_h','Korridor_c_1','Korridor_c_2','Korridor_c_3'];

//Sov Nora(4) - devices
blocks[270] = {} //taklys
blocks[270]['width'] = 12;
blocks[270]['title'] = 'Taklys'
blocks[270]['last_update'] = false;
blocks[419] = {} //gulvtemperatur
blocks[419]['title'] = 'Gulvtemperatur'
blocks[419]['switch'] = true;
blocks[419]['width'] = 12;
blocks[364] = {} //varmevelger
blocks[364]['title'] = 'Termostatinnstilling'
blocks[364]['width'] = 6;
blocks[364]['image'] = 'heating.png';
blocks[415] = {} //termostat
blocks[415]['title'] = 'Termostatmodus'
blocks[415]['switch'] = true;
blocks[415]['width'] = 6;
blocks[416] = {} //setpoint normal
blocks[416]['title'] = 'Normal'
blocks[416]['switch'] = false;
blocks[416]['width'] = 4;
blocks[417] = {} //setpoint lav
blocks[417]['title'] = 'Lav'
blocks[417]['switch'] = false;
blocks[417]['width'] = 4;
blocks[548] = {} //setpoint frost
blocks[548]['title'] = 'Frost'
blocks[548]['switch'] = false;
blocks[548]['width'] = 4;

//Sov Nora(4) - column layout
blocks['sh_SovNora'] = {}
blocks['sh_SovNora']['type'] = 'blocktitle';
blocks['sh_SovNora']['title'] = 'Soverom Nora';
columns['SovNora_c_h'] = {} // Header
columns['SovNora_c_h']['width'] = 10;
columns['SovNora_c_h']['blocks'] = ['sh_SovNora'];
columns['SovNora_c_1'] = {} // Brytere
columns['SovNora_c_1']['width'] = 3;
columns['SovNora_c_1']['blocks'] = ['ch_Brytere',270];
columns['SovNora_c_2'] = {} // Temperatur
columns['SovNora_c_2']['width'] = 4;
columns['SovNora_c_2']['blocks'] = ['ch_Inneklima','graph_419'];
columns['SovNora_c_3'] = {} // Termostat
columns['SovNora_c_3']['width'] = 3;
columns['SovNora_c_3']['blocks'] = ['ch_Termostat',364,415,416,417,548];

//Sov Nora(4) - screen layout
screens[4] = {}
screens[4]['columns'] = ['Menu_L_C','SovNora_c_h','SovNora_c_1','SovNora_c_2','SovNora_c_3'];

//Sov Marius(5) - devices
blocks[214] = {} //taklys
blocks[214]['width'] = 12;
blocks[214]['title'] = 'Taklys'
blocks[214]['last_update'] = false;
blocks[153] = {} //gulvtemperatur
blocks[153]['title'] = 'Gulvtemperatur'
blocks[153]['switch'] = true;
blocks[153]['width'] = 12;
blocks[365] = {} //varmevelger
blocks[365]['title'] = 'Termostatinnstilling'
blocks[365]['width'] = 6;
blocks[365]['image'] = 'heating.png';
blocks[147] = {} //termostat
blocks[147]['title'] = 'Termostatmodus'
blocks[147]['switch'] = true;
blocks[147]['width'] = 6;
blocks[148] = {} //setpoint normal
blocks[148]['title'] = 'Normal'
blocks[148]['switch'] = false;
blocks[148]['width'] = 4;
blocks[149] = {} //setpoint lav
blocks[149]['title'] = 'Lav'
blocks[149]['switch'] = false;
blocks[149]['width'] = 4;
blocks[558] = {} //setpoint frost
blocks[558]['title'] = 'Frost'
blocks[558]['switch'] = false;
blocks[558]['width'] = 4;

//Sov Marius(5) - column layout
blocks['sh_SovMarius'] = {}
blocks['sh_SovMarius']['type'] = 'blocktitle';
blocks['sh_SovMarius']['title'] = 'Soverom Marius';
columns['SovMarius_c_h'] = {} // Header
columns['SovMarius_c_h']['width'] = 10;
columns['SovMarius_c_h']['blocks'] = ['sh_SovMarius'];
columns['SovMarius_c_1'] = {} // Brytere
columns['SovMarius_c_1']['width'] = 3;
columns['SovMarius_c_1']['blocks'] = ['ch_Brytere',214];
columns['SovMarius_c_2'] = {} // Temperatur
columns['SovMarius_c_2']['width'] = 4;
columns['SovMarius_c_2']['blocks'] = ['ch_Inneklima','graph_153'];
columns['SovMarius_c_3'] = {} // Termostat
columns['SovMarius_c_3']['width'] = 3;
columns['SovMarius_c_3']['blocks'] = ['ch_Termostat',365,147,148,149,558];

//Sov Marius(5) - screen layout
screens[5] = {}
screens[5]['columns'] = ['Menu_L_C','SovMarius_c_h','SovMarius_c_1','SovMarius_c_2','SovMarius_c_3'];


// pages that are not yet done
screens[6] = {} // Sov B&B
screens[6]['columns'] = ['Menu_L_C'];

screens[7] = {} // Sov M&P
screens[7]['columns'] = ['Menu_L_C'];

screens[8] = {} // Bad
screens[8]['columns'] = ['Menu_L_C'];

screens[9] = {} // WC
screens[9]['columns'] = ['Menu_L_C'];

screens[10] = {} // Vaskerom
screens[10]['columns'] = ['Menu_L_C'];

screens[11] = {} // Stue
screens[11]['columns'] = ['Menu_L_C'];

screens[12] = {} // Trapp
screens[12]['columns'] = ['Menu_L_C'];

screens[13] = {} // Sov Hems
screens[13]['columns'] = ['Menu_L_C'];

screens[14] = {} // Opphold Hems
screens[14]['columns'] = ['Menu_L_C'];

screens[15] = {} // Bod
screens[15]['columns'] = ['Menu_L_C'];

screens[16] = {} // Utebod
screens[16]['columns'] = ['Menu_L_C'];

custom.css

Code: Select all

/*
CUSTOM CSS FILE
*/

.fa,.wi { font-size:25px !important; }

div.mh.titlegroups {
    height: 46px !important;
    padding-top: 3px !important;
    padding-bottom:45px;
    border: 3px solid rgba(0,0,0,0);
    background: rgba(0,0,0,0.45);
    text-align: center;
    background-clip: padding-box;
    border-radius: 7px;
}

/* Topbar */
.transbg.dark.col-xs-1,
.transbg.dark.col-xs-2,
.transbg.dark.col-xs-3,
.transbg.dark.col-xs-4,
.transbg.dark.col-xs-5,
.transbg.dark.col-xs-6,
.transbg.dark.col-xs-7,
.transbg.dark.col-xs-8,
.transbg.dark.col-xs-9,
.transbg.dark.col-xs-10,
.transbg.dark.col-xs-11,
.transbg.dark.col-xs-12 {
    border: 3px solid rgba(255,255,255,0);
    background: rgba(0,0,0,0.6);
    background-clip: padding-box;
    border-radius: 7px;
}

/* BLOCKS */
.transbg.col-xs-1,
.transbg.col-xs-2,
.transbg.col-xs-3,
.transbg.col-xs-4,
.transbg.col-xs-5,
.transbg.col-xs-6,
.transbg.col-xs-7,
.transbg.col-xs-8,
.transbg.col-xs-9,
.transbg.col-xs-10,
.transbg.col-xs-11,
.transbg.col-xs-12 {
    padding-top:15px;
    padding-bottom:15px;
    border: 3px solid rgba(0,0,0,0);
    background: rgba(0,0,0,0.3);
    background-clip: padding-box;
    border-radius: 7px;
    height:100%
}

/* DOTS BELOW SCREEN SWITCH SCREENS */
.swiper-pagination-bullet {
	background-color:#fff !important;
	width: 20px;
	height: 20px;
}

/* Fix graph background color */
.graphpopup > .transbg.col-xs-12 {
   background-color: #05050599 !important;
}

/* On mouse-over */
.transbg.col-xs-1.hover:hover,
.transbg.col-xs-2.hover:hover,
.transbg.col-xs-3.hover:hover,
.transbg.col-xs-4.hover:hover,
.transbg.col-xs-5.hover:hover,
.transbg.col-xs-6.hover:hover,
.transbg.col-xs-7.hover:hover,
.transbg.col-xs-8.hover:hover,
.transbg.col-xs-9.hover:hover,
.transbg.col-xs-10.hover:hover,
.transbg.col-xs-11.hover:hover,
.transbg.col-xs-12.hover:hover {
    padding-top:15px;
    padding-bottom:15px;
    border: 3px solid rgba(0,0,0,0);
    background: rgba(100,100,100,0.4);
    background-clip: padding-box;
    border-radius: 9px;
    cursor:pointer;
    height:100%
}

.fas.fa-user.on { color:#F1C300; }
.fas.fa-user.off { color:#fff; }

.fas.fa-male.on { color:#00FF00; }
.fas.fa-male.off { color:#fff; }

.fas.fa-female.on {  color:#00FF00; }
.fas.fa-female.off {  color:#fff; }

.fas.fa-power-off.on { color:#00FF00; }
.fas.fa-power-off.off { color:#fff; }

.fas.fa-door-open.on { color:#FF0000; }
.fas.fa-door-open.off { color:#fff; }

.far.fa-lightbulb.on { color:#F1C300; }
.far.fa-lightbulb.off { color:#fff; }

/*
#graphoutput473 {height: 150px;}
#graphoutput434 {height: 150px;}
*/

/* Sunset & Sunrise icon color */
.wi-sunrise { color: yellow; !important; }
.wi-sunset  { color: yellow; !important; }

/* Make traffic map bigger */
.trafficmap { height: 100%; }
.col-xs-1.block_trafficmap,
.col-xs-2.block_trafficmap,
.col-xs-3.block_trafficmap,
.col-xs-4.block_trafficmap,
.col-xs-5.block_trafficmap,
.col-xs-6.block_trafficmap,
.col-xs-7.block_trafficmap,
.col-xs-8.block_trafficmap,
.col-xs-9.block_trafficmap,
.col-xs-10.block_trafficmap,
.col-xs-11.block_trafficmap,
.col-xs-12.block_trafficmap {
    padding-left: 13px !important;
    padding-right: 13px !important;
    height: 380px !important;
}

/* dimmer sliders */
.ui-slider-handle {
    background-color: rgba(200,200,200,0.95) !important;
    border-radius: 10px;
    border-color: #ffffff80 !important;
	height: 18px !important;
	width: 18px !important;
	margin: -6px !important;
}

.ui-slider-horizontal {
    background-color: #6a6a6a;
    border-color: #ffffff;
    bottom: -6px;
    height: 1px;		
}

/* Selector buttons active*/
.btn.btn-default.active {
background-color: rgba(200,200,200,0.95) !important;
border-color: rgba(200,200,200,0.95) !important;
}

/* Selector buttons in-active*/
.btn.btn-default {
background-color: rgba(250,250,250,0.95) !important;
border-color: rgba(250,250,250,0.95) !important;
}


/* Setpoint buttons */
.input-groupBtn .btn-number {
opacity: 0.5;
color: white;
background-color: rgb(34, 34, 34);
border-radius: 0px;
padding: 6px 10px 6px 10px;
line-height: 20px;
}

/* Setpoint +/- signs */
.input-groupBtn .fa-thermostat {
opacity: 0.9;
vertical-align: middle;
font-size: 20px !important;
color: white;
}

/* Setpoint title */
strong.title.input-number.title-input {
    margin-top: -4px;
    font-size: 18px !important;	
}	

/* Setpoint data */
div.state.stateheating {
    font-size: 15px;
	margin-bottom: -1px;
}


/*
.btn-default { visibility:hidden; } 
.fas.fa-tint { color:#4FBBFF; }
.fas.fa-bolt { color:#FFFF4F; }
.fas.fa-percent { color:#BEFF4F; }
.fas.fa-asterisk { color:#4FBBFF; }
.wi.wi-barometer { color:#4FBBFF; }
.fas.fa-thermometer-half { color:#FF66CC; }
.fas.fa-sun { color:#FFFF4F; }
.wi.wi-humidity { color:#4FBBFF; }
*/

[Lokonli]

Hi, and thanks for the feedback.

Yes, the buttons are used as shortcuts to slide to a desired screen. I would like the button to stay marked (different background) even after the slide to screen action is finished. All other buttons should have the default background. Actually, I think linking the button background color change to a screen load is actually better. Then the right button will be marked if I either slide to a page or press the shortcut button.

I have attached my current config and some updated screenshots below (this is still work in progress, and the gray background on the shortcut buttons are just a mock up for now to illustrate what I would like to achieve).

That should be doable, however it requires some coding: Apply a specific style for the last selected button.
Probably I've some time to work on this in two weeks.

[paalkr]

That should be doable, however it requires some coding: Apply a specific style for the last selected button.
Probably I've some time to work on this in two weeks.

Excellent, tanks!

BTW, have you had the time to look at my pull requests regarding some language issues, UTF-8 characters in selector switches and configurable setpint min/max values?

Regards

[ronald89]

@ronaldo89 looks great!
Can you share your code?

Thanks and sure I can

config.js

Code: Select all

var config = {}
config['language'] = 'nl_NL';
config['domoticz_ip'] = 'XXXXXXX';
config['domoticz_refresh'] = '5';
config['dashticz_refresh'] = '60';
config['last_update'] = 0;
config['auto_positioning'] = 0;
config['auto_swipe_back_after'] = 0
config['auto_slide_pages'] = '30';
config['slide_effect'] = 'slide';
config['timeformat'] = 'DD-MM-YY HH:mm';
config['calendarformat'] = 'dd D MMM HH:mm';
config['calendarlanguage'] = 'nl_NL';
config['hide_topbar'] = 1;
config['owm_api'] = 'XXXXXXXXX';
config['owm_city'] = '\'s-Gravenzande';
config['owm_name'] = '';
config['owm_country'] = 'nl';
config['owm_cnt'] = 4;			// Number of columns to show. If showing days, max is 5
config['owm_days'] = 1;			// Enter 1 for showing forecast in days, 0 for the OWM default 3 hour forecast
config['owm_min'] = 1;			// Enter 1 to show min temperature on 2nd row
config['owm_lang'] = 'nl';		// Set language for de description of the forecast (rain, cloudy, etc.). For available languages, see https://openweathermap.org/forecast5/#multi
config['static_weathericons'] = 0;	// Enter 1 for animated weather icons, 0 for static icons

function getStatus_126(idx,value,device){
   if(device['Data']!="Off"){
      $('div.block_126').removeClass('background_red').addClass('background_green');
   }
   else {
      $('div.block_126').removeClass('background_green').addClass('background_red');
   }
}


var calendars = {}
calendars.gezamenlijk = { maxitems: 10, icalurl: 'XXXXXXXX.ics', icon: 'far fa-calendar-alt'}
calendars.f1 = { maxitems: 10, icalurl: 'XXXXXXXXX.ics', icon: 'fas fa-flag-checkered'}
calendars.ajax = { maxitems: 10, icalurl: 'XXXXXXX.ics', icon: 'fas fa-futbol'}
calendars.afval = { maxitems: 3, icalurl: 'XXXXXXXXX.ics', icon: 'far fa-trash-alt'}


var frames = {}
frames.weather = {refreshiframe:300000,height:230,frameurl:"//forecast.io/embed/#lat=52.0012836&lon=4.1670315&name='s-Gravenzande&color=#00aaff&font=Helvetica&fontColor=#ffffff&units=si&lang=nl&text-color=#fff",width:12}

frames.buienradar = {refreshiframe:300000, width:8, height:350, frameurl:"https://gadgets.buienradar.nl/gadget/zoommap/?lat=52.00167&lng=4.16528&overname=2&zoom=13&naam='s-gravenzande&size=2b&voor=1"}


var blocks = {}
blocks['s1'] = {} 
blocks['s1']['icon'] = 'fas fa-sun';
blocks['s1']['hide_data'] = true;
blocks['s1']['width'] = 6;

blocks['s2'] = {}
blocks['s2']['icon'] = 'fas fa-moon';
blocks['s2']['hide_data'] = true;
blocks['s2']['width'] = 6;

blocks[129] = {} 
blocks[129]['icon'] = 'fas fa-tint';
blocks[129]['hide_data'] = true;
blocks[129]['width'] = 4;

blocks[131] = {} 
blocks[131]['icon'] = 'fas fa-umbrella';
blocks[131]['hide_data'] = true;
blocks[131]['title'] = 'Neerslaghoeveelheid';
blocks[131]['width'] = 4;

blocks[139] = {} 
blocks[139]['width'] = 6;

blocks[140] = {} 
blocks[140]['width'] = 6;

blocks[142] = {} 
blocks[142]['width'] = 6;

blocks[143] = {} 
blocks[143]['width'] = 6;

blocks[148] = {} 
blocks[148]['icon'] = 'fas fa-sun';
blocks[148]['width'] = 12;

blocks[149] = {} 
blocks[149]['icon'] = 'fas fa-sun';
blocks[149]['width'] = 4;

blocks[155] = {} 
blocks[155]['icon'] = 'fas fa-sun';
blocks[155]['width'] = 12;

blocks[156] = {} 
blocks[156]['icon'] = 'fas fa-sun';
blocks[156]['width'] = 12;


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

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

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

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

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

blocks['blocktitle_6'] = {}
blocks['blocktitle_6']['type'] = 'blocktitle';
blocks['blocktitle_6']['title'] = 'Speelschema Ajax';

blocks['blocktitle_7'] = {}
blocks['blocktitle_7']['type'] = 'blocktitle';
blocks['blocktitle_7']['title'] = 'F1 races';

blocks['blocktitle_8'] = {}
blocks['blocktitle_8']['type'] = 'blocktitle';
blocks['blocktitle_8']['title'] = 'Afvalkalender';


var columns = {}

columns[1] = {}
columns[1]['blocks'] = ['blocktitle_1',126,2,3,125,121,120,89,5,106,108,'blocktitle_2','s1','s2']
columns[1]['width'] = 4;

columns[2] = {}
columns[2]['blocks'] = ['currentweather_big_owm','weather_owm',frames.buienradar,149,129,131,148] 
columns[2]['width'] = 5; 

columns[3] = {}
columns[3]['blocks'] = ['clock','sunrise',139,140,142,143,155,156]
columns[3]['width'] = 3; 

columns[4] = {}
columns[4]['blocks'] = ['blocktitle_4','graph_67',67]
columns[4]['width'] = 6; 

columns[5] = {}
columns[5]['blocks'] = ['blocktitle_3','graph_68',68]
columns[5]['width'] = 6; 

columns[6] = {}
columns[6]['blocks'] = ['blocktitle_5',calendars.gezamenlijk]
columns[6]['width'] = 3; 

columns[7] = {}
columns[7]['blocks'] = ['blocktitle_6',calendars.ajax]
columns[7]['width'] = 3;

columns[8] = {}
columns[8]['blocks'] = ['blocktitle_7',calendars.f1]
columns[8]['width'] = 3; 

columns[9] = {}
columns[9]['blocks'] = ['blocktitle_8',calendars.afval]
columns[9]['width'] = 3; 


var screens = {}
screens[1] = {}
screens[1]['background'] = 'bg9-1.jpg';
screens[1]['columns'] = [1,2,3]

screens[2] = {}
screens[2]['background'] = 'bg9-1.jpg';
screens[2]['columns'] = [6,7,8,9]

screens[3] = {}
screens[3]['background'] = 'bg9-1.jpg';
screens[3]['columns'] = [4,5]

custom.css

Code: Select all

.fas.fa-lightbulb.on {
    color:#ffc33d !important;
}

.background_green {
	background-color: rgba(0, 255, 0, 0.3) !important;
}

.background_red {
	background-color: rgba(255, 0, 0, 0.3) !important;
}

.swiper-pagination-bullet {
    width: 12px !important;
    height: 12px !important;
}


div.mh.block_5 {
    height: 100%;
}

div.mh.block_106 {
    height: 100%;
}

div.mh.block_129 {
    height: 100%;
}

div.mh.block_131 {
    height: 100%;
}

div.mh.block_142 {
    height: 100%;
}

div.mh.block_148 {
    height: 100%;
}

div.mh.block_149 {
    height: 100%;
}

div.mh.block_155 {
    height: 100%;
}

div.mh.block_156 {
    height: 100%;
}

[EdwinK]

@ronald89

Thanks for sharing. Seems you have the same tablet I'm using.

Shouldn't this code be in custom.css?

Code: Select all

function getStatus_126(idx,value,device){
   if(device['Data']!="Off"){
      $('div.block_126').removeClass('background_red').addClass('background_green');
   }
   else {
      $('div.block_126').removeClass('background_green').addClass('background_red');
   }
}

</code>

s

[ronald89]

@ronald89

Thanks for sharing. Seems you have the same tablet I'm using.

Shouldn't this code be in custom.css?

I used the code given in this post
https://www.domoticz.com/forum/viewtopi ... jn#p157675

[pvklink]

@lokonli All my major problems solved !! many thanks!
My dashboard becomes better and beter, i like to have all grey icons that become yellow when on!

Still have some little ux problems:
In domoticz i have a doorbell (bel tuin in the right corner below). When it is pushed a wav is played on my google home.
In dashticz i cant push the button and it is "On" (while it is actually off)

Also my all my selector switches the icon is default 'On' (yellow) while it should be off...
i want the yellow color when its on an grey when its off, like all switch devices i use
.fa-bell.on {color:#F1C300;}
.fa-bell.off {color:#fff;}

i added the code below that i found on the forum....but it doesnt work...
another wish is to get the image of my webcam heigher, i did the trick with my weather on the left but i cant get it to work with my cam on the right!

/* Selector buttons active*/
.btn.btn-default.active {
background-color: rgba(200,200,200,0.95) !important;
border-color: rgba(200,200,200,0.95) !important;
}

/* Selector buttons in-active*/
.btn.btn-default {
background-color: rgba(250,250,250,0.95) !important;
border-color: rgba(250,250,250,0.95) !important;
}

another strange thing is when i use some icons they dont work, like: fas fa-car-battery (most do work)

blocks[263] = {}
blocks[263]['title'] = 'Accu';
blocks[263]['icon'] = 'fas fa-car-battery';
blocks[263]['hide_data'] = true;

css
.fa-car-battery.on {color:#F1C300;}
.fa-car-battery.off {color:#fff;}

[silver323]

Maybe someone can help me.
My newsfeed stops after a time. When i refresh the news feed shows information. But after a time i get no more newsfeed information.
With refresh it works for a time. Then it stopt.

Is there a way to repeat this or something?