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

Dashticz, alternative dashboard based on HTML, CSS, jQuery

Moderators: leecollings, htilburgs, robgeerts

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 »

@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?
Blah blah blah
pvklink
Posts: 822
Joined: Wednesday 12 November 2014 15:01
Target OS: Raspberry Pi / ODroid
Domoticz version: latest b
Contact:

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

Post by 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
my dashboard
dashboard.jpg (399.11 KiB) Viewed 3465 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]


Raspberry (raspbian on rpi 3) , Domoticz Beta, dzVents , RFXtrx433e, P1, Hue, Yeelight, Zwave+, X10, ESP(easy), MQTT,Weather Underground, System Alive Checker, Domoticz Remote Server to RPI with Google Assistant,
Jablotron connection, Ikea
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 »

pvklink wrote: Sunday 10 February 2019 18:16
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
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 »

pvklink wrote: Sunday 10 February 2019 18:16 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
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 »

pvklink wrote: Sunday 10 February 2019 18:16 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
Posts: 822
Joined: Wednesday 12 November 2014 15:01
Target OS: Raspberry Pi / ODroid
Domoticz version: latest b
Contact:

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

Post by 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
Raspberry (raspbian on rpi 3) , Domoticz Beta, dzVents , RFXtrx433e, P1, Hue, Yeelight, Zwave+, X10, ESP(easy), MQTT,Weather Underground, System Alive Checker, Domoticz Remote Server to RPI with Google Assistant,
Jablotron connection, Ikea
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 »

pvklink wrote: Sunday 10 February 2019 18:16
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
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 »

pvklink wrote: Sunday 10 February 2019 22:19 Can i also use the icons from https://fontawesome.com/icons/laptop?style=solid ?
yes, that should work as well.
pvklink wrote: Sunday 10 February 2019 22:19 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'
pvklink wrote: Sunday 10 February 2019 22:19 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;
pvklink wrote: Sunday 10 February 2019 22:19 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
Posts: 24
Joined: Saturday 06 May 2017 9:52
Target OS: Windows
Domoticz version:
Contact:

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

Post by 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
main_screen.jpg (242.47 KiB) Viewed 3424 times
ronald89
Posts: 11
Joined: Thursday 02 August 2018 13:50
Target OS: NAS (Synology & others)
Domoticz version:
Contact:

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

Post by ronald89 »

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

dashticz1.jpg
dashticz1.jpg (214.61 KiB) Viewed 3407 times
dashticz2.jpg
dashticz2.jpg (129.66 KiB) Viewed 3407 times
dashticz3.jpg
dashticz3.jpg (108.76 KiB) Viewed 3407 times

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

Image
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 »

paalkr wrote: Monday 11 February 2019 0:41 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
Posts: 822
Joined: Wednesday 12 November 2014 15:01
Target OS: Raspberry Pi / ODroid
Domoticz version: latest b
Contact:

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

Post by 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!
Raspberry (raspbian on rpi 3) , Domoticz Beta, dzVents , RFXtrx433e, P1, Hue, Yeelight, Zwave+, X10, ESP(easy), MQTT,Weather Underground, System Alive Checker, Domoticz Remote Server to RPI with Google Assistant,
Jablotron connection, Ikea
paalkr
Posts: 24
Joined: Saturday 06 May 2017 9:52
Target OS: Windows
Domoticz version:
Contact:

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

Post by paalkr »

Lokonli wrote: Monday 11 February 2019 18:56
paalkr wrote: Monday 11 February 2019 0:41 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
main_page.jpg (246.93 KiB) Viewed 3335 times
Hall.jpg
Hall.jpg (167.57 KiB) Viewed 3335 times
Korridor.jpg
Korridor.jpg (162.25 KiB) Viewed 3335 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
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 »

paalkr wrote: Monday 11 February 2019 23:17
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
Posts: 24
Joined: Saturday 06 May 2017 9:52
Target OS: Windows
Domoticz version:
Contact:

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

Post by paalkr »

Lokonli wrote: Tuesday 12 February 2019 8:26 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
Posts: 11
Joined: Thursday 02 August 2018 13:50
Target OS: NAS (Synology & others)
Domoticz version:
Contact:

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

Post by ronald89 »

pvklink wrote: Monday 11 February 2019 21:56 @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%;
}
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 »

@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
Running latest BETA on a Pi-3 | Toon® Thermostat (rooted) | Hue | Tuya | IKEA tradfri | Dashticz V3 on Lenovo Huawei Tablet | Conbee
ronald89
Posts: 11
Joined: Thursday 02 August 2018 13:50
Target OS: NAS (Synology & others)
Domoticz version:
Contact:

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

Post by ronald89 »

EdwinK wrote: Tuesday 12 February 2019 19:06 @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
Posts: 822
Joined: Wednesday 12 November 2014 15:01
Target OS: Raspberry Pi / ODroid
Domoticz version: latest b
Contact:

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

Post by 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;}
Attachments
dashboard.jpg
dashboard.jpg (122.44 KiB) Viewed 3213 times
Raspberry (raspbian on rpi 3) , Domoticz Beta, dzVents , RFXtrx433e, P1, Hue, Yeelight, Zwave+, X10, ESP(easy), MQTT,Weather Underground, System Alive Checker, Domoticz Remote Server to RPI with Google Assistant,
Jablotron connection, Ikea
silver323
Posts: 28
Joined: Friday 01 December 2017 18:15
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

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

Post by 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?
Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest