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

habpanel
template
widget
Tags: #<Tag:0x00007f6cf41814c0> #<Tag:0x00007f6cf4181330> #<Tag:0x00007f6cf4181150>

(Christoph B) #104

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


(Vasily Karasev) #105

Yep, this is standard habpanel slider widget :slight_smile:


(Christoph B) #106

Thanks! :slight_smile:


(Michael Parment) #108

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


(Vasily Karasev) #109

It is true for all habpanel widgets:

1) Add desired widget to the dashboard.
2) Go to Paper UI => Configuration => Services => HABPanel => CONFIGURE => SHOW MORE => Panel registry JSON.
3) Find added widget by it name.
4) 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.


(Michael Parment) #110

Where can i find the Proxy Switch?

/Mike


(Vasily Karasev) #111

No, Mike, you don't need to find proxy switch, you need to create it :wink:
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.


(Michael Parment) #112

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

/Mike


(Vasily Karasev) #113

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"?.


(Michael Parment) #114

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

/Mike


(Vasily Karasev) #115

Ahh, no problem! :slight_smile:
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>

(Michael Parment) #116

Thanks


(Michael Parment) #117

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>

(Vasily Karasev) #118

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


(Michael Parment) #119

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>

(Vasily Karasev) #120

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


(Michael Parment) #121

Works like a charm :grinning:

Thanks


(LarsK) #122

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


(Vasily Karasev) #123

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


(LarsK) #124

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.