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

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

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;

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.


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.

Fixed this yesterday.


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?

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


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


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,

Hi LarsK,

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

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

Not tested :wink:

thanks again - it works!:relaxed:

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

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.

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?

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


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…

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

with comma? are you sure that works?

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