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

[ysc (Yannick Schaus)]

Check this out:

Icon pickers now support manual entries

[image] I’ve made a minor but (potentially) needed change in the HABPanel icon handling, in order to enable more flexibility for icon selection until additional iconsets can be somehow added to the list. All icon pickers thoughout the application, including those in standard and custom widgets, now feature two additional options: Custom icon and Custom URL: [image] Selecting those “special iconsets” will display text inputs instead of the standard icon picker dropdown: [image] Custom ico…

This should help!

[Kstack (Kevin Stack)]

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

[Saracen (Tom)]

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!

[Saracen (Tom)]

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

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

[_mordkaa (Maciek O)]

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

[NCO (E. Gerland)]

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.

[hExPY (Marvyn Zalewski)]

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.

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,

[ysc (Yannick Schaus)]

See my answer here: HABPanel Notification Center

[Setyo_Bagus]

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>

[Rosendal (Peter Rosendal)]

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?

[zacofunny (Bogumil J.)]

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> 

[Patrick_Beauchamp]

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 …

[ysc (Yannick Schaus)]

@Patrick_Beauchamp check out the “Dropdown of radio stations” example here, it’s similar:

HABPanel Development & Advanced Features: Start Here!

This Wiki post aims to be a centralized resource to help new users (and experienced users alike!) with the advanced features in HABPanel. It will contain relevant examples and links to help you with common issues and getting the most out of these features! Users with the “Member” badge (and levels above) can edit this post, don’t hesitate to do so if you deem it appropriate Templates & Custom Widgets What are templates? If the standard widgets don’t fit your needs or your taste, HAB…

There’s a trick to display a divider after the first item, you can use it or not (simply remove the first <li> and the ng-style in the second).

[Patrick_Beauchamp]

@ysc Thanks for the link, i wanted to learn more about how to do the widgets!

now i have a lot of reading to do!

[Belgadon]

Is there a way not only to create a widget but a complete website?
https://community.openhab.org/t/habpanel-development-advanced-features-start-here/30755
This threat contains good examples what CAN be used, but not HOW it can be used.
Can you just drop some html, js, css … files somewhere and create your own dashboard using the same syntax mentioned in this threat? Where and how?

[Olymp (Sergey M)]

@Setyo_Bagus

i want to ask how to add user and password through camera ip in template widget?

Did you manage to get a video stream using your login and password?

[Patrick_Beauchamp]

someone know the way to code a http slider to actually send command to openhab? I’ve got a good looking slider but the light doesnt respond.

i try to add ng-click=“sendCmd(‘dimmerGrandSalon’, slider.value)” to the input attribute but it doesn’t do anything.

Also, is there a way to see the code of the standard widget?

---

here’s what i got so far :

<!DOCTYPE html>
<html>
<head>
<meta name="homeControl" content="width=device-width, initial-scale=1">
<style>
.slidecontainer {
    width: 75%;
    margin: 50px;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 10px;
    border-radius: 5px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 48px;
    height: 48px;
    border: 0;
    background: url('/icon/bulb.png');
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 48px;
    height: 48px;
    border: 0px;
    background: url('/icon/bulb.png');
    cursor: pointer;
}
  
button {
    width: 50px;
    height: 50px;
    border: 0;
    background: transparent;
    color: white;
    font-size: 1em;
    background-image: url("/icon/bulb.png");
}

table, td, th {
    border: 0px;
}

  th {
      border: 0px;
      padding: 20px;
  
  }
  
</style>
</head>
<body>

<table align="center">
  
  <tr width="75%">
    <th width="33%">
      <p> All ON </p>
      <button ng-click="sendCmd('allOn', 'ON')"></button>
    </th>
  
    <th width="33%">
      <p> All OFF </p>
      <button ng-click="sendCmd('allOff', 'ON')"></button>
    </th>
  
    <th width="33%">
      <p> Petit Salon </p>
      <button ng-click="sendCmd('prisePetitSalon', 'ON')"></button>
    </th>
    
  </tr>
</table>
  
  <div class="slidecontainer">
    <input type="range" min="1" max="100" value="0" class="slider" id="grandSalon">
  </div>

  <div class="slidecontainer">
    <input type="range" min="1" max="100" value="0" class="slider" id="tableCuisine">
  </div>
  
  <div class="slidecontainer">
    <input type="range" min="1" max="100" value="0" class="slider" id="comptoirCuisine">
  </div>


