Design your SVG floorplan or dashboard for HABPanel with Inkscape

Tags: #<Tag:0x00007fd3169a18c0> #<Tag:0x00007fd3169a1780> #<Tag:0x00007fd3169a1640>

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