I have been playing with Inkscape and its quite a lot of fun : Here is a short demo of my setup so far.
Still a working progress but it does give a general idea.
4 Likes
This is awesome… I simply got to learn this stuff!!
I don´t need the options of switching light on/off or any thing else from the SVG. I just want it to be an overview of everything.
I specially like the present detection effect you have made… And your Solar panel… wow!!!
Could you share some knowlegde, cause I want to learn? 
Hello Kim
Most of what was done there comes from information that I got from this thread. I know there should be a better way of doing things but I used a mix of rules ( Created in node red) and making the item state transparent via css. If there is enough interest I will consider doing a vid on it. But I am by no way an expert on the matter.
Glad you liked it
is there a solution for this?
1 Like
i’m using inkscape for floorplans. i also try to use the widget-slider.
<div ng-init="menu='layer1';showslider=true"></div>
<div oc-lazy-load="'/static/drawing.css'">
<div ng-include="'/static/drawing.svg'"></div>
<div ng-show="showslider">
<div ng-init='model1={"name": "Slider1", "item": "virtual_slider", "hidelabel": true, "vertical": true, "floor": 0, "ceil": 100, "step": 1, "hidelimits": true, "hidepointer": true, "inverted": false }'>
<widget-slider style="left: 100px; top: 400px;" ng-model="model1" />
</div>
</div>
</div>
in my “drawing.svg” there is an object which changes the “showslider”-variable to false by the ng-click attribute.
but the div wont disappear! any ideas?
1 Like
I have seen a couple posts about the slider control for dimmers/blinds. I ended up going a slightly different direction.
I was struggling a bit with how I wanted to implement my dimmers on my floorplan. I ended up going with the modal popup and some canned values.
I used the 4-way blind/dimmer widget as inspiration. I was trying to used a widget but I was not able to make it work in the template. I don’t know if it possible or if I was doing it wrong.
Probably ways to improve but it is working for me…
<div ng-init="dimmerName = {value: ''};"></div>
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<a ng-click="$close()" class="pull-right btn btn-danger">X</a>
<h3 class="modal-title">{{getItem(dimmerName.value).label}}</h3>
</div>
<div class="modal-body" style="background: rgba(0,0,0,.9);">
<div class="dimmerControl" ng-class="getItem(dimmerName.value).state > 80 ? 'dimmerValueOn' : 'dimmerValueOff'">
<button class="dimmerButton" ng-click="sendCmd(dimmerName.value, 100)">ON</button>
</div>
<div class="dimmerControl" ng-class="getItem(dimmerName.value).state > 60 ? 'dimmerValueOn' : 'dimmerValueOff'">
<button class="dimmerButton" ng-click="sendCmd(dimmerName.value, 80)">80</button>
</div>
<div class="dimmerControl" ng-class="getItem(dimmerName.value).state > 40 ? 'dimmerValueOn' : 'dimmerValueOff'">
<button class="dimmerButton" ng-click="sendCmd(dimmerName.value, 60)">60</button>
</div>
<div class="dimmerControl" ng-class="getItem(dimmerName.value).state > 20 ? 'dimmerValueOn' : 'dimmerValueOff'">
<button class="dimmerButton" ng-click="sendCmd(dimmerName.value, 40)">40</button>
</div>
<div class="dimmerControl" ng-class="getItem(dimmerName.value).state > 0 ? 'dimmerValueOn' : 'dimmerValueOff'">
<button class="dimmerButton" ng-click="sendCmd(dimmerName.value, 20)">20</button>
</div>
<div class="dimmerControl" ng-class="getItem(dimmerName.value).state == 0 ? 'dimmerValueOn' : 'dimmerValueOff'">
<button class="dimmerButton" ng-click="sendCmd(dimmerName.value, 0)">OFF</button>
</div>
</div>
</script>
<div width="100%" height="100%" oc-lazy-load="'/static/floorplan/floorplan.css'">
<div ng-include="'/static/floorplan/atest.svg'"></div>
</div>
Relevant styles from the stylesheet
.dimmerControl {
background: rgba(0,0,0,0.5);
border-radius: 10px;
border: 1px;
border-style: solid;
margin-top: 8%;
margin-left: 2%;
margin-right: 2%;
}
.dimmerValueOn {
border-color: rgb(0,255,0) ;
}
.dimmerValueOff {
border-color: rgb(255,255,255) ;
}
.dimmerButton {
color: rgb(255,255,255);
border: none;
background: rgba(0,0,0,0);
font-size: 1.2em;
height: 100%;
width: 100%;
padding: .75em;
}
Then, in the svg file, on the ng-click for each dimmer light, set the name of the Item and then open them modal window. In the code below replace “KitchenLights” with your item name.
dimmerName.value='KitchenLights'; openModal('myModalContent.html', true, 'sm')
2 Likes
ok, thats a workaround for the problem.
i did also my workaround using ng-mousedown / ng-mouseup or for touchscreens ng-touchstart / ng-touchstop.
my first try only uses the mousedown / up.
here is my svg example:
in my template i’m using my own angular controller for the dimming interval
<div oc-lazy-load="'/static/interval.js'">
<div ng-init="mydimmer.item='';mydimmer.direction=''"></div>
<div ng-app="dimmer" ng-controller="ItemController">
<div oc-lazy-load="'/static/floorplan.css'">
<div ng-include="'/static/floorplan.svg'"></div>
</div>
</div>
</div>
and thats my interval.js
angular.module('dimmer', [])
.controller('ItemController', function($scope, $interval) {
// store the interval promise in this variable
var promise;
// starts the interval
$scope.dimmerstart = function() {
// stops any running interval to avoid two intervals running at the same time
$scope.dimmerstop();
// store the interval promise
// first 'click' starts single dimming
dimming();
promise = $interval(dimming, 400);
};
// stops the interval
$scope.dimmerstop = function() {
$interval.cancel(promise);
};
// starting the interval by default
//$scope.start();
// stops the interval when the scope is destroyed,
// this usually happens when a route is changed and
// the ItemsController $scope gets destroyed. The
// destruction of the ItemsController scope does not
// guarantee the stopping of any intervals, you must
// be responsible for stopping it when the scope is
// is destroyed.
$scope.$on('$destroy', function() {
$scope.dimmerstop();
});
function dimming() {
// get the currentvalue of the selected item
var cv = $scope.getItem($scope.mydimmer.item).state-0;
if ($scope.mydimmer.direction == 'up' ) {
if (cv <= 90) {
$scope.sendCmd($scope.mydimmer.item,cv + 10);
}
else {
$scope.sendCmd($scope.mydimmer.item,100);
$scope.dimmerstop();
}
}
if ($scope.mydimmer.direction == 'down' ) {
if (cv >= 10) {
$scope.sendCmd($scope.mydimmer.item,cv - 10);
}
else {
$scope.sendCmd($scope.mydimmer.item,0);
$scope.dimmerstop();
}
}
}
});
that works for me.
1 Like
This is what I have implemented which runs on an iPad which is mounted to the wall in the living room:
- it shows the basement of my house (with the option to switch to the first flow)
- Clicking on the lamps allows me to turn them on and off and this is shown by a yellow or grey bulb.
- Clicking on the margins of the living room switches a whole range of lamps (which is shown by the yellow glow)
- The dimmer button opens a popup with a slider that allows me to dim the dining room lamp.
- I can control all of my rollershutters individually.
- I can control groups of rollershutters, eg. the security group (which are all shutters that I like to close when I leave home).
- The shutters are blue (i see the blue sky…) when they are open, grey (like a wall) when they are closed. If they are somewhat in the middle, they turn from blue to grey gradually (see shutter at the door at the right bottom).
- I can turn on and off my coffee machine
- I can see when windows are opened (red window on the bottom left)
- I can see when the main door has not been closed (see door open in red - closes if closed)
- There are temperature sensors all around the house that show their temperature.
Hope you like it…
4 Likes
I like it very much 
Is it done using Inkscape?
I dont see any trace of HabPanel, how did you do that?
Exactly. I have used a template widget and added some small html with basically a few divs and an SVG plus some JavaScript. I created the SVG with the help of inkscape. I cut away the upper part (the hamburger menu ) in the screenshot and the title of the widget which is hard to get rid of…
hello,
verry good works, could you tell me how you do for have a differents draw (how you configur the button system, house garage etc…)
thanks
How to get UTF-8 support when doing SVG´s in inkscape?
I know this is Inkscape question. But I cant seem to find the answer in their doc.
Last night I created a floorplan, and in Inkscape I inserted alot of ng-binds for temperature in each room, which works fine in HabPanel.
THis is how it looks right now:
Beside som problems with UTF-8, everything is working just fine.
Today I would continue to do some changes to the svg… But when I load the svg file into InkScape, all the ng-binds are gone int he XML editor? I even loaded a copy directly form the path in Habpanel…
Does anyone know whats going on. How can they dissapear like that. And why???
hello everyone I use a template to display a .svg image, I would like to be able to change image with a button so as to display all the floors of the house.some suggestion
create some layer and use ng-show/ng-hide:
set some variable (layer = ‘floor1’) for your button, and then set the ng-show for the layer (layer == ‘floor1’)
i use this to show different floorplans, radio, tv and so on.
Can you post example code?
thanks
hello
i need your help for my roller shutter. i want differents design when the rollers are closed or open to 0% to 10 an 20% to 30% etc…
i use ng-class : {“switch-on”: itemState(‘id_volet_bureau’) ==‘90’ ||
it’s works but the problem is i must to create a lot of line. could you tell me how i could show a picture when the roller shutter is 10% to 20 % and haw can i hide the same picture when he is not 10% to 20%.
thank you verry much
Hi there. Love this! Getting there with a basic design. I wonder if anyone could help with a few things?
- How do I get an angularJS expression to do two things? (e.g. I want to turn on 2 lights without grouping them in OH)
- Is there any way to get a single item in the SVG to do two things e.g. turn on a light with a tap but open a dialog box with a hold, dblclick etc?)
- How do you show images? i.e. an openhab image item (Sonos album art!)
Anyone with one of the cool advanced ones willing to share their SVG? That would be soooo helpful!!
Cheers