Page 1 of 1

[FIXED] Dashticz CSS icons not doing anything.

Posted: Sunday 03 January 2021 16:34
by ThirstyThursten
Hey guys,
I'm back with another question..

I followed a (Dutch) blog of someone who made an awesome Dashboard he had a presence thing going on.

Now I want my icons on those blocks to have a green color (for being home) and a red one (for being away)

So these are the parts of the configs:

Code: Select all

var phone_thur				  = 46;

var blocks = {}

blocks[phone_thur] = {}
blocks[phone_thur]['title'] = 'Thur';
blocks[phone_thur]['icon'] = 'fas fa-male';
blocks[phone_thur]['width'] = 3;
blocks[phone_thur]['show_lastupdate'] = true;
blocks[phone_thur]['protected'] = true;
blocks[phone_thur]['hide_data'] = false;
Now this works and looks like this:
Presence.PNG
Presence.PNG (11.88 KiB) Viewed 1571 times
However when the state is ON (cause it's a dummy switch) it should be green and when off it should be red.

This is my CSS so far (I'll add 2 different versions I tried):

Code: Select all

.far,.fas,.wi {
   font-size:64px !important;
}

/* Change color of 'male' depending on state (on/off) */
.fas fa-male.on {
   color: #00FF00 !important;
}
.fas fa-male.off {
   color: #FF0000 !important;
}
/* Change color of 'female' depending on state (on/off) */
.fas.fa-female .on {
   color: #00FF00;
}
.fas.fa-female .off {
   color: #FF0000;
  
}

.block_46 .icon {
	color: #00FF00 !important;
}
And this is what was in the original code from that Blog Guy:

Code: Select all

// Colors from blog:  #aaa9a9 #8c8989
*/

/* Change colors of pop-up graph */
#graphoutput { 
		background: black; 
		color: white;
}

/* Change colors of pop-up graph */
 .graphpopup {
	background: black;
	color: white;
}

/* Change color of buttons */
.btn {
    background-color: #aaa9a9;
    color: black;
    border: 1px solid black;
}

/* Large & Heavy Blocks Titles */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif; 
    margin-left: 15px;
    font-weight: 900;
    font-size: 200%;
    foreground: blue;
}

/* Different color for Block Titles */
h3 {
	color: white;
	font-weight: 900;
}

/* Different fontsize & color for Text inside Block */
.title { 
    color: #8c8989 !important; 
    font-size: 16px !important;
} 

.css_woonkamer {
}

/* Different color for Value inside Block */
.value { 
    color: white !important;
} 
/* #8c8989 */
/* Title blocks (Height) */
div.mh.titlegroups {
    height: 60px !important;    /* default height=75px */
    padding-top: 3px;           /* center text for new height */
    color: white;
}

/* Space between blocks */
.transbg
{
    border-width: 5px !important;
}

/* Change spacing between borders, background and rounded corners */
.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);    /* spacing between borders 7px */
  background: rgba(0,0,0, 0.4);             /* transparancy of 0.4 (larger is darker) */
  background-clip: padding-box;
  border-radius: 20px;                      /* rounded corners */                   
}

/* Change background of scene block (350=movies, 351=voetbal, 352=ontspanning*/
.block_350.transbg,
.block_350.transbg {
  background-color: rgba(255, 0, 0, 0.3) !important;
}
.block_351.transbg,
.block_351.transbg {
  background-color: rgba(0, 255, 0, 0.3) !important;
}
.block_352.transbg,
.block_352.transbg {
  background-color: rgba(255, 235, 59, 0.3) !important;
}

/* Larger 'power-off' icon */
.fa.fa-power-off {
    font-size: 36px
}
/* Larger 'plug' icon */
.fa.fa-plug {
    font-size: 36px
}
/* Larger 'check-square' icon */
.fa.fa-check-square {
    font-size: 36px
}
/* Larger 'column' icon */
.fa.fa-columns {
    font-size: 36px
}
/* Larger 'male' icon */
.fa.fa-male {
    font-size: 36px
}
/* Larger 'female' icon */
.fa.fa-female {
    font-size: 36px
}
/* Larger 'microchip' icon */
.fa.fa-microchip {
    font-size: 36px
}
/* Larger 'lock' icon */
.fa.fa-lock {
    font-size: 36px
}
/* Larger 'fire' icon */
.fa.fa-fire {
    font-size: 36px
}
/* Larger 'bath' icon */
.fa.fa-bath {
    font-size: 36px
}

/* Change color of 'lightbulb' depending on state (on/off) */
.fas.fa-lightbulb {
   color:#F1C300;
}
.far.fa-lightbulb {
   color:#fff;
}
/* Change color of 'power-off' depending on state (on/off) */
.fa.fa-power-off.on {
   color:#00FF00;
}
.fa.fa-power-off.off {
   color:#FF0000;
}
/* Change color of 'plug' depending on state (on/off) */
.fa.fa-plug.on {
   color:#00FF00;
}
.fa.fa-plug.off {
   color:#FF0000;
}
/* Change color of 'check-square' depending on state (on/off) */
.fa.fa-check-square.on {
   color:#00FF00;
}
.fa.fa-check-square.off {
   color:#FF0000;
}
/* Change color of 'male' depending on state (on/off) */
.fa.fa-male.on {
   color:#00FF00;
}
.fa.fa-male.off {
   color:#FF0000;
}
/* Change color of 'female' depending on state (on/off) */
.fa.fa-female.on {
   color:#00FF00;
}
.fa.fa-female.off {
   color:#FF0000;
}

/* Change color of 'fa-door' depending on state (on/off) */
.fa.fa-lock.on {	
   color:#FF0000;
}
.fa.fa-lock.off{ 
   color:#00FF00;
}

/* Change color of 'fa-fire' depending on state (on/off) */
.fa.fa-fire.on {	
   color:#FF0000;
}
.fa.fa-fire.off{ 
   color:#00FF00;
}

/* Change color of 'fa-bath' depending on state (on/off) */
.fa.fa-bath.on {	
   color:#FF0000;
}
.fa.fa-bath.off{ 
   color:#00FF00;
}

/* Blocks name: 15px */
.title { 
    font-size:17px;
    color:white;
} 

.block_48 img {
  align:center !important;
}

Somehow none of the colors for any icons change. I almost feel like I need to set something in the CONFIG.js about use_custom_css = true;
Since none of my css is doing ANYTHING.. :(

Hope you guys can help me, I'm sorry if I missed something simple and stupid. I'm not too familiar with CSS nor JavaScript..
Ooh and just a Disclaimer: YES I went through ALL of the documantation of Dashticz, tried different things but nothing happened.

Greetings:
Thursten

Re: Dashticz CSS icons not doing anything.

Posted: Sunday 03 January 2021 18:51
by madpatrick
Try:

Code: Select all

.fa-male.on {color: green}
.fa-male.off {color: red}
.fa-female.on {color: green}
.fa-female.off {color: red}
See : viewtopic.php?p=194335#p194335

Is the font size changing to the 64px size ?

Re: Dashticz CSS icons not doing anything.

Posted: Thursday 07 January 2021 10:15
by ThirstyThursten
@Madpatrick thanks for the suggestion, however it didn't change anything..
I tried some suggestions from the link you provided.

None of it works.. I feel like the file is just not being loaded.. Size didn't change either.
I'm not sure if I'm missing an include or like a head parameter/variable that connects to the blocks or something..

It's frustrating to say the least! :P

Re: Dashticz CSS icons not doing anything.

Posted: Thursday 07 January 2021 10:25
by ThirstyThursten
Even when I add the following it doesn't work.. What is going on.. Could it be something in the automatic install or whatever? I just don't get it.. :oops:

Code: Select all

body {
  background-color: lightblue;
}

Re: Dashticz CSS icons not doing anything.

Posted: Thursday 07 January 2021 12:34
by Lokonli
ThirstyThursten wrote: Thursday 07 January 2021 10:25 Even when I add the following it doesn't work.. What is going on.. Could it be something in the automatic install or whatever? I just don't get it.. :oops:

Code: Select all

body {
  background-color: lightblue;
}
Open DevTools with F12, refresh Dashticz. Check DevTools Console tab: Which user messages do you see? Any errors?

Can you post your complete custom/custom.css here? Then I'll check.

Re: Dashticz CSS icons not doing anything.

Posted: Thursday 07 January 2021 12:58
by ThirstyThursten
Hey Lonkoli!
Good one! x'D
No error however it does say no valid custom/custom.css file found. Skipping.

See:
I'll add my files as well, if this doesn't cunclude anything however I need to edit them to keep privacy sensitive info out of there.
I'll add the versions of custom.css I have tried though!
Error.PNG
Error.PNG (13.88 KiB) Viewed 1528 times
Last testing version:

Code: Select all

/*
.far,.fas,.wi {
   font-size:64px !important;
}

/* Change color of 'male' depending on state (on/off) 
.fas fa-male.on {
   color: #00FF00 !important;
}
.fas fa-male.off {
   color: #FF0000 !important;
}
/* Change color of 'female' depending on state (on/off) 
.fas.fa-female .on {
   color: #00FF00;
}
.fas.fa-female .off {
   color: #FF0000;
  
}

**//


.fa-male.on {color: green}
.fa-male.off {color: red}
.fa-female.on {color: green}
.fa-female.off {color: red}

/*
.block_46 .icon {
	color: #00FF00 !important;
}
*/
body {
  background-color: lightblue;
}
This is someone elses I tried and took out some stuff I don't use:

Code: Select all

// Colors from blog:  #aaa9a9 #8c8989
*/

/* Change colors of pop-up graph */
#graphoutput { 
		background: black; 
		color: white;
}

/* Change colors of pop-up graph */
 .graphpopup {
	background: black;
	color: white;
}

/* Change color of buttons */
.btn {
    background-color: #aaa9a9;
    color: black;
    border: 1px solid black;
}

/* Large & Heavy Blocks Titles */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif; 
    margin-left: 15px;
    font-weight: 900;
    font-size: 200%;
    foreground: blue;
}

/* Different color for Block Titles */
h3 {
	color: white;
	font-weight: 900;
}

/* Different fontsize & color for Text inside Block */
.title { 
    color: #8c8989 !important; 
    font-size: 16px !important;
} 

.css_woonkamer {
}

/* Different color for Value inside Block */
.value { 
    color: white !important;
} 
/* #8c8989 */
/* Title blocks (Height) */
div.mh.titlegroups {
    height: 60px !important;    /* default height=75px */
    padding-top: 3px;           /* center text for new height */
    color: white;
}

/* Space between blocks */
.transbg
{
    border-width: 5px !important;
}

/* Change spacing between borders, background and rounded corners */
.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);    /* spacing between borders 7px */
  background: rgba(0,0,0, 0.4);             /* transparancy of 0.4 (larger is darker) */
  background-clip: padding-box;
  border-radius: 20px;                      /* rounded corners */                   
}

/* Change background of scene block (350=movies, 351=voetbal, 352=ontspanning*/
.block_350.transbg,
.block_350.transbg {
  background-color: rgba(255, 0, 0, 0.3) !important;
}
.block_351.transbg,
.block_351.transbg {
  background-color: rgba(0, 255, 0, 0.3) !important;
}
.block_352.transbg,
.block_352.transbg {
  background-color: rgba(255, 235, 59, 0.3) !important;
}

/* Larger 'power-off' icon */
.fa.fa-power-off {
    font-size: 36px
}
/* Larger 'plug' icon */
.fa.fa-plug {
    font-size: 36px
}
/* Larger 'check-square' icon */
.fa.fa-check-square {
    font-size: 36px
}
/* Larger 'column' icon */
.fa.fa-columns {
    font-size: 36px
}
/* Larger 'male' icon */
.fa.fa-male {
    font-size: 36px
}
/* Larger 'female' icon */
.fa.fa-female {
    font-size: 36px
}
/* Larger 'microchip' icon */
.fa.fa-microchip {
    font-size: 36px
}
/* Larger 'lock' icon */
.fa.fa-lock {
    font-size: 36px
}
/* Larger 'fire' icon */
.fa.fa-fire {
    font-size: 36px
}
/* Larger 'bath' icon */
.fa.fa-bath {
    font-size: 36px
}

/* Change color of 'lightbulb' depending on state (on/off) */
.fas.fa-lightbulb {
   color:#F1C300;
}
.far.fa-lightbulb {
   color:#fff;
}
/* Change color of 'power-off' depending on state (on/off) */
.fa.fa-power-off.on {
   color:#00FF00;
}
.fa.fa-power-off.off {
   color:#FF0000;
}
/* Change color of 'plug' depending on state (on/off) */
.fa.fa-plug.on {
   color:#00FF00;
}
.fa.fa-plug.off {
   color:#FF0000;
}
/* Change color of 'check-square' depending on state (on/off) */
.fa.fa-check-square.on {
   color:#00FF00;
}
.fa.fa-check-square.off {
   color:#FF0000;
}
/* Change color of 'male' depending on state (on/off) */
.fa.fa-male.on {
   color:#00FF00;
}
.fa.fa-male.off {
   color:#FF0000;
}
/* Change color of 'female' depending on state (on/off) */
.fa.fa-female.on {
   color:#00FF00;
}
.fa.fa-female.off {
   color:#FF0000;
}

/* Change color of 'fa-door' depending on state (on/off) */
.fa.fa-lock.on {	
   color:#FF0000;
}
.fa.fa-lock.off{ 
   color:#00FF00;
}

/* Change color of 'fa-fire' depending on state (on/off) */
.fa.fa-fire.on {	
   color:#FF0000;
}
.fa.fa-fire.off{ 
   color:#00FF00;
}

/* Change color of 'fa-bath' depending on state (on/off) */
.fa.fa-bath.on {	
   color:#FF0000;
}
.fa.fa-bath.off{ 
   color:#00FF00;
}

/* Blocks name: 15px */
.title { 
    font-size:17px;
    color:white;
} 

.block_48 img {
  align:center !important;
}
And this is where the latest Test came from:

Code: Select all

.far,.fas,.wi {
   font-size:64px !important;
}

/* Change color of 'male' depending on state (on/off) */ 
.fas fa-male.on {
   color: #00FF00 !important;
}
.fas fa-male.off {
   color: #FF0000 !important;
}
/* Change color of 'female' depending on state (on/off) */
.fas.fa-female .on {
   color: #00FF00;
}
.fas.fa-female .off {
   color: #FF0000;
  
}





