Custom Widget: Somfy

Apps & Services HABPanel
1

Hi guys,

first of all I’n not a skilled coder or even better i know nothing about html an css, but I decided to give it a try!
I thought the HABPanel could need a new Somfy widget for (slatted) Venetian blinds since there seems to be none! For one week I sadly didn’t got far but I hope someone will help because I’m getting frustrated…

See: https://www.openhab.org/addons/bindings/somfytahoma/

What I’m trying to do should look like this:
grafik

On the left side opening/closing the blinds as seen often.
In the middel: arrows to go all the way up/down and stop button.
On the right side should be a slider/scale to controll the orientation of the slats. To look cool the slat should turn like the orientation.

I guess this is easy for a skilled coder and maybe someone has enough time so spent.
What I’ve done so far and working half ways:

<div>
<h4 style="font-size: {{config.font_size}}px;" > {{config.visible_label}}</h4>
</div>
<p>
</p>


<body>

<table style="width: 100%">
	<tr>
		<td>
      <div  class="div-slider">
				<div style="height: 250px" ng-init='model={"item": (config.blinds_item), "floor": 0, "ceil": 100, "step":(config.step), "unit": "%", "vertical": true, "inverted": true};' >
  				<widget-slider ng-model="model" ng-click="sendCmd(config.blinds_item, 'MOVE')" />
				</div>
 		  </div>
    </td>
		<td>
      	<span>
  			<widget class="glyphicon glyphicon-menu-up" style="font-size:{{config.arrow_size}}px" ng-click="sendCmd(config.blinds_item, 'UP')" />
				</span>

     		<span>
  			<widget-icon iconset="'eclipse-smarthome-classic'" icon="'cu_blinds'" size="(config.icon_size)"	 state="itemState(config.blinds_item)" ng-click="sendCmd(config.blinds_item, 'STOP')" /> 
				</span>

      	<span>
        <widget class="glyphicon glyphicon-menu-down" style="font-size:{{config.arrow_size}}px" ng-click="sendCmd(config.blinds_item, 'DOWN')" ;/>
	    	</span>
    </td>
		<td>

    </td>
	</tr>
</table>

</body>

Also created custom icons:

cu_blinds cu_blinds cu_blinds cu_blinds-0 cu_blinds-10 cu_blinds-10 cu_blinds-20 cu_blinds-20 cu_blinds-30 cu_blinds-30 cu_blinds-40 cu_blinds-40 cu_blinds-50 cu_blinds-50 cu_blinds-60 cu_blinds-60 cu_blinds-70 cu_blinds-70 cu_blinds-80 cu_blinds-80 cu_blinds-90 cu_blinds-90 cu_blinds-100 cu_blinds-100

also for the slat itself:

slat slat

Hope someone can help to finish this!

2

Small update - I’m gettin closer…
Any help welcome on:

  • getting in the slat svg to turn within the knob
  • getting in custom pointer with degrees into the orientation bar for slats

grafik

<div>
<h4 style="font-size: {{config.font_size}}px;" > {{config.visible_label}}</h4>
</div>
<p>
</p>


<body>

<table style="width: 100%">
	<tr>
		<td>
      <div  class="div-slider">
				<div style="height: 250px" ng-init='model={"item": (config.blinds_item), "floor": 0, "ceil": 100, "step":(config.step), "unit": "%", "vertical": true, "inverted": true};' >
  				<widget-slider ng-model="model" ng-click="sendCmd(config.blinds_item, 'MOVE')" />
				</div>
 		  </div>
    </td>
		<td>
      	<span>
  			<widget class="glyphicon glyphicon-menu-up" style="font-size:{{config.arrow_size}}px" ng-click="sendCmd(config.blinds_item, 'UP')" />
				</span>

     		<span>
  			<widget-icon iconset="'eclipse-smarthome-classic'" icon="'cu_blinds'" size="(config.icon_size)"	 state="itemState(config.blinds_item)" ng-click="sendCmd(config.blinds_item, 'STOP')" /> 
				</span>

      	<span>
        <widget class="glyphicon glyphicon-menu-down" style="font-size:{{config.arrow_size}}px" ng-click="sendCmd(config.blinds_item, 'DOWN')" ;/>
	    	</span>
    </td>
		<td>
<ui-knob value="knob.value" options="knob.options" ng-click="sendCmd(config.slats_item, knob.value)"/>

<div ng-init="knob = {
                    	value: itemValue(config.slats_item),
                    	options: {
                      					scale: {
                        								enabled: true,
                        								type: 'dots',
                        								color: 'gray',
                        								width: 3,
                        								spaceWidth: -5,
                        								quantity: 19,
                        								height: 8
                      								 },
                      trackWidth: 10,
                      barWidth: 0,
                      step: 10,
                      min: -90,
                      max: 90,
                      startAngle: 0,
                      endAngle: 180,
              				unit: '°',
                      trackColor: 'rgba(52,152,219,.1)',
                      barColor: 'rgba(52,152,219,.5)',
                      textColor: 'white',
                      subText: {
                        enabled: false,
                        text: 'Volume',
                        color: 'gray',
                        font: 'auto'
                    },
                    }
                   };">
      </div>
    </td>
	</tr>
</table>

</body>

20200330_test_Shutter.widget.json (3.3 KB)

1 Like
3

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.