Creating a widget

Hello,

I’ve been busy with a widget, but it will not show up correct, or what I’ll expect.
This is the widget code:

<!DOCTYPE html>
<html>
<head>
<style>
#switch_table, #switch_td, #switch_th {
    border: 0px;
    padding: 3px;
    font-size: 16px;
    text-align: center;
}
#switch_table {
    border-collapse: collapse;
    #switch_table, #switch_td, #switch_th {
    border: 0px;
    padding: 3px;
    font-size: 16px;
    text-align: center;
}
#switch_table {
    border-collapse: collapse;
    width: 100%;
}
#switch_row1 {
    width: 32px;
}: 100%;
}
#switch_row1 {
    width: 32px;
}
</style>
</head>
<body>
<h2>{{config.top_label}}</h2>
<table id="switch_table">
  <tr>
    <td id="switch_row1">
      <span>
        <widget-icon iconset="'eclipse-smarthome-classic'" icon="'presence'" size="32" state="itemValue(config.switch1_item)" ng-click="sendCmd(config.switch1_item, (itemValue(config.switch1_item)=='OFF') ? 'ON':'OFF')" />
      	</widget-icon>
        <div ng-if="itemValue('config.switch1_item')=='ON'">
  				<span style="color: red; font-size: 8pt">thuis</span>
				</div>
				<div ng-if="itemValue('config.switch1_item')=='OFF'">
  				<span style="color: green; font-size: 8pt">weg</span>
				</div
      </span></td>
  </tr>
    <tr>
    <td id="switch_row1">
      <span>
      <widget-icon iconset="'eclipse-smarthome-classic'" icon="'presence'" size="32" state="itemValue(config.switch2_item)" ng-click="sendCmd(config.switch2_item, (itemValue(config.switch2_item)=='OFF') ? 'ON':'OFF')" />
      </widget-icon>
        <div ng-if="itemValue('switch2_item')=='ON'">
  			<span style="color: red; font-size: 8pt">thuis</span>
			</div>

			<div ng-if="itemValue('switch2_item')=='OFF'">
  			<span style="color: white; font-size: 8pt">weg</span>
			</div
  	  </span></td>
  </tr>
</table
</body>
</html>

And this is the output:

What am I doing wrong?

What is the problem?
If is it 2x the building, than you have the code 2x.

    <td id="switch_row1">
      <span>
        <widget-icon iconset="'eclipse-smarthome-classic'" icon="'presence'" size="32" state="itemValue(config.switch1_item)" ng-click="sendCmd(config.switch1_item, (itemValue(config.switch1_item)=='OFF') ? 'ON':'OFF')" />
      	</widget-icon>
        <div ng-if="itemValue('config.switch1_item')=='ON'">
  				<span style="color: red; font-size: 8pt">thuis</span>
				</div>
				<div ng-if="itemValue('config.switch1_item')=='OFF'">
  				<span style="color: green; font-size: 8pt">weg</span>
				</div
      </span></td>

@hr3 that’s right. But it has to display thuis or weg but it does’t.

        <div ng-if="itemValue('switch2_item')=='ON'">
  		<span style="color: red; font-size: 8pt">thuis</span>
	</div>

	<div ng-if="itemValue('switch2_item')=='OFF'">
  		<span style="color: white; font-size: 8pt">weg</span>
	</div

works fine.

You have to change

config.switch1_item

to

switch1_item

<widget-icon iconset="'eclipse-smarthome-classic'" icon="'presence'" size="32" state="itemValue(config.switch1_item)" ng-click="sendCmd(config.switch1_item, (itemValue(config.switch1_item)=='OFF') ? 'ON':'OFF')" />
      	</widget-icon>

This is for the icon and it changes when I go online/offline

<div ng-if="itemValue('config.switch1_item')=='ON'">
  				<span style="color: red; font-size: 8pt">thuis</span>
				</div>
				<div ng-if="itemValue('config.switch1_item')=='OFF'">
  				<span style="color: green; font-size: 8pt">weg</span>
				</div

And this should display ‘thuis’ or ‘weg’. But it doesn’t. Or am I wrong? I use this code because transformations don’t work in habpanel.

Remove the quotes around 'config.switch1_item'.
And obviously the last tag is missing a > :slight_smile:

Thanks.It worked