Was looking for some widget supporting roller blinds & slats control (aka jalousie / raffstore). But as I wasn’t able to find one I just started writing my own widget.
The widget uses two items:
- item for absolute position (up / down)
- item for absolute position of slats (open / close)
To control your roller blinds & slats just use the slider (up/down), the knob (open/close slats) or the button group.
Works excellent for my KNX home.
As I didn’t managed to upload a JSON file just create a new widget and copy & paste the coding below.
Have fun!
Joergee
Screenshot
Json
<style>
.myFill { position:absolute; left:0px; top:0px; height:100%; width:100%; }
.myHeader { min-height:24px;}
.myKnob { min-height:70px; min-width:70px; }
.myCenter { display:flex; justify-content:center; align-items:center; }
.my100Height { height:100%; }
.my95Height { height:95%; }
.my50Height { height:50%; }
.my25Height { height:25%; }
.my15Height { height:15%; }
.my5Height { height:5%; }
.myButtons { min-height:165px; min-width:85px; }
.myButton { background-color:rgb(1, 18, 48); border-color:rgb(85,102,119); color:rgb(85,102,119); }
.myButton:hover { background-color:rgb(1, 37, 96); }
.myButton:focus { background-color:rgb(12, 185, 240); }
</style>
<div class="root myFill">
<div class="row my100Height">
<!-- HEADER -->
<div class="col-sm-12 myHeader myCenter my5Height">
{{ngModel.name}}
</div>
<!-- LEFT -->
<div class="col-sm-5 my95Height">
<div class="my100Height" ng-init="my_shutter_slider={
item: config.shutter_height,
floor: 0,
ceil: 100,
step: 10,
hidelabel: true,
unit: '%',
vertical: true,
inverted: true,
hidelabel: true,
hidelimits: true,
hidepointer: true
}">
<widget-slider ng-model="my_shutter_slider"/>
</div>
</div>
<!-- RIGHT -->
<div class="col-sm-7 my95Height">
<div class="row my100Height">
<div class="col-sm-12 my5Height">
</div>
<div class="col-sm-12 myButtons my50Height">
<!-- BUTTON UP -->
<button style="z-index:1; position:absolute; left:0px; top:0px; width:80px; height:80px; border-radius: 5px 5px 0px 0px;"
type="button" class="btn btn-primary btn-block myButton" title="UP" ng-click="sendCmd(config.shutter_height, 'UP')">
<div style="top:-23px" class="glyphicon glyphicon-chevron-up"></div>
</button>
<!-- BUTTON OPEN -->
<button style="z-index:3; position:absolute; left:6px; top:30px; width:68px; height:50px; border-radius: 5px 5px 0px 0px;"
type="button" class="btn btn-primary btn-lg myButton" title="OPEN" ng-click="sendCmd(config.shutter_height, 'STOP')">
<div style="top:-6px" class="glyphicon glyphicon-resize-full"></div>
</button>
<!-- BUTTON STOP -->
<button style="z-index:5; position:absolute; left:0px; top:62px; width:80px; height:36px; border-radius: 5px 5px 5px 5px;"
type="button" class="btn btn-primary btn-lg myButton myButtonStop" title="STOP" ng-click="sendCmd(config.shutter_height, 'STOP')">
<div style="top:-3px" class="glyphicon glyphicon-stop"></div>
</button>
<!-- BUTTON CLOSE -->
<button style="z-index:4; position:absolute; left:6px; top:80px; width:68px; height:50px; border-radius: 0px 0px 5px 5px;"
type="button" class="btn btn-primary btn-lg myButton" title="MOVE" ng-click="sendCmd(config.shutter_height, 'MOVE')">
<div style="top:+10px" class="glyphicon glyphicon-resize-small"></div>
</button>
<!-- BUTTON DOWN -->
<button style="z-index:2; position:absolute; left:0px; top:80px; width:80px; height:80px; border-radius: 0px 0px 5px 5px;"
type="button" class="btn btn-primary btn-lg myButton" title="DOWN" ng-click="sendCmd(config.shutter_height, 'DOWN')">
<div style="top:+28px" class="glyphicon glyphicon-chevron-down"></div>
</button>
</div>
<div class="col-sm-12 my25Height">
<div class="myKnob" ng-init="my_shutter_knob={
item: config.shutter_shadow,
type: 'knob',
floor: 0,
ceil: 100,
step: 10,
startAngle: 90,
endAngle: 180,
barColor: '#00CCFF',
prevBarColor: '#0066FF',
trackColor: '#003399',
scaleEnabled: true,
scaleType: 'dots',
scaleQuantity: 11,
skinType: 'tron',
skinColor: '#003399',
displayInput: false
}">
<div style="width:175px; height:105px; position:relative; left:-99px; top:-81px">
<div>
<div>
<widget-knob ng-model="my_shutter_knob" />
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12 my15Height">
</div>
</div>
</div>
</div>
</div>