/*
.block_46 .icon {
	color: #00FF00 !important;
}
*/
body {
  background-color: lightblue;
}
Again thanks for all the help guys! Really appreciate it!

Re: Dashticz CSS icons not doing anything.

Posted: Thursday 07 January 2021 13:02
by ThirstyThursten
And here is the Config now keep in mind I used someone else's Template so there's lots of comments and stuff and it's huge, to be ready for the future:

Code: Select all

config = {}
config['domoticz_ip'] = 'http://192.168.REDACTED';
config['app_title'] = 'Dashticz Dashboard';
config['domoticz_refresh'] = '5';
config['dashticz_refresh'] = '30';
config['login_timeout'] = '60';
config['user_name'] = 0;
config['pass_word'] = 0;
config['domoticz_timeout'] = '2000';
config['colorpicker'] = '2';
config['default_news_url'] = 'http://www.nu.nl/rss/algemeen';
config['news_scroll_after'] = '7';
config['default_cors_url'] = 0;
config['dashticz_php_path'] = './vendor/dashticz/';

config['theme'] = 'default';
config['background_image'] = 'img/bg2.jpg';
config['standby_after'] = 0;
config['start_page'] = 1;
config['enable_swiper'] = '2';
config['vertical_scroll'] = '2';
config['auto_swipe_back_to'] = 1;
config['auto_swipe_back_after'] = '10';
config['auto_slide_pages'] = 0;
config['slide_effect'] = 'slide';
config['standard_graph'] = 'hours';
config['blink_color'] = '255, 255, 255, 1';

config['language'] = 'en_US';
config['timeformat'] = 'DD-MM-YY HH:mm';
config['calendarformat'] = 'dd DD.MM HH:mm';
config['calendarlanguage'] = 'en_US';
config['calendarurl'] = 0;
config['boss_stationclock'] = 'RedBoss';

config['setpoint_min'] = '5';
config['setpoint_max'] = '40';

config['owm_api'] = 'REDACTED';
config['owm_city'] = 'Waalre';
config['owm_name'] = '';
config['owm_country'] = 'NL';
config['owm_lang'] = 'en';
config['owm_cnt'] = '3';
config['owm_min'] = 1;
config['owm_days'] = 1;
config['use_fahrenheit'] = 0;
config['use_beaufort'] = 0;
config['translate_windspeed'] = 1;

config['disable_update_check'] = 0;
config['loginEnabled'] = 0;
config['enable_websocket'] = 1;
config['auto_positioning'] = 1;
config['use_favorites'] = 0;
config['last_update'] = 1;
config['disable_googleanalytics'] = 0;
config['hide_topbar'] = 0;
config['swiper_touch_move'] = 1;
config['security_button_icons'] = 0;
config['security_panel_lock'] = 0;
config['edit_mode'] = 0;
config['hide_seconds'] = 0;
config['hide_seconds_stationclock'] = 0;
config['static_weathericons'] = 0;
config['hide_mediaplayer'] = 0;


// --------------------------------------------------------------------------------------------
// Screen definitions
// --------------------------------------------------------------------------------------------
var max_resolution_desktop    = 'default';
var max_resolution_smart      = 'tablet';

// --------------------------------------------------------------------------------------------
// Title Definitions
// --------------------------------------------------------------------------------------------
var title_misc                = 'title_misc';
var title_hue                 = 'title_hue';
var title_presence            = 'title_presence';
var title_temperature         = 'title_temperature';
var title_gas_and_elektra     = 'title_gas_and_elektra';
var title_news                = 'title_news'
var title_tweakers            = 'title_tweakers';
var title_tvguide_1           = 'title_tvguide_1';
var title_tvguide_2           = 'title_tvguide_2';
var title_radio               = 'title_radio';
var title_raspberry           = 'title_raspberry';
var title_solar               = 'title_solar'

// --------------------------------------------------------------------------------------------
// IDX Definitions
// --------------------------------------------------------------------------------------------

var phone_thur				  = 46;
var phone_peet				  = 47;

var temp_woonkamer_setpoint	  = 30;
var temperatuur_woonkamer     = 31;
var temperatuur_buiten 		  = 34;

//var temperatuur_zolder        = '154_1';
//var temperatuur_garage        = '794_1';

var p1_gas                    = 2;
var p1_elektra_nu			  = 1;

var p1_gas_nu                 = '2_1';
var p1_gas_totaal             = '2_2';

var p1_elektra_nu             = '1_1';
var p1_elektra_vandaag        = '1_2';
var p1_elektra_totaal         = '1_3';
//var p1_solar_nu				  = 43;
var p1_grafiek_gas            = 'graph_2';
var p1_grafiek_elektra        = 'graph_1';

var solar_nu				  = 82;
var solar_totaal			  = 81;
var solar_inverter			  = 83;

var pi_cpu_temperature        = 48;
var pi_cpu_usage              = 51;
var pi_cpu_speed              = 52;
var pi_cpu_memory             = 54;
var pi_up_time                = 53;
var pi_memory_usage           = 50;
var pi_domoticz_memory        = 62;

