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

[htilburgs]

https://www.ispyconnect.com/man.aspx?n=Velleman#

[dagger38]

it works in ISPY with the generated link , but in domoticz (test connection) still a broken image ?

[Ierlandfan]

Anyone tried the menu feature?

[EdwinK]

Anyone tried the menu feature?

I did, and it looks great, just not for me.

Maybe I'll try it again when I'm going to update the system

[jurjan]

I got a css question, how can I set the background color of the entire block?
I placed an inline red color on the 'Fontijn' block as an example, but I cannot find how to do this by using custom.css
All -selected- blocks should become green (rgba(0,255,0,0.3)

Any help would be appreciated.

dash.jpg (343.36 KiB) Viewed 8168 times

[htilburgs]

I got a css question, how can I set the background color of the entire block?
I placed an inline red color on the 'Fontijn' block as an example, but I cannot find how to do this by using custom.css
All -selected- blocks should become green (rgba(0,255,0,0.3)

Any help would be appreciated.

dash.jpg

Hi Jurjan, there a several ways, but the one I prefer is making an entry in custom.css like in the example.
Place the blocks you like to change seperated by a comma (in this example block_463 and block_464 should be red)

Code: Select all

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

[jurjan]

Hi, I would like the block to be green when the device is switched on and red when the device is switched off.

When I inspect the html I can see the icon (light bulb) gets a class='on' or class='off' I could use, but then I need the parent div to apply the background-color on.. As far as I know this is not possible using css.

See the em of the lightbulb below which has an 'off' class.

Code: Select all

<div class="mh transbg block_20 col-xs-4 hover" onclick="switchDevice(this)" data-id="20">
	<div class="col-xs-4 col-icon">
	<em class="fa fa-lightbulb-o off icon" undefined=""></em>
	</div><div class="col-xs-8 col-data">
	<strong class="title">Fontijn</strong><br>
	<span class="state">UIT</span></div>
</div>

[/quote]

Hi Jurjan, there a several ways, but the one I prefer is making an entry in custom.css like in the example.
Place the blocks you like to change seperated by a comma (in this example block_463 and block_464 should be red)

Code: Select all

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

[/quote]

[htilburgs]

Hi, I would like the block to be green when the device is switched on and red when the device is switched off.

When I inspect the html I can see the icon (light bulb) gets a class='on' or class='off' I could use, but then I need the parent div to apply the background-color on.. As far as I know this is not possible using css.

See the em of the lightbulb below which has an 'off' class.

First make an entry in your config.js

Code: Select all

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

After that make the following entry in your custom.css

Code: Select all

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

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

Succes!

[Ierlandfan]

Anyone tried the menu feature?

I did, and it looks great, just not for me.

Maybe I'll try it again when I'm going to update the system

Can you enlighten me on the relevant pieces in CONFIG.js? (Not main.js, I got that part)
I want to rule out some strange things on my laptop. (No menu shows up but could be CONFIG related)

[jurjan]

Succes!

Thanks a lot! this works like a charm.

[EdwinK]

Anyone tried the menu feature?

I did, and it looks great, just not for me.

Maybe I'll try it again when I'm going to update the system

Can you enlighten me on the relevant pieces in CONFIG.js? (Not main.js, I got that part)
I want to rule out some strange things on my laptop. (No menu shows up but could be CONFIG related)

The configuration is a bit difficult. I don't have mine around anymore. i see what I can do tomorrow.

[DewGew]

My modded Dashticz dashboard with custom login and secpanel.
I created a separate html page for secpanel. But I suggest that its better the secpanel is integrated to Dashticz.
Also created a html page for login page and I had modify settings.js to make this work.

Custom Login

Dashticz_login.jpg (255.45 KiB) Viewed 8001 times

Dashboard

Dashticz_mainpage.jpg (248.45 KiB) Viewed 8001 times

Custom Secpanel

secpanel.jpg (248.93 KiB) Viewed 8001 times

[yfands]

Hello,

Dashticz is using the ion.sound library (http://ionden.com/a/plugins/ion.sound/en.html) to control and play the online radio streams. It is in the vendor folder. I like to add a volume slider. On the website there is a Basic and Advanced demo. If I go to the Basic demo (http://ionden.com/a/plugins/ion.sound/demo.html) in the middle there is a demo with buttons that set the sound to 10,30,70,100%. This is working so my browser (firefox) can handle it.

My effort to add a simple button to "set" the volume to a fixed value failed.
What have I done so far:

Tried to find some decent documentation rather than the demo's online, also failed.
Studied the ion.sound.js file, The file keeps throwing the "options" word around, but there is no mention what these options can be.

So in main.js I added the following to the addStreamPlayer function.

the function starts with creating an element audio

var supportsAudio = !!document.createElement('audio').canPlayType;

I added:

Code: Select all

,
	  btnVolUp = $(streamelement+' .btnVolUp').click(function() {

		audio.volume(0.5);

	  }),

and in blocks.js

Code: Select all

html+='<div class="col-xs-4 transbg hover text-center btnVolUp">';
	html+='<em class="fa fa-chevron-right fa-small"></em>';
	html+='</div>';

yes I know it's quick and dirty, didn't even change the icon, but it's NOT working.

I thought I was out of the woods by adding audio.volume(0.5);

btw volume can be a value between 0 .. 1

but, logging the debugger in firefox it says that it isn't even a function.

The following lines I also tried without success:

Code: Select all

		audio.volume(false, {volume: 0.5});
		audio.update("volume",0.5);
		audio.setVolume("volume", 0.5);
		audio.setVolume(0.5);

Who can shed some light where I go wrong, maybe a piece of code with my initial intension, a volume slider?.
Thanks in advance.
Frank

[gijsje]

Slowly it is coming around nicely
Have it now on a windows tablet and works great.
Of course still adding things and removing stuff all the time

[yfands]

@gijsje,

Nice going I see that you have a volume up en down button, In the post above yours I'm struggling with the volume, how did you do that..?

regards
Frank

[gijsje]

Frank,

It is the volume for the chromecast its there automaticly
Still need to add the buttons for the harmony hub

[yfands]

Gijs,

Ah, Ok understand. I'm gonne look further.

[EdwinK]

Slowly it is coming around nicely
Have it now on a windows tablet and works great.
Of course still adding things and removing stuff all the time

Care to share? (guess it rhymes a bit )

Looks nice


Why do I want to keep changing the layout every time I see a nice one.

[gijsje]

Sure thing.
The config has become very long as i do want other icons for most things and changing some settings.
Maybe it can be smaller but it works.
It would be great if it would be possible to have a separate file for blocks setting

config

Spoiler: show

var config = {}
config['domoticz_ip'] = '####';
config['app_title'] = 'Gijsje domotica';
config['domoticz_refresh'] = '7';
config['dashticz_refresh'] = '60';
config['default_news_url'] = 'https://cors-anywhere.herokuapp.com/htt ... .nu.nl/rss';
config['news_scroll_after'] = '5';
config['standby_after'] = 5;
config['auto_swipe_back_to'] = 1;
config['auto_swipe_back_after'] = '60';
config['auto_slide_pages'] = 0;
config['slide_effect'] = 'slide';
config['standard_graph'] = 'hours';
config['language'] = 'nl_NL';
config['timeformat'] = 'DD-MM-YY HH:mm';
config['calendarformat'] = 'dd DD.MM HH:mm';
config['calendarlanguage'] = 'nl_NL';
config['calendarurl'] = '#####';
config['boss_stationclock'] = 'RedBoss';
config['gm_api'] = '#####';
config['gm_zoomlevel'] = '9';
config['gm_latitude'] = '####';
config['gm_longitude'] = '#####';
config['wu_api'] = '#####'
config['wu_city'] = '####';
config['wu_name'] = '###';
config['wu_country'] = 'NL';
config['idx_moonpicture'] = 0;
config['switch_horizon'] = '####';
config['host_nzbget'] = 0;
config['spot_clientid'] = '####';
config['garbage_company'] = 'mijnafvalwijzer';
config['garbage_icalurl'] = 0;
config['garbage_zipcode'] = '####';
config['garbage_street'] = 0;
config['garbage_housenumber'] = '14';
config['garbage_maxitems'] = 3;
config['garbage_width'] = 0;
config['selector_instead_of_buttons'] = 0;
config['auto_positioning'] = 0;
config['use_favorites'] = 1;
config['last_update'] = 0;
config['hide_topbar'] = 0;
config['hide_seconds'] = 0;
config['hide_seconds_stationclock'] = 0;
config['use_fahrenheit'] = 0;
config['use_beaufort'] = 0;
config['translate_windspeed'] = 1;
config['static_weathericons'] = 0;
config['hide_mediaplayer'] = 0;
config['garbage_hideicon'] = 0;

var trashnames = {}
trashnames['Gft'] = 'GFT';
trashnames['Pmd'] = 'Plastic';
trashnames['Rest'] = ''; //LEAVE EMPTY IF YOU WANT TO HIDE IT
trashnames['Papier/pmd'] = 'Plastic en Papier Container';
trashnames['Rest-gft'] = 'Rest en Groen afval Container';
var trashcolors = {}
trashcolors['Papier/pmd'] = 'Orange';
trashcolors['Rest-gft'] = 'Green';


var tvguide = {}
tvguide.dutch = { key:'dutch', icon: 'fa-television', width:12, channels: [1,2,3,4,31,36,460,46,37,34,92,29,18], maxitems: 30 }

var _STREAMPLAYER_TRACKS = [
{"track":1,"name":"3FM","file":"http://icecast.omroep.nl/3fm-bb-mp3"},
{"track":2,"name":"538","file":"http://18973.live.streamtheworld.com/RADIO538.mp3"},
{"track":3,"name":"Q-music","file":"http://icecast-qmusic.cdp.triple-it.nl/ ... ive_96.mp3"},
{"track":4,"name":"Nostalgie","file":"http://streaming.radionomy.com/Radio-Nostalgia"},
{"track":5,"name":"Slam! NonStop","file":"http://stream.radiocorp.nl/web10_mp3"},
];

var calendars = {}
calendars.## = { maxitems: 5, icalurl: '####' }
calendars.## = { maxitems: 5,icalurl: '######' }
calendars.f1 = { maxitems: 5, icalurl: 'https://www.formula1.com/sp/static/f1/2 ... r/ical.ics' }

var buttons = {}
buttons.nunl = {key: 'nunl', width:12, icon: 'fa-newspaper-o', title: 'Nu.nl', newwindow:true, url: 'http://www.nu.nl'}
buttons.nos = {key: 'nos', width:12, icon: 'fa-newspaper-o', title: 'Nos', url: 'http://www.nos.nl'}
buttons.buienradar = {width:4, isimage:true, image: 'https://api.buienradar.nl/image/1.0/Rad ... =256&h=256', url: 'http://www.weeronline.nl/Europa/Nederland/#####/4058673'}
buttons.buienradar2 = {width:3, isimage:true, refreshimage:60000, image:'http://api.buienradar.nl/image/1.0/Rada ... =256&h=256', url:'https://gadgets.buienradar.nl/gadget/zo ... e=3&voor=1'}

buttons.verkeer = {width:12, isimage:true, image: 'https://www.anwb.nl/verkeer/verkeerstool.js', url: 'https://www.anwb.nl/verkeer/'}
var maps = {}
maps.plaatsnaam = { height: 450, width:12, latitude: #####, longitude: #####, zoom:10 }



var blocks = {}

//TEMPERATUUR////////////////////////////////////////
blocks[1] = {} //WIND METER
blocks[1]['width'] = 3;
blocks[1]['switch'] = true;
blocks[1]['show_lastupdate'] = false;

blocks[2] = {} //TEMP SLAAPKAMER
blocks[2]['width'] = 3;
blocks[2]['switch'] = true;
blocks[2]['show_lastupdate'] = false;

blocks[3] = {} //REGEN METER
blocks[3]['width'] = 3;
blocks[3]['switch'] = true;
blocks[3]['show_lastupdate'] = false;

blocks[4] = {} //TEMP KANTOOR
blocks[4]['width'] = 3;
blocks[4]['switch'] = true;
blocks[4]['show_lastupdate'] = false;

blocks[5] = {} //TEMP BUITEN
blocks[5]['width'] = 3;
blocks[5]['switch'] = true;
blocks[5]['show_lastupdate'] = false;

blocks[6] = {} //TEMP HUISKAMER
blocks[6]['width'] = 3;
blocks[6]['switch'] = true;
blocks[6]['last_update'] = false;

//SCHAKELAARS
blocks['s1'] = {} //HUISKAMER GROEP
blocks['s1']['width'] = 6;
blocks['s1']['icon'] = 'fa-circle-o';
blocks['s1']['hide_data'] = true;

blocks['s2'] = {} //KANTOOR GROEP
blocks['s2']['width'] = 6;
blocks['s2']['icon'] = 'fa-circle-o';
blocks['s2']['hide_data'] = true;

blocks[8] = {} //EETKAMER
blocks[8]['width'] = 6;
blocks[8]['icon'] = 'fa-circle-o';
blocks[8]['hide_data'] = true;

blocks[9] = {} //KEUKEN
blocks[9]['width'] = 6;
blocks[9]['icon'] = 'fa-circle-o';
blocks[9]['hide_data'] = true;

blocks[79] = {} //KLEUREN ALL
blocks[79]['width'] = 6;
blocks[79]['icon'] = 'fa-circle-o';
blocks[79]['hide_data'] = true;

blocks[80] = {} //KLEUREN LED STRIP
blocks[80]['width'] = 6;
blocks[80]['icon'] = 'fa-circle-o';
blocks[80]['hide_data'] = true;

blocks[81] = {} //KLEUREN KANTOOR
blocks[81]['width'] = 6;
blocks[81]['icon'] = 'fa-circle-o';
blocks[81]['hide_data'] = true;

blocks[82] = {} //KLEUREN BOOGLAMP
blocks[82]['width'] = 6;
blocks[82]['icon'] = 'fa-circle-o';
blocks[82]['hide_data'] = true;

blocks[83] = {} //KLEUREN GROOT
blocks[83]['width'] = 6;
blocks[83]['icon'] = 'fa-circle-o';
blocks[83]['hide_data'] = true;

blocks[84] = {} //KLEUREN BOLLETJE
blocks[84]['width'] = 6;
blocks[84]['icon'] = 'fa-circle-o';
blocks[84]['hide_data'] = true;

//BEWEGINGSMELDERS/////////////////////////////////
blocks[26] = {} //MELDER TUIN
blocks[26]['width'] = 3;
blocks[26]['switch'] = true;
blocks[26]['hide_data'] = true;
blocks[26]['show_lastupdate'] = false;

blocks[28] = {} //MELDER GANG
blocks[28]['width'] = 3;
blocks[28]['switch'] = true;
blocks[28]['hide_data'] = true;
blocks[28]['show_lastupdate'] = false;

blocks[29] = {} //MELDER TOILET
blocks[29]['width'] = 3;
blocks[29]['switch'] = true;
blocks[29]['hide_data'] = true;
blocks[29]['show_lastupdate'] = false;

blocks[33] = {} //MELDER GARAGE
blocks[33]['width'] = 3;
blocks[33]['switch'] = true;
blocks[33]['hide_data'] = true;
blocks[33]['show_lastupdate'] = false;

//DEUREN///////////////////////////////////////
blocks[27] = {} //ACHTERDEUR OPEN
blocks[27]['width'] = 3;
blocks[27]['switch'] = true;
blocks[27]['show_lastupdate'] = false;

blocks[30] = {} //VOORDEUR OPEN
blocks[30]['width'] = 3;
blocks[30]['switch'] = true;
blocks[30]['show_lastupdate'] = false;

blocks[31] = {} //DEURBEL VOOR
blocks[31]['width'] = 3;
blocks[31]['hide_data'] = true;
blocks[31]['playsound'] = 'sounds/doorbell.mp3';
blocks[31]['icon'] = 'fa-bell-o';

blocks[32] = {} //DEURBEL ACHTER
blocks[32]['width'] = 3;
blocks[32]['hide_data'] = true;
blocks[32]['playsound'] = 'sounds/doorbell.mp3';
blocks[32]['icon'] = 'fa-bell-o';

blocks[47] = {} //HARMONY OFF
blocks[47]['width'] = 6;
blocks[47]['switch'] = true;
blocks[47]['show_lastupdate'] = false;
blocks[47]['icon'] = 'fa-tv';

blocks[48] = {} //HARMONY TV KIJKEN
blocks[48]['width'] = 6;
blocks[48]['switch'] = true;
blocks[48]['show_lastupdate'] = false;
blocks[48]['icon'] = 'fa-tv';

blocks[50] = {} //HARMONY RADIO
blocks[50]['width'] = 6;
blocks[50]['switch'] = true;
blocks[50]['show_lastupdate'] = false;
blocks[50]['icon'] = 'fa-tv';

blocks[51] = {} //HARMONY KODI
blocks[51]['width'] = 6;
blocks[51]['switch'] = true;
blocks[51]['show_lastupdate'] = false;
blocks[51]['icon'] = 'fa-tv';

blocks[65] = {} //ONKYO VOLUME
blocks[65]['width'] = 12;
blocks[65]['switch'] = true;
blocks[65]['show_lastupdate'] = false;
blocks[65]['icon'] = 'fa-music';

//ENERGY
blocks[255] = {} //WATT
blocks[255]['width'] = 6;
blocks[255]['hide_data'] = true;

blocks[256] = {} //WATT
blocks[256]['width'] = 6;
blocks[256]['hide_data'] = true;

blocks[258] = {} //WATT
blocks[258]['width'] = 6;
blocks[258]['hide_data'] = true;

blocks[259] = {} //WATT
blocks[259]['width'] = 6;
blocks[259]['hide_data'] = true;

blocks[260] = {} //WATT
blocks[260]['width'] = 6;
blocks[260]['hide_data'] = true;

blocks[261] = {} //GAS
blocks[261]['width'] = 6;
blocks[261]['hide_data'] = true;

blocks[270] = {} //KEUZE THUIS STATUS
blocks[270]['width'] = 12;
blocks[270]['icon'] = 'fa-circle-o';
blocks[270]['hide_data'] = true;

blocks[273] = {} //KEUZE THUIS STATUS
blocks[273]['width'] = 12;
blocks[273]['hide_data'] = true;

blocks[336] = {} //WATER
blocks[336]['width'] = 6;
blocks[336]['hide_data'] = true;

blocks[343] = {} //BUIEN RADAR TEMP
blocks[343]['width'] = 3;
blocks[343]['hide_data'] = true;

blocks[344] = {} //BUIEN RADAR BAROMETER
blocks[344]['width'] = 3;
blocks[344]['hide_data'] = true;

blocks[345] = {} //BUIEN RADAR WIND
blocks[345]['width'] = 3;
blocks[345]['hide_data'] = true;

blocks[346] = {} //BUIEN RADAR ZICHT
blocks[346]['width'] = 3;
blocks[346]['hide_data'] = true;

blocks[347] = {} //BUIEN RADAR SOLAR
blocks[347]['width'] = 3;
blocks[347]['hide_data'] = true;

blocks[350] = {} //BUIEN RADAR RAIN FORECAST
blocks[350]['width'] = 3;
blocks[350]['hide_data'] = true;

blocks[351] = {} //BUIEN RADAR VOORSPELLING
blocks[351]['width'] = 12;
blocks[351]['hide_data'] = true;

blocks['trafficmap'] = {} //trafficmap
blocks['trafficmap']['width'] = 4;

blocks['currentweather_big'] = {} //currentweather
blocks['currentweather_big']['width'] = 6;

blocks['blocktitle_11'] = {}
blocks['blocktitle_11']['key'] = 'blocktitle_11';
blocks['blocktitle_11']['type'] = 'blocktitle';
blocks['blocktitle_11']['title'] = 'Weer info';

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

blocks['blocktitle_12-2'] = {}
blocks['blocktitle_12-2']['key'] = 'blocktitle_12-2';
blocks['blocktitle_12-2']['type'] = 'blocktitle';
blocks['blocktitle_12-2']['title'] = 'Beweging';

blocks['blocktitle_21'] = {}
blocks['blocktitle_21']['key'] = 'blocktitle_21';
blocks['blocktitle_21']['type'] = 'blocktitle';
blocks['blocktitle_21']['title'] = 'Agenda';

blocks['blocktitle_22'] = {}
blocks['blocktitle_22']['key'] = 'blocktitle_22';
blocks['blocktitle_22']['type'] = 'blocktitle';
blocks['blocktitle_22']['title'] = 'Verkeer';

blocks['blocktitle_24'] = {}
blocks['blocktitle_24']['key'] = 'blocktitle_24';
blocks['blocktitle_24']['type'] = 'blocktitle';
blocks['blocktitle_24']['title'] = 'Alarm/Meldingen';

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

blocks['blocktitle_32'] = {}
blocks['blocktitle_32']['key'] = 'blocktitle_32';
blocks['blocktitle_32']['type'] = 'blocktitle';
blocks['blocktitle_32']['title'] = 'Nieuws';

blocks['blocktitle_41'] = {}
blocks['blocktitle_41']['key'] = 'blocktitle_41';
blocks['blocktitle_41']['type'] = 'blocktitle';
blocks['blocktitle_41']['title'] = 'Energy verbruik';

blocks['blocktitle_42'] = {}
blocks['blocktitle_42']['key'] = 'blocktitle_42';
blocks['blocktitle_42']['type'] = 'blocktitle';
blocks['blocktitle_42']['title'] = 'Gas/Water verbruik';

blocks['blocktitle_42_2'] = {}
blocks['blocktitle_42_2']['key'] = 'blocktitle_42';
blocks['blocktitle_42_2']['type'] = 'blocktitle';
blocks['blocktitle_42_2']['title'] = 'Water verbruik';

blocks['blocktitle_43'] = {}
blocks['blocktitle_43']['key'] = 'blocktitle_43';
blocks['blocktitle_43']['type'] = 'blocktitle';
blocks['blocktitle_43']['title'] = 'Energie Grafiek';

var columns = {}
columns['bar'] = {}
columns['bar']['blocks'] = ['logo','miniclock','settings']

// PAGINA 1
columns[11] = {}
columns[11]['blocks'] = ['blocktitle_11','sunrise','weather','6_1','5_1','4_1','2_1','6_2','5_2',1,3,buttons.buienradar2,346,347,350,344,343,351]
columns[11]['width'] = 6;

columns[12] = {}
columns[12]['blocks'] = ['blocktitle_12','s1','s2',270,8,9,80,82,83,84,'blocktitle_12-2',26,28,29,33,30,27,31,32]
columns[12]['width'] = 6;

// PAGINA 2
columns[21] = {}
columns[21]['blocks'] = ['blocktitle_21',calendars.###,calendars.####,calendars.f1,'garbage']
columns[21]['width'] = 6;

columns[22] = {}
columns[22]['blocks'] = ['blocktitle_22','traffic',maps.plaatsnaam]
columns[22]['width'] = 6;

//PAGINA 3
columns[31] = {}
columns[31]['blocks'] = ['blocktitle_31',47,51,48,50,65,'chromecast']
columns[31]['width'] = 6;

columns[32] = {}
columns[32]['blocks'] = ['blocktitle_32', buttons.nos,buttons.nunl,tvguide.dutch]
columns[32]['width'] = 6;

//PAGINA 4
columns[41] = {}
columns[41]['blocks'] = ['blocktitle_41','260_1',255,256,259,'blocktitle_42',261,'blocktitle_42_2',284]
columns[41]['width'] = 2;

columns[42] = {}
columns[42]['blocks'] = ['blocktitle_42','graph_261','graph_336','261_2','336_2']
columns[42]['width'] = 6;

columns[43] = {}
columns[43]['blocks'] = ['blocktitle_43','graph_259','graph_260','260_1',255]
columns[43]['width'] = 6;



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

var screens = {}
screens[1] = {}
screens[1]['background'] = 'bg9.jpg';
screens[1]['columns'] = [11,12]

screens[2] = {}
screens[2]['background'] = 'bg9.jpg';
screens[2]['columns'] = [21,22]

screens[3] = {}
screens[3]['background'] = 'bg9.jpg';
screens[3]['columns'] = [31,32,33]

screens[4] = {}
screens[4]['background'] = 'bg9.jpg';
screens[4]['columns'] = [42,43]

config

Spoiler: show

/*
CUSTOM CSS FILE
*/

.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: 20px; /* Rounded corners */
}

div.mh.titlegroups {
height: 60px !important; /* default height=75px */
padding-top: 5px; /* center text for new height */
allign: center;
}

#graphoutput259 {height: 170px;}
#graphoutput260 {height: 170px;}
#graphoutput261 {height: 170px;}
#graphoutput336 {height: 170px;}

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

.fa.fa-tint.on {
color:#FF0000;
}
.fa.fa-tint.off {
color:#fff;
}

.fa.fa-fire-extinguisher.on {
color:#FF0000;
}
.fa.fa-fire-extinguisher.off {
color:#fff;
}

.fa.fa-music.on {
color:#FF0000;
}
.fa.fa-music.off {
color:#fff;
}

.fa.fa-youtube-play.on {
color:#FF0000;
}
.fa.fa-youtube-play.off {
color:#fff;
}

.fa.fa-film.on {
color:#FF0000;
}
.fa.fa-film.off {
color:#fff;
}

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

.fa.fa-smile-o.on {
color:#FF0000;
}
.fa.fa-smile-o.off {
color:#fff;
}


.fa.fa-sitemap.on {
color:#24ff00;
}
.fa.fa-sitemap.off {
color:#FF0000;
}

.fa.fa-circle-o.on {
color:#24ff00;
}
.fa.fa-circle-o.off {
color:#FF0000;
}

.fa.fa-reddit-alien.on {
color:#24ff00;
}
.fa.fa-reddit-alien.off {
color:#FF0000;
}


.trash .state div.trashrow {
font-size: 12px;
}
.trash .state div.trashtoday {
font-size: 16px;
}
.trash .state div.trashtomorrow {
font-size: 14px;
}

.fa.fa-arrow-circle-left.fa-small {
font-size: 40px !important;
}
.fa.fa-stop-circle.fa-small {
font-size: 40px !important;
}
.fa.fa-play-circle.fa-small {
font-size: 40px !important;
}
.fa.fa-arrow-circle-right.fa-small {
font-size: 40px !important;
}
.fa.fa-pause-circle.fa-small {
font-size: 40px !important;
}

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

[EdwinK]

Sure thing.

Thanks

It would be great if it would be possible to have a separate file for blocks setting

Not sure if it's possible with .js, but in PHP it should work with something like 'include_once', but that is something the developer(s) will know. I do agree with it. Maybe the var config parts as well.