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

Apps & Services HABPanel
, ,
132

Hello ysc, I’ve build a widget as a copy of your “reciever input” dropdown widget. But I have to send commands to my onkyo reciever in numeric values, so the button shows the numeric value instead the choosen input channel. Is there a way to use mappings inside an widget?

<h4>Soundmaster Eingang</h4>
<div class="btn-group" uib-dropdown>
  <button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle>
    {{itemValue('onkyoSource')}} <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
    <li role="menuitem"><a ng-click="sendCmd('onkyoSource', '16')">BD/DVD (DVD-Player)</a></li>
    <li role="menuitem"><a ng-click="sendCmd('onkyoSource', '0')">VCR/DVR</a></li>
    <li role="menuitem"><a ng-click="sendCmd('onkyoSource', '1')">CBL/SAT (Dreambox)</a></li>

thanks for any hint

133

Hi.

There is currently no support for transformations as far as I know.
But you can use something like

{{itemValue('onkyoSource') == 16 ? 'BD/DVD (DVD-Player)' : 'else'}}

Just cascade as many of those structures together as you need.

Andreas Moseler bot@community.openhab.org schrieb am So., 12. Feb. 2017,
16:56:

134

Hi LarsK,

thanks, that works for the first entry, but I didn’t understod how to cascade them.

135 
{{itemValue('onkyoSource') == 16 ? 'BD/DVD (DVD-Player)' : itemValue('onkyoSource') == 0 ? 'VCR/DVR' : itemValue('onkyoSource') == 1 ? 'CBL/SAT (Dreambox)' : ''}}

Not tested :wink:

136

thanks again - it works!:relaxed:

137

You can also define key/value pairs (similar to transformations) with a JSON object, example here:

138

Hello @amsd

I don’t know if you have everything working already, but you may want to look at the Custom Widget: Music Control thread. It has examples for controlling the Onkyo receivers, with drop down menus, etc.

139

Hello!
I’m total beginner in OpenHAB and HABpanel and I’m trying step by step to check if they suit my requirements.
I’m trying to create my first template widget - it is really very very simple: it should show just a number value taken from variable. Unfortunetelly it always shows N/A value. Where is an error? Here is my configuration:

obraz.png363×732 42.7 KB

Can anybody help me?

140

The variable in the custom widget editor are called “config.id” where id is the id name
Therefore you should replace ItemValue(‘field1’) with config.field1

2 Likes
142

Can anyone tell me how to increase and send back a decimal properly? I don’t get how casting should be handled:

ng-click=“sendCmd(‘EGWZHZThermostat_4_SetTemperature’, 1.0*itemValue(‘EGWZHZThermostat_4_ActualTemperature’) + 0.5)”

doesn’t seem to work…

143

For the temperature setpoint I use {{+itemValue(‘myItem’) + 0,5}} and it works.

144

with comma? are you sure that works?

145

Sorry typing mistake. This is my code :ng-click=“sendCmd(‘SetTemp_Taverna’, +itemValue(‘SetTemp_Taverna’)-0.5)”

146

it’s working now meanwhile - I had a different problem. Thanks for the reply!

147

I just want to create a button to increase (or decrease) a DateTime by 30 min.

something like ng-click=“sendCmd(‘Sveglia’, +itemValue(‘Sveglia’)+ ?? )”

Any Idea?

148

Hi all,

I am using kubawolanin widget below with some alterations to suit my own needs, and I was wondering how I would go about calling a url string to provide an icon instead of the ones kubawolanin uses.

I know how to configure the settings I just don’t know the code to call the url. This is an example of the url I am provided:

And I know that the line of code I need to change is the bottom line, I’m just unsure of what to change it to…:

<div class="weather-content">
  <div class="weather-row">
    <div class="weather-icon" ng-class="(ngModel.sizeX === ngModel.sizeY) ? 'col-md-12' : 'col-md-10'">
		<img style="filter: invert(60%) sepia(100%) hue-rotate(185deg) saturate(1000%);"
		src="/icon/climacon?iconset=climacons&format=svg&state={{itemValue(config.weather_condition)}}" />

https://community.openhab.org/t/custom-widget-current-weather/18216

I appreciate anyones help on this.

149

Try something like

<img style="filter: invert(60%) sepia(100%) hue-rotate(185deg) saturate(1000%);"
		src="{{itemValue('Your_Weather_Icon_Url_Item')}}" />
150

@kubawolanin

That’s great! Worked a treat! I now have:

Screen Shot 2017-03-02 at 12.16.09.png349×550 23.7 KB

I just need to play about with it a bit now to get original colours.

Thanks a lot!

151

Just remove this line and you should be ready to go :wink:

1 Like
152

Thanks! All done!