Design your SVG floorplan or dashboard for HABPanel with Inkscape

[Chrishab (Christian)]

Hi @ysc,

Thank you so much for this tutorial!
I converted my floorplan to SVG and it works great.

One thing that I would like to share though: I had issues with text elements in the SVG (they would just not show in HABPanel). The solution:

Inkscape inserts text as “Flowed Text” and it has to be converted to an actual text element (select the flowed text element, click “Text” >> “Convert to Text” in the toolbar)

Then the text will show up just fine (and with it the item values).

[tomjones (Thomas)]

Anyone have an idea with the character limitation issue?

[ysc (Yannick Schaus)]

That seems very odd. Can you open the developer tools and inspect the element you use ng-class on? You should see them added or removed in real time if it works, then try with > 60 characters and check what happens, you may also have errors in the Console tab.

[Paul_F_Prinsloo]

Hello I have been having fun with this and cant really add much to the floor plans as there is much better than what I have. I have started with my “Solar Page” and it is working well but I would like to add some animation to it.
Is there a way to add a “GIF” bar to the screen to animate the direction of the energy flow? Currently I am using a arrow but an animation will look super. I have looked at SVG Sircus and even created a bar that pulses but I can seem to get the animation to work.
Best regards
Paul

[tomjones (Thomas)]

Hey Yannick,

thank you so much for the hint with the developer console!
This was really helpful because I could identify some character issues.

[Kim_Andersen]

@ysc

Finally, create a CSS file and put in conf/html/floorplan.css with the content below - you can do lots of complex things, but this will simply define the CSS class light-on with a yellowish fill color ( !important is here to override whatever fill color Inkscape would have applied directly to the element or its children):

sorry, this is not an openhab issue.. but I´m stuck on this.
Can anyone tell me how the heck I create a CSS file from Inkscape? i can´t seem to find it

[Kim_Andersen]

Okay, I figured it out. Inkscape does not have css creation.. I have to build one myself

[Kim_Andersen]

@ysc

You can use parentheses to apply a filter only to a certain part of an expression (the ng-bind value or the contents inside the double curly braces), like this:

ng-bind="(itemState('rweTemp5a6130') | number:1) + ' °C'"

Exactly where is the above quote suppose to go?
I´m struggling with temperature and to many decimals as well, but I cant get this to work..

if I use this in inkscape it works fine, but to many decimals.
I can´t insert the above quote, I end up with and N/A.

[ysc (Yannick Schaus)]

Your item’s state looks like it includes the Unit of Measurement, so formatting the value it is more tricky. It’s a common issue right now. You have to separate the value from the unit first to get a raw number, then perform the formatting.

Try:

'Temperature: ' + (itemState('NetatmoUdendRsModule_Temperature').split(' ')[0] | number:1) + '°C'

The .split(' ')[0] is the part removing the unit after the space, and taking the number only.

[Kim_Andersen]

@ysc