var news_1                    = 'news_1';
var news_2                    = 'news_2';

// --------------------------------------------------------------------------------------------
// Buttons
// --------------------------------------------------------------------------------------------
var buttons = {}


// --------------------------------------------------------------------------------------------
// Nieuws sites
// --------------------------------------------------------------------------------------------
buttons.nos        = { width:3, icon: 'far fa-newspaper', title: "NOS  ",     url: 'http://www.nos.nl' }
buttons.nunl       = { width:3, icon: 'far fa-newspaper', title: "Nu.nl",     url: 'http://www.nu.nl' }
buttons.telegraaf  = { width:3, icon: 'far fa-newspaper', title: "Telegraaf", url: 'http://telegraaf.nl' }



// --------------------------------------------------------------------------------------------
// Buienradar
// --------------------------------------------------------------------------------------------
buttons.buienradar = {width:6, isimage:true, btnimage: 'http://api.buienradar.nl/image/1.0/RadarMapNL?w=175&h=175', url: 'https://hetweerlokaal.nl/nederland/noord-brabant/waalre'}

// --------------------------------------------------------------------------------------------
// TV Gids
// --------------------------------------------------------------------------------------------

// 1 = NPO1, 2 = NPO2, 3 = NPO4, 4 = RTL4, 31 = RTL5, 36 = SBS6, 46 = RTL7, 37 = NET5, 34 = Veronica, 92 = RTL8
// 435 = 24Kitchen, 6 = Canvas, 466 = Ziggo Sport, 148 = Fox Sports Eredivisie
var tvguide = {}

tvguide.dutch_1 = { key:'dutch', width:12, channels: [1,2,3,4,31,36,46,37,34,92], maxitems: 8 }
tvguide.dutch_2 = { key:'dutch', width:12, channels: [435,466,148],               maxitems: 5 }

// --------------------------------------------------------------------------------------------
// Logging
// --------------------------------------------------------------------------------------------
buttons.log = {key:'log', width:12, icon:'fas fa-microchip', title: 'Logging Domoticz', log:true, level: 2}

// --------------------------------------------------------------------------------------------
// Radio
// --------------------------------------------------------------------------------------------
var _STREAMPLAYER_TRACKS     = [
   {"track":1,"name":"Radio 538","file":"http://playerservices.streamtheworld.com/api/livestream-redirect/RADIO538.mp3"}, 
   {"track":2,"name":"Q-music","file":"http://icecast-qmusic.cdp.triple-it.nl/Qmusic_nl_live_96.mp3"},
   {"track":3,"name":"Slam! NonStop","file":"http://stream.radiocorp.nl/web10_mp3"},
   {"track":4,"name":"100%NL","file":"http://stream.100p.nl/100pctnl.mp3"},
   {"track":6,"name":"NPO Radio 1","file":"http://icecast.omroep.nl/radio1-bb-mp3"},
   {"track":7,"name":"Omroep Brabant","file":"http://streaming.omroepbrabant.nl/mp3"},
];

// --------------------------------------------------------------------------------------------
// Blocks
// --------------------------------------------------------------------------------------------
var blocks = {}

// Phone Thursten
blocks[phone_thur] = {}
blocks[phone_thur]['title'] = 'Thur';
blocks[phone_thur]['icon'] = 'fas fa-male';
blocks[phone_thur]['width'] = 3;
blocks[phone_thur]['last_update'] = true;
blocks[phone_thur]['protected'] = true;
blocks[phone_thur]['hide_data'] = false;

// Phone Peet
blocks[phone_peet] = {}
blocks[phone_peet]['title'] = 'Peet';
blocks[phone_peet]['icon'] = 'fas fa-female';
blocks[phone_peet]['width'] = 3;
blocks[phone_peet]['last_update'] = true;
blocks[phone_peet]['protected'] = true;
blocks[phone_peet]['hide_data'] = true;

// Temperatuur Woonkamer
blocks[temperatuur_woonkamer] = {}
blocks[temperatuur_woonkamer]['title'] = 'Woonkamer'
blocks[temperatuur_woonkamer]['width'] = 3;
blocks[temperatuur_woonkamer]['switch'] = true;
blocks[temperatuur_woonkamer]['last_update'] = false;

// Temperatuur Buiten
blocks[temperatuur_buiten] = {}
blocks[temperatuur_buiten]['title'] = 'Buiten'
blocks[temperatuur_buiten]['width'] = 3;
blocks[temperatuur_buiten]['switch'] = true;
blocks[temperatuur_buiten]['last_update'] = false;

// Woonkamer Temp Setpoint
blocks[temp_woonkamer_setpoint] = {}
blocks[temp_woonkamer_setpoint]['width'] = 4;
blocks[temp_woonkamer_setpoint]['last_update'] = false;

