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

poudenes · Post by **poudenes** » Friday 28 April 2017 11:41

Thanks that sound great

htilburgs wrote:
poudenes wrote:
htilburgs wrote:
Thnx!
The iPhone information is done with the script, found here:
viewtopic.php?f=23&t=13318&hilit=iphone
Tried everything... Still not working. Can you send your script maybe i do something work. (don't forget to remove your iCloud info)
I will send it tomorow

koowee · Post by **koowee** » Friday 28 April 2017 12:25

poudenes wrote:Thanks that sound great

htilburgs wrote:
poudenes wrote:
Tried everything... Still not working. Can you send your script maybe i do something work. (don't forget to remove your iCloud info)
I will send it tomorow

I would also be interested in that script. It would be great if you can send it also for me.

DewGew · Post by **DewGew** » Friday 28 April 2017 12:46

Here is my Dashticz on my Asus tf101, it´s a never ending story. Not much changes.

: Screenshot.png (248.21 KiB) Viewed 7549 times

// DewGew

poudenes · Post by **poudenes** » Friday 28 April 2017 19:29

Final tune of the screens. Now DONE !!!

Screenshot_20170428-192019.png

Screenshot_20170428-192023.png

Screenshot_20170428-192029.png

CONFIG.js

Code: Select all

var _LANGUAGE 			= 'nl_NL';
var _HOST_DOMOTICZ		= 'http://192.168.100.3:8081';
var _DOMOTICZ_REFRESH		= 5;

/*
IF YOU HAVE A MEDIABOX FROM ZIGGO (HORIZON), COPY SWITCH_HORIZON.PHP ON A WEBSERVER INSIDE YOUR NETWORK AND CHANGE THE IP.
ENTER THE PATH TO THIS FILE BELOW.
*/
var _HOST_ZIGGO_HORIZON	  	= '';
var _APIKEY_WUNDERGROUND  	= 'API KEY';
var _WEATHER_CITY 		= 'Amsterdam';
var _WEATHER_CITYNAME 		= '';
var _WEATHER_COUNTRY 		= 'NL';
var _USE_AUTO_POSITIONING 	= true;
var _USE_FAVORITES		= true;
var _HIDE_SECONDS_IN_CLOCK  	= false;
var _HIDE_MEDIAPLAYER_WHEN_OFF 	= false;
var _NEWS_RSSFEED		= 'http://www.nu.nl/rss';
var _USE_FAHRENHEIT		= false;
var _USE_BEAUFORT 		= false;
var _STANDBY_AFTER_MINUTES  	= false;
var _SCROLL_NEWS_AFTER 		= 10000;
var _LASTUPDATE_FORMAT 		= 'DD-MM-YY HH:mm';
var _IDXmoonpicture      	= 1;
var _SCREENSLIDER_EFFECT 	= 'fade';

//var _APIKEY_MAPS            	= 'API KEY';
//var _MAPS_LATITUDE            = 52.333368;
//var _MAPS_LONGITUDE         	= 4.870349;
//var _MAPS_ZOOMLEVEL  		= 15;

var frames = {}
frames.treinen 			= {refreshiframe:30000,height:700,frameurl:"https://www.rijdendetreinen.nl/vertrektijden/station/amsterdam-zuid?verberg_treinnummers=on&verberg_mat=on?stijl=tas",width:12} // OUDE stijl acter URL: ?stijl=tas plaatsen

var buttons = {}
buttons.buienradar 		= {width:12, isimage:true, refreshimage:60000, image: 'http://api.buienradar.nl/image/1.0/RadarMapNL?w=285&h=256', url: 'http://www.weeronline.nl/Europa/Nederland/Amsterdam/4058223'}
buttons.radio 			= {width:12, image: 'img/radio_on.png', title: 'Radio', url: 'http://nederland.fm'}
buttons.nunl 			= {width:12, icon: 'fa-newspaper-o', title: 'Nu.nl', url: 'http://www.nu.nl'} 
buttons.moon			= {width:12, isimage:true, refreshimage:60000, image: 'moon'}

var _STREAMPLAYER_TRACKS = [
   {"track":1,"name":"Q-music","file":"http://icecast-qmusic.cdp.triple-it.nl/Qmusic_nl_live_96.mp3"},
   {"track":2,"name":"538","file":"http://vip-icecast.538.lw.triple-it.nl/RADIO538_MP3"},
   {"track":3,"name":"538 Dance Dep","file":"http://vip-icecast.538.lw.triple-it.nl/WEB01_MP3"},
   {"track":4,"name":"Slam! Juize","file":"http://stream.radiocorp.nl/web09_mp3"},
   {"track":5,"name":"Slam! Boom Room","file":"http://stream.radiocorp.nl/web12_mp3"},
   {"track":6,"name":"Slam! NonStop","file":"http://stream.radiocorp.nl/web10_mp3"},
   {"track":7,"name":"100%NL","file":"http://stream.100p.nl/100pctnl.mp3"},
];

// 
// SWITCH DENENITIES
//

var blocks = {}

blocks[1] = {} // THERMOSTAAT
blocks[1]['width'] = 12;

blocks[2] = {} // BINNEN TEMP EN VOCHTIGHEID
blocks[2]['width'] = 6;

blocks[25] = {} // RAAM
blocks[25]['width'] = 12;

blocks[26] = {} // MUUR
blocks[26]['width'] = 12;                                                               

blocks[19] = {} // EETTAFEL
blocks[19]['width'] = 12;

blocks[22] = {} // DRESSOIR
blocks[22]['width'] = 12;

blocks[24] = {} // BUITEN
blocks[24]['width'] = 12;

blocks[73] = {} // SLAAPKAMER
blocks[73]['width'] = 6;

blocks[33] = {} // BADKAMER
blocks[33]['width'] = 6;

blocks[27] = {} // HAL
blocks[27]['width'] = 12;

blocks[177] = {} // Bulb Status
blocks[177]['width'] = 6;

blocks[178] = {} // Bulb Effect 
blocks[178]['width'] = 6;

blocks[101] = {} // IPHONE PETER
blocks[101]['title'] = 'iPhone Peter'
blocks[101]['width'] = 6;

blocks[102] = {} // IPHONE KAY
blocks[102]['title'] = 'iPhone Kay';
blocks[102]['width'] = 6;

blocks[127] = {} // EK DEUR
blocks[127]['title'] = 'Eetkamer Deur';
blocks[127]['width'] = 3;
blocks[127]['icon'] = 'fa-sign-out'; 

blocks[129] = {} // SK DEUR
blocks[129]['title'] = 'Slaapkamer Deur';
blocks[129]['width'] = 3;
blocks[129]['icon'] = 'fa-sign-out';

blocks[222] = {} // MAAN PHASE
blocks[222]['title'] = 'Phase';
blocks[222]['width'] = 6;

blocks[219] = {} // MAAN PERS
blocks[219]['width'] = 12;
blocks[219]['title'] = 'Moon Percentage';

blocks[225] = {} // iPhone %
blocks[225]['width'] = 12;
blocks[225]['title'] = 'iPhone Peter';

//
// SCENES
//

blocks[82] = {} // ALL OFF
blocks[82]['title'] = 'Alles uit';

blocks[75] = {} // EVENING
blocks[75]['title'] = 'Avond';

blocks[76] = {} // TV
blocks[76]['title'] = 'Ziggo';

blocks[77] = {} // MOVIE
blocks[77]['title'] = 'Film';

blocks[78] = {} // GOODNIGHT
blocks[78]['title'] = 'Slapen';

blocks[79] = {} // SEXY
blocks[79]['title'] = 'Romantisch';

blocks[80] = {} // LEAVING
blocks[80]['title'] = 'Weggaan';

blocks[81] = {} // COME HOME
blocks[81]['title'] = 'Thuiskomen';

blocks[106] = {} // GOOD MORNING
blocks[106]['title'] = 'Goedemorgen';

//
// RASPBERRY INFO
//

blocks[17] = {} // RPi TEMPERTURE
blocks[17]['width'] = 12;
blocks[17]['title'] = 'RPi Temp';
blocks[17]['image'] = 'pi3.png';

blocks[14] = {} // RPi MEMORY USAGE
blocks[14]['width'] = 12;
blocks[14]['title'] = 'RPi Mem';
blocks[14]['image'] = 'pi3.png';

blocks[15] = {} // RPi SD USAGE
blocks[15]['width'] = 12;
blocks[15]['title'] = 'RPi SD';
blocks[15]['image'] = 'pi3.png';

blocks[16] = {} // RPI USB USAGE
blocks[16]['width'] = 12;
blocks[16]['title'] = 'RPi USB';
blocks[16]['image'] = 'pi3.png';

//
// LOGITECH BUTTONS
//

blocks[86] = {} // ACTIVITY ALL OFF
blocks[86]['width'] = 12;
blocks[86]['title'] = 'Harmony uit';
blocks[86]['icon'] = 'fa-toggle-on';

blocks[87] = {} // ACTIVITY APPLETV
blocks[87]['width'] = 12;
blocks[87]['title'] = 'Harmony AppleTV';
blocks[87]['icon'] = 'fa-toggle-on';

blocks[88] = {} // ACTIVITY TV
blocks[88]['width'] = 12;
blocks[88]['title'] = 'Harmony Ziggo';
blocks[88]['icon'] = 'fa-toggle-on';

blocks[89] = {} // ACTIVITY AIRPLAY
blocks[89]['width'] = 12;
blocks[89]['title'] = 'Harmony AirPlay';
blocks[89]['icon'] = 'fa-toggle-on';

blocks[90] = {} // ACTIVITY KODI
blocks[90]['width'] = 12;
blocks[90]['title'] = 'Harmony Kodi';
blocks[90]['icon'] = 'fa-toggle-on';

//
// INTERNET SNELHEID
//

blocks[172] = {} // INTERNET PING
blocks[172]['width'] = 12;
blocks[172]['icon'] = 'fa-safari';

blocks[173] = {} // INTENRET DOWNLOAD
blocks[173]['width'] = 12;
blocks[173]['icon'] = 'fa-safari';

blocks[174] = {} // INTERNET UPLAD
blocks[174]['width'] = 12;
blocks[174]['icon'] = 'fa-safari';

//
// NEWS FEED
//

blocks['news_10'] = {} // NU.NL
blocks['news_10']['width'] = 6;
blocks['news_10']['feed'] = 'https://crossorigin.me/http://www.nu.nl/rss';

blocks['news_20'] = {} // TVGIDS
blocks['news_20']['width'] = 6;
blocks['news_20']['feed'] = 'https://crossorigin.me/https://www.tvgids24.nl/nieuws.rss';

blocks['news_30'] = {} // PEREZ
blocks['news_30']['width'] = 6;
blocks['news_30']['feed'] = 'https://crossorigin.me/http://i.perezhilton.com/?feed=rss2';

//
// TITLE BLOKKEN
//

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

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

blocks['blocktitle_30'] = {}
blocks['blocktitle_30']['type'] = 'blocktitle';
blocks['blocktitle_30']['title'] = 'Rapberry Pi';

blocks['blocktitle_40'] = {}
blocks['blocktitle_40']['type'] = 'blocktitle';
blocks['blocktitle_40']['title'] = 'Weerverwachting';

blocks['blocktitle_50'] = {}
blocks['blocktitle_50']['type'] = 'blocktitle';
blocks['blocktitle_50']['title'] = 'NEST Thermostaat';

blocks['blocktitle_60'] = {}
blocks['blocktitle_60']['type'] = 'blocktitle';
blocks['blocktitle_60']['title'] = 'Nieuws Feed';

blocks['blocktitle_80'] = {}
blocks['blocktitle_80']['type'] = 'blocktitle';
blocks['blocktitle_80']['title'] = 'Scenes';

blocks['blocktitle_90'] = {}
blocks['blocktitle_90']['type'] = 'blocktitle';
blocks['blocktitle_90']['title'] = 'Speedtest.net';

blocks['blocktitle_100'] = {}
blocks['blocktitle_100']['type'] = 'blocktitle';
blocks['blocktitle_100']['title'] = 'NS Vertrek tijden Amsterdam Zuid';

//
// COLUMNS DEFENITIES
//

var columns = {}

columns[10] = {} // TIJD SUNRISE SUNSET BUIENRADAR NEST
columns[10]['blocks'] = ['clock','sunrise',buttons.buienradar,buttons.calendar,buttons.moon,219];
columns[10]['width'] = 2;

columns[20] = {} // LAMPEN
columns[20]['blocks'] = ['blocktitle_10',25,26,19,22,24,27,177,178,73,33];
columns[20]['width'] = 5;

columns[30] = {} // WEERVERWACHTING
columns[30]['blocks'] = ['blocktitle_40','currentweather_big','weather',101,102,2];
columns[30]['width'] = 6;

columns[40] = {} // RASPBERRY PI
columns[40]['blocks'] = ['blocktitle_30',17,14,15,16];
columns[40]['width'] = 2;

columns[50] = {} // LOGITECH
columns[50]['blocks'] = ['blocktitle_20',86,87,88,90];
columns[50]['width'] = 2;

columns[60] = {} // STREAMPLAYER
columns[60]['blocks'] = ['streamplayer'];
columns[60]['width'] = 4;

columns[70] = {} // NIEUWS FEED
columns[70]['blocks'] = ['blocktitle_60','news_10','news_20'];
columns[70]['width'] = 10;

columns[80] = {} // NEST, SCENES EN DOWNLOAD SNELHEID
columns[80]['blocks'] = ['blocktitle_50',1,2,'blocktitle_80',82,75,76,77,78,79,80,81,106,'blocktitle_90',172,173,174];
columns[80]['width'] = 5;

columns[90] = {} // TREIN MELDINGEN
columns[90]['blocks'] = ['train'];
columns[90]['width'] = 10;

columns[200] = {} // RIJDEN DE TREINEN
columns[200]['blocks'] = ['blocktitle_100',frames.treinen];
columns[200]['width'] = 10;

columns[300] = {} // OV REALTIME
columns[300]['blocks'] = ['blocktitle_100',frames.gvb];
columns[300]['width'] = 10;

var screens = {}
screens[10] = {}
screens[10]['background'] = 'poesje.jpg';
screens[10]['columns'] = [10,30,50,40,60,70];

screens[20] = {} // LAMPEN EN SCENES
screens[20]['background'] = 'poesje.jpg';
screens[20]['columns'] = [10,20,80];

screens[30] = {} // TRAIN INFO
screens[30]['background'] = 'poesje.jpg';
screens[30]['columns'] = [10,200];

custom.css

Code: Select all

/* 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.5); background-clip: padding-box; border-radius: 9px; height:100%}

.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.8); background-clip: padding-box; border-radius: 9px; cursor:pointer; height:100%}

/* ICONS */
.fa.fa-lightbulb-o.on:before    {color:#00FF00;font-size: 25px;}
.fa.fa-lightbulb-o.off:before   {color:#ff0000;font-size: 25px;}
.fa.fa-tv.on:before             {color:#00FF00;font-size: 25px;}
.fa.fa-tv.off:before            {color:#ff6666;font-size: 25px;}
.fa.fa-file-movie-o.on:before   {color:#00FF00;font-size: 25px;}
.fa.fa-file-movie-o.off:before  {color:#ffff00;font-size: 25px;}
.fa.fa-music.on:before          {color:#00FF00;font-size: 25px;}
.fa.fa-music.off:before         {color:#0099ff;font-size: 25px;}
.fa.fa-power-off.off.on:before  {color:#00FF00;font-size: 25px;}
.fa.fa-power-off.off:before     {color:#ff8000;font-size: 25px;}
.fa-toggle-on.on:before         {color:#00FF00;font-size: 25px;}
.fa-toggle-on.off:before        {color:#ff0000;font-size: 25px;}
.fa-sign-out.on:before          {color:#00FF00;font-size: 25px;}
.fa-sign-out.off:before         {color:#ff0000;font-size: 25px;}

/* WEATHER */
.wi                             {color:#fff000;}

/* DOTS BELOW SCREEN SWITCH SCREENS */
.swiper-pagination-bullet 	{background: #c7c7c7; width: 40px; height: 40px; float:left; position:relative; left:35px;}

/* BLOCKS TITLE */
h1, h2, h3, h4, h5, h6 {	font-family: Arial, sans-serif; margin: 0px; margin-left: 15px; font-weight: 400; font-size: 145%; color: #00FF00;}

/* Round Corners
.input-groupBtn li 		{position:sticky; z-index: 9999; right: 1px; border-radius: 1px;}
*/

pkrabben · Post by **pkrabben** » Friday 28 April 2017 21:35

poudenes wrote:Final tune of the screens. Now DONE !!!

Screenshot_20170428-192019.png
Screenshot_20170428-192023.png
Screenshot_20170428-192029.png

CONFIG.js

Code: Select all

var _LANGUAGE 			= 'nl_NL';
var _HOST_DOMOTICZ		= 'http://192.168.100.3:8081';
var _DOMOTICZ_REFRESH		= 5;

/*
IF YOU HAVE A MEDIABOX FROM ZIGGO (HORIZON), COPY SWITCH_HORIZON.PHP ON A WEBSERVER INSIDE YOUR NETWORK AND CHANGE THE IP.
ENTER THE PATH TO THIS FILE BELOW.
*/
var _HOST_ZIGGO_HORIZON	  	= '';
var _APIKEY_WUNDERGROUND  	= 'API KEY';
var _WEATHER_CITY 		= 'Amsterdam';
var _WEATHER_CITYNAME 		= '';
var _WEATHER_COUNTRY 		= 'NL';
var _USE_AUTO_POSITIONING 	= true;
var _USE_FAVORITES		= true;
var _HIDE_SECONDS_IN_CLOCK  	= false;
var _HIDE_MEDIAPLAYER_WHEN_OFF 	= false;
var _NEWS_RSSFEED		= 'http://www.nu.nl/rss';
var _USE_FAHRENHEIT		= false;
var _USE_BEAUFORT 		= false;
var _STANDBY_AFTER_MINUTES  	= false;
var _SCROLL_NEWS_AFTER 		= 10000;
var _LASTUPDATE_FORMAT 		= 'DD-MM-YY HH:mm';
var _IDXmoonpicture      	= 1;
var _SCREENSLIDER_EFFECT 	= 'fade';

//var _APIKEY_MAPS            	= 'API KEY';
//var _MAPS_LATITUDE            = 52.333368;
//var _MAPS_LONGITUDE         	= 4.870349;
//var _MAPS_ZOOMLEVEL  		= 15;

var frames = {}
frames.treinen 			= {refreshiframe:30000,height:700,frameurl:"https://www.rijdendetreinen.nl/vertrektijden/station/amsterdam-zuid?verberg_treinnummers=on&verberg_mat=on?stijl=tas",width:12} // OUDE stijl acter URL: ?stijl=tas plaatsen

var buttons = {}
buttons.buienradar 		= {width:12, isimage:true, refreshimage:60000, image: 'http://api.buienradar.nl/image/1.0/RadarMapNL?w=285&h=256', url: 'http://www.weeronline.nl/Europa/Nederland/Amsterdam/4058223'}
buttons.radio 			= {width:12, image: 'img/radio_on.png', title: 'Radio', url: 'http://nederland.fm'}
buttons.nunl 			= {width:12, icon: 'fa-newspaper-o', title: 'Nu.nl', url: 'http://www.nu.nl'} 
buttons.moon			= {width:12, isimage:true, refreshimage:60000, image: 'moon'}

var _STREAMPLAYER_TRACKS = [
   {"track":1,"name":"Q-music","file":"http://icecast-qmusic.cdp.triple-it.nl/Qmusic_nl_live_96.mp3"},
   {"track":2,"name":"538","file":"http://vip-icecast.538.lw.triple-it.nl/RADIO538_MP3"},
   {"track":3,"name":"538 Dance Dep","file":"http://vip-icecast.538.lw.triple-it.nl/WEB01_MP3"},
   {"track":4,"name":"Slam! Juize","file":"http://stream.radiocorp.nl/web09_mp3"},
   {"track":5,"name":"Slam! Boom Room","file":"http://stream.radiocorp.nl/web12_mp3"},
   {"track":6,"name":"Slam! NonStop","file":"http://stream.radiocorp.nl/web10_mp3"},
   {"track":7,"name":"100%NL","file":"http://stream.100p.nl/100pctnl.mp3"},
];

// 
// SWITCH DENENITIES
//

var blocks = {}

blocks[1] = {} // THERMOSTAAT
blocks[1]['width'] = 12;

blocks[2] = {} // BINNEN TEMP EN VOCHTIGHEID
blocks[2]['width'] = 6;

blocks[25] = {} // RAAM
blocks[25]['width'] = 12;

blocks[26] = {} // MUUR
blocks[26]['width'] = 12;                                                               

blocks[19] = {} // EETTAFEL
blocks[19]['width'] = 12;

blocks[22] = {} // DRESSOIR
blocks[22]['width'] = 12;

blocks[24] = {} // BUITEN
blocks[24]['width'] = 12;

blocks[73] = {} // SLAAPKAMER
blocks[73]['width'] = 6;

blocks[33] = {} // BADKAMER
blocks[33]['width'] = 6;

blocks[27] = {} // HAL
blocks[27]['width'] = 12;

blocks[177] = {} // Bulb Status
blocks[177]['width'] = 6;

blocks[178] = {} // Bulb Effect 
blocks[178]['width'] = 6;

blocks[101] = {} // IPHONE PETER
blocks[101]['title'] = 'iPhone Peter'
blocks[101]['width'] = 6;

blocks[102] = {} // IPHONE KAY
blocks[102]['title'] = 'iPhone Kay';
blocks[102]['width'] = 6;

blocks[127] = {} // EK DEUR
blocks[127]['title'] = 'Eetkamer Deur';
blocks[127]['width'] = 3;
blocks[127]['icon'] = 'fa-sign-out'; 

blocks[129] = {} // SK DEUR
blocks[129]['title'] = 'Slaapkamer Deur';
blocks[129]['width'] = 3;
blocks[129]['icon'] = 'fa-sign-out';

blocks[222] = {} // MAAN PHASE
blocks[222]['title'] = 'Phase';
blocks[222]['width'] = 6;

blocks[219] = {} // MAAN PERS
blocks[219]['width'] = 12;
blocks[219]['title'] = 'Moon Percentage';

blocks[225] = {} // iPhone %
blocks[225]['width'] = 12;
blocks[225]['title'] = 'iPhone Peter';

//
// SCENES
//

blocks[82] = {} // ALL OFF
blocks[82]['title'] = 'Alles uit';

blocks[75] = {} // EVENING
blocks[75]['title'] = 'Avond';

blocks[76] = {} // TV
blocks[76]['title'] = 'Ziggo';

blocks[77] = {} // MOVIE
blocks[77]['title'] = 'Film';

blocks[78] = {} // GOODNIGHT
blocks[78]['title'] = 'Slapen';

blocks[79] = {} // SEXY
blocks[79]['title'] = 'Romantisch';

blocks[80] = {} // LEAVING
blocks[80]['title'] = 'Weggaan';

blocks[81] = {} // COME HOME
blocks[81]['title'] = 'Thuiskomen';

blocks[106] = {} // GOOD MORNING
blocks[106]['title'] = 'Goedemorgen';

//
// RASPBERRY INFO
//

blocks[17] = {} // RPi TEMPERTURE
blocks[17]['width'] = 12;
blocks[17]['title'] = 'RPi Temp';
blocks[17]['image'] = 'pi3.png';

blocks[14] = {} // RPi MEMORY USAGE
blocks[14]['width'] = 12;
blocks[14]['title'] = 'RPi Mem';
blocks[14]['image'] = 'pi3.png';

blocks[15] = {} // RPi SD USAGE
blocks[15]['width'] = 12;
blocks[15]['title'] = 'RPi SD';
blocks[15]['image'] = 'pi3.png';

blocks[16] = {} // RPI USB USAGE
blocks[16]['width'] = 12;
blocks[16]['title'] = 'RPi USB';
blocks[16]['image'] = 'pi3.png';

//
// LOGITECH BUTTONS
//

blocks[86] = {} // ACTIVITY ALL OFF
blocks[86]['width'] = 12;
blocks[86]['title'] = 'Harmony uit';
blocks[86]['icon'] = 'fa-toggle-on';

blocks[87] = {} // ACTIVITY APPLETV
blocks[87]['width'] = 12;
blocks[87]['title'] = 'Harmony AppleTV';
blocks[87]['icon'] = 'fa-toggle-on';

blocks[88] = {} // ACTIVITY TV
blocks[88]['width'] = 12;
blocks[88]['title'] = 'Harmony Ziggo';
blocks[88]['icon'] = 'fa-toggle-on';

blocks[89] = {} // ACTIVITY AIRPLAY
blocks[89]['width'] = 12;
blocks[89]['title'] = 'Harmony AirPlay';
blocks[89]['icon'] = 'fa-toggle-on';

blocks[90] = {} // ACTIVITY KODI
blocks[90]['width'] = 12;
blocks[90]['title'] = 'Harmony Kodi';
blocks[90]['icon'] = 'fa-toggle-on';

//
// INTERNET SNELHEID
//

blocks[172] = {} // INTERNET PING
blocks[172]['width'] = 12;
blocks[172]['icon'] = 'fa-safari';

blocks[173] = {} // INTENRET DOWNLOAD
blocks[173]['width'] = 12;
blocks[173]['icon'] = 'fa-safari';

blocks[174] = {} // INTERNET UPLAD
blocks[174]['width'] = 12;
blocks[174]['icon'] = 'fa-safari';

//
// NEWS FEED
//

blocks['news_10'] = {} // NU.NL
blocks['news_10']['width'] = 6;
blocks['news_10']['feed'] = 'https://crossorigin.me/http://www.nu.nl/rss';

blocks['news_20'] = {} // TVGIDS
blocks['news_20']['width'] = 6;
blocks['news_20']['feed'] = 'https://crossorigin.me/https://www.tvgids24.nl/nieuws.rss';

blocks['news_30'] = {} // PEREZ
blocks['news_30']['width'] = 6;
blocks['news_30']['feed'] = 'https://crossorigin.me/http://i.perezhilton.com/?feed=rss2';

//
// TITLE BLOKKEN
//

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

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

blocks['blocktitle_30'] = {}
blocks['blocktitle_30']['type'] = 'blocktitle';
blocks['blocktitle_30']['title'] = 'Rapberry Pi';

blocks['blocktitle_40'] = {}
blocks['blocktitle_40']['type'] = 'blocktitle';
blocks['blocktitle_40']['title'] = 'Weerverwachting';

blocks['blocktitle_50'] = {}
blocks['blocktitle_50']['type'] = 'blocktitle';
blocks['blocktitle_50']['title'] = 'NEST Thermostaat';

blocks['blocktitle_60'] = {}
blocks['blocktitle_60']['type'] = 'blocktitle';
blocks['blocktitle_60']['title'] = 'Nieuws Feed';

blocks['blocktitle_80'] = {}
blocks['blocktitle_80']['type'] = 'blocktitle';
blocks['blocktitle_80']['title'] = 'Scenes';

blocks['blocktitle_90'] = {}
blocks['blocktitle_90']['type'] = 'blocktitle';
blocks['blocktitle_90']['title'] = 'Speedtest.net';

blocks['blocktitle_100'] = {}
blocks['blocktitle_100']['type'] = 'blocktitle';
blocks['blocktitle_100']['title'] = 'NS Vertrek tijden Amsterdam Zuid';

//
// COLUMNS DEFENITIES
//

var columns = {}

columns[10] = {} // TIJD SUNRISE SUNSET BUIENRADAR NEST
columns[10]['blocks'] = ['clock','sunrise',buttons.buienradar,buttons.calendar,buttons.moon,219];
columns[10]['width'] = 2;

columns[20] = {} // LAMPEN
columns[20]['blocks'] = ['blocktitle_10',25,26,19,22,24,27,177,178,73,33];
columns[20]['width'] = 5;

columns[30] = {} // WEERVERWACHTING
columns[30]['blocks'] = ['blocktitle_40','currentweather_big','weather',101,102,2];
columns[30]['width'] = 6;

columns[40] = {} // RASPBERRY PI
columns[40]['blocks'] = ['blocktitle_30',17,14,15,16];
columns[40]['width'] = 2;

columns[50] = {} // LOGITECH
columns[50]['blocks'] = ['blocktitle_20',86,87,88,90];
columns[50]['width'] = 2;

columns[60] = {} // STREAMPLAYER
columns[60]['blocks'] = ['streamplayer'];
columns[60]['width'] = 4;

columns[70] = {} // NIEUWS FEED
columns[70]['blocks'] = ['blocktitle_60','news_10','news_20'];
columns[70]['width'] = 10;

columns[80] = {} // NEST, SCENES EN DOWNLOAD SNELHEID
columns[80]['blocks'] = ['blocktitle_50',1,2,'blocktitle_80',82,75,76,77,78,79,80,81,106,'blocktitle_90',172,173,174];
columns[80]['width'] = 5;

columns[90] = {} // TREIN MELDINGEN
columns[90]['blocks'] = ['train'];
columns[90]['width'] = 10;

columns[200] = {} // RIJDEN DE TREINEN
columns[200]['blocks'] = ['blocktitle_100',frames.treinen];
columns[200]['width'] = 10;

columns[300] = {} // OV REALTIME
columns[300]['blocks'] = ['blocktitle_100',frames.gvb];
columns[300]['width'] = 10;

var screens = {}
screens[10] = {}
screens[10]['background'] = 'poesje.jpg';
screens[10]['columns'] = [10,30,50,40,60,70];

screens[20] = {} // LAMPEN EN SCENES
screens[20]['background'] = 'poesje.jpg';
screens[20]['columns'] = [10,20,80];

screens[30] = {} // TRAIN INFO
screens[30]['background'] = 'poesje.jpg';
screens[30]['columns'] = [10,200];

custom.css

Code: Select all

/* 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.5); background-clip: padding-box; border-radius: 9px; height:100%}

.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.8); background-clip: padding-box; border-radius: 9px; cursor:pointer; height:100%}

/* ICONS */
.fa.fa-lightbulb-o.on:before    {color:#00FF00;font-size: 25px;}
.fa.fa-lightbulb-o.off:before   {color:#ff0000;font-size: 25px;}
.fa.fa-tv.on:before             {color:#00FF00;font-size: 25px;}
.fa.fa-tv.off:before            {color:#ff6666;font-size: 25px;}
.fa.fa-file-movie-o.on:before   {color:#00FF00;font-size: 25px;}
.fa.fa-file-movie-o.off:before  {color:#ffff00;font-size: 25px;}
.fa.fa-music.on:before          {color:#00FF00;font-size: 25px;}
.fa.fa-music.off:before         {color:#0099ff;font-size: 25px;}
.fa.fa-power-off.off.on:before  {color:#00FF00;font-size: 25px;}
.fa.fa-power-off.off:before     {color:#ff8000;font-size: 25px;}
.fa-toggle-on.on:before         {color:#00FF00;font-size: 25px;}
.fa-toggle-on.off:before        {color:#ff0000;font-size: 25px;}
.fa-sign-out.on:before          {color:#00FF00;font-size: 25px;}
.fa-sign-out.off:before         {color:#ff0000;font-size: 25px;}

/* WEATHER */
.wi                             {color:#fff000;}

/* DOTS BELOW SCREEN SWITCH SCREENS */
.swiper-pagination-bullet 	{background: #c7c7c7; width: 40px; height: 40px; float:left; position:relative; left:35px;}

/* BLOCKS TITLE */
h1, h2, h3, h4, h5, h6 {	font-family: Arial, sans-serif; margin: 0px; margin-left: 15px; font-weight: 400; font-size: 145%; color: #00FF00;}

/* Round Corners
.input-groupBtn li 		{position:sticky; z-index: 9999; right: 1px; border-radius: 1px;}
*/

Nice dashboard.
Can you share the train script or how you created the train block

poudenes · Post by **poudenes** » Friday 28 April 2017 21:41

pkrabben wrote: Nice dashboard.
Can you share the train script or how you created the train block

var frames = {}
frames.treinen = {refreshiframe:30000,height:700,frameurl:"https://www.rijdendetreinen.nl/vertrekt ... ",width:12}

columns[200] = {} // RIJDEN DE TREINEN
columns[200]['blocks'] = [frames.treinen];
columns[200]['width'] = 10;

pkrabben · Post by **pkrabben** » Friday 28 April 2017 21:43

poudenes wrote:
pkrabben wrote: Nice dashboard.
Can you share the train script or how you created the train block

var frames = {}
frames.treinen = {refreshiframe:30000,height:700,frameurl:"https://www.rijdendetreinen.nl/vertrekt ... ",width:12}

columns[200] = {} // RIJDEN DE TREINEN
columns[200]['blocks'] = [frames.treinen];
columns[200]['width'] = 10;

Thanks I thought that there was a script behind it

It's working beautifully

corbin · Post by **corbin** » Saturday 29 April 2017 1:58

Here's my current Dashticz

: dashticz.jpg (185.52 KiB) Viewed 7466 times

config.js

Code: Select all

var _LANGUAGE 			= 'en_US';
var _HOST_DOMOTICZ		= 'http://192.168.5.27:8080';
var _DOMOTICZ_REFRESH		= 10; //in seconds

/*
IF YOU HAVE A MEDIABOX FROM ZIGGO (HORIZON), COPY SWITCH_HORIZON.PHP ON A WEBSERVER INSIDE YOUR NETWORK AND CHANGE THE IP.
ENTER THE PATH TO THIS FILE BELOW.
*/
var _HOST_ZIGGO_HORIZON	  	= ''; //e.g. http://192.168.1.3/domoticz/switch_horizon.php';
var _APIKEY_WUNDERGROUND  	= '1fd66f22fe9db6cc';
var _WEATHER_CITY 		= 'Brisbane';
var _WEATHER_CITYNAME 		= ''; //show a different city name, leave empty if same as _WEATHER_CITY
var _WEATHER_COUNTRY 		= 'AU';
var _USE_AUTO_POSITIONING 	= false; //don't want to configure positions, use auto positioning
var _USE_FAVORITES		= true; //only used when using auto positioning
var _HIDE_SECONDS_IN_CLOCK  = true; //do not show the seconds in the clock
var _HIDE_MEDIAPLAYER_WHEN_OFF = false; //when you have a mediaplayer connected, hide it if nothing is playing
var _NEWS_RSSFEED		= 'https://www.reddit.com/r/homeautomation/.rss';
var _USE_FAHRENHEIT		= false;
var _USE_BEAUFORT 		= true; //Bft instead of m/s
var _TRANSLATE_SPEED 		= false; //windspeed, north northwest instead of NNW
var _STANDBY_AFTER_MINUTES  = false; //enter amount of minutes like: 5 (5 minutes)
var _SCROLL_NEWS_AFTER 		= 7000; //milliseconds, so 7000 is 7 seconds
var _SHOW_LASTUPDATE 		= true;
var _LASTUPDATE_FORMAT = 'DD-MM-YY HH:mm';

//Buttons or images to open webpages in an iframe, like a news website or weather forecast
var buttons = {}
buttons.webcam1 = { width:6, isimage:true, refresh:5000, image: 'http://admin:[email protected]/Streaming/channels/1/picture', url: 'http://admin:[email protected]/Streaming/channels/1/picture' }
buttons.webcam2 = { width:6, isimage:true, refresh:5000, image: 'http://admin:[email protected]/Streaming/channels/1/picture', url: 'http://admin:[email protected]/Streaming/channels/1/picture' }
buttons.webcam3 = { width:6, isimage:true, refresh:5000, image: 'http://admin:[email protected]/Streaming/channels/1/picture', url: 'http://admin:[email protected]/Streaming/channels/1/picture' }
buttons.webcam4 = { width: 6, isimage: true, refresh: 5000, image: 'http://admin:[email protected]/Streaming/channels/1/picture', url: 'http://admin:[email protected]/Streaming/channels/1/picture' }
buttons.webcam5 = { width: 6, isimage: true, refresh: 5000, image: 'http://admin:[email protected]/Streaming/channels/1/picture', url: 'http://admin:[email protected]/Streaming/channels/1/picture' }

var blocks = {}

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

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

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

blocks[110] = {}
blocks[110]['title'] = 'SolarEdge Inverter'

var columns = {}

columns[1] = {}
columns[1]['blocks'] = ['blocktitle_1', 15, 26, 28, 9, 36, 34, 46, 17, 76, 96, 95, 74, 80, 75, 78, 'blocktitle_2', 19, 23, 38, 40, 42, 44, 30, 'blocktitle_3', 110, 49, 48, 50, 102, 108];
columns[1]['width'] = 5;

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

columns[2] = {}
columns[2]['blocks'] = ['blocktitle_4', 88, 83, 101, 100, 84, 89, 85, 86, 90, 87, 98, 1];
columns[2]['width'] = 3;

blocks['clock'] = {}
blocks['clock']['width'] = 6

blocks[109] = {}
blocks[109]['width'] = 6
blocks[109]['title'] = 'Plex'

columns[4] = {};
columns[4]['blocks'] = [buttons.webcam1, buttons.webcam2, buttons.webcam3, buttons.webcam4, buttons.webcam5,'clock', 109];
columns[4]['width'] = 4;

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

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

columns[6] = {};
columns[6]['blocks'] = ['blocktitle_6', 13, 11, 7, 22, 21, 32, 25, 33, 107];
columns[6]['width'] = 4;

custom.css

Code: Select all

/*
CUSTOM CSS FILE
*/
.fa.fa-lightbulb-o.on {
    color: #F1C300;
}

.fa.fa-lightbulb-o.off {
    color: #fff;
}

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

.fa.fa-plug.off {
    color: #fff;
}
/* to hide the 2nd and 3rd title for my power devices */
div [class$="_2"] {
    display: none;
}

div [class$="_3"] {
    display: none;
}

EdwinK · Post by **EdwinK** » Saturday 29 April 2017 9:36

corbin wrote:Here's my current Dashticz
dashticz.jpg

Looks great, mate

mvveelen · Post by **mvveelen** » Sunday 30 April 2017 10:56

corbin wrote:Here's my current Dashticz
dashticz.jpg

Looks great. Care to share your config

?

lukev · Post by **lukev** » Sunday 30 April 2017 11:08

Is the traffic and trafficmap predefined in dashticz? I see some examples of dashboard who just use 'traffic' and 'trafficmap' to show this data

rbo0567 · Post by **rbo0567** » Tuesday 02 May 2017 11:14

htilburgs wrote:

Work in progress....

Very nice dashboard! I like the rounded corners and your background.
Maybe because I'm new with Domoticz, but Is there a manual or how-to for displaying the CPU / memory usage like you have? I searched the Domoticz site and Googled for it but I can't find instructions how to retrieve and display this info.

koowee · Post by **koowee** » Tuesday 02 May 2017 11:47

rbo0567 wrote:Maybe because I'm new with Domoticz, but Is there a manual or how-to for displaying the CPU / memory usage like you have? I searched the Domoticz site and Googled for it but I can't find instructions how to retrieve and display this info.

Try to add new Motherboard sensors hardware (hardware > select Type "Motherboard sensors" and add name > Add) Now you should find new devices on devices tab

htilburgs · Post by **htilburgs** » Tuesday 02 May 2017 12:04

rbo0567 wrote:
htilburgs wrote:

Work in progress....

Very nice dashboard! I like the rounded corners and your background.
Maybe because I'm new with Domoticz, but Is there a manual or how-to for displaying the CPU / memory usage like you have? I searched the Domoticz site and Googled for it but I can't find instructions how to retrieve and display this info.

Hi RBO0567,

The background is according my background in Domoticz. This is based on the Feynman theme, that currently is being build and I'm helping out with testing.

The Rounded corners is a piece of CSS you can place in your custom.css file

Code: Select all

/* Background 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: 7px solid rgba(255,255,255,0);		
	background: rgba(0,0,0,0.2);				
	background-clip: padding-box;
	border-radius: 25px;						/* Round corners */ 
}

The display of CPU, Memory usage is a part of Domoticz. You have to add System Devices in Domoticz.
I've an article about that on my domotica website http://domotica.tilburgs.com/domoticz/s ... toevoegen/
After you've added them in Domoticz, you can use them in Dashticz.

rbo0567 · Post by **rbo0567** » Tuesday 02 May 2017 13:33

Thanks for the info koowee and htilburgs. I really appreciate it.

rick82 · Post by **rick82** » Tuesday 02 May 2017 19:53

Again: loving this dashboard & development!
Here's mine, just page 1. Page 2 contains just some buttons.

: dashboard.jpg (374.9 KiB) Viewed 7179 times

: scherm2.jpg (346.17 KiB) Viewed 7111 times

Config.js

Spoiler: show: var _LANGUAGE = 'nl_NL'; //or: en_US, fr_FR, hu_HU
var _HOST_DOMOTICZ = 'http://*.*.*.*';
var _DOMOTICZ_REFRESH = 5; //in seconds
var _HOST_ZIGGO_HORIZON = 'http://192.168.1.3/domoticz/switch_horizon.php'; //e.g. http://192.168.1.3/domoticz/switch_horizon.php';
var _APIKEY_WUNDERGROUND = '2616686425819479';
var _WEATHER_CITY = 'Apeldoorn';
var _WEATHER_CITYNAME = ''; //show a different city name, leave empty if same as _WEATHER_CITY
var _WEATHER_COUNTRY = 'NL';
var _USE_AUTO_POSITIONING = true; //don't want to configure positions, use auto positioning
var _USE_FAVORITES = true; //only used when using auto positioning
var _HIDE_SECONDS_IN_CLOCK = false; //do not show the seconds in the clock
var _HIDE_MEDIAPLAYER_WHEN_OFF = false; //when you have a mediaplayer connected, hide it if nothing is playing
var _NEWS_RSSFEED = 'http://www.nu.nl/rss/algemeen';
var _USE_FAHRENHEIT = false;
var _USE_BEAUFORT = false; //Bft instead of m/s
var _TRANSLATE_SPEED = false; //windspeed, north northwest instead of NNW
var _STANDBY_AFTER_MINUTES = false; //enter amount of minutes like: 5 (5 minutes)
var _SCROLL_NEWS_AFTER = 7000; //milliseconds, so 7000 is 7 seconds
var _SHOW_LASTUPDATE = false;
var _LASTUPDATE_FORMAT = 'DD-MM-YY HH:mm';
var _SCREENSLIDER_EFFECT = 'slide'; //'slide' or 'fade' or 'cube' or 'coverflow' or 'flip'

var _APIKEY_MAPS = '';
var _MAPS_LATITUDE = '';
var _MAPS_LONGITUDE = '';

//Buttons or images to open webpages in an iframe, like a news website or weather forecast
var buttons = {}
buttons.buienradar = {width:12, isimage:true, refreshimage:60000, image: 'http://api.buienradar.nl/image/1.0/Rada ... =285&h=256', url: 'http://www.weeronline.nl/Europa/Nederla ... rn/4057517'}
buttons.nzbget = {width:4, icon: 'fa-download', title: 'NZBget', url: 'http://192.168.1.3:6789'}

// http://fontawesome.io/cheatsheet/

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

screens[2] = {}
screens[2]['background'] = 'bgr_dxb.jpg';
screens[2]['columns'] = [4,5,6]

var blocks = {}

// SCENES

blocks['s1'] = {}
blocks['s1']['title'] = 'Woonkamer';

blocks['s2'] = {}
blocks['s2']['title'] = 'Gaan slapen';
blocks['s2']['icon'] = 'fa-bed'

blocks[31] = {}
blocks[31]['title'] = 'Verwarming';
blocks[31]['image'] = 'heating.png';

blocks[33] = {}
blocks[33]['title'] = 'Temp / luchtvochtigheid';

// WOONKAMER

blocks[12] = {}
blocks[12]['title'] = 'Kerstboom';
blocks[12]['icon'] = 'fa-tree';

blocks[13] = {}
blocks[13]['title'] = 'Plant';

blocks[42] = {}
blocks[42]['title'] = 'Tafellamp';

// blocks[42] = {}
// blocks[42]['title'] = 'Tafellamp';

blocks[50] = {}
blocks[50]['title'] = 'Tafellamp';

blocks[17] = {}
blocks[17]['title'] = 'LED-strip';

blocks[18] = {}
blocks[18]['title'] = 'Raam';
blocks[18]['icon'] = 'fa-window-maximize';

blocks[19] = {}
blocks[19]['title'] = 'Staande';

blocks[22] = {}
blocks[22]['title'] = 'Spots hal';

// KEUKEN

blocks[14] = {}
blocks[14]['title'] = 'Spots keuken';

blocks[15] = {}
blocks[15]['title'] = 'Starbucks';
blocks[15]['icon'] = 'fa-coffee';

// SLAAPKAMER

blocks[21] = {}
blocks[21]['title'] = 'Plafond';

blocks[20] = {}
blocks[20]['title'] = 'LED-strip';

// MEDIA

blocks[24] = {}
blocks[24]['icon'] = 'fa-power-off'
blocks[24]['title'] = 'Alles uit';

blocks[25] = {}
blocks[25]['title'] = 'TV';
blocks[25]['icon'] = 'fa-tv'

blocks[26] = {}
blocks[26]['title'] = 'Apple TV';
blocks[26]['icon'] = 'fa-apple'

blocks[26] = {}
blocks[26]['title'] = 'Apple TV';
blocks[26]['icon'] = 'fa-apple'

blocks[27] = {}
blocks[27]['title'] = 'Playstation 4';
blocks[27]['icon'] = 'fa-gamepad'

blocks[28] = {}
blocks[28]['title'] = 'Nintendo Wii'
blocks[28]['icon'] = 'fa-gamepad'

blocks[29] = {}
blocks[29]['title'] = 'Kodi';
blocks[29]['icon'] = 'fa-youtube-play'

blocks[30] = {}
blocks[30]['title'] = 'Streamen';
blocks[30]['icon'] = 'fa-signal'

blocks['blocktitle_1a'] = {}
blocks['blocktitle_1a']['type'] = 'blocktitle';
blocks['blocktitle_1a']['title'] = 'Scenes';

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

blocks['blocktitle_1c'] = {}
blocks['blocktitle_1c']['type'] = 'blocktitle';
blocks['blocktitle_1c']['title'] = 'Media';

blocks['blocktitle_1d'] = {}
blocks['blocktitle_1d']['type'] = 'blocktitle';
blocks['blocktitle_1d']['title'] = 'Verwarming';

blocks['blocktitle_2wk'] = {}
blocks['blocktitle_2wk']['type'] = 'blocktitle';
blocks['blocktitle_2wk']['title'] = 'Woonkamer';

blocks['blocktitle_2me'] = {}
blocks['blocktitle_2me']['type'] = 'blocktitle';
blocks['blocktitle_2me']['title'] = 'Media';

blocks['blocktitle_2ke'] = {}
blocks['blocktitle_2ke']['type'] = 'blocktitle';
blocks['blocktitle_2ke']['title'] = 'Keuken';

blocks['blocktitle_2ha'] = {}
blocks['blocktitle_2ha']['type'] = 'blocktitle';
blocks['blocktitle_2ha']['title'] = 'Hal';

blocks['blocktitle_2sk'] = {}
blocks['blocktitle_2sk']['type'] = 'blocktitle';
blocks['blocktitle_2sk']['title'] = 'Slaapkamer';

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';

var columns = {}

columns[1] = {}
columns[1]['blocks'] = [
'clock',
'currentweather',
buttons.buienradar,
buttons.nzbget]
columns[1]['width'] = 2;

columns[2] = {}
columns[2]['blocks'] = [
'weather',
'traffic',
'train',
'news_2',
'news_3'
]
columns[2]['width'] = 5;

columns[3] = {}
columns[3]['blocks'] = [
'blocktitle_1a',
's1',
's2',
'blocktitle_1b',
50,
14,
22,
'blocktitle_1c',
25,
26,
29,
30,
24,
'blocktitle_1d',
31,
33
]
columns[3]['width'] = 5;

columns[4] = {}
columns[4]['blocks'] = [
'blocktitle_2wk',
16,
17,
18,
19,
13,
12,
'blocktitle_2ke',
14,
15,
'blocktitle_2ha',
22
]
columns[4]['width'] = 5;

columns[5] = {}
columns[5]['blocks'] = [
'blocktitle_2sk',
20,
21,
'blocktitle_2me',
25,
26,
29,
30,
27,
28,
24
]
columns[5]['width'] = 5;

columns[6] = {}
columns[6]['blocks'] = [

]
columns[6]['width'] = 2;

//CUSTOM POSITIONING:
//defining wich blocks to show, de numbers represents the IDX of the device in Domoticz
//only define if you want to use a custom width instead of the default

//var blocks = {}

//blocks[1] = {}
//blocks[1]['width'] = 4; //1 to 12, remove this line if you want to use the default (4)
//blocks[1]['title'] = 'Living room' //if you want change the name of switch different then domoticz
//blocks[1]['icon'] = 'fa-eye'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
//blocks[1]['image'] = 'bulb_off.png'; //if you want to show an image instead if icon, place image in img/ folder

//blocks[204] = {} //dimmer
//blocks[204]['width'] = 12;
//blocks[204]['title'] = 'Living room' //if you want change the name of switch different then domoticz

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

//var columns = {}

//columns[1] = {}
//columns[1]['blocks'] = ['blocktitle_1',1,2,62,'144_2',204,248,295] //remark: idx 144 produces 2 blocks, so you can use: '144_1' and '144_2' (or of course, just 144 if you want one)
//columns[1]['width'] = 5;

//columns[2] = {}
//columns[2]['blocks'] = ['currentweather_big','weather',5,'144_1']
//columns[2]['width'] = 5;

//columns[3] = {}
//columns[3]['blocks'] = ['clock','sunrise','horizon','streamplayer',buttons.buienradar,buttons.radio,buttons.calendar,buttons.nunl,buttons.nzbget]
//columns[3]['width'] = 2;

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

//if you want to use multiple screens, use the code below:
//var screens = {}
//screens[1] = {}
//screens[1]['background'] = 'bg1.jpg';
//screens[1]['background_morning'] = 'bg_morning.jpg';
//screens[1]['background_noon'] = 'bg_noon.jpg';
//screens[1]['background_afternoon'] = 'bg_afternoon.jpg';
//screens[1]['background_night'] = 'bg_night.jpg';
//screens[1]['columns'] = [1,2,3]

//screens[2] = {}
//screens[2]['background'] = 'bg3.jpg';
//screens[2]['background_morning'] = 'bg_morning.jpg';
//screens[2]['background_noon'] = 'bg_noon.jpg';
//screens[2]['background_afternoon'] = 'bg_afternoon.jpg';
//screens[2]['background_night'] = 'bg_night.jpg';
//screens[2]['columns'] = [4,5,6]

Custom.css

Spoiler: show: /*
CUSTOM CSS FILE

border: 7px solid rgba(255,255,255,0);
background: rgba(0,0,0,0.2);

*/

/* Background 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: 7px solid rgba(255,255,255,0);
background: rgba(0,0,0,0.5);
background-clip: padding-box;
}

.fa.fa-lightbulb-o.on {color: yellow}
.fa.fa-lightbulb-o.dim {color: yellow}
.fa.fa-tree.on {color: green}
.fa.fa-tv.on {color: green}
.fa.fa-apple.on {color: green}
.fa.fa-gamepad.on {color: green}
.fa.fa-youtube-play.on {color: green}
.fa.fa-signal.on {color: green}
.fa.fa-home.on {color: green}
.fa.fa-home.off {color: red}
.fa-lightbulb-o:before{font-size: 36px;}
.fa-print:before{font-size: 36px;}
.fa-home:before{font-size: 36px;}

.col-data .title {font-size:14px;}
.col-data span {font-size:10px;}

.standby .clock{font-size:60px !important;}
.standby .weekday,.standby .date{font-size:40px !important;}

SuperMouse · Post by **SuperMouse** » Tuesday 02 May 2017 20:28

rick82 wrote:Again: loving this dashboard & development!
Here's mine, just page 1. Page 2 contains just some buttons.

dashboard.jpg

VERY NICE !

please update your post with the config-files so we can see how you did it.

pkrabben · Post by **pkrabben** » Wednesday 03 May 2017 9:48

Here is mine current dashboard still work in process to fine tune.
Adding more smoke detectors this week.

running it currently on my Samsung S2 Tablet but looking for a new tablet mounted on the wall in the coming weeks.

config.js

Spoiler: show: var _LANGUAGE = 'nl_NL'; //or: en_US, fr_FR, hu_HU
var _HOST_DOMOTICZ = 'http://192.168.x.x:x';

var _APIKEY_WUNDERGROUND = 'xxxxxxxxxxxx';
var _WEATHER_CITY = 'Almere Stad';
var _WEATHER_CITYNAME = 'Almere'; //show a different city name, leave empty if same as _WEATHER_CITY
var _WEATHER_COUNTRY = 'NL';
var _USE_AUTO_POSITIONING = false; //don't want to configure positions, use auto positioning
var _USE_FAVORITES = false; //only used when using auto positioning
var _HIDE_SECONDS_IN_CLOCK = false; //do not show the seconds in the clock
var _HIDE_MEDIAPLAYER_WHEN_OFF = false; //when you have a mediaplayer connected, hide it if nothing is playing
var _NEWS_RSSFEED = 'https://crossorigin.me/http://www.nu.nl/rss/algemeen';
var _USE_FAHRENHEIT = false;
var _STANDBY_AFTER_MINUTES = 5; //enter amount of minutes like: 5 (5 minutes)
var _SCROLL_NEWS_AFTER = 7000; //milliseconds, so 7000 is 7 seconds
var _SHOW_LASTUPDATE = false;
var _LASTUPDATE_FORMAT = 'DD-MM-YY HH:mm';
var _SCREENSLIDER_EFFECT = 'slide'; //'slide' or 'fade' or 'cube' or 'coverflow' or 'flip'
var _IDXmoonpicture = 1; //index of the uservariabele MoonPicture
var _USE_STATIC_WEATHERICONS = true;

var _APIKEY_MAPS = 'xxxxxxxx';
var _MAPS_LATITUDE = 52.xxxxxx;
var _MAPS_LONGITUDE = 5.xxxxxx;
var _MAPS_ZOOMLEVEL = 9;

var buttons = {}
buttons.buienradar = {width:12, isimage:true, refreshimage:60000, image: 'http://api.buienradar.nl/image/1.0/Rada ... =285&h=256', url: 'http://www.weer.nl/verwachting/nederlan ... d/1812906/'}
buttons.radio = {width:12, image: 'img/radio_on.png', title: 'Radio', url: 'http://nederland.fm'}
buttons.nunl = {width:12, icon: 'fa-newspaper-o', title: 'Nu.nl', url: 'http://www.nu.nl'}
buttons.afval = {width:12, icon: 'fa-trash-o', title: 'Afval', url: 'https://www.recyclemanager.nl/afvalkalender/1321LJ/10'}
buttons.alarm = {image: 'img/radio_on.png', title: 'Alarm', url: 'http://192.168.x.x:xx/secpanel/index.html'}
buttons.webcam = {width:12, isimage:true, refresh:2000, image: 'http://ip_url_to_webcam', url: 'http://ip_url_to_webcam'}
buttons.moon= {width:12, isimage:true, refreshimage:60000, image: 'moon'}
buttons.calendar = {width:4, icon: 'fa-calendar', title: 'Kalender', url: 'https://calendar.google.com/calendar'}

var _STREAMPLAYER_TRACKS = [
{"track":1,"name":"Radio 2","file":"http://icecast.omroep.nl/radio2-bb-mp3"},
{"track":2,"name":"Sky Radio","file":"https://www.mp3streams.nl/listen/skyradio/16"},
]; //streaming stations at http://www.hendrikjansen.nl/henk/streaming.html

//var frames = {}
//frames.treinen = {refreshiframe:30000,height:700,frameurl:"https://www.rijdendetreinen.nl/vertrekt ... ",width:12}

var blocks = {}
//blocks[1] = {}
//blocks[1]['width'] = 4; //1 to 12, remove this line if you want to use the default (4)
//blocks[1]['title'] = 'Living room' //if you want change the name of switch different then domoticz
//blocks[1]['icon'] = 'fa-eye'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
//blocks[1]['image'] = 'bulb_off.png'; //if you want to show an image instead if icon, place image in img/ folder

blocks['news_2'] = {}
blocks['news_2']['feed'] = 'https://crossorigin.me/http://feeds.fee ... ers/nieuws';

//Scene blocks
blocks['s5'] = {} // Slapen
blocks['s5']['width'] = 4;
blocks['s5']['icon'] = 'fa-bed';
blocks['s6'] = {} // Avond
blocks['s6']['width'] = 4;
blocks['s7'] = {} // Alles uit
blocks['s7']['width'] = 4;

//Switch Blocks
blocks['6'] = {} //Bureau
blocks['6']['width'] = 4;
blocks['8'] = {} //Bank
blocks['8']['width'] = 4;
blocks[8]['title'] = 'Schelp';
blocks['9'] = {} //Dressoir
blocks['9']['width'] = 4;
blocks['71'] = {} //Leeslamp
blocks['71']['width'] = 4;
blocks['11'] = {} // Tuin
blocks['11']['width'] = 4;
blocks['45'] = {} // Pi temp
blocks['45']['width'] = 12;
blocks['45']['switch'] = true;
blocks['45']['icon'] = 'fa-thermometer';
blocks['46'] = {} // Pi CPU
blocks['46']['width'] = 12;
blocks['46']['switch'] = true;
blocks['51'] = {} // Energie
blocks['51']['width'] = 6;
blocks['51']['switch'] = true;
blocks['31'] = {} // Temperatuur weerkanaal
blocks['31']['width'] = 12;
blocks['31']['title'] = 'Buiten Temp'
blocks['31']['switch'] = true;

blocks[73] = {}
blocks[73]['width'] = 6;
blocks[73]['icon'] = 'fa-home';
blocks[73]['title'] = 'Paul';
blocks[74] = {}
blocks[74]['width'] = 6;
blocks[74]['icon'] = 'fa-home';
blocks[74]['title'] = 'Karin';
blocks[75] = {}
blocks[75]['width'] = 6;
blocks[75]['icon'] = 'fa-home';
blocks[75]['title'] = 'Lenka';
blocks[76] = {}
blocks[76]['width'] = 6;
blocks[76]['icon'] = 'fa-home';
blocks[76]['title'] = 'Mara';
blocks[103] = {}
blocks[103]['width'] = 12;
blocks[103]['icon'] = 'fa-trash-o';
blocks[103]['title'] = 'Afval';
blocks['103']['switch'] = true;

blocks[102] = {} //temp rookmelder 1
blocks[102]['width'] = 6;
blocks[102]['title'] = 'Rm 1e verdieping';
blocks[102]['switch'] = true;
blocks[91] = {} // Rook gedetecteerd 1
blocks[91]['width'] = 6;
blocks[91]['icon'] = 'fa-fire-extinguisher';
blocks[91]['title'] = 'Rm 1e verdieping';

blocks['blocktitle_1'] = {}
blocks['blocktitle_1']['type'] = 'blocktitle';
blocks['blocktitle_1']['title'] = 'Scene';
blocks['blocktitle_2'] = {}
blocks['blocktitle_2']['type'] = 'blocktitle';
blocks['blocktitle_2']['title'] = 'Verlichting';
blocks['blocktitle_3'] = {}
blocks['blocktitle_3']['type'] = 'blocktitle';
blocks['blocktitle_3']['title'] = 'Thuis';
blocks['blocktitle_4'] = {}
blocks['blocktitle_4']['type'] = 'blocktitle';
blocks['blocktitle_4']['title'] = 'Weersverwachting';
blocks['blocktitle_5'] = {}
blocks['blocktitle_5']['type'] = 'blocktitle';
blocks['blocktitle_5']['title'] = 'Verkeer';
blocks['blocktitle_6'] = {}
blocks['blocktitle_6']['type'] = 'blocktitle';
blocks['blocktitle_6']['title'] = 'Beveiliging';
blocks['blocktitle_7'] = {}
blocks['blocktitle_7']['type'] = 'blocktitle';
blocks['blocktitle_7']['title'] = 'News';

var columns = {}

columns[1] = {}
columns[1]['blocks'] = ['clock','sunrise','currentweather','31_1',buttons.buienradar,45,46]
columns[1]['width'] = 2;

columns[2] = {}
columns[2]['blocks'] = ['blocktitle_1','s6','s5','s7','blocktitle_2',6,8,9,71,11,'blocktitle_3',103,73,74,75,76]
columns[2]['width'] = 5;

columns[3] = {}
columns[3]['blocks'] = ['graph_51',51]
columns[3]['width'] = 5;

columns[4] = {}
columns[4]['blocks'] = ['clock','sunrise','currentweather','31_1',buttons.buienradar,45,46]
columns[4]['width'] = 2;

columns[5] = {}
columns[5]['blocks'] = ['blocktitle_4','weather','blocktitle_5','trafficmap','traffic','train']
columns[5]['width'] = 5;

columns[6] = {}
columns[6]['blocks'] = ['blocktitle_6',102,91]
columns[6]['width'] = 5;

columns[7] = {}
columns[7]['blocks'] = ['clock','sunrise','currentweather','31_1',buttons.buienradar,45,46]
columns[7]['width'] = 2;

columns[8] = {}
columns[8]['blocks'] = ['blocktitle_7','news','news_2']
columns[8]['width'] = 10;

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

//if you want to use multiple screens, use the code below:
var screens = {}
screens[1] = {}
screens[1]['background'] = 'background1.jpg';
screens[1]['columns'] = [1,2,3]

screens[2] = {}
screens[2]['background'] = 'background1.jpg';
screens[2]['columns'] = [4,5,6]

screens[3] = {}
screens[3]['background'] = 'background1.jpg';
screens[3]['columns'] = [7,8,9]

Custom.css

Spoiler: show: /* CUSTOM CSS FILE */
.standby .clock{font-size:60px !important;}
.standby .weekday,.standby .date{font-size:40px !important;}

/* icons color */
.fa.fa-lightbulb-o.on {color: green;}
.fa.fa-lightbulb-o.off {color:red;}
.fa.fa-home.on {color: green}
.fa.fa-home.off {color: red}
.fa-fire-extinguisher.on {color: red}
.fa-fire-extinguisher.off {color: green}
.fa-bed.on {Color: green}
.fa-bed.off {color: red}

/* Weather */
.wi {color:#fff000;}

/* icons size */
.fa-lightbulb-o:before {font-size:26px;}
.fa-thermometer:before {font-size:26px;}
.fa-thermometer-half:before {font-size:26px;}
.fa-percent:before {font-size:26px;}
.fa-trash-o:before {font-size:26px;}
.fa-plug:before {font-size:26px;}
.fa-train:before {font-size:22px;}
.fa-car:before {font-size:22px;}
.fa-male:before{font-size: 26px;}
.fa-female:before{font-size: 26px;}
.fa-fire-extinguisher:before{font-size: 26px;}

/*title font and color */
h1, h2, h3, h4, h5, h6 {
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif; margin: 0px; margin-left: 15px; font-weight: 600; font-size: 175%; color: white;}

/* sunrise */
.sunriseholder,
.sunriseholder .wi{font-size:16px !important;}

.col-data .title {font-size:15px;}
.col-data span {font-size:15px;}

/* DOTS BELOW SCREEN SWITCH SCREENS */
.swiper-pagination-bullet {background: #FFFFFF; width: 40px; height: 40px; float:left; position:relative; left:35px;}

/* 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: 9px; height:100%}

.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.8); background-clip: padding-box; border-radius: 9px; cursor:pointer; height:100%}

poudenes · Post by **poudenes** » Wednesday 03 May 2017 10:09

pkrabben wrote:Here is mine current dashboard still work in process to fine tune.

Nice Nice. I mounted mine also on the wall. Here screenshot how i did it. i can take off the tablet as well to use it when needed:

IMG_0984.JPG

IMG_0983.JPG

p.s. don't look at the background... that was a joke

pkrabben · Post by **pkrabben** » Wednesday 03 May 2017 16:47

corbin wrote:Here's my current Dashticz
dashticz.jpg

config.js

Code: Select all

var _LANGUAGE 			= 'en_US';
var _HOST_DOMOTICZ		= 'http://192.168.5.27:8080';
var _DOMOTICZ_REFRESH		= 10; //in seconds

/*
IF YOU HAVE A MEDIABOX FROM ZIGGO (HORIZON), COPY SWITCH_HORIZON.PHP ON A WEBSERVER INSIDE YOUR NETWORK AND CHANGE THE IP.
ENTER THE PATH TO THIS FILE BELOW.
*/
var _HOST_ZIGGO_HORIZON	  	= ''; //e.g. http://192.168.1.3/domoticz/switch_horizon.php';
var _APIKEY_WUNDERGROUND  	= '1fd66f22fe9db6cc';
var _WEATHER_CITY 		= 'Brisbane';
var _WEATHER_CITYNAME 		= ''; //show a different city name, leave empty if same as _WEATHER_CITY
var _WEATHER_COUNTRY 		= 'AU';
var _USE_AUTO_POSITIONING 	= false; //don't want to configure positions, use auto positioning
var _USE_FAVORITES		= true; //only used when using auto positioning
var _HIDE_SECONDS_IN_CLOCK  = true; //do not show the seconds in the clock
var _HIDE_MEDIAPLAYER_WHEN_OFF = false; //when you have a mediaplayer connected, hide it if nothing is playing
var _NEWS_RSSFEED		= 'https://www.reddit.com/r/homeautomation/.rss';
var _USE_FAHRENHEIT		= false;
var _USE_BEAUFORT 		= true; //Bft instead of m/s
var _TRANSLATE_SPEED 		= false; //windspeed, north northwest instead of NNW
var _STANDBY_AFTER_MINUTES  = false; //enter amount of minutes like: 5 (5 minutes)
var _SCROLL_NEWS_AFTER 		= 7000; //milliseconds, so 7000 is 7 seconds
var _SHOW_LASTUPDATE 		= true;
var _LASTUPDATE_FORMAT = 'DD-MM-YY HH:mm';

//Buttons or images to open webpages in an iframe, like a news website or weather forecast
var buttons = {}
buttons.webcam1 = { width:6, isimage:true, refresh:5000, image: 'http://admin:[email protected]/Streaming/channels/1/picture', url: 'http://admin:[email protected]/Streaming/channels/1/picture' }
buttons.webcam2 = { width:6, isimage:true, refresh:5000, image: 'http://admin:[email protected]/Streaming/channels/1/picture', url: 'http://admin:[email protected]/Streaming/channels/1/picture' }
buttons.webcam3 = { width:6, isimage:true, refresh:5000, image: 'http://admin:[email protected]/Streaming/channels/1/picture', url: 'http://admin:[email protected]/Streaming/channels/1/picture' }
buttons.webcam4 = { width: 6, isimage: true, refresh: 5000, image: 'http://admin:[email protected]/Streaming/channels/1/picture', url: 'http://admin:[email protected]/Streaming/channels/1/picture' }
buttons.webcam5 = { width: 6, isimage: true, refresh: 5000, image: 'http://admin:[email protected]/Streaming/channels/1/picture', url: 'http://admin:[email protected]/Streaming/channels/1/picture' }

var blocks = {}

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

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

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

blocks[110] = {}
blocks[110]['title'] = 'SolarEdge Inverter'

var columns = {}

columns[1] = {}
columns[1]['blocks'] = ['blocktitle_1', 15, 26, 28, 9, 36, 34, 46, 17, 76, 96, 95, 74, 80, 75, 78, 'blocktitle_2', 19, 23, 38, 40, 42, 44, 30, 'blocktitle_3', 110, 49, 48, 50, 102, 108];
columns[1]['width'] = 5;

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

columns[2] = {}
columns[2]['blocks'] = ['blocktitle_4', 88, 83, 101, 100, 84, 89, 85, 86, 90, 87, 98, 1];
columns[2]['width'] = 3;

blocks['clock'] = {}
blocks['clock']['width'] = 6

blocks[109] = {}
blocks[109]['width'] = 6
blocks[109]['title'] = 'Plex'

columns[4] = {};
columns[4]['blocks'] = [buttons.webcam1, buttons.webcam2, buttons.webcam3, buttons.webcam4, buttons.webcam5,'clock', 109];
columns[4]['width'] = 4;

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

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

columns[6] = {};
columns[6]['blocks'] = ['blocktitle_6', 13, 11, 7, 22, 21, 32, 25, 33, 107];
columns[6]['width'] = 4;

custom.css

Code: Select all

/*
CUSTOM CSS FILE
*/
.fa.fa-lightbulb-o.on {
    color: #F1C300;
}

.fa.fa-lightbulb-o.off {
    color: #fff;
}

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

.fa.fa-plug.off {
    color: #fff;
}
/* to hide the 2nd and 3rd title for my power devices */
div [class$="_2"] {
    display: none;
}

div [class$="_3"] {
    display: none;
}

Can I ask where you found the motion icons (moving man) I cant find then in the icon gallery
thanks in advance for your reply

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Who is online