Domoticz

Ierlandfan wrote: ↑Sunday 12 November 2017 12:33 Anyone tried the menu feature?

jurjan wrote: ↑Monday 13 November 2017 20:31 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

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

jurjan wrote: ↑Monday 13 November 2017 22:07 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.

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

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

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

EdwinK wrote: ↑Sunday 12 November 2017 13:12

Ierlandfan wrote: ↑Sunday 12 November 2017 12:33 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

htilburgs wrote: ↑Tuesday 14 November 2017 17:06 Succes!

Ierlandfan wrote: ↑Tuesday 14 November 2017 17:52

EdwinK wrote: ↑Sunday 12 November 2017 13:12

Ierlandfan wrote: ↑Sunday 12 November 2017 12:33 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)

gijsje wrote: ↑Wednesday 15 November 2017 12:56 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

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]

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

gijsje wrote: ↑Wednesday 15 November 2017 14:24 Sure thing.

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