Dashticz - Function - Trigger action on specific value

[robgeerts]

Just like the function to take action on change of a value I now have extended functionality (in beta) to do something with a block when it has a specific value.
Example, add a red background to a switch when energy usage reaches a limit.

In this example I'm using a device with IDX 150_1
In custom.js add:

Code: Select all

function getStatus_150_1(idx,value,device){
	if(parseFloat(device['Usage'])>1500){
		$('div.block_150_1').addClass('warning');
	}
	else {
		$('div.block_150_1').removeClass('warning');
	}
}

And in custom.css add:

Code: Select all

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

[mvveelen]

Going to try this tomorrow evening. Nice work Rob!

Couldn't resist. Have to change the .css I think, but this is just a first try

[mongoose]

Awesome, this is what I have wanted, can't wait to play around with it. For water tank level, or mm rain

[robgeerts]

If anybody has cool scripts, please share

[EdwinK]

We'll see what users come up with.

[robgeerts]

(Just a demonstration, in the live version it turns blue when expected rain is more then 5 mm and temperature inside is higher then 23 degrees.

custom.js

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

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

[htilburgs]

And for those who like a blinking version

Code: Select all

.warning {
	background: rgba(199,44,44,0.3) !important;
    background-clip: padding-box;
	-webkit-animation: BLINK-ANIMATION 1s infinite;
	-moz-animation: BLINK-ANIMATION 1s infinite;
	-o-animation: BLINK-ANIMATION 1s infinite;
	animation: BLINK-ANIMATION 1s infinite;
}

@-webkit-keyframes BLINK-ANIMATION {
0%, 49% {
    background-color: rgba(255,0,0,0.5);
    border: 3px solid red;
}
50%, 100% {
    background-color: red;
    border: 3px solid rgba(255,0,0.0.5);
}
}

[EdwinK]

Great thanks.

And now, instead of doing something I'm again playing with Dashticz. Using outside temp for now, as I don't have an inside thermostat. Is it possible to use the 'currentweather_big' as alert?

[EdwinK]

And for those who like a blinking version

The jumping of the text, is that intentionally?

[htilburgs]

No, not intentionally, I've to take a look at that, but something came up. Later on this day...

[robgeerts]

Had it too, fixed it with:

Code: Select all

.warning {
	background: rgba(199,44,44,0.3) !important;
	background-clip: padding-box;
	border: 7px solid rgba(255,255,255,0);
	-webkit-animation: BLINK-ANIMATION 1s infinite;
	-moz-animation: BLINK-ANIMATION 1s infinite;
	-o-animation: BLINK-ANIMATION 1s infinite;
	animation: BLINK-ANIMATION 1s infinite;
}

@-webkit-keyframes BLINK-ANIMATION {
	0%, 49% {
		background-color: rgba(199,44,44,0.3);
		background-clip: padding-box;
		border: 7px solid rgba(255,255,255,0);
	}
	50%, 100% {
		background-color: rgba(199,44,44,0.7);
		background-clip: padding-box;
		border: 7px solid rgba(255,255,255,0);
	}
}

[EdwinK]

You two are great people. Thanks. Going to play with this some more.

Now, who do I blame when I don't get my work done today

[robgeerts]

And a blue version:

Code: Select all

.warningblue {
	background: rgba(45,119,204,0.3) !important;
    background-clip: padding-box;
	border: 7px solid rgba(255,255,255,0);
	-webkit-animation: BLINK-ANIMATION-BLUE 1s infinite;
	-moz-animation: BLINK-ANIMATION-BLUE 1s infinite;
	-o-animation: BLINK-ANIMATION-BLUE 1s infinite;
	animation: BLINK-ANIMATION-BLUE 1s infinite;
}

@-webkit-keyframes BLINK-ANIMATION-BLUE {
	0%, 49% {
		background-color: rgba(45,119,204,0.3);
		background-clip: padding-box;
		border: 7px solid rgba(255,255,255,0);
	}
	50%, 100% {
		background-color: rgba(45,119,204,0.7);
		background-clip: padding-box;
		border: 7px solid rgba(255,255,255,0);
	}
}

[robgeerts]

Orange version:

Code: Select all

.warningorange {
	background: rgba(204,129,44,0.30) !important;
	background-clip: padding-box;
	border: 7px solid rgba(255,255,255,0);
	-webkit-animation: BLINK-ANIMATION 1s infinite;
	-moz-animation: BLINK-ANIMATION 1s infinite;
	-o-animation: BLINK-ANIMATION 1s infinite;
	animation: BLINK-ANIMATION 1s infinite;
}

@-webkit-keyframes BLINK-ANIMATION {
	0%, 49% {
		background-color: rgba(204,129,44,0.3);
		background-clip: padding-box;
		border: 7px solid rgba(255,255,255,0);
	}
	50%, 100% {
		background-color: rgba(204,129,44,0.7);
		background-clip: padding-box;
		border: 7px solid rgba(255,255,255,0);
	}
}

[robgeerts]

I did this to have different colors, depending on the temperature of my living room:

Code: Select all

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

[EdwinK]

Ze blinking buttons.. Oooo.. ze blinking buttons

[htilburgs]

LOL

[htilburgs]

You two are great people. Thanks. Going to play with this some more.
Now, who do I blame when I don't get my work done today

Thnx... And updated the wiki too....

[mikeoo]

And how to find/know what you need to use if you want something else like a switch of a doorsensor.
For temps you use Data -

if(parseFloat(device['Data'])>23){

Usage for reaching a limit
if(parseFloat(device['Usage'])

Love this option again but missing some info to use it for other parts.

[robgeerts]

It's not the same for all devices.
You can search the output (http://DOMOTICZ_URL:8080/json.htm?type=devices&filter=all&used=true&order=Name) for attributes you could use.
For example, you could use for switch:

Code: Select all

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