i know you can set an item value (that isn’t bound to external data feed) with a slider because i tried it, can someone please write us a template with text field that edit items (numbers and strings)and solve the dilemma of Basic & Classic UI ?
i just suck at web stuff, i don’t know what kind of code i can write in a template / widget to start with …
iḿ still thinking about top have my own chart widget, or at least to play around with.
can you give me a hint as startpoint ? what can be used in habpanel from angular framework ? is it possible to include addional functions in an widget ?
i tried:
it does not work, where do i have to place the files ?thanks in advcance
Sorry, i’m not using this code anymore. Changed to the weather template from this forum!
Alright, Thanks - I will give that a try as well 
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 )
Update:
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
}
};"></div>
<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.
What is the weather binding that give you icon ?
Slider -> Variable
In my case works next code:
<div ng-init="slider = {
value: 19,
options: {
floor: 18,
ceil: 25,
step: 1
}
};"></div>
<rzslider
rz-slider-model="slider.value"
rz-slider-options="slider.options"
ng-click="sendCmd('Heating_Comfort', slider.value)">
</rzslider>
But variable changing have no affect to slider.
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.
Could you please share your template details for ecobee ?
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,
}
};">
</div>
<rzslider rz-slider-model="slider.value"
rz-slider-options="slider.options"
ng-click="sendCmd('Temperature_Hall', slider.value)">
</rzslider>
@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 i just tried to find the answer on the link you shared with no luck
Hi Tim!
My successes along the way:
<div ng-init="slider = {
value: 0,
options: {
...
}
}">
{{slider.value = itemValue('Item_Name')}}
</div>
To hide the value from page add style=“display: none;” to the div.
WBR
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.
@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>
</button>
<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>
</li>
</ul>
</div>
Good luck!
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.
Thanks
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.
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.
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