Use different iconsets as background in customwidget

Apps & Services HABPanel
1

Hi,

I have created a widget for 2 sensors and would like to use an icon as background image for each value. Generally works as expected, just how do I get the background image centered in my table cell?

<table style="width: 100%;">
  <tr>
    <td style="width: 50%;">
      <widget-icon iconset="config.symbolTyp1_iconset" icon="config.symbolTyp1" backdrop="true" inline="true"></widget-icon>
      <span ng-if="config.name1 != ''">{{config.name1}}<br /></span>
      <span class="value ng-binding" style="font-size: {{config.fontSize1}}pt;">{{'%.0f' | sprintf: itemValue(config.item1)}}<small class="ng-binding ng-scope">{{config.unit1}}</small></span>
    </td>
    <td style="width: 50%;">
      <widget-icon iconset="config.symbolTyp2_iconset" icon="config.symbolTyp2" backdrop="true" inline="true"></widget-icon>
      <span ng-if="config.name2 != ''">{{config.name2}}<br /></span>
      <span class="value ng-binding" style="font-size: {{config.fontSize2}}pt;">{{'%.1f' | sprintf: itemValue(config.item2)}}<small class="ng-binding ng-scope">{{config.unit2}}</small></span>
    </td>
  </tr>
</table>

widget

center = “true” is not a solution, here the image is centered in the widget

Regards,
Jens

2

There are probably better ways to do this (actually 2 <widget-dummy> side by side) but this should get you what you need:

    <td style="width: 50%;">
      <div style="position: absolute; left: 0; top: 0; width: 50%; height: 100%;">
        <widget-icon iconset="config.symbolTyp1_iconset" icon="config.symbolTyp1" backdrop="true" inline="true"></widget-icon>
      </div>
...
    </td>
    <td style="width: 50%;">
      <div style="position: absolute; left: 50%; top: 0; width: 50%; height: 100%;">
        <widget-icon iconset="config.symbolTyp2_iconset" icon="config.symbolTyp2" backdrop="true" inline="true"></widget-icon>
      </div>
...
    </td>
3

Hi Yannick,

thanks a lot, I changed it to 2 widget-dummys. And it works fine.

[Update @ysc:]
Hmm, I was a bit too fast, looks fine as a 2x1 widget, but it doesn’t scale properly for larger tiles:

<table style="width: 100%;">
  <tr>
    <td style="width: 50%;">
      <div ng-init="model={ name: 'Temp', item: config.temperature, font_size: '16', format: '%.1f', unit: '°C', backdrop_iconset: 'smarthome-set', backdrop_icon: 'temperature'}">
        <widget-dummy ng-model="model"></widget-dummy>
      </div>
    </td>
    <td style="width: 50%;">
      <div class="cell" ng-init="model2={ name: 'RF', item: config.humidity, font_size: '16', format: '%.1f', unit: '%', backdrop_iconset: 'smarthome-set', backdrop_icon: 'thermostat'  }">
        <widget-dummy ng-model="model2"></widget-dummy>
      </div>
    </td>
  </tr>
  <tr ng-if="itemState(config.battery)">
    <td colspan="2" style="text-align: left;">
      <widget-icon iconset="'eclipse-smarthome-classic'" icon="'battery'" size="15" state="itemState(config.battery)"/>
    </td>
  </tr>
</table>

2x1 widget:
grafik

3x2 widget:
grafik

Why does the icon leave the table cell and be mixed with the battery icon?

Regards,
Jens