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

Tags: #<Tag:0x00007f1825a330b0> #<Tag:0x00007f1825a32e30> #<Tag:0x00007f1825a32b60>

(Vasily Karasev) #125

I’m sorry, I not quite understand the question correctly.
Need to think.

(Vasily Karasev) #126

If you want to make transparent background for ALL widgets in the dashboard add the next to style block:

.box {
  	background: rgba(0, 0, 0, 0);
  	box-shadow: 0px 0px 0px;

(LarsK) #127

Thanks a lot.

I will give it try. But removing it from all widgets is not exactly what was looking for.
The option no_background in the habpanel ui seems to be broken the way it is right now.


(Vasily Karasev) #128

Add also this

.template-nobkg {
   background: rgba(0, 0, 0, 0);

Managing each individual widget requires more sophisticated approaches.
I did it, but as long as it works for a particular user action, and the need to work immediately when the page loads.

(Yannick Schaus) #129

Fixed this yesterday.

(LarsK) #130

Perfect. Thanks for everything you do around habpanel.
Is there a easy way to install this updated version of habpanel on the stable release of OpenHab 2?

(Christoph B) #131

Two quick questions:

a) is there a css file I can add/change in order to modify the main template or create a new one?
b) is it possible to text-align:left a vertical slider? Not sure how to pass the setting to the slider container


(Andreas Moseler) #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>
  <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

(LarsK) #133


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,

(Andreas Moseler) #134

Hi LarsK,

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

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

Not tested :wink:

(Andreas Moseler) #136

thanks again - it works!:relaxed:

(Yannick Schaus) #137

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

(Tim Rogers) #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.

(Kregiel) #139

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:

Can anybody help me?

(Lorenzo Giordano) #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

(Christoph B) #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…

(Lorenzo Giordano) #143

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

(Christoph B) #144

with comma? are you sure that works?

(Lorenzo Giordano) #145

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