Design your SVG floorplan or dashboard for HABPanel with Inkscape

Tags: #<Tag:0x00007f183013dcc0> #<Tag:0x00007f183013da68> #<Tag:0x00007f183013d860>

(Christian) #63

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

(Thomas) #64

Anyone have an idea with the character limitation issue?

(Yannick Schaus) #65

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) #66

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

(Thomas) #67

Hey Yannick,

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

(Kim Andersen) #68

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 :frowning:

(Kim Andersen) #69

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

(Kim Andersen) #70

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.

(Yannick Schaus) #71

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.


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

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 :frowning:

(Yannick Schaus) #73

Simple and double quotes are both valid string delimiters.

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

(Kim Andersen) #74

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]$parse/syntax?p0=%3A&p1=is%20an%20unexpected%20token&p2=12&p3=Temperature%3A&p4=%3A
    at throwError (
    at t.ast (
    at Hd.compile (
    at nc.parse (
    at g (
    at b.$watch (
    at Object.<anonymous> (
    at sa ( <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">

(Yannick Schaus) #75

You can click on the provided URL:$parse/syntax?p0=%3A&p1=is%20an%20unexpected%20token&p2=12&p3=Temperature%3A&p4=%3A

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

(sir) #76


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 ?


(Antonio Jose) #77

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

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) #78

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

(Paul F Prinsloo) #79

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.

(Kim Andersen) #80

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

(Paul F Prinsloo) #81

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 :slight_smile:

(Joe) #82

is there a solution for this?