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.
-
[Implemented] Changing the colour of values based on a set of rules
-
or maybe indicate into the config the lower and higher limit
- everything below the lower limit : green
- everything between lower and higher limits : standard
- everything above the higher limit : red
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
- pimatic-css-inject, see https://forum.pimatic.org/topic/4183/new-plugin-pimatic-css-inject
- pimatic-customcss written by @fbeek This provides means for adding custom css file to the pimatic setup. It can also be used, for example, if the presence state shall be colorized. See https://www.npmjs.com/package/pimatic-customcss
"It always takes longer than you expect, even when you take into account Hofstadter's Law.", Hofstadter's Law