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

habpanel
template
widget
Tags: #<Tag:0x00007f6ce57b4e00> #<Tag:0x00007f6ce57b4c70> #<Tag:0x00007f6ce57b4b08>

(Yannick Schaus) #229

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

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) #230

@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!


(Jens) #231

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?


(Sergey M) #232

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


(Patrick Beauchamp) #233

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) #234

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 Höhn) #235

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) #236

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>

temp

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