Background colour based on item state

Apps & Services HABPanel
1
  • openHABian 3.3.0 on rPi4 with 4GB

I am trying to change the background colour based on the item state.
The item state can have 8 states; however, I can use the one state to catch the colour for them all. Basically, if the item state (which is numeric) is 7, show standard background colour, anythign else show orange-ish.

I use a template widget.

<div ng-style="{
    'background-color': itemValue('spm_AC_Source_Status')=='7' ? '#223344' : '#ff8000'
  }"
  class="template-container"
  style="top:0;bottom:0;left:0;right:0;position:absolute">
  <div class="template-contents">Grid</div>
</div>

However, it does not change the colour as expected. In fact, it is always orange.

Also, what formatting should a well-formed template take?
Should it look like what I posted above?

Any hints appreciated.

2

Should this be

'spm_AC_Source_Status.state'

?
Greets

3

Reading the doc says:

itemValue(name) - gets the value (state) of an item

I have another template w/o state which works.

4

Hmm… Maybe without the ’ at

='7'

Because number, not string?
Greets

5

Yep, tried that too… no difference. :frowning:

The item exists and has the value 7:

image
image708×61 4.48 KB

6

The item state is a string, so should you not be using “7”

itemValue('spm_AC_Source_Status') === "7"
7

Hmm, why three equal signs?
Why double quotes?

Adopting your suggestion, actually makes the the background blueish, but does not change when I change the item state to 6.

I have this working:

<div ng-style="{
    'background-color': itemValue('Shed_SLO_Door_External')=='OPEN' ? '#006622' : '#223344'
  }"
  class="template-container"
  style="top:0;bottom:0;left:0;right:0;position:absolute">
  <div class="template-contents">Media room external door
  <widget-icon iconset="'eclipse-smarthome-classic'" icon="'door'"
    state="itemValue('Shed_SLO_Door_External')" size="80" center="true" />
  </div>
</div>

Where my current template is a derivative from. I am puzzled.

8

From my understanding you could use == as well - === is a more strict comparison
“7” because 7 is a string

9

Well, well…

While the item receives numbers, a map() changes it to strings, like AC Source is in tolerance. Hence, after changing the second line to:

    'background-color': itemValue('spm_AC_Source_Status')=='AC Source is in tolerance' ? '#223344' : '#ff8000'

The b!oody thing works :slight_smile:

I apologise for ‘forgetting’ about this minor, yet very effective, oversight.

Thank you for wrecking your brains on this; at least I did.