Page 1 of 4

Dashticz - Function - Trigger action on specific value

Posted: Sunday 21 May 2017 22:36
by 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;
}

Re: Dashticz - [BETA] - Function - Do something at a specific value

Posted: Sunday 21 May 2017 22:50
by 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 :)

Re: Dashticz - [BETA] - Function - Do something at a specific value

Posted: Monday 22 May 2017 5:42
by mongoose
Awesome, this is what I have wanted, can't wait to play around with it. For water tank level, or mm rain ☔

Re: Dashticz - [BETA] - Function - Do something at a specific value

Posted: Monday 22 May 2017 10:03
by robgeerts
If anybody has cool scripts, please share :)

Re: Dashticz - [BETA] - Function - Do something at a specific value

Posted: Monday 22 May 2017 12:07
by EdwinK
We'll see what users come up with.

Re: Dashticz - [BETA] - Function - Do something at a specific value

Posted: Tuesday 23 May 2017 9:30
by robgeerts
Image
(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;
}

Re: Dashticz - [BETA] - Function - Do something at a specific value

Posted: Tuesday 23 May 2017 10:01
by 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);
}
}

Re: Dashticz - [BETA] - Function - Do something at a specific value

Posted: Tuesday 23 May 2017 10:16
by 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?

Re: Dashticz - [BETA] - Function - Do something at a specific value

Posted: Tuesday 23 May 2017 10:22
by EdwinK
htilburgs wrote:And for those who like a blinking version ;-)
The jumping of the text, is that intentionally?

Re: Dashticz - [BETA] - Function - Do something at a specific value

Posted: Tuesday 23 May 2017 10:27
by htilburgs
No, not intentionally, I've to take a look at that, but something came up. Later on this day...

Re: Dashticz - [BETA] - Function - Do something at a specific value

Posted: Tuesday 23 May 2017 10:28
by 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);
	}
}

Re: Dashticz - [BETA] - Function - Do something at a specific value

Posted: Tuesday 23 May 2017 10:31
by 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

Re: Dashticz - [BETA] - Function - Do something at a specific value

Posted: Tuesday 23 May 2017 10:32
by 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);
	}
}

Re: Dashticz - [BETA] - Function - Do something at a specific value

Posted: Tuesday 23 May 2017 10:34
by 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);
	}
}

Re: Dashticz - [BETA] - Function - Do something at a specific value

Posted: Tuesday 23 May 2017 10:35
by 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');
	}
}

Re: Dashticz - [BETA] - Function - Do something at a specific value

Posted: Tuesday 23 May 2017 10:37
by EdwinK
Ze blinking buttons.. Oooo.. ze blinking buttons

Re: Dashticz - [BETA] - Function - Do something at a specific value

Posted: Tuesday 23 May 2017 10:50
by htilburgs
LOL :D

Re: Dashticz - [BETA] - Function - Do something at a specific value

Posted: Tuesday 23 May 2017 11:16
by htilburgs
EdKo66 wrote: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....

Re: Dashticz - [BETA] - Function - Do something at a specific value

Posted: Tuesday 23 May 2017 15:18
by 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 :D but missing some info to use it for other parts.

Re: Dashticz - [BETA] - Function - Do something at a specific value

Posted: Tuesday 23 May 2017 15:30
by 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');
   }
}