I assume you would use ng-click="sendCmd('Lights', 'OFF') on your outer div.
Somehow like this:
<button class="btn" style="width: 100%; height: 100%; padding: 0; background: inherit; outline: none"
ng-click="sendCmd('Lights', 'OFF')>
<span>
<widget-icon iconset="'smarthome-set'" icon="'bulb'" size="32" state="itemValue('Lights')" />
</span>
<span style="color: {{itemValue('Lights')=='ON' ? 'white' : '#7B879C'}}">
Lights
</span>
</button>
And set checkbox “Don’t wrap in container” in the Template settings window.
3 Likes
Hello guys,
next question: how to get ON/OFF state from dimmer item? itemValue(item.name) and item.state returns numeric value.
I don’t get the backdrop icons to show up.
Could you please tell me where your icons are located (absolute path)?
I did try some locations and the icons are definitely there, but don’t show up.
It works with the <widget-icon iconset=“‘eclipse-smarthome-classic’” … approach.
(my icons are in /etc/openhab2/html/habpanel/assets/icons/smarthome-set/)
Thanks!
AFAIK there is no real ON/OFF State on Dimmers it’s just that a Switch Item automatically maps its State to 0/100.
So you can either create a Switch Item for that channel or do the mapping yourself like this:
{{itemValue(item.name) == 0 ? 'OFF' : 'ON'}}
Thanks a lot!
I will try it soon!
Something I discovered and Like to share with you.
- The display name of your widget is stored in {{ngModel.name}}
- You can define your own variables by assigning them to ngModel.“VarName”
During the assignment the value is returned
A line like {{ngModel.myValue=10+100}} would display as 110
Later you can reference to it with {{ngModel.myValue}}
Example:
style="z-index: 10;
position: absolute;
top: calc(50% - {{(ngModel.icon_size=(ngModel.sizeY>ngModel.sizeX?ngModel.sizeX:ngModel.sizeY)*(config.icon_size?config.icon_size:64))/2}}px);
left: calc(50% - {{ngModel.icon_size/2}}px);
">
To suppress the output of your calculation you can hide it within an inline style comment:
Example:
<style type="text/css">
/*
My Value: {{ngModel.myValue=itemValue('config.item') *100}}
*/
</style>
My Widget name: {{ngModel.name}}
My Value: {{ngModel.myValue}}
I tried this with a Stringvalue (HarmonyActivity). Shouldn’t this work as well?
state=“itemValue(‘HarmonyActivity’)==‘xbox’ ? ‘xbox’ : ‘PowerOff’” />
As far as I understand, “state” determines the color of the displayed value (“OFF” = gray, “ON” and everything else = blue).
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 
So I was wondering if there was a way to install custom icons?
And how?
-Thanks
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