Dashticz - General Discussions

[l0gic]

Guys,
I'm moving on with my screens but I want to change the colour of an icon in a block depending on conditions (e.g. temperature)
I'm not expert in js / css but I'll have a go

If I have an icon, say fa-bolt I can permanently change the colour using css and defining .fa-bolt {color:rgba(10,20,30,0.5);
but I don't understand how I can then change the colour to something different depending on a value.

As the css code defines the icon .fa-bolt I can't reference it if I make a change to the name.

Can I change the colour in the js code somehow, perhaps blocks[123]['icon'] = 'fa fa-bolt' color:rgba(10,20,30,0.5); <- doesn't work but you get the idea

Any ideas?

Thanks
Kevin

[tigo72]

I know this issue has been raised before--in april or so--but on the latest beta it still seems to prevail, at least in my case:

The Nefit Boiler pressure block gives me "On" instead of "1.6 Bar" or something similar.

I know for sure the IDX is right. The output file:

"AddjMulti" : 1.0,
"AddjMulti2" : 1.0,
"AddjValue" : 0.0,
"AddjValue2" : 0.0,
"BatteryLevel" : 255,
"CustomImage" : 0,
"Data" : "1.6 Bar",
"Description" : "",
"Favorite" : 0,
"HardwareID" : 23,
"HardwareName" : "Nefit Easy",
"HardwareType" : "Nefit Easy HTTP server over LAN interface",
"HardwareTypeVal" : 68,
"HaveTimeout" : false,
"ID" : "00000101",
"LastUpdate" : "2017-11-26 11:30:00",
"Name" : "Waterdruk Boiler",
"Notifications" : "false",
"PlanID" : "0",
"PlanIDs" : [ 0 ],
"Pressure" : 1.6000000000000001,
"Protected" : false,
"ShowNotifications" : true,
"SignalLevel" : "-",
"SubType" : "Pressure",
"Timers" : "false",
"Type" : "General",
"TypeImg" : "gauge",
"Unit" : 1,
"Used" : 1,
"XOffset" : "0",
"YOffset" : "0",
"idx" : "1851"

Can someone help me out?

BTW: I love Dashtics, great great work!

Best
Tigo

[aiolos]

I pushed a possible fix, if Rob merges it, you can test it.

[tigo72]

thank you aiolos!

[robgeerts]

Merged into beta!

[tigo72]

And working!~Thank you so much Rob

[Ingmar]

Guys,
I'm moving on with my screens but I want to change the colour of an icon in a block depending on conditions (e.g. temperature)
I'm not expert in js / css but I'll have a go

If I have an icon, say fa-bolt I can permanently change the colour using css and defining .fa-bolt {color:rgba(10,20,30,0.5);
but I don't understand how I can then change the colour to something different depending on a value.

As the css code defines the icon .fa-bolt I can't reference it if I make a change to the name.

Can I change the colour in the js code somehow, perhaps blocks[123]['icon'] = 'fa fa-bolt' color:rgba(10,20,30,0.5); <- doesn't work but you get the idea

Any ideas?

Thanks
Kevin

I use the following code for changing the background of a opened door block, it gives the block a certain div class depending on the value. Then in the CSS you can define the div class styles. Maybe with a bit of playing around you can get it to work for your case? Got the info from the Wiki: http://www.domoticz.com/wiki/Dashticz_V ... Cdevice.29.

Code: Select all

function getStatus_145(idx,value,device){
   if(parseFloat(device['Data'])>23){
      $('div.block_145').addClass('warning');
   }
   else {
      $('div.block_145').removeClass('warning');
   }
}

function getStatus_286(idx,value,device){
   if(parseFloat(device['Data'])>4){
      $('div.block_286').addClass('warningblue');
   }
   else {
      $('div.block_145').removeClass('warningblue');
   }
}

And in the CSS:

Code: Select all

.warning {
   background: rgba(199,44,44,0.3) !important;
    background-clip: padding-box;
}

.warningblue {
   background: rgba(45,119,204,0.3) !important;
    background-clip: padding-box;
}

[Jempe]

I have a problem with temperature/humidity sensor. It's not possible to clic on the block to see the graph. Before the last update to stable(~3 week https://github.com/robgeerts/dashticz_v ... 2441361715), it's was possible to clik on the block 23 (not 23_1) and show the temp graph. The graph working good in domoticz... The switch option doesn't work...
Information from domoticz;

Code: Select all

  	
  	53	Rflink	5618	0	Corridor			Temp + Humidity	WTGR800	21.3 C, 35 %	
  	23	Rflink	2DE1	0	Températue Salon	Temp + Humidity	WTGR800	21.1 C, 32 %	
  	52	Rflink	52C9	0	Extérieur			Temp + Humidity	WTGR800	1.2 C, 60 %	

The 23 is an oregon, the other are cheap one from china but work good.
Her is the block information from CONFIG.js

Code: Select all

blocks['23_1'] = {}  //salon oregon
blocks['23_1']['title'] = 'Salon';
blocks['23_2'] = {}
blocks['23_2']['title'] = 'Salon';
blocks['52_1'] = {} //température extérieur
blocks['52_1']['switch'] = true
blocks['52_1']['title'] = 'Extérieur';
blocks['52_2'] = {} //humidité extérieur
blocks['52_2']['title'] = 'Extérieur';
blocks['53_1'] = {} //température corridor
blocks['53_1']['title'] = 'Corridor';
blocks['53_2'] = {} //humidité corridor
blocks['53_2']['title'] = 'Corridor';

[l0gic]

I use the following code for changing the background of a opened door block, it gives the block a certain div class depending on the value. Then in the CSS you can define the div class styles. Maybe with a bit of playing around you can get it to work for your case? Got the info from the Wiki

Hi, thanks for looking Ingmar.
Yeah, I started off using that code but I want to move on to just change the colour of the icon rather than the whole background.
I've been playing with it for a few days now without any luck. If the data was on/off rather than a value I can reference the icon using icon.on and icon.off but with a variable it seems to be more difficult.
I can change the icon depending on the value but can't seem to change the colour of a single icon on demand.
I'll keep on plugging at it

Thanks

Kevin

[Jempe]

I use the following code for changing the background of a opened door block, it gives the block a certain div class depending on the value. Then in the CSS you can define the div class styles. Maybe with a bit of playing around you can get it to work for your case? Got the info from the Wiki

Hi, thanks for looking Ingmar.
Yeah, I started off using that code but I want to move on to just change the colour of the icon rather than the whole background.
I've been playing with it for a few days now without any luck. If the data was on/off rather than a value I can reference the icon using icon.on and icon.off but with a variable it seems to be more difficult.
I can change the icon depending on the value but can't seem to change the colour of a single icon on demand.
I'll keep on plugging at it

Thanks

Kevin

I do it for my temp/humidity sensor;
custom.js;

Code: Select all

function getStatus_23(idx,value,device){
   if((parseFloat(device['Humidity'])<40) && (parseFloat(device['Humidity'])>30)){
      $('div.block_23_2').addClass('orange');
   }
   else {
      $('div.block_23_2').removeClass('orange');
   }
    if(parseFloat(device['Humidity'])<=30){
      $('div.block_23_2').addClass('red');
   }
   else {
      $('div.block_23_2').removeClass('red');
   }
    if(parseFloat(device['Humidity'])>60){
      $('div.block_23_2').addClass('blue');
   }
   else {
      $('div.block_23_2').removeClass('blue');
   }
    if((parseFloat(device['Temp'])>23) && (parseFloat(device['Temp'])<28)){
      $('div.block_23_1').addClass('orange');
   }
   else {
      $('div.block_23_1').removeClass('orange');
   }
    if(parseFloat(device['Temp'])>=28){
      $('div.block_23_1').addClass('red');
   }
   else {
      $('div.block_23_1').removeClass('red');
   }
    if(parseFloat(device['Temp'])<18){
      $('div.block_23_1').addClass('blue');
   }
   else {
      $('div.block_23_1').removeClass('blue');
   }
   if(parseFloat(device['Temp'])<=15){
      $('div.block_23_1').addClass('white');
   }
   else {
      $('div.block_23_1').removeClass('white');
   }
}

custom.css;

Code: Select all

.orange .wi.wi-humidity:before, .orange .fa-thermometer-half:before {color:gold} 
.red .wi.wi-humidity:before, .red .fa-thermometer-half:before {color:red} 
.blue .wi.wi-humidity:before, .blue .fa-thermometer-half:before {color:blue} 
.white .wi.wi-humidity:before, .white .fa-thermometer-half:before {color:#FFF} 

Hope it's help...

[Jempe]

You can show all the possible value from your sensor (in this exemple parseFloat(device['Humidity'])<=30) )with an json call:
curl -s "domoticz.ip:port/json.htm?type=devices&rid=YourIDXsensor"

[Ingmar]

I can change the icon depending on the value but can't seem to change the colour of a single icon on demand.

Kevin

You can always decide to go the less flexible way, where you take the same icon but change the color in paint or photoshop and save them as separate files on your system (see wiki). Then you can make it look like only the colour is changing, while actually the whole icon is changing...

[Ingmar]

Is there a way to change the size of the popup window of the "var buttons"? Is it possible to set the size per individual button?

Gr. Ingmar

[robgeerts]

Not yet unfortunately

[woody4165]

Hi all

I think I'm having an issue with my Dashticz config.
After a few minutes that I open a browser with Dashticz I get no more access to standard Domoticz frontpage as well as Dashticz.

Browser wheel continue to spin on the Dashticz page.

I found that I wrongly set 3 cameras refreshimage to 1500 and changing this to 10000 seems to solve the issue of not showing anymore the webpage.

But I still get the wheel spinning all the time

My configs related to refresh are:

Code: Select all

config['domoticz_refresh'] = '5';
config['dashticz_refresh'] = '60';
.....
var frames = {}
frames.weather = {refreshiframe:10000,height:230,frameurl:"//forecast.io/embed/#lat=xx.xxxxx&lon=yy.yyyy&name=xxx&color=#00aaff&font=Helvetica&fontcolor=#ffffff&units=si&text-color=#fff",width:24}


var maps = {}
maps.rome = { height:250, refreshimage:60000, width:6, latitude: xx.xxxx, longitude: xx.xxxx, zoom:13 }


//Buttons or images to open webpages in an iframe, like a news website or weather forecast
var buttons = {}
buttons.buienradar = {height:220, width:6, isimage:true, refreshimage:600000, image: 'http://www.meteo60.fr/satellites/animation-satellite-ir-france.gif', url: 'https://www.3bmeteo.com/meteo/acilia'}
buttons.buienradar2 = {height:120, width:6, isimage:true, refreshimage:600000, image: 'http://www.centrometeo.com/sat/it-vis-animation.gif', url: 'https://www.3bmeteo.com/meteo/acilia'}

buttons.webc = {height:250, width:6, isimage:true, refreshimage:10000, image: 'http://192.168.xxx.xxx:xxxx/camsnapshot.jpg?idx=x&count=x?t=xxx', title: 'Webcam', url: 'http://192.168.xxx.xxx/zm/index.php? view=montage&group=x'}
buttons.webc1 = {height:250, width:6, isimage:true, refreshimage:10000, image: 'http://192.168.xxx.xxx:xxxx/camsnapshot.jpg?idx=y&count=y?t=xxx', title: 'Webcam', url: 'http://192.168.xxx.xxx/zm/index.php? view=montage&group=x'}
buttons.webc2 = {height:250, width:6, isimage:true, refreshimage:10000, image: 'http://192.168.xxx.xxx:xxxx/camsnapshot.jpg?idx=z&count=z?t=xxx', title: 'Webcam', url: 'http://192.168.xxx.xxx/zm/index.php? view=montage&group=x'}

Is this too much refresh, as number of item and/or refresh time?

Thanks

[htilburgs]

Hi all

I think I'm having an issue with my Dashticz config.
After a few minutes that I open a browser with Dashticz I get no more access to standard Domoticz frontpage as well as Dashticz.

Browser wheel continue to spin on the Dashticz page.

I found that I wrongly set 3 cameras refreshimage to 1500 and changing this to 10000 seems to solve the issue of not showing anymore the webpage.

But I still get the wheel spinning all the time

My configs related to refresh are:

Code: Select all

config['domoticz_refresh'] = '5';
config['dashticz_refresh'] = '60';
.....
var frames = {}
frames.weather = {refreshiframe:10000,height:230,frameurl:"//forecast.io/embed/#lat=xx.xxxxx&lon=yy.yyyy&name=xxx&color=#00aaff&font=Helvetica&fontcolor=#ffffff&units=si&text-color=#fff",width:24}


var maps = {}
maps.rome = { height:250, refreshimage:60000, width:6, latitude: xx.xxxx, longitude: xx.xxxx, zoom:13 }


//Buttons or images to open webpages in an iframe, like a news website or weather forecast
var buttons = {}
buttons.buienradar = {height:220, width:6, isimage:true, refreshimage:600000, image: 'http://www.meteo60.fr/satellites/animation-satellite-ir-france.gif', url: 'https://www.3bmeteo.com/meteo/acilia'}
buttons.buienradar2 = {height:120, width:6, isimage:true, refreshimage:600000, image: 'http://www.centrometeo.com/sat/it-vis-animation.gif', url: 'https://www.3bmeteo.com/meteo/acilia'}

buttons.webc = {height:250, width:6, isimage:true, refreshimage:10000, image: 'http://192.168.xxx.xxx:xxxx/camsnapshot.jpg?idx=x&count=x?t=xxx', title: 'Webcam', url: 'http://192.168.xxx.xxx/zm/index.php? view=montage&group=x'}
buttons.webc1 = {height:250, width:6, isimage:true, refreshimage:10000, image: 'http://192.168.xxx.xxx:xxxx/camsnapshot.jpg?idx=y&count=y?t=xxx', title: 'Webcam', url: 'http://192.168.xxx.xxx/zm/index.php? view=montage&group=x'}
buttons.webc2 = {height:250, width:6, isimage:true, refreshimage:10000, image: 'http://192.168.xxx.xxx:xxxx/camsnapshot.jpg?idx=z&count=z?t=xxx', title: 'Webcam', url: 'http://192.168.xxx.xxx/zm/index.php? view=montage&group=x'}

Is this too much refresh, as number of item and/or refresh time?

Thanks

The problem is indeed in the camera's. Standard I've a Dashboard active.
For testing purposes I've an identical configuration in Dashtest. In the test I've to exclude the camera's because I've the same issue as you descripe.

For your weather I see you use an iframe. An iframe can cause issue too with sluggish performance.

[woody4165]

Thanks for the suggestion for iframe.
Now I've set all weather stuff, iframe and image, to 1800000
For now i'ts ok, if I have other issue I will try to exclude it.

[woody4165]

Trying to solve my issue, I was watching to the Development Tools in Chrome and in particular to the Network tab.

I saw a lot of request like this:

Code: Select all

http://192.168.xxx.xxx:8080/json.htm?type=devices&filter=all&used=true&order=Name&jsoncallback=jQueryxxx_xxx&_=xxx

that give as result all the devices.

What is the reason to get all the device continously while I don't have all the devices shown and I have auto_positioning and use_favorites disabled (0)?

Thanks

[robgeerts]

It is used to update the states of each device.
I can get the result per device but that results in a request per device
So that would be a lot more.. Or does somebody now I can use a request like this?

http://192.168.xxx.xxx:8080/json.htm?ty ... 234,5,2,11 etc?

[woody4165]

I got it, thanks

I don't think that the request with multiple idx will, work, no it doesn't, at least in that way.