// Smartmeter Gas
blocks[p1_gas] = {}
blocks[p1_gas]['width'] = 4;
blocks[p1_gas]['last_update'] = false;
blocks[p1_gas]['protected'] = true;

blocks[p1_gas_nu] = {}
blocks[p1_gas_nu]['width'] = 4;
blocks[p1_gas_nu]['title'] = 'Gas Vandaag';
blocks[p1_gas_nu]['last_update'] = false;
blocks[p1_gas_nu]['protected'] = true;

blocks[p1_gas_totaal] = {}
blocks[p1_gas_totaal]['width'] = 4;
blocks[p1_gas_totaal]['title'] = 'Gas Totaal';
blocks[p1_gas_totaal]['last_update'] = false;
blocks[p1_gas_totaal]['protected'] = true;

// Smart Meter Elektra: _1 = Huidig Elektra, _2 = Elektra Vandaag, _3 = Elektra Totaal

// Smartmeter Elektra
blocks[p1_elektra_nu] = {}
blocks[p1_elektra_nu]['width'] = 4;
blocks[p1_elektra_nu]['title'] = 'Energie Nu';
blocks[p1_elektra_nu]['last_update'] = false;
blocks[p1_elektra_nu]['protected'] = true;


blocks[p1_elektra_vandaag] = {}
blocks[p1_elektra_vandaag]['width'] = 4;
blocks[p1_elektra_vandaag]['last_update'] = false;
blocks[p1_elektra_vandaag]['protected'] = true;

blocks[p1_elektra_totaal] = {}
blocks[p1_elektra_totaal]['width'] = 4;
blocks[p1_elektra_totaal]['title'] = 'Energie Totaal';
blocks[p1_elektra_totaal]['last_update'] = false;
blocks[p1_elektra_totaal]['protected'] = true;

// Definition 'Gas' graph (= device 137)
blocks[p1_grafiek_gas] = {
  title: 'Gas',
  width: 6,
  height: '200px',
  custom : {
  	"maand": {
        graph: 'bar',
  		range: 'month',
		groupBy: 'day',
		data: {
		  	Gas: 'd.v_2'
		}  		  		
  	},
  	"week per dag": {
		graph: 'bar',
  		range: 'month',
		groupBy: 'day',
		filter: '7 days',
		data: {
		  	Gas: 'd.v_2'
		  },		  
  	},
  	"jaar": {
		graph: 'bar',
  		range: 'year',
		groupBy: 'month',
		data: {
		  	Gas: 'd.v_2'
		  },		  
  	},
  	"dag": {
        graph: 'bar',
  		range: 'day',
		groupBy: 'hour',
		data: {
		  	Gas: 'd.v_2'
		}  		  		
  	},
  },
  legend: false,
  datasetColors: ['gray'],
	  displayFormats : {
	  minute: 'h:mm',
	  hour: 'h:mm',
	  day: 'DD MMM',
	  week: 'DD MMM',
	  month: 'MMM',
	}
}

// Definition 'Elektriciteit' graph (= device 1)
blocks[p1_grafiek_elektra] = {
  title: 'Elektriciteit',
  width: 6,
  height: '200px',
  custom : {
  	"maand": {
        graph: 'bar',
  		range: 'month',
		groupBy: 'day',
		data: {
		  	Elektra: 'd.v_1+d.v2_1'
		}  		  		
  	},
  	"week per dag": {
		graph: 'bar',
  		range: 'month',
		groupBy: 'day',
		filter: '7 days',
		data: {
		  	Elektra: 'd.v_1+d.v2_1'
		  },		  
  	},
  	"jaar": {
		graph: 'bar',
  		range: 'year',
		groupBy: 'month',
		data: {
		  	Elektra: 'd.v_1+d.v2_1'
		},		  
  	},
  	"dag": {
        graph: 'bar',
  		range: 'day',
		groupBy: 'hour',
		data: {
		  	Elektra: 'd.v_1+d.v2_1'
		  }  		  		
  	},  	
  },
  legend: false,
  datasetColors: ['gray'],
	  displayFormats : {
	  minute: 'h:mm',
	  hour: 'h:mm',
	  day: 'DD MMM',
	  week: 'DD MMM',
	  month: 'MMM',
	}
}

// Solar Info - Growatt
blocks[solar_nu] = {}
blocks[solar_nu]['width'] = 4;
blocks[solar_nu]['title'] = 'Solar Nu';
blocks[solar_nu]['last_update'] = false;
blocks[solar_nu]['protected'] = true;

blocks[solar_totaal] = {}
blocks[solar_totaal]['width'] = 4;
blocks[solar_totaal]['title'] = 'Solar Totaal';
blocks[solar_totaal]['last_update'] = false;
blocks[solar_totaal]['protected'] = true;

blocks[solar_inverter] = {}
blocks[solar_inverter]['title'] = 'Inverter';
blocks[solar_inverter]['width'] = 3;
blocks[solar_inverter]['last_update'] = false;
blocks[solar_inverter]['protected'] = true;
blocks[solar_inverter]['hide_data'] = true;

