Custom Widget: Thermostat Values

Hi Guys,
i was looking for a nice way to display my Thermostate values like temperature and humidity.
I took a few code snippets i have found and this is what came out so far.

The final solution would be to have the bars in the background and the values in front of the bars. But when i have tried this the column got wrapped cause my text was longer than the bar. And i definitely looking for a way to color the bar depending by the itemvalue. For Humidity i have a srparation into 5 colors in mind.
Maybe Yannick can share some thoughts here :wink:

Let me know how you like it. It’s by the way my view in portrait mode on an iPhone.

This is the code for the widget.


<style>
  .thermostat-table {
      width: 100%;
      height: 20%;
      text-align: left;
  }

  .ink {
      float: left;
      width: 100%;
      height: 100%;
  }

  .bar {
      width: calc(100%);
      vertical-align: middle;
  }


  .yellow {
      background: yellow;
  }

  .cyan {
      background: cyan;
  }

  .magenta {
      background: magenta;
  }

  .thermostat-table table, th, td {
      
  }

  .thermostat-table th, td {
      padding: 1px;
  }

</style>

<table class="thermostat-table">
 
  <tr class="bar">
    <td style="width: 80px;">
      	Ist Temp.:
		</td>
		<td style="width: 70px;">
		{{itemValue('Schlafzimmer_Heizungsthermostat_IST_Temperatur')}} °C
    </td>
    <td>
      	<div class="ink magenta" ng-style="{ width: itemValue('Schlafzimmer_Heizungsthermostat_IST_Temperatur') + '%' }"></div>
    </td>

  </tr>
    <tr class="bar">
    <td style="width: 80px;">
      	Soll Temp.:</td>
		<td> {{itemValue('Schlafzimmer_Heizungsthermostat_SOLL_Temperatur')}} °C
    </td>
    <td>
      	<div class="ink yellow" ng-style="{ width: itemValue('Schlafzimmer_Heizungsthermostat_SOLL_Temperatur') + '%' }"></div>
    </td>
  </tr>
  </tr>
    <tr class="bar">
    <td style="width: 80px;">
      	rFeuchte:</td>
		<td>{{itemValue('Schlafzimmer_Heizungsthermostat_Luftfeuchtigkeit')}} %
    </td>
    <td>
      	<div class="ink cyan" ng-style="{ width: itemValue('Schlafzimmer_Heizungsthermostat_Luftfeuchtigkeit') + '%' }"></div>
    </td>
  </tr>
</table>

BR
Andreas