Design your SVG floorplan or dashboard for HABPanel with Inkscape

novoplan · August 10, 2018, 10:27am

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?

smak01 · August 12, 2018, 9:21pm

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')

novoplan · August 13, 2018, 4:38pm

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.

stefan.hoehn · August 16, 2018, 4:31pm

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…

Kim_Andersen · August 16, 2018, 9:17pm

I like it very much
Is it done using Inkscape?
I dont see any trace of HabPanel, how did you do that?

stefan.hoehn · August 17, 2018, 4:53am

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…

bruce · August 17, 2018, 7:46am

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

Kim_Andersen · August 20, 2018, 2:58pm

How to get UTF-8 support when doing SVG´s in inkscape?

Kim_Andersen · August 21, 2018, 9:17pm

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???

Stefano_Bordini · August 23, 2018, 7:44pm

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

novoplan · August 27, 2018, 7:31am

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.

Stefano_Bordini · August 27, 2018, 12:13pm

Can you post example code?

novoplan · August 27, 2018, 1:14pm

using that for my buttons:

and this for the layer:

Stefano_Bordini · August 27, 2018, 1:31pm

thanks

bruce · September 3, 2018, 6:52pm

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

scootaash · September 22, 2018, 3:31pm

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

NCO · October 8, 2018, 2:26pm

That looks really amazing!
Would you be willing to share your floorplan code as a starting point for others?

jh1777 · October 8, 2018, 6:49pm

Yes, sure - it is right away from my config, so you will have to change everything to match to your item names etc.
And thank you!!

floorplan

NCO · October 9, 2018, 6:18am

Thanks, Jörg.
I don’t see the code though, just a screenshot.
did you forget to attach it or di I get something wrong?

jh1777 · October 9, 2018, 8:19am

Hi,
yes, it is not a screenshot - I attached the svg file itself. The code is inside if that on every object in svg. Please use incscape for that.

Kind regards, Joerg