‘Temperature: ’ + (itemState(‘NetatmoUdendRsModule_Temperature’).split(’ ')[0] | number:1) + ‘°C’

I´m trying to edit it directly in the svg file, (it´s a bit easyer). But I belive the syntax is wrong (ie " vs ').

This is how it looks in the raw svg file atm working but with to many decimals:

     ng-bind="&quot;Temperatur: &quot; + itemState('NetamoUdendRsModule_Temperature')"><tspan

When I insert your quote directly, I get not value from the measurement, but the text, Temperatur: is displayed allright.

This is really a pain

[ysc (Yannick Schaus)]

@Kim_Andersen

I´m trying to edit it directly in the svg file, (it´s a bit easyer). But I belive the syntax is wrong (ie " vs ').

Simple and double quotes are both valid string delimiters.

@Kim_Andersen

When I insert your quote directly, I get not value from the measurement, but the text, Temperatur: is displayed allright.

Have a look at the Javascript console then (in the Chrome developer tools), there’s probably an error reported there.

[Kim_Andersen]

@ysc

Have a look at the Javascript console then (in the Chrome developer tools), there’s probably an error reported there.

Hmm, yes there are problems. But I dont have the knowlegde to fix it as I understand none of this:

vendor.js:119 Error: [$parse:syntax] http://errors.angularjs.org/1.5.11/$parse/syntax?p0=%3A&p1=is%20an%20unexpected%20token&p2=12&p3=Temperature%3A&p4=%3A
    at http://10.4.28.237:8080/habpanel/vendor/vendor.js:6:426
    at throwError (http://10.4.28.237:8080/habpanel/vendor/vendor.js:233:200)
    at t.ast (http://10.4.28.237:8080/habpanel/vendor/vendor.js:225:79)
    at Hd.compile (http://10.4.28.237:8080/habpanel/vendor/vendor.js:251:399)
    at nc.parse (http://10.4.28.237:8080/habpanel/vendor/vendor.js:263:213)
    at g (http://10.4.28.237:8080/habpanel/vendor/vendor.js:127:222)
    at b.$watch (http://10.4.28.237:8080/habpanel/vendor/vendor.js:140:442)
    at Object.<anonymous> (http://10.4.28.237:8080/habpanel/vendor/vendor.js:278:339)
    at http://10.4.28.237:8080/habpanel/vendor/vendor.js:16:71
    at sa (http://10.4.28.237:8080/habpanel/vendor/vendor.js:82:244) <text xml:space="preserve" style="font-style:normal;font-weight:normal;font-size:4.23333311px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332" x="17.682404" y="105.60394" id="text4089" ng-bind="Temperature: " +="" (itemstate('netatmoudendrsmodule_temperature').split('="" ')[0]="" |="" number:1)="" '°c'="" class="ng-binding">

[ysc (Yannick Schaus)]

You can click on the provided URL: AngularJS

The page will show you the actual message and some advice.
Your ng-bind looks completely borked, check your SVG file:

<text xml:space=“preserve” style=“font-style:normal;font-weight:normal;font-size:4.23333311px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332” x=“17.682404” y=“105.60394” id=“text4089” ng-bind=“Temperature: " +=”" (itemstate(‘netatmoudendrsmodule_temperature’).split('=“” ')[0]=“” |=“” number:1)=“” ‘°c’=“” class=“ng-binding”>

[bruce (sir)]

hello

i think i have a problem with floorplan.css file.

if i delete my floorplan.css (or if i chnge is name) my ng-class continue to works, if i want write a new thing it’s doesn’t work with my ng-class (exemple with light-on).

my css file is in opt/openhab2/conf/html. is there another css.file ?

thanks

[Kergilo (Antonio Jose)]

Hi there, I have some problems and I hope you can help me .

I have a bulb icon that I would like to change to another bulb icon when I click on it, but I can’t find the way to do it. I am trying to change the “xlink:href” value from “.CSS” and from the xml editor but i can’t make it work.

I also would like to modify the value of a “Temperature” variable. I did 2 buttons, one for add 1 and other for substract 1, but only works the second one:

• ng-click → sendCmd(‘Temperatura’, itemState(‘Temperatura’) + 1)
• ng-click → sendCmd(‘Temperatura’, itemState(‘Temperatura’) - 1)

Now I’m trying to set a rectangle where I input a “Temperature” value with ng-model, but it doesn’t work. Is there any way to do this?

Thank you ^^

[Mike_Hofmann]

@ysc

if you build something with SVG, please show off your results here

thanks for showing the steps. I use it for controling my xiaomi roborock zone cleaning feature.

[Paul_F_Prinsloo]

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.

HABPannel demo

[Kim_Andersen]

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?

[Paul_F_Prinsloo]

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

[novoplan (Joe)]

@jh1777

@ysc
A bit similar to what @shorty707 was asking:
How could I add a slider like that AngularJS Slider to my floorplan controlling light percentage or blind control?

is there a solution for this?