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

Tags: #<Tag:0x00007f1826e54c38> #<Tag:0x00007f1826e54a58> #<Tag:0x00007f1826e545f8>

(E. Gerland) #42

Alright, Thanks - I will give that a try as well :slight_smile:

(Tim Rogers) #43

Is there a way to add a slider inside a template widget? I looked at the Angular UI Bootstrap stuff, and the examples here, but I don’t see how to do that. (I am just starting to learn all of this, so if I missed something obvious, I appologize :slight_smile: )

After searching for quite a while and making no progress, I posted the above question. Within 5 minutes, I found rzslider, and had a slider on my page. This got me almost the whole way to what I want, but I am now trying to figure out how to tie the slider to a variable. For example, I have the following code:

<div ng-init="slider = {
    minValue: {{'%.0f' | sprintf:itemValue('low_setting')}}, 
    maxValue: {{'%.0f' | sprintf:itemValue('high_setting')}}, 
    options: {
     floor: 0,
     ceil: 100,
     stem: 1

      <rzslider rz-slider-model="slider.minValue" rz-slider-high="slider.maxValue"  rz-slider-options="slider.options"></rzslider>

This creates a slider, but with NaN for both the low and high values. (If I put in just numbers in ng-init, it works as expected)

So my question is now, how can I tie an item value, that can be read and set, to a slider so that I can display the slider, and then send the update to the item when the slider moves? I can do this with a slider widget, so I imagine it is possible, but I am at a complete loss as to how to do it.

Openhab - Dynamic slider (rules?)
(Dominic Bonneau) #44

What is the weather binding that give you icon ?

(Vasily Karasev) #45

Slider -> Variable

In my case works next code:

<div ng-init="slider = {
	value: 19,
    options: {
    	floor: 18,
    	ceil: 25,
    	step: 1

  	ng-click="sendCmd('Heating_Comfort', slider.value)">

But variable changing have no affect to slider.

(Tim Rogers) #46

Thanks. The ng-click binding is probably what I want, but I still can’t set or update the value based on a variable. I was working on a template based widget to control my ecobee thermostat. What I have is shown below, and it displays the mode (heat, cool. auto, etc), the humidity, current temperature, settings, remote sensor, etc.

I was planning on doing a slider that would let me change the temperature controls, but it looks like it will take me a while to get there. Apparently, to change the values I have to set up a sitemap, which I haven’t done. (There isn’t a simple item binding that lets me change it.) I just started using openhab about a week ago, so I’m still trying to figure out how to set all of this up, and most of the instructions are based on openhab, while I am using openhab2. (Things still work, but it’s taking me a while to understand where to put files, etc) I think I’m going to try to start with just doing the sitemap stuff, and then see if I can bind a simple slider widget to that, and once all of that is done, maybe circle back around to this.

Anyway, below is what I have so far. Thanks for the response, and a big thank you to all the information here on this site, it has been really helpful in getting most of my home automation stuff set up and controlled.

(Ra) #47

Could you please share your template details for ecobee ?

(Michael) #48

I can get the initial slider setting to work but then if you refresh the page you get a ‘NaN’ error until you move to a different dashboard and then move back again. Also, the slider doesn’t work on a touch screen.

<div ng-init="slider = {
     value: itemValue('Temperature_Hall'), 
    options: {
      floor: 10,
      ceil: 30,
      step: 1,
     showSelectionBar: true,
<rzslider rz-slider-model="slider.value"
          ng-click="sendCmd('Temperature_Hall', slider.value)"> 

(Basem Al Saeed) #49

@ysc i am still starting my knowledge about angular, in the dropdown menu example you shared after you select the button will show the value you pass to Yamaha_Input item, therefore the Kodi and Xbox do not show on the button after you select
is there a way to display the selected value instead of that ? so if you select HDMI1 (Kodi) it shows that ?
sorry for the noob kind of questions :slight_smile: i just tried to find the answer on the link you shared with no luck

(Vasily Karasev) #50

Hi Tim!

My successes along the way:

<div ng-init="slider = {
	value: 0,
        options: {
  {{slider.value = itemValue('Item_Name')}}

To hide the value from page add style=“display: none;” to the div.


(Tim Rogers) #51

Sure. I will make a new thread for it though. I will have to upload the json, as well as several image files, as well as a css file.

Actually, given all the help I am getting on the slider, I will probably use that thread to update with a possible fixed version that lets you set the temperature as well.

To everyone who provided slider suggestions, thank you for the help! I am starting to think this may be within my abilities.

(Yannick Schaus) #52

@Basem_AlSaeed yes, I see what you mean.
I guess I would use ng-init to initialize a small JSON structure; you can then even use ng-repeat to iterate over the key-value pairs like this:

<h4>Yamaha receiver input</h4>
<div class="btn-group" uib-dropdown
     ng-init="statemap = {
                'HDMI1': 'HDMI1 (Kodi)',
                'HDMI2': 'HDMI2 (Xbox)',
                'Spotify': 'Spotify',
                'NET RADIO': 'Internet Radio'
  <button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle>
    {{statemap[itemValue('Yamaha_Input')]}} <span class="caret"></span>
  <ul class="dropdown-menu" uib-dropdown-menu role="menu">
    <li role="menuitem" ng-repeat="(state, label) in statemap">
      <a ng-click="sendCmd('Yamaha_Input', state)">{{label}}</a>

Good luck!

(Basem Al Saeed) #53

@ysc thank you so much, we all really appreciate your continues support and help

(Tim Rogers) #54

I am missing something that should be obvious, but I cannot seem to find it. In the first example, this line is used to display a widget icon:

<div class="col-xs-4"><span><widget-icon iconset="'smarthome-set'" icon="'temperature'" /></span>Temperature</div>

My question is how can I adjust the size and color of the icon? I know that it is an svg image, so it should be possible using a style setting, but I can’t find exactly where/how it’s done.


(Vasily Karasev) #55

For example:

<widget-icon iconset="'smarthome-set'" icon="'electric-range'" size="32" state="itemValue('Cab_AC')=='ON' ? 'ON' : 'OFF'"/>

size – icon size.
state – in this case - systemwide color for ON or OFF state.
For other colors, as far as I understand, you need to have own colored icons.

(Tim Rogers) #56

Thanks for this. It should work, at least for now.

I was hoping to use the icon directly (not in a widget), as that gives more direct control for css, but for now having on/off states and being able to change the size should be good enough.

Thanks again.

(Mattwire) #58

I’m using the following in some of my custom widgets. Just replace the {{config.icon}} with the actual path if hardcoding.

<img class="icon-tile ng-scope colorize colorize" 
       src={{config.icon}} style="width: 50%; margin: auto; display: block" />

Actual paths are:
http://:8080/icon/faucet?format=svg for the smarthome set
http://:8080/habpanel/assets/icons/freepik-household/light-bulb.svg for the habpanel icons

(DaHome Solutions) #59

I tried out many examples from this conversation and it is working really great!
One big question came up when I opened a dashboard on an iPad which I’ve created on a PC. The strings sizes within the standard widgets are correct, whereas all strings within the template widgets are much to big. How to set the string sizes in the same way as the standard widgets are doing this?

(DaHome Solutions) #60

Q: assumed that there are no interactive components in a template widget, how to define a button which transparently takes the entire widget ?

(Vasily Karasev) #61


<div style="width: 100%; height: 100%; padding: 0">
  	<button class="btn" style="width: 100%; height: 100%; padding: 0; background: inherit"

And in Template settings you need to check “Don’t wrap in container” checkbox.

(DaHome Solutions) #62

@wasco: Thanks, it works !

One second small question: what to set for “ng-click=” in order to get moved to another dashboard?