I am not a html/css developer and it took me hours to find out the magic combination of styles to get it scaling and positioning correct, but I finally got something I can use on a tablet to control rollershutters / blinds.
It also updates the icon according to the current position of the blind, which is nice.
13 Likes
Thank you. Perhaps it will be fine to add some predefined values.
Hi,
that widget looks very nice.
But it is possible to stop the rollershutter while going up/down?
Thomas
Yes, by pressing the icon between the arrows
Hi,
looks great, but unfortunately it does not work for me with my innogy rollershutters. The item is correct integrated, because the icon in the middle shows the actually state, but i can’t trigger it.
Any idea?
Maybe your blinds need different commands. Can you look at your /var/log/openhab2/openhab.log and events.log for what is happening when you push the buttons?
I have an error in my openhab2.log, which (from my Point of view) have nothing to do with the widget.
2017-09-15 20:30:03.647 [ERROR] [r.features.FeatureDeploymentListener] - Unable to parse deployed file /usr/share/openhab2/addons/maven-metadata-local.xml
org.xml.sax.SAXParseException; systemId: file:/usr/share/openhab2/addons/maven-metadata-local.xml; lineNumber: 1; columnNumber: 1; Vorzeitiges Dateiende.
at com.sun.org.apache.xerces.internal.util.ErrorHandlerWrapper.createSAXParseException(ErrorHandlerWrapper.java:203)[:1.8.0_121]
at com.sun.org.apache.xerces.internal.util.ErrorHandlerWrapper.fatalError(ErrorHandlerWrapper.java:177)[:1.8.0_121]
at com.sun.org.apache.xerces.internal.impl.XMLErrorReporter.reportError(XMLErrorReporter.java:400)[:1.8.0_121]
at com.sun.org.apache.xerces.internal.impl.XMLErrorReporter.reportError(XMLErrorReporter.java:327)[:1.8.0_121]
at com.sun.org.apache.xerces.internal.impl.XMLScanner.reportFatalError(XMLScanner.java:1472)[:1.8.0_121]
at com.sun.org.apache.xerces.internal.impl.XMLDocumentScannerImpl$PrologDriver.next(XMLDocumentScannerImpl.java:1014)[:1.8.0_121]
at com.sun.org.apache.xerces.internal.impl.XMLDocumentScannerImpl.next(XMLDocumentScannerImpl.java:602)[:1.8.0_121]
at com.sun.org.apache.xerces.internal.impl.XMLNSDocumentScannerImpl.next(XMLNSDocumentScannerImpl.java:112)[:1.8.0_121]
at com.sun.org.apache.xerces.internal.impl.XMLDocumentFragmentScannerImpl.scanDocument(XMLDocumentFragmentScannerImpl.java:505)[:1.8.0_121]
at com.sun.org.apache.xerces.internal.parsers.XML11Configuration.parse(XML11Configuration.java:841)[:1.8.0_121]
at com.sun.org.apache.xerces.internal.parsers.XML11Configuration.parse(XML11Configuration.java:770)[:1.8.0_121]
at com.sun.org.apache.xerces.internal.parsers.XMLParser.parse(XMLParser.java:141)[:1.8.0_121]
at com.sun.org.apache.xerces.internal.parsers.DOMParser.parse(DOMParser.java:243)[:1.8.0_121]
at com.sun.org.apache.xerces.internal.jaxp.DocumentBuilderImpl.parse(DocumentBuilderImpl.java:339)[:1.8.0_121]
at javax.xml.parsers.DocumentBuilder.parse(DocumentBuilder.java:205)[:1.8.0_121]
at org.apache.karaf.deployer.features.FeatureDeploymentListener.parse(FeatureDeploymentListener.java:316)[43:org.apache.karaf.deployer.features:4.0.8]
at org.apache.karaf.deployer.features.FeatureDeploymentListener.canHandle(FeatureDeploymentListener.java:166)[43:org.apache.karaf.deployer.features:4.0.8]
at org.apache.felix.fileinstall.internal.DirectoryWatcher.findListener(DirectoryWatcher.java:524)[4:org.apache.felix.fileinstall:3.5.6]
at org.apache.felix.fileinstall.internal.DirectoryWatcher.doProcess(DirectoryWatcher.java:456)[4:org.apache.felix.fileinstall:3.5.6]
at org.apache.felix.fileinstall.internal.DirectoryWatcher.process(DirectoryWatcher.java:361)[4:org.apache.felix.fileinstall:3.5.6]
at org.apache.felix.fileinstall.internal.DirectoryWatcher.run(DirectoryWatcher.java:312)[4:org.apache.felix.fileinstall:3.5.6]
In the events.log is no entry which correspond with my rollershutters.
I can see the the “mouse-over-effect” when i move the mouse over the arrows in your widget, but there is no reaction while doing the mouseclick.
The original habpanel slider is working fine, but your widget looks so much better…
What’s the item type that you use here and what binding is behind that?
The slider sends the target position as a number.
Looks like binding does not accept UP DOWN STOP commands but it accepts numbers.
You can try to edit the widget and change UP to 1 (or maybe 100) and DOWN to 0.
I use an innogy inwall rollershutter with a binding in “beta-state”.
You are right, taking numbers was the solution!
Many thanks for your support.
I like this widget a lot.
Unfortunately it is not responsive. When I open happanel on my tabled the view is messed up. Can I configure it differently that size will adapt depending on target device?
Can you see if this discussion helps your case Rollershutter /blind Widget
Thanks
Hi Pavel,
thanks for providing the widget!
Since I wanted to tweak the CSS a bit, I noticed that is actually pretty hard to adress the element. Therefore I started refactoring the code in way that the styles are now outside the HTML. That way it can be overrided from outside with the help of an additional CSS file.
Would you mind replacing the original json file with the following? (it does not have any change except the extracted CSS)
{
"template": "<style> div.shutterWidget { border: 1px solid white; border-radius: 15px; display: flex; position: absolute; background-color: initial; top: 0%; left: 0%; width: 100%; height: 100%; align-items: center; } div.shutterWidget div { border: 0px solid white; width: 100%; text-align: center; align-items: center; background-color: inherit; display: flex; justify-content: center; font-size: 2em; } div.shutterWidget button { border: 0px solid white; background: rgba(0, 0, 0, 0.5); color: white; height: 1.5em; width: 1.5em; float: left; font-size: 3em; margin-right: 12px; line-height: 50%; padding: 0 0 0 0; } div.shutterWidget span { border: 0px solid white; width: 100%; height: 75%; align-items: center; display: flex; padding-right: 12px; }</style><div class=\"shutterWidget\"> <div> {{ngModel.name}}</div> <span> <button ng-click=\"sendCmd(config.blind_item, 'UP')\"> <i class=\"glyphicon glyphicon-menu-up\"></i> </button> <button ng-click=\"sendCmd(config.blind_item, 'STOP')\"> <widget-icon iconset=\"'eclipse-smarthome-classic'\" icon=\"'blinds'\" size=\"45\" state=\"itemValue(config.blind_item)\" /> </button> <button style=\"margin-right: 0\" ng-click=\"sendCmd(config.blind_item, 'DOWN')\"> <i class=\"glyphicon glyphicon-menu-down\"></i>\n </button> </span></div>",
"name": "Blinds2",
"author": "Pawel Pieczul (refactored by Stefan Höhn)",
"description": "A control of blinds up/down/stop + status",
"settings": [
{
"type": "item",
"id": "blind_item",
"label": "Item",
"description": "Item of blinds"
}
],
"readme_url": "https://community.openhab.org/t/30181"
}
For an easier view of the code the following shows the uncompressed code:
<style>
div.shutterWidget {
border: 1px solid white;
border-radius: 15px;
display: flex;
position: absolute;
background-color: initial;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
align-items: center;
}
div.shutterWidget div {
border: 0px solid white;
width: 100%;
text-align: center;
align-items: center;
background-color: inherit;
display: flex;
justify-content: center;
font-size: 2em;
}
div.shutterWidget button {
border: 0px solid white;
background: rgba(0, 0, 0, 0.5);
color: white;
height: 1.5em;
width: 1.5em;
float: left;
font-size: 3em;
margin-right: 12px;
line-height: 50%;
padding: 0 0 0 0;
}
div.shutterWidget span {
border: 0px solid white;
width: 100%;
height: 75%;
align-items: center;
display: flex;
padding-right: 12px;
}
</style>
<div class="shutterWidget">
<div> {{ngModel.name}}</div>
<span>
<button ng-click="sendCmd(config.blind_item, 'UP')"> <i class="glyphicon glyphicon-menu-up"></i> </button>
<button ng-click="sendCmd(config.blind_item, 'STOP')">
<widget-icon iconset="'eclipse-smarthome-classic'" icon="'blinds'" size="45"
state="itemValue(config.blind_item)" />
</button>
<button style="margin-right: 0" ng-click="sendCmd(config.blind_item, 'DOWN')"> <i class="glyphicon glyphicon-menu-down"></i>\n </button>
</span>
</div>
cheers
Stefan