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

Yes, this is true for switches.
But what about strings?

Sorry, probably I did not really understand what do you want to get with the string variable.

No worries. Sorry for being not clear enough.
My switch widget triggers my harmony hub (item: Harmony_Activity) to Xbox mode. The harmony works by receiving a string with the name “Xbox”.
I would like the switch mentioned aboumve to show the icon blue if the harmony_Activity is set to “Xbox”.

However. I assume that I need to use a supportive switch witch is mapped to ON, whenever Harmony_Activity is going to “Xbox”.

Thanks for your help and let me know of there IS an option with a string.

Oh, no problem!
In order to achieve such behavior you may use the following code:

state="itemValue('HarmonyActivity')=='Xbox' ? 'ON' : 'OFF'"

Thanks a lot.
Works like a charm.

1 Like

Unfortunately in the version of OpenHAB 2.1.0 (HABPanel 2.1.0), the found concept of creating a modal window does not work.
Apparently the call to the ‘onclick’ method is now blocked.
It is a pity that until now the possibility of creating modal windows is not implemented in the system by standard means.
For many, this is sensitive and may be an incentive to look for other platforms.

Hey all

Is there a way to add custom icons to habpanel to elaborate:

We get the Builtin and the Eclipse Icons, which are actually limited and aren’t that much useful :disappointed_relieved::confused:
So I was wondering if there was a way to install custom icons?
And how?

-Thanks

About OpenHAB icons

Check this out:

This should help!

1 Like

Hi, in the example with the temperature, humidity, and pressure, is there a way to make the icons green instead of blue?
Thanks,
Kevin

How do you get the Bootstrap style rounded-corners on your button? Do need to put a link to a CDN or something like that?
Thanks!

Okay, it was pretty simple but I wondered why it wasn’t default like in Bootstrap.

<style>
.roundCorners{
  border-radius:5px;
  }  
</style>

“(note to self : I should include ng-animate and ng-touch for the transition and swiping support)” - any chance for that ?

Simple question (I guess):

I use a backdrop item in my template:

<button class="btn" style="width: 100%; height: 100%; padding: 0; background: inherit; outline: none"
  ng-click="sendCmd('Z_Strega', itemValue('Z_Strega') == 'ON' ? 'OFF' : 'ON')">
  <div class="icon backdrop" ng-class="{backdrop: backdrop, center: center, inline: inline}" style="width: 100%; height: 100%; margin: auto">
    <img height="100%" ng-class="{ colorize: colorize }" class="icon-tile-backdrop ng-scope colorize" ng-src="assets/icons/freepik-household/coffee-machine.svg" src="assets/icons/freepik-household/coffee-machine.svg">
</div>

I just would like to scale the size of the backdrop down to 50%, but it moves up to the upper edge.
I tried already center in various places within the code above, but did not succeed.
Any help is greatly appreciated.

Hey guys,

i was wondering if it’s possible to use the Alert (ui.bootstrap.alert) Function from Angular UI?
If yes, could someone add an example here?

Thank you very much. :slight_smile:

For example i’d like to push an alert to the user when something happened e.g. a String item changed it’s value.

Kind regards,

See my answer here: HABPanel Notification Center

Hi,
i want to ask how to add user and password through camera ip in template widget?
because i couldn’t get the image preview after cleared my cache and asked to login again

my code is here:

<div> <span><img src="http://user:password@ip_address/mjpeg.cgi" class="img-responsive" alt="home_security_camera"></img></span></div>

Did you find a solution? I have the same problem, and cannot find the answer in this thred.
I’m using version 2.1 on raspberry pi3

Can it be that there are some setting missing regarding the location? Anyone that can help with this?

Hi,
I’m trying to make Switch widget with state value dependent on Contact item. Almost done, however I cannot figure out how to achieve widget’s brightening ‘on click’ as it is in original switch widget. I only get highlighted border of the widget. I guess there is some "<div style=(…) " option to enable it. Does anybody know how can I achieve this?
My current code is as follows:

       <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
                 display: flex; margin: 0; padding: 0; overflow:hidden" ng-if="itemValue(config.contact) =='CLOSED'">
        <button class="btn btn-lg" style="width: 100%; height: 100%; padding: 0; background: inherit; border:0"
                ng-click="sendCmd(config.lock_open, 'ON')">
          <widget-icon iconset="'eclipse-smarthome-classic'" icon="'lock-closed1'" size="(config.icon_size)"/>
        </button>
      </div>
      
      <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
                 display: flex; margin: 0; padding: 0; overflow:hidden" ng-if="itemValue(config.contact) =='OPEN'">
        <button class="btn btn-lg" style="width: 100%; height: 100%; padding: 0; background: inherit; border:0"
                ng-click="sendCmd(config.lock_close, 'ON')">
          <widget-icon iconset="'eclipse-smarthome-classic'" icon="'lock-open1'" size="(config.icon_size)"/>
        </button>
      </div> 

Hello, is there a way to get a drop-down menu, auto-populated with clickable item?

for the moment i got this, which i did combining a couple example i saw in this thread:

<h4>Groupe Complet</h4>
<div class="btn-group" uib-dropdown>
  <button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle>
    Choose music <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
	<div class="row" ng-repeat="item in itemsInGroup('gPlaylist')">
 	 <div class="col-xs-8 text-right" style="text-align: left"  >{{item.label}} </div>
	</div>
  </ul>
</div>

Which gives me an auto-populated drop-down menu with the items in the group (they are all switches that activate kodi playlist). All item name are greyed though… I suppose i have to add something like this for them to become clickable :

ng-click="sendCmd('{{item.name}}', 'ON')"

but i don’t know where to put it …