Main UI : change backgroung color of a cell depending item state

Setup, Configuration and Use Items & Sitemaps
1
  • Platform information:
    • Hardware: RPi 4
    • OS: Openhabian
    • openHAB version: OH4 with Zwave things

Hello OH community !

The power supply of the electric motor of my garage door can be shut down when I move from the house, for example.
In the Main UI of Openhab app, I have an OH-label-card displaying the sate of my garage door (OPEN or CLOSED). I would like to have the background color of this card to change depending of the state of the zwave relay that shut the electric supply of the garage door electric motor. Example : the electric motor of the garage door power supply is shut down → the card that display the state of the door is red, and goes green when I power on the electric motor, still displaying that the door is open or closed.

To make it clearer : the data display by the cell comes from a door sensor and I want the background color of that cell to display the state of a zwave relay.

I hope my question is understandable…
Thank you for the time you’ll spend helping me.

Best regards

Fed

2

Use an expression to set the background color based on the state of relay Item. For more info and examples see Pages - Item Widgets | openHAB from the Getting Started Tutorial.

3

Something like this I have for my solar. It red when on grid abd green when on solar:

component: oh-cell
config:
  action: navigate
  actionPage: page:Solar_Overview
  color: =((Number.parseFloat(items.FroniusSymoInverter_GridPower.state))>=0)?('red'):('green')
  footer: =(Math.round((Number.parseFloat(items.FroniusSymoInverter_LoadPower.state))))+"
    Consumption/Self " +
    (Math.round(Number.parseFloat(items.FroniusSymoInverter_SelfConsumption.state)))
    + "%"
  header: "=((Number.parseFloat(items.FroniusSymoInverter_GridPower.state))<=0)?(\
    'Currently on Solar'):('Currently on Grid') "
  icon: =((Number.parseFloat(items.FroniusSymoInverter_GridPower.state))<=0)?('oh:solarplant'):('if:mdi:transmission-tower-import')
  iconColor: =((Number.parseFloat(items.FroniusSymoInverter_GridPower.state))>=0)?('red'):('yellow')
  on: =((Number.parseFloat(items.FroniusSymoInverter_GridPower.state))!=0)
  subtitle: =(Math.round(Number.parseFloat(items.FroniusSymoInverter_CurrentSolarYield.state)))+"
    Solar updated " + (items.FroniusSymoInverter_GridPower_updated.displayState)
  title: '=(Math.round(Number.parseFloat(items.FroniusSymoInverter_GridPower.state)))+"
    Grid " '

The color: part is the bit you want.

4

Thank you Rich, thank you Greg.

I tried this :

background: =((items.SGDRT_Switch_1.state)=0FF)?('red'):('green')

But it doesn’t work.

I also tried this :

background: =(items.SGDRT_Switch_1.state===OFF)?('red') , (items.SGDRT_Switch_1.state === ON)?('green')

Not a better result…

I must have a syntax issue.

5

My example:

background: '=(items.AllBreezewayLights.state === "ON") ? "blue" : "orange"'
label: '=(items.AllBreezewayLights.state === "ON") ? "Breezeway Lights ON" : "Breezeway Lights OFF"'
6

Notice one of the links I posted above talks about the expression tester:

When creating anything but the simplest of expressions, the Widgets Expression Tester is a very helpful tool. This is the third tab of the Developer Sidebar (accessible from Developer Tools or by pressing ALT-SHIFT-d). Note that the sidebar will only appear if the browser window is wide enough.

expression tester

For complicated expressions, gradually build up the expression in this tool until it works as required and then paste it into the config for the widget.

Your syntax is indeed incorrect in many ways:

  • What’s with the extra parens?

  • The state and displayState is always going to be a string.

  • 0FF isn’t a thing. You mean OFF but event then see above, you need to compare to "OFF".

  • The second example is really kind of nonsense. Where did you get that one?

    background: =(items.SGDRT_Switch_1.state == 'OFF') ? 'red' : 'green'
7

This works. Thank you very much KJ. Have a nice day !

8

Thanks for your kind help.

The second expression was a try after reading the page you linked to me. But obvioulsy, I have not understand all the syntax…
The first expression was a try based on what Greg gave.

I used the code tools that solved some issues. But I kept some errors that I was not able to solve while the tool told me I was wrong, I couldn’t find the correct syntax.

It’s OK now, it works with the example from KJ