//
// Raspberry PI statistics
//
blocks[pi_cpu_temperature] = {};
blocks[pi_cpu_temperature]['width'] = 6;
blocks[pi_cpu_temperature]['icon'] = 'fa fa-microchip';
blocks[pi_cpu_temperature]['last_update'] = false;

blocks[pi_cpu_usage] = {};
blocks[pi_cpu_usage]['width'] = 6;
blocks[pi_cpu_usage]['icon'] = 'fa fa-microchip';
blocks[pi_cpu_usage]['last_update'] = false;

blocks[pi_cpu_speed] = {};
blocks[pi_cpu_speed]['width'] = 6;
blocks[pi_cpu_speed]['icon'] = 'fa fa-microchip';
blocks[pi_cpu_speed]['last_update'] = false;

blocks[pi_cpu_memory] = {};
blocks[pi_cpu_memory]['width'] = 6;
blocks[pi_cpu_memory]['icon'] = 'fa fa-microchip';
blocks[pi_cpu_memory]['last_update'] = false;

blocks[pi_up_time] = {};
blocks[pi_up_time]['width'] = 6;
blocks[pi_up_time]['icon'] = 'fa fa-microchip';
blocks[pi_up_time]['last_update'] = false;

blocks[pi_memory_usage] = {};
blocks[pi_memory_usage]['width'] = 6;
blocks[pi_memory_usage]['icon'] = 'fa fa-microchip';
blocks[pi_memory_usage]['last_update'] = false;

blocks[pi_domoticz_memory] = {};
blocks[pi_domoticz_memory]['width'] = 6;
blocks[pi_domoticz_memory]['icon'] = 'fa fa-microchip';
blocks[pi_domoticz_memory]['last_update'] = false;

// Newsfeed
blocks[news_1] = {}
blocks[news_1]['feed'] = 'http://www.nu.nl/rss/algemeen';
blocks[news_1]['title'] = 'NU.nl RSS Feed';
blocks[news_1]['width'] = 12;
blocks[news_1]['maxheight'] = 'auto';
blocks[news_1]['protected'] = true;

blocks[news_2] = {}
blocks[news_2]['feed'] = 'https://feeds.feedburner.com/tweakers/nieuws';
blocks[news_2]['width'] = 12;
blocks[news_2]['protected'] = true;


// --------------------------------------------------------------------------------------------
// Title Blocks
// --------------------------------------------------------------------------------------------

// Title: HUE lichten
blocks[title_hue] = {}
blocks[title_hue]['type'] = 'blocktitle'
blocks[title_hue]['title'] = 'Hue Lichten'

// Title: Aanwezigheid
blocks[title_presence] = {}
blocks[title_presence]['type'] = 'blocktitle'
blocks[title_presence]['title'] = 'Aanwezigheid'

// Title: Temperatuur
blocks[title_temperature] = {}
blocks[title_temperature]['type'] = 'blocktitle'
blocks[title_temperature]['title'] = 'Temperatuur'

// Title: Gas & Elektra
blocks[title_gas_and_elektra] = {}
blocks[title_gas_and_elektra]['type'] = 'blocktitle'
blocks[title_gas_and_elektra]['title'] = 'Gas & Elektra'

// Title: Nieuws
blocks[title_news] = {}
blocks[title_news]['type'] = 'blocktitle'
blocks[title_news]['title'] = 'Nieuws'

// Title: Tweakers
blocks[title_tweakers] = {}
blocks[title_tweakers]['type'] = 'blocktitle'
blocks[title_tweakers]['title'] = 'Tweakers'

// Title: TV Gids - NL Zenders
blocks[title_tvguide_1] = {}
blocks[title_tvguide_1]['type'] = 'blocktitle'
blocks[title_tvguide_1]['title'] = 'TV Gids - NL Zenders'

// Title: Radio
blocks[title_radio] = {}
blocks[title_radio]['type'] = 'blocktitle'
blocks[title_radio]['title'] = 'Radio'


// Title: Raspberry
blocks[title_raspberry] = {}
blocks[title_raspberry]['type'] = 'blocktitle'
blocks[title_raspberry]['title'] = 'Raspberry'

// Title: Diversen
blocks[title_misc] = {}
blocks[title_misc]['type'] = 'blocktitle'
blocks[title_misc]['title'] = 'Diversen'

// Title: Solar Info
blocks[title_solar] = {}
blocks[title_solar]['type'] = 'blocktitle'
blocks[title_solar]['title'] = 'Solar Info'

// --------------------------------------------------------------------------------------------
// Garbage Collector
// --------------------------------------------------------------------------------------------

config['garbage_company'] = 'REDACTED';
config['garbage_zipcode'] = 'REDACTED';
config['garbage_street'] = 'REDACTED';
config['garbage_housenumber'] = 'REDACTED';
config['garbage_maxitems'] = '4';
config['garbage_width'] = '5';
config['garbage_use_names'] = true;
config['garbage_use_colors'] = true;

