Template widget - tutorial & examples - make your own widget!

Christoph_B · February 6, 2017, 8:57am

@wasco nice that works! But it uses a different slider, right? Or how does this work?
I assume it’s a component of habpanel?

wasco · February 6, 2017, 9:19am

Yep, this is standard habpanel slider widget

Christoph_B · February 6, 2017, 3:05pm

Thanks!

tnemrap · February 8, 2017, 10:10pm

How do i find the code for the original Switch widget?
I want the same look but want it to work with 1 and 0 instead of ON and OFF.

/Mike

wasco · February 9, 2017, 9:14am

It is true for all habpanel widgets:

Add desired widget to the dashboard.
Go to Paper UI => Configuration => Services => HABPanel => CONFIGURE => SHOW MORE => Panel registry JSON.
Find added widget by it name.
Inside the curly braces will be the body/model of the widget, which may be changed as you want and must be placed in the ng-init statement and then used in ng-model.

But I think this is not what you need.
The most simple, consider the Proxy Switch.
Actually, it all depends on the specific problem.

tnemrap · February 9, 2017, 9:48am

Where can i find the Proxy Switch?

/Mike

wasco · February 9, 2017, 10:04am

No, Mike, you don’t need to find proxy switch, you need to create it
For example, lets imagine you have the Number Item, lets say Number MyItem referenced to your Thing channel.
You need to create Switch Item, lets say Switch MySwitch.
And then you need to create Rule that sends 0 to the MyItem when MySwitch becomes “OFF” and 1 when MySwitch becomes “ON”.

Another way:
You can put the Button widget on the Dashboard and in Button config point the “openHAB Item” to “MyItem”, “Action type” to “Alternate item between 2 states”, and “Command value” to 1, “Alternate command value” to 0.

It depends on what you need.

tnemrap · February 9, 2017, 10:24am

I have created some template switches but i can not get them to look and feel as the Switch Widget.

/Mike

wasco · February 9, 2017, 10:33am

Hmmm… it looks like standard Switch widget at ON and OFF states.
What you mean by “i can not get them to look and feel as the Switch Widget”?.

tnemrap · February 9, 2017, 10:34am

I can not find any code examples to change the icon.

/Mike

wasco · February 9, 2017, 10:45am

Ahh, no problem!
Here it is (as for example):

<button class="btn" style="width: 100%; height: 100%; padding: 0; background: inherit; outline: none"
  ng-click="sendCmd('Contactor', itemValue('Contactor') == 'ON' ? 'OFF' : 'ON')">
	<span>
  	<widget-icon iconset="'smarthome-set'" icon="'power'" size="32" state="itemValue('Contactor')" />
	</span>
  <span style="color: {{itemValue('Contactor')=='ON' ? 'white' : '#7B879C'}}">
		Power
  </span>
</button>

tnemrap · February 9, 2017, 11:03am

Thanks

tnemrap · February 9, 2017, 11:41am

I am now using this code, i had to change iconset to eclipse-smarthome-classic.

How do i implement backdrop icon into this?

/mike

  <button class="btn" style="width: 100%; height: 100%; padding: 0; background: inherit; outline: none"
  ng-click="sendCmd('Light_GF_Living_Read', itemValue('Light_GF_Living_Read') == 'ON' ? 'OFF' : 'ON')">
	<span>
  	<widget-icon iconset="'eclipse-smarthome-classic'" icon="'switch'" size="32" state="itemValue('Light_GF_Living_Read')" />
	</span>
  <span style="color: {{itemValue('Light_GF_Living_Read')=='ON' ? 'white' : '#7B879C'}}">
		Desk Lamp
  </span>
</button>

wasco · February 9, 2017, 11:54am

It is property of another object (of the overlying div)
Look here: https://community.openhab.org/t/template-widget-and-backdrop-icons/16319

tnemrap · February 9, 2017, 1:26pm

I do not understand if I add that to my code the button does not work and the backdrop is not centered.

/Mike

<div class="icon backdrop" ng-class="{backdrop: backdrop, center: center, inline: inline}">
<img height="100%" ng-class="{ colorize: colorize }" class="icon-tile-backdrop ng-scope colorize" ng-src="assets/icons/freepik-household/window-3.svg" src="assets/icons/freepik-household/window-3.svg">
</div>  
<button class="btn" style="width: 100%; height: 100%; padding: 0; background: inherit; outline: none"
  ng-click="sendCmd('Light_GF_Living_Read', itemValue('Light_GF_Living_Read') == 'ON' ? 'OFF' : 'ON')">
	<span>
  	<widget-icon iconset="'eclipse-smarthome-classic'" icon="'switch'" size="32" state="itemValue('Light_GF_Living_Read')" />
	</span>
  <span style="color: {{itemValue('Light_GF_Living_Read')=='ON' ? 'white' : '#7B879C'}}">
		Desk Lamp
  </span>
