i just wantet to share my group of switch template i used for my alarm clock in HABpanel.
First i tried it with an switch widget for each item, but this took too much screen space. So i endet up with this template, maybe anyone needs it too…
The template is pretty easy. The ng-repeat loops through all items in the gAlarmWeekdays group, displays the label und shows a CSS Switch. The only problem i had was to set initial values, but finally ng-checked did the job. With the ng-click event the new state of the switch gets saved.
Works great! I use it for my lights. Now, I would like to adapt it to show all my dimmers. How would I need to change the template if I want to include sliders (0-100, like from the standard slider widget) instead of ON/OFF switches?
I also have had great success with this widget and have made several changes (color, size, etc)
How can i get it to keep the order that my group is in? It seems every time I load the panel the list appears in random order. I would like them to always have the same order.
Is there a problem in my naming convention or is it something else?
Hello, because I’m still fresh in openhab and I do not know yet with widgets.
I wanted to ask if anyone could create such a widget and tell me how to set the widget.
While I’m here, one question is that posible to create (with just css) a component that woudl scale dynamicaly based on the OH item value? I need to make a linear gauge (bi directional, starting from 0) that would take OH item as input. I analyzed your switch code, but thats not there.
Here is the code it is based on my rouded square switch template that was posted here in the early days of habpanel. Code is very not optimized, mostly trial and error to fit my tablet nicely.
Main icon is also clickable and the is equal to lower left function. lower right is seconary function relating to the main one.
FWIW, things can be really simple and effective. The following create a full list of grouped items.
It uses the Bootstrap grid setting and Angular (both part of OH) to format screen retrieve/set items.
The result is a 6 column (12 devided by 2) table. Key item: “gPresence” (or any other) groupname) as set in the item definition. Bootstrap “col-sm2” will subdivide the container in 12 / 2 blocks (thus 6 items) per “line”.