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 …
@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).
@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!
1 Like
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?
Did you manage to get a video stream using your login and password?
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:
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
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
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!
Hello and thanks for this great tutorial 
Actually I have some problem with this code:
<p>Value of Heizung: {{itemValue('Power_Plug_Socket_B')}}</p>
<div ng-if="itemValue('Power_Plug_Socket_B').split(',')[2]!='0'">
<button class="btn btn-lg" style="background: red; color: white"
ng-click="sendCmd('Power_Plug_Socket_B', 'OFF')">
It's on! Switch off
</button>
</div>
<div ng-if="itemValue('Power_Plug_Socket_B').split(',')[2]=='0'">
<button class="btn btn-lg" style="background: green; color: black"
ng-click="sendCmd('Power_Plug_Socket_B', 'ON')">
It's off! Switch on
</button>
</div>
The display of the value works fine but the switch doesnt work. It only turn off without switch the color of the button.
Are you sure the value is a string and not a number? Also, your duplicating a lot of stuff. Just use ng-style and inline-if for the text.
Well Im not good with all this stuff. I just get my things working with tutorials 
So I just copied the code above to use for my own 
Well, I dont know what you mean exactly 
The switch is just a small device on the GPIO-Ports…maybe this helps to solve the problem.
I want to compare 2 numbers (Temperatures) in an mg-if segment, but i think it compares these items as string, because if the temperature_item is 10 and the set_temperature_item is 17 it works, but if the temperature_item is 5 and the set_temperature_item is 17 it will not work. How must i used the item-fields in the ng-if-segment?
the 2 items are defined in the widget settings as items.
Here my code:
<div class="knob1" ng-if="itemValue(config.temperature_item')<= itemValue(config.set_temperature_item)" style="margin-top: -255px;"><widget-knob ng-model="temp2" /></div>
<div class="knob1" ng-if="itemValue('config.temperature_item') >itemValue(config.set_temperature_item)" style="margin-top: -255px;"><widget-knob ng-model="temp3" /></div>
My goal ist to color the the bar in the knob blue if the temperature is > set_temperature and red if the temperature < smaller than the set_temperature.
x == 3 is NOT the same as x == ‘3’ so make sure you make the right condition statement or just do x.toString() === ‘3’
I did create my own template widget now for danalock. it works pretty well… but what I have ask me is, if there is any layout and positioning tutorial? I dont find any documentation about predefined classes like row or col and how they works.
also what I dont understand is, why the habpanel is not screen resolution responsive? I feel so bad when I design on my 1080p pc monitor the widget for my 720p tablet 
that let me looks back to html4 and css1 in the 2000 years 
HABPanel uses bootstrap classes. I suggest you read on that, and everything else is straightforward css (assuming you know css, this should be fairly easy). Also, HABPanel uses gridster framework so everything is pretty much absolutely positioned and statically sized (fixed px). You can create a widget that is also absolutely positioned and based all children relative to that absolutely positioned parent.
Nothing unusual here that requires a separate css tutorial. Advanced settings for individual dashboards allow you to set your breakpoints. So you can override existing styles based in the queries.
Hello!
I made a simple button but i’m struggling with something…
this is my code:
<div class="box-content switch" ng-if="itemValue('Test_Button')=='OFF'">
<button class="btn btn-lg" style="width: 100%; background: transparent; height: 100%;" ng-click="sendCmd('Test_Button', 'ON')">
<img src="/icon/fts_yard_gate_2w?format=svg" width="90%" height="90%"/>
</button>
</div>
<div class="box-content switch" style="background-color: rgb(204, 51, 0)" ng-if="itemValue('Test_Button')=='ON'">
<button class="btn btn-lg" style="width: 100%; background: transparent; height: 100%;" ng-click="sendCmd('Test_Button', 'OFF')">
<img src="/icon/fts_yard_gate_2w_open?format=svg" width="90%" height="90%"/>
</button>
</div>
the button works but i’m not happy with the “design”… when i press the button while “onclick” the border of the button is visible for a short time - then it goes transparent again. can someone please tell me how to change this behaviour? i’ve looked so many times now but i can’t find the solution…
cheers
look up css transitions