Domoticz

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

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

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;}
*/

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

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;

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

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

htilburgs wrote:

Work in progress....

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.

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.

/* 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 */ 
}

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]

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

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

dashboard.jpg

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]

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%}

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

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