MainUI Color Coding Blocks - What am I doing wrong?

Setup, Configuration and Use Items & Sitemaps
1

I’m trying to figure out how to make blocks by looking at code people have posted.

I set a simple goal of having a block that is one color for one state, and another color for another state.

This code works for that objective, but I’m not sure why:

component: oh-label-cell
config:
  header: TV Power
  footer: '="Input: "+(items.Proxy_TV_Livingroom.state)'
  icon: f7:tv
  stateStyle:
    fontSize: 40px
  color: =(items.Proxy_TV_Livingroom.state=="ON")?"green":"blue"
  item: RoomTVPower
  action: toggle
  actionItem: Proxy_TV_Livingroom
  actionCommand: ON
  actionCommandAlt: OFF
slots: null

the reason I do not know why it works is the ‘item: RoomTVPower’ is a nonexistent item and if I change it to the
‘Proxy_TV_Livingroom’ item instead of successfully toggling blue/green it toggles green/white.

similarly for my attempt at a read-only block using this code:

component: oh-label-cell
config:
  header: Raining
  footer: '="Rain: "+(items.V_Raining.state)'
  icon: f7:tv
  stateStyle:
    fontSize: 40px
  color: =(items.V_Raining.state=="ON")?"green":"blue"
  item: V_Raining
slots: null

with the item being ‘V_Raining’ it toggles between green and white… and if I change the item to ‘Proxy_TV_Livingroom’ it successfully toggles between green/white but appears to be showing the TV’s status not the rain status.

Removing the item all together I can see the change in status in the footer, but neither color appears.

I’m sure I’m doing something stupid because I can’t wrap my head around what is happening here, but all of my typical troubleshooting methods cannot get me to where I want to be.

What am I missing!?!?

2

I find it very helpful to debug the expressions separately. So first I recommend putting the expressions into the expression tester in the developer sidebar and make sure they are working correctly.

Once you’ve confirmed the expressions are correct then test each element individually.

I don’t know enough to help based just on the code and description but the above is what I would do first.

3

thanks for the tip. I haven’t used that yet but knew it existed. The expressions are pretty simple (On/Off) and return the colors I’d expect… I suspect I am just confused about what property controls what element…

4

This may not be the most efficient way of doing it, but got it to work the way I want:

component: oh-label-cell
config:
  header: Raining
  footer: '="Input: "+(items.V_Raining.state)'
  icon: f7:tv
  stateStyle:
    fontSize: 40px
  color: =(items.V_Raining.state=="ON")?"blue":"green"
  item: V_Raining
  on: =(items.V_Raining.state=="ON")?"blue":"green"
slots: null