HabPanel: Change Color Based on Item-State

Apps & Services HABPanel
,
1

I have multiple widgets in my HabPanel wich show states of some items (e.g. Battery (Off->okay; On->empty)).

Is it possible to change the background color of the Widget based on the state (e.g. OFF->Green; On->Red)?

I’m a complete Newbie in OpenHab. Thanks for your help.

Greetings from Germany

2

I don’t think that you can do this for the “standard” widgets (like switch etc)

You could try to use a template and do the following:

<div style="position: absolute;
            top: 0;
            bottom: 0;
            left: -10px; right: -10px;
            background: url('../static/HomeR/Ground_Floor.png');
            background-size: cover;
            background-repeat: no-repeat;">

	<div ng-if="itemValue('SP7000_State')=='Disarmed'">
  	<img ng-src="../static/HomeR/Motion/Disarmed.png" style="position: absolute; top: 5%; left: 55%" />
	</div>
  
  	<div ng-if="itemValue('SP7000_State')!='Disarmed'">
  	<img ng-src="../static/HomeR/Motion/Armed.png" style="position: absolute; top: 5%; left: 55%" />
	</div>
</div>

In this example, I change the image (not the background) based on the state of my item (it’s String type)
Maybe you can play with the ng-if code and change the background too… not sure

1 Like
3

Have a look here

4

If you want to keep things simple, the standard Button widget can also act as a Switch.

Just set it up like so:

  • Action type to Alternate item between 2 states
  • Command value to ON
  • Alternate command value to OFF

There are options in the Active and Inactive tab to configure colors for the “active” state (ON in this case) and others.

5 Likes
5

Thanks. To use a button… very simple idea.

6

Hello @ysc,
Very helpful hint!

I needed a few days to find this out.
This should be way easier.

For Windows:
Commandvalue: OPEN
Alternate command value: CLOSED

View: disable “show value”
Inactive-Tab: both to “transparent”
Active-Tab: Background to red, Label to black.

Stay healthy!