config['garbage'] = {
    gft: {kliko: 'green', code: '#375b23', name: 'GFT'},
    pmd: {kliko: 'orange', code: '#db5518', name: 'PMD'},
    rest: {kliko: 'brown', code: '#7c3607', name: 'Restafval'},
    papier: {kliko: 'blue', code: '#153477', name: 'Papier'},
//    kca: {kliko: 'red', code: '#b21807', name: 'Chemisch afval'},
//    brown: {kliko: 'brown', code: '#5e5d5c', name: 'Bruin'},
//    black: {kliko: 'black', code: '#000000', name: 'Zwart'},
};



// --------------------------------------------------------------------------------------------
// Columns
// --------------------------------------------------------------------------------------------

var columns = {}

columns[1] = {}
columns[1]['blocks'] = [title_presence, phone_thur, phone_peet, title_temperature, temperatuur_woonkamer, temperatuur_buiten, title_solar, solar_inverter, solar_nu, solar_totaal]
columns[1]['width'] = 4;

columns[2] = {}
columns[2]['blocks'] = [title_misc, 'garbage', title_gas_and_elektra, temp_woonkamer_setpoint, p1_gas_nu, p1_gas_totaal, p1_elektra_nu, p1_elektra_vandaag, p1_elektra_totaal, p1_grafiek_gas, p1_grafiek_elektra] 
columns[2]['width'] = 5;

columns[3] = {}
columns[3]['blocks'] = ['sunrise', buttons.log]
columns[3]['width'] = 2; 

columns[5] = {}
columns[5]['blocks'] = [title_news, news_1, 'currentweather_big_owm', 'weather_owm']
columns[5]['width'] = 4; 

columns[6] = {}
columns[6]['blocks'] = [title_tvguide_1, tvguide.dutch_1] 
columns[6]['width'] = 4;

columns[9] = {}
columns[9]['blocks'] = [title_raspberry, pi_up_time, pi_cpu_usage, pi_cpu_temperature, pi_memory_usage, title_radio, 'streamplayer']
columns[9]['width'] = 4; 



// --------------------------------------------------------------------------------------------
// Screens
// --------------------------------------------------------------------------------------------
var screens = {}

screens[max_resolution_desktop] = {}
screens[max_resolution_desktop]['maxwidth'] = 2560;
screens[max_resolution_desktop]['maxheight'] = 1440;

screens[max_resolution_desktop][1] = {}
//screens[max_resolution_desktop][1]['background'] = 'bg14_lightgray.jpg';
screens[max_resolution_desktop][1]['columns'] = [1,2,3]

screens[max_resolution_desktop][2] = {}
//screens[max_resolution_desktop][2]['background'] = 'bg14_lightgray.jpg';
screens[max_resolution_desktop][2]['columns'] = [5,6,9]

Re: Dashticz CSS icons not doing anything.

Posted: Thursday 07 January 2021 13:08
by Lokonli
Dashticz can't read custom/custom.css

That needs to be fixed first.

Double check the file name: It's case sensitive.

start with an empty custom.css file, and check that the warning disappears.

Further: Don't use double slash '//' in css files. It's not supported in CSS and will give errors.

Re: Dashticz CSS icons not doing anything.

Posted: Thursday 07 January 2021 13:13
by Lokonli
then try this custom.css :

Code: Select all

.fas.fa-male.on {
   color: #00FF00 !important;
}
.fas.fa-male.off {
   color: #FF0000 !important;
}
.fas.fa-female.on {
   color: #00FF00  !important;
}
.fas.fa-female.off {
   color: #FF0000 !important;
  
}

I've removed 4x space, removed the comment line, added 2x !important

Re: Dashticz CSS icons not doing anything.

Posted: Thursday 07 January 2021 13:52
by ThirstyThursten
OMG I just discovered that only the owner (pi) has read and write acces..
Right now it's 0600 .. That's doesn't work than..
I'll change the permissions to 0644 and see what will happen! If this has been the problem all along I'm gonna go crazy. xD
I'll report back! Stand-by

Re: Dashticz CSS icons not doing anything.

Posted: Thursday 07 January 2021 13:58
by ThirstyThursten
Son of a ... It works now.. D:

Reee.. Thanks so much! However my first observation was kinda right, the custom.css was not being loaded in whatso ever! Now I noticed a few more errors/information messages in the f12 console!
So I will say TIL first check the console log ALWAYS! :)
Thanks guys! <3

Re: [FIXED] Dashticz CSS icons not doing anything.

Posted: Thursday 07 January 2021 14:54
by Lokonli
Excellent!

Re: [FIXED] Dashticz CSS icons not doing anything.

Posted: Tuesday 04 May 2021 8:56
by bakkie
I've had the same problem with a fresh install of Dashticz, but after changing the permission to 0644 it worked!

thank you very much! :D