Template for many switches in a group

Tags: #<Tag:0x00007efec7681858> #<Tag:0x00007efec7681740> #<Tag:0x00007efec7681380>

Hi,

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.

Groups and switch definition:

Group gAlarmWeekdays

Switch  alarmMonday     "Montag"    <switch>    (gAlarmWeekdays) 
Switch  alarmTuesday    "Dienstag"   <switch>    (gAlarmWeekdays)
Switch  alarmWensday    "Mittwoch"   <switch>    (gAlarmWeekdays)
Switch  alarmThursday   "Donnerstag"  <switch>    (gAlarmWeekdays)
Switch  alarmFriday     "Freitag"    <switch>    (gAlarmWeekdays)
Switch  alarmSaturday   "Samstag"  <switch>    (gAlarmWeekdays)
Switch  alarmSunday     "Sonntag"   <switch>    (gAlarmWeekdays)

The Template HTML:

<link rel="stylesheet" type="text/css" href="/static/layout/myslider.css" />
<div style="margin: 20px;">
  <div class="row" ng-repeat="item in itemsInGroup('gAlarmWeekdays')"> 
      <div class="col-xs-6 text-left">{{item.label}}</div>
      <div class="col-xs-6 text-right">
        <label class="myswitch">
          <input type="checkbox" ng-checked="(itemValue(item.name)=='ON')" ng-click="sendCmd(item.name, (itemValue(item.name)=='OFF') ? 'ON':'OFF')">
          <div class="myslider round"></div>
        </label>
      </div>
    <hr />
	</div>
</div>

And the needed CSS code (saved in /static/layout/myslider.css):

/* The switch - the box around the slider */
.myswitch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.myswitch input {display:none;}

/* The slider */
.myslider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.myslider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .myslider {
  background-color: #2196F3;
}

input:focus + .myslider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .myslider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.myslider.round {
  border-radius: 34px;
}

.myslider.round:before {
  border-radius: 50%;
}

Best regards,
Martin

10 Likes

:heart_eyes:

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?

Thansk.

socket%20switch 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.

I just integrated your little nice swich to my layout of tiles on the house UI. Thanks.

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.

TIA

please share your widget code

@xsherlock

I really like your layout styling…can you share any of your code…it’s very clean!

I second that; I’d love to have my panel use some of those widgets!

Best, Jay

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.

<link rel="stylesheet" type="text/css" href="http://172.16.10.4:8080/static/css/myslider.css" />
<div style="background: rgba(0,0,0,0.5);
        margin-top: 0px;
        margin-left: 3px;
        border-radius: 10px;
        border: 1px;
        border-style: solid;
        border-color: rgb(100,100,100) ;
        width:236px; height: 230px;
        ">
	<div class="row" style="height: 30px" ></div>
  
	<div class="row" >  
  		<div ng-init='model={"name": "Pool Pump", "item": "Pool_Relay1_ligths", "hidelabel": true, "hideonoff": true, "iconset": "smarthome-set","icon": "pool","icon_size": "100" }'>   
		<widget-switch   ng-model="model" />
  		</div>
	</div>
	<div class="row" style="
  				  font-size: 1.8em;
  				  font-family: Roboto, Helvetica, sans-serif;
              text-align: center;
              border: 0px;      
  				  border-style: solid;
              border-color: green;            
  				  margin-bottom: -2px;
              margin-left: 0px;
              margin-right: 0px         
                    ">Pool 
</div>
  	<div class="row" style="margin-left: -8px; margin-right:-8px"  >  

  <div class="col-xs-6" style="text-align: center; border:0px; border-style: solid; border-color: rgb(100,100,100) ;" >
 
     <div class="row" style="font-size: 1.2em; text-align: center; border: 0px; border-style: solid; border-color: rgb(200,100,100) ;" >   
   			Light   
 				</div>
    <div class="row" style="margin-bottom: -10px; text-align: center; border: 0px; border-style: solid; border-color: rgb(200,100,100) ;" >   
		 <label class="myswitch">
 				<input type="checkbox" ng-checked="(itemValue('Pool_Relay1_ligths')=='ON')" ng-click="sendCmd('Pool_Relay1_ligths', (itemValue('Pool_Relay1_ligths')=='OFF') ? 'ON':'OFF')">  
 				<div class="myslider round"></div>
 			</label>       
 				</div> 
 
</div>


<div class="col-xs-6" style="text-align: center; border: 0px; border-style: solid; border-color: rgb(100,100,100) ;" >
 <div class="row" style=" font-size: 1.2em; text-align: center; border: 0px; border-style: solid; border-color: rgb(200,100,100) ;" >   
   Pump  
  </div>
 <div class="row" style="margin-bottom: -10px; text-align: center; border: 0px; border-style: solid; border-color: rgb(200,100,100) ;" >   
  <label class="myswitch">
 <input type="checkbox" ng-checked="(itemValue('Pool_Relay2_pump')=='ON')" ng-click="sendCmd('Pool_Relay2_pump', (itemValue('Pool_Relay2_pump')=='OFF') ? 'ON':'OFF')">  
 <div class="myslider round"></div>
  </label>        
 </div>   
</div>   
	</div>
</div> 

You also need a css , That @badsl posted on the top of the page.

The whole panel looks the folowing now

1 Like

Keep it simple, I really like this. Can someone explain to me, how can I do this also with sliders and colorwheels ?

FWIW, things can be really simple :crazy_face: 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”.

<h3 style="color: #ffaa00; line-height: .1em;">Control Matrix</h4>
<div class="col-sm-2" ng-repeat="item in itemsInGroup('gPresence') track by $index" >
  <span ng-init="model0={'name': itemsInGroup('gPresence')[$index].label, 'item': itemsInGroup('gPresence')[$index].name,
    'hidelabel': false, 'hideonoff': true, 'iconset': 'smarthome-set','icon': 'bulb','icon_size': '36' } ">
    <widget-switch ng-model="model0" />
  </span>
</div>