[OH3] [UI] Color change through "on:" parmeter

Hi,

I am completely stuck - trying to dynamically change the color of cells in the UI through (Highlight) color and on parameters.

E.g.

component: oh-label-cell
config:
  color: orange
  item: heatSources_Hs1_FlameStatus
  title: Brenner
  stateAsHeader: true
  expandable: false
  icon: f7:flame
  on: =(items.heatSources_Hs1_FlameStatus.state === 'on')

This should theoretically turn the cell orange, when that item changes to “on”. Instead the cell always is orange. With other items similar results, mostly they get always the highlight color, in one case it never gets the highlight color.
The only working dynamic colors are there, where the change through the primary item is working.

I have the impression, that I am missing something substancial - but I am lost in both creation and debugging of those gui elements and thankful for any hints.

Yours, KaDe

you are on the wrong path, take a look

component: oh-label-cell
config:
  color: '=(items[props.item].state === "OFF") ? "red" : "orange"'
  item: '=(items[props.item])'
  title: Brenner
  icon: f7:flame

Nope he is on the right path.
You are setting your color according to state, but somewhere you have to define the “on” state.

@WoRockt: Why do you compare your string to ‘on’ instead of “ON”? Can you go to developer settings and enable the developer sidebar, then use the widget expression test area to see what =items.heatSources_Hs1_FlameStatus.state gives back?

Thank you all very much - this got me at least a small step further. But this whole expression stuff still is a book with seven seals to me.

@BobMiles That strange and undocumented Buderus API indeed returns small cap - so this example now works correctly:

component: oh-label-cell
config:
  color: '=(items.heatSources_FlameStatus.state === "on") ? "orange": "white"'
  item: heatSources_Hs1_FlameStatus
  title: Brenner
  stateAsHeader: true
  expandable: false
  icon: f7:flame

But why does this example not work?

component: oh-slider-cell
config:
  action: toggle
  actionItem: Stehlampe_Helligkeit
  actionCommand: ON
  actionCommandAlt: OFF
  scaleSubSteps: 5
  item: Stehlampe_Helligkeit
  title: Stehlampe
  stateAsHeader: true
  header: Wohnzimmer
  icon: oh:lightbulb
  label: false
  scale: false
  color: '=(items.Stehlampe_Helligkeit.state === 0) ? "white" : "yellow"'

Regardless of the value of the state the cell stays white.

And what is the sense of the „on:“ parameter in the yaml anyway?

Sorry that bulk of novice questions, but I am starting to find OH3 really sexy and want to get some nice results.

Hi,

You are missing the on: parameter!

on: true

should get you there!

Think of the color as the “ON” state of the cell. When your cell is “ON” it will have the color you set, otherwise not. Also, having a trend line displayed will prevent you from being able to change the color!

@BobMiles Give me a hint please - I cannot find the developers settings for the developer sidebar- neither in „normal“ settings nor in the developer area. Although I remember reading about it in an announcement…

Yours, K.

Hi,
it should be in the side menu under developer tools - unless you are on a mobile device, then that is missing for me.
I was only able to access it via pc for now…

Hi, using the IPad at the moment - so this counts as a mobile device obviously. Thank you!

Now back to code. Strangely enough this here works, as I interpreted the instructions in the GUI:

component: oh-slider-cell
config:
  action: toggle
  actionItem: Stehlampe_Helligkeit
  actionCommand: ON
  actionCommandAlt: OFF
  scaleSubSteps: 5
  item: Stehlampe_Helligkeit
  title: Stehlampe
  header: Wohnzimmer
  icon: oh:lightbulb
  label: false
  scale: false
  actionFeedback: Done
  on: =(items.Stehlampe_Helligkeit.state > 0)
  color: yellow
slots: null

BTW, this is a hue light.

Yours, K.

Hi,

nothing strange at all. You can either have the cell “always on” with on: true and change the color with a conditional statement - or you have only a static color but change the on-state of the cell conditionally.
Think of it as in a light bulb, you can either have the switch set to ON all the time and change brightness to 0 or a 100 to turn it off and on, or you keep the brightness and use the switch instead.