Conditional formatting of label cards

Setup, Configuration and Use Widgets
1

I’ve just recently got OpenHAB 3.4.1 up and running in Docker, and added some Label widgets to the default overview page showing things like temperature, humidity, air quality, etc…

What I would like to do is have conditional formatting of the text displayed, depending on the value. So for example, if the VOC levels get too high, change the color of the text value to yellow, and if they get very high, change it to red to make it stand out.

How would I do that?

2

It turns out, this actually isn’t trivial. The label cards just weren’t designed with this particular modification in mind. It is easy to change the color of the card itself; just use the background property and set it to whatever css background style you like. However, there’s just no direct access to the element that sets the color of the label’s text, so doing this is a multi-step process.

First you have to set a css variable using style object in some container above the card:

style:
  --my-custom-text-color: =(something > 10)?('red'):('green')

Then, on the card itself you have to use the css variable in the stylesheet property that let’s you directly inject css into the document:

stylesheet: >
  .item-inner {
    color: var(--my-custom-text-color);
  }

The whole thing might look like this:

- component: f7-block
  config:
    style:
      --my-custom-text-color: =(something > 10)?('red'):('green')
  slots:
    default:
      - component: oh-label-card
        config:
          stylesheet: >
            .item-inner {
              color: var(--my-custom-text-color);
            }
        ... other card configs
1 Like
3

image
image1536×2048 162 KB

I just use the following workaround to change the colour of the label background.

  1. the colour value in field „highlight color“ is only used, if the item in „label“ is a switch item with state „ON“ . With state „OFF“ the colour field will be ignored.
  2. therefore I use a switch item „allways On“ in the label field and have another string item for the colour.
  3. within a rule, where something happens to the special device, you may set the appropriated colour like itemColour.sentCommand(‚green‘)
  4. if you like to present a numeric or string value in your card, you use the label field below label (item) field inserting the corresponding expression