[Implemented] Changing the colour of values based on a set of rules
Hi,
I’ve set up a sensor that monitors the air pollution. Generally speaking I think it would be very helpful to be able to define rules that change the colour of these values inside pimatic once a certain limit is reached.
In my case this would allow me to paint the current value red, yellow or green, depending on how good the air quality is.
Anyone up for this idea? 
ituri
not only for air quality this would be good. i’m thinking of energy survey and control.
particulary for my photovoltaics - if there’s enough produced energy / free energy to use some more electrical devices or if it’s cloudy maybe there’s not enough energy so the value could be red.
on the other hand it would disturb the plain gui of pimatic a bit, don’t you think?
but as option this would be great i think!
pimatic v0.9 has been released!
Support Pimatic and get some free stickers
Like us on Facebook
make it so !
While I agree on @sweetpi’s opinion that icons would be too disturbing, I think a (defined) set of colour wouldn’t disturb the interface too much. I actually think that it would help to spot the relevant data right away without looking around for too long.
or maybe indicate into the config the lower and higher limit
pimatic rocks!
@Yves911 Good idea! I’d second that!
As every Plugin could create its own frontend, there could only be a generic solution.
The new pimatic-css-inject plugin needs to provide an action like “set css”
if $myVar > 42
then set css "color" of "span.contains-attr-temp.contains-attr-type-number" to "#FF00FF"
The plugin then simply adds the css property to the given CSS selector.
With this solution you could also hide elements on specific events.
if $myVar > 80
then set css "display" of "span.contains-attr-temp.contains-attr-type-number" to "none"
In other cases it does not work well as device ids or names are not mapped to attributes. If you want to changes the characteristics of a single state indicator of a PresenceDevice you need to use a positional selector to selector the single node. This can be obtained by using the copy functions of the browser’s developer console (chrome provides it, at least). This fragile, however, as it breaks if the ordering of device items on the page changes for some reason.
#item-lists > div > div > div > div > ul > li:nth-child(6) > span.attributes.contains-attr-presence.contains-attr-type-boolean > span {
background-color: yellow;
}"It always takes longer than you expect, even when you take into account Hofstadter's Law.", Hofstadter's Law
Yes I know. Because of that it would be great, if every frontend representation of a device would have the device id as CSS id in the most outer div element.
Maybe the css-inject plugin should give the possibility to select elements also by device name. Problem there is, that this is not possible by CSS only. There you need something like jQuery.
@saxnpaule said in Changing the colour of values based on a set of rules:
Yes I know. Because of that it would be great, if every frontend representation of a device would have the device id as CSS id in the most outer div element.
Yes, we should do that and it should not be a big deal. This should help to avoid using more sophisticated query selectors which go beyond CSS, like using the :contains() selector of jQuery as you suggested.
"It always takes longer than you expect, even when you take into account Hofstadter's Law.", Hofstadter's Law
I got a first version running --> https://forum.pimatic.org/topic/4183/new-plugin-pimatic-css-inject
Works also well for crude copied xpath selectors from Chrome 
if bla
set css "background" of "#item-lists > div > div > div:nth-child(4) > div > ul > li:nth-child(5) > span.attributes.contains-attr-presence.contains-attr-type-boolean > span" to "#FF00FF"
@mwittig Topic can be closed in my opinion.
@saxnpaule Agree. Thanks for the for your excellent work.
Wrap up: Currently we have two solutions to allow users tweaking the UI
"It always takes longer than you expect, even when you take into account Hofstadter's Law.", Hofstadter's Law