</body>
</html>

The visual:

[vzorglub (Vincent Regaud)]

Hello,
I am trying to use the great set of animated icons skycons found there: https://github.com/darkskyapp/skycons

here is my template widget code:

<script src="/static/skycons.js"></script>
<canvas id="icon1" width="64" height="64"></canvas>

<script>
  var skycons = new Skycons({"color: orange});
  skycons.add("icon1", Skycons.RAIN);
  skycons.play();
</script>

I have added the skycons.js to the html folder

The widget shows nothing

Where am I going wrong?

Thanks

Vincent

[stefan.hoehn (Stefan Höhn)]

With reference to the here you have to do the following:

• Install the Astro Binding (as you did)
• create a file called astro.things and put it into the things folder
• add the following to that file

astro:sun:home [ geolocation="50.102471, 8.403986", interval=300]
astro:moon:home [ geolocation="50.102471, 8.403986", interval=300]

• Now go to your items file (or create an additional one e.g. “astro.items”) and put the following into it

String   astro_sun_local_season_name                {channel="astro:sun:home:season#name"}
DateTime astro_sun_local_rise_start "[%1$tH:%1$tM]" { channel="astro:sun:home:rise#start" }

Voila, now it will work (at least it did in my case as I had the same problem)

/Stefan

[Patrick_Beauchamp]

Follow-up on my last post:

I finally found a way to do it:

<!DOCTYPE html>
<html>
<head>
<meta name="homeControl" content="width=device-width, initial-scale=1">
<style>



#dimmer-slider .rz-bubble {
  color: white;
}
#dimmer-slider .rz-pointer {
  background: url('/icon/bulb.png');
  width: 48px;
  height: 48px;
}
#dimmer-slider .rzslider .rz-bar.rz-selection {
  background-color: #ffaa00;
}

  
button {
    width: 48px;
    height: 48px;
    border: 0;
    background: transparent;
    color: white;
    font-size: 1em;
}

table, td, th {
    border: 0px;
}

  th {
      border: 0px;
      padding: 20px;
  
  }
  
</style>
</head>
<body>

<table align="center">
  
  <tr width="75%">
    <th width="33%">
      
      <p>Prise Petit Salon</p>
      <div ng-if="itemValue('prisePetitSalon')=='ON'">
        <button class="btn btn-lg" style="background-image: url('/icon/bulb.png'); color: white" ng-click="sendCmd('prisePetitSalon', 'OFF')"></button>
      </div>

      <div ng-if="itemValue('prisePetitSalon')=='OFF'">
        <button class="btn btn-lg" style="background-image: url('/icon/eye.png'); color: white" ng-click="sendCmd('prisePetitSalon', 'ON')"></button>
      </div>
      
    </th>
  
    <th width="33%">
      <p> All OFF </p>
      <button style="background-image: url('/icon/bulb.png'); color=white" ng-click="sendCmd('allOff', 'ON')"></button>
    </th>
  
    <th width="33%">
      <p> Petit Salon </p>
      <button style="background-image: url('/icon/bulb.png'); color=white" ng-click="sendCmd('prisePetitSalon', 'ON')"></button>
    </th>
    
  </tr>
</table>
  
<div class="slider-div" ng-init='dimmerGSModel={"name": "dimmerGS", "item": "dimmerGrandSalon", "floor" : 0, "ceil": 100, "step": 1,"hidelabel" : "true", "hidelimits": "true" }'>
        <widget-slider ng-model="dimmerGSModel" id="dimmer-slider"/>
      </div>
  
<div class="slider-div" ng-init='dimmerCModel={"name": "dimmerC", "item": "dimmerComptoir", "floor" : 0, "ceil": 100, "step": 1,"hidelabel" : "true", "hidelimits": "true" }'>
  <widget-slider ng-model="dimmerCModel" id="dimmer-slider"/>
</div>
  
<div class="slider-div" ng-init='dimmerTCModel={"name": "dimmerTC", "item": "dimmerTableCuisine", "floor" : 0, "ceil": 100, "step": 1,"hidelabel" : "true", "hidelimits": "true" }'>
  <widget-slider ng-model="dimmerTCModel" id="dimmer-slider"/>
</div>


</body>
</html>

That white dot and the fact that the icon is centered are annoying me but overall it’s great!