(SOLVED) Habpanel widget background color

Apps & Services HABPanel
1

Hello, I would like to change the background color of my widget depending on the status of an item. in particular, this is about the status of a weather warning. With no warning, the background should be green. in a weather warning orange and in a warning of distinctive weather he should be dark orange, red in a severe weather warning etc.
Unfortunately, I have so far only reached the color at 2 different states to change. Can someone help me please?
Thank you in advance.
Olive

2

Post what you have done and we can start from there.

3

OK, I did not come far. I did that and it works.

<div ng-style="{'background-color': itemValue('DWD_Warnung_1')=='Keine Wetterwarnung' ? 'green' : 'orange'}"

But that is only a status “if” and if not

Have also tested that, but that does not work

  <div ng-style="{'background-color': itemValue('DWD_Warnung_1')=='1' ? 'green' }">
   <div ng-style="{'background-color': itemValue('DWD_Warnung_1')=='2' ? 'red' }">

Would be really great if that can be solved.

4

Just create a style, then use that in a ng-class

<style>
  .green { background-color: green !important }
  .orange { background-color: orange }
</style>
<div class="orange" ng-class="{green: itemValue('DWD_Warnung_1')=='Keine Wetterwarnung'}"

This way, you can add more styles by just modifying the class

5

Ok, looks pretty good. Will it test the days. Thanks in advance.
I’ll let you know if I tried.

6

I did that now

    <style>
  .green { background-color: green !important }
  .darkorange { background-color: darkorange }
  .gold { background-color: gold }
  .red { background-color: red }
  .lightcoral  { background-color: lightcoral }
  .darkviolet  { background-color: darkviolet }
  .lightblue  { background-color: lightblue }
  
</style>
<div class="darkorange" ng-class="{green: itemValue('DWD_Warnung_1_Severity')=='Keine Wetterwarnung', 
                              gold: itemValue('DWD_Warnung_1_Severity')=='Wetterwarnung', 
                              darkorange: itemValue('DWD_Warnung_1_Severity')=='Warnung vor markantem Wetter', 
                              lightcoral: itemValue('DWD_Warnung_1_Severity')=='Vorwarnung Unwetter',
			      red: itemValue('DWD_Warnung_1_Severity')=='Unwetterwarnung', 
                              darkviolet: itemValue('DWD_Warnung_1_Severity')=='Warnung vor extremem Unwetter', 
			      lightblue: itemValue('DWD_Warnung_1_Severity')=='Hitzewarnung'}"

It works
Thank you for your support

7

You can mark the answer solved. This will also allow users to quickly find solutions

8

done