</button>
<div class="icon backdrop" ng-class="{backdrop: backdrop, center: center, inline: inline}">
<img height="100%" ng-class="{ colorize: colorize }" class="icon-tile-backdrop ng-scope colorize" ng-src="assets/icons/freepik-household/window-3.svg" src="assets/icons/freepik-household/window-3.svg">
</div>

wasco · February 9, 2017, 2:03pm

Here the correct code:


  
<button class="btn" style="width: 100%; height: 100%; padding: 0; background: inherit; outline: none"
  ng-click="sendCmd('Light_GF_Living_Read', itemValue('Light_GF_Living_Read') == 'ON' ? 'OFF' : 'ON')">
  <div class="icon backdrop" ng-class="{backdrop: backdrop, center: center, inline: inline}" style="width: 100%; height: 100%; margin: auto">
	<img height="100%" ng-class="{ colorize: colorize }" class="icon-tile-backdrop ng-scope colorize" ng-src="assets/icons/freepik-household/window-3.svg" src="assets/icons/freepik-household/window-3.svg">
</div>
	<span>
  	<widget-icon iconset="'eclipse-smarthome-classic'" icon="'switch'" size="32" state="itemValue('Light_GF_Living_Read')" />
	</span>
  <span style="color: {{itemValue('Light_GF_Living_Read')=='ON' ? 'white' : '#7B879C'}}">
		Desk Lamp
  </span>
</button>

And you need to check “Don’t wrap in container” in the Template Settings

tnemrap · February 9, 2017, 9:54pm

Works like a charm

Thanks

LarsK · February 10, 2017, 7:55am

Is there a possibility to completely remove the background color from a widget to just have the content shown with out the box around?
I use the translucent theme, which pretty much looks like I like it… But I found nothing to get rid of the “box” around the widget.

As alternative, I would like to hide a complete widget conditionally (like if there is an important notification, there is a button which is completely hidden if there is nothing to show).

Do you guys have an idea how to archive one of this?

Here is how the start page of my dashboard looks like:

Thanks
Lars

wasco · February 10, 2017, 9:16am

Yes of course.
What kind of widget do you mean?

LarsK · February 10, 2017, 9:20am

Well. A template for instance.

Here is a (draft version) of the source:

<style>
.content {
	display: flex;
	justify-content: center;
	align-items: center;
  --size: {{ (ngModel.sizeY > ngModel.sizeX) ? (ngModel.sizeX * 65) : (ngModel.sizeY * 65)  }}px
}

.row {
	margin: 0 0;
	width: 100%;
  overflow: hidden;
}

.day_label {
  text-align: center;
  color: white;
  font-weight: bold;
  top: -40px;
  position: relative;
}
</style>
<div class="content">
  <div class="row">
    <div ng-class="(ngModel.sizeX === ngModel.sizeY) ? 'col-md-6' : 'col-md-4'">
			<img class="weather-icon" style="filter: invert(60%) sepia(100%) hue-rotate(185deg) saturate(1000%);"
			src="/icon/climacon?iconset=climacons&format=svg&state={{itemValue(config.weather_condition)}}" />
      <div class="day_label">13.10.2011</div>
    </div>
    <div ng-class="(ngModel.sizeX === ngModel.sizeY) ? 'col-md-6' : 'col-md-4'">
			<img class="weather-icon" style="filter: invert(60%) sepia(100%) hue-rotate(185deg) saturate(1000%);"
			src="/icon/climacon?iconset=climacons&format=svg&state={{itemValue(config.weather_condition)}}" />
      <div class="day_label">13.10.2011</div>
    </div>
    <div ng-class="(ngModel.sizeX === ngModel.sizeY) ? 'col-md-6' : 'col-md-4'">
			<img class="weather-icon" style="filter: invert(60%) sepia(100%) hue-rotate(185deg) saturate(1000%);"
			src="/icon/climacon?iconset=climacons&format=svg&state={{itemValue(config.weather_condition)}}" />
      <div class="day_label">13.10.2011</div>
    </div>
  </div>
</div>

But this leads to the same translucent box around the content as you see on my picture above.