Design your SVG floorplan or dashboard for HABPanel with Inkscape

Chrishab · May 9, 2018, 7:27pm

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 · June 10, 2018, 12:35pm

Anyone have an idea with the character limitation issue?

ysc · June 11, 2018, 3:08pm

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 · June 18, 2018, 4:08am

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 · June 21, 2018, 5:49pm

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 · July 11, 2018, 2:56pm

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 · July 12, 2018, 9:37pm

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

Kim_Andersen · July 15, 2018, 10:14pm

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 · July 16, 2018, 10:44pm

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 · July 16, 2018, 11:25pm

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 · July 17, 2018, 12:05pm

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 · July 17, 2018, 6:55pm

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 · July 18, 2018, 1:58pm

You can click on the provided URL: http://errors.angularjs.org/1.5.11/$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:

bruce · July 22, 2018, 11:39pm

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 · July 26, 2018, 10:43am

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 · August 5, 2018, 5:27pm

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

Paul_F_Prinsloo · August 8, 2018, 4:16am

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 · August 8, 2018, 9:03am

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 · August 8, 2018, 10:52am

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 · August 10, 2018, 5:52am

is there a solution for this?