Design your SVG floorplan or dashboard for HABPanel with Inkscape

maxheartrate · September 19, 2019, 7:05pm

Hi Yannick, hi all,

I followed the great tutorial. But I am going nuts here because my light bulb won’t turn yellow in my floorplan. I presume there might be a mistake I made in the icon file. But I can’t figure out what it is.

Here is what is in my Inkscape SVG:

ng-class="{“light-on”: itemState(‘C_Office_Light’, true) == ‘ON’}" style=“fill:#00ff00;fill-opacity:1;stroke:none”>

and my CSS:


.light-on {
    fill: #ffe600 !important;
}

When I apply this to a rectangle drawn in Inkscape, the color change works. When I apply it to an icon, nothing happens. The color will stay the same, no fill.

Any idea what could be wrong?

Thanks, Max

@ysc

RolfV · September 19, 2019, 9:36pm

Are you sure you are setting this to the right shape? So if you have selected the shape you are setting the ng-class for, will the fill of your icon change if you actually try to give it a different color? You might have selected the wrong entry in a icon with multiple “nested” shapes.

maxheartrate · September 20, 2019, 5:36am

Thank you for replying. I have tried several different icons. On my first ones, the color doesn‘t change when I click on a different color in Inkscape. But on others it does work.

Here is what I do:

Import an icon into Inkscape
Select the imported icon
Change color in Inkscape, e.g. from black to grey. In the XML editor a style atribute appears with the new color and the icon changes.
Copy and paste the Insert working ng-class for my item from the working rectangle to the newly important icon

Result: No color change when item is ON in Habpanel.

maxheartrate · September 24, 2019, 5:10pm

Hi again,

Your thought actually brought me on the right track. I clicked down to the bottom layer of the graphics and now it works.

Thank you!

kriznik · October 6, 2019, 7:56pm

@ysc thank you for you great tutorial!

one additional question Can be output numbers somehow formatted as in OH?
I mean

ng-bind 
itemState('Workroom_Humidity') + '%'

can produce something like

48,234%

Which is indeed in OH solved by

Number  Workroom_Humidity       "Humidity [%.0f %%]"

But how to do the same in SVG?
Thanks!

edit: nevermind, I found it

(itemValue('item') | number:0) + " °C"

Stbowling · October 6, 2019, 9:58pm

@lzaman not sure if it will help but possibly you can extract the code you need from this thread in the forum:
(Show Current Sun Position and Shadow of House (Generate SVG))

kriznik · October 7, 2019, 2:16pm

have you solved this issue somehow?
Your suggested method does not work in chrome and safari and this:

.rotate{
    animation: rotate 5s linear infinite;
    transform-box: fill-box;
    transform-origin: center;
}
  
@keyframes rotate {
    from { transform: rotate(0deg) }
    to { transform: rotate(360deg) }
}

code above does rotate it properly, but at upper left top corner of the habpanel (where name of the dashboard is) so it’s out of SVG. Which I’m now trying to solve to stay at original place indeed.
Not sure why it is shifting self tho

edit: ah so it does look like it’s an issue with symbols. Simple rectangle works as expected… damn
edit2: solved by converting symbol to path and then it works … cheers

lzaman · October 20, 2019, 1:43pm

Hi Steve,

You sparked an idea here: I can try to modify the shadow.py module to use a base reference design as SVG (i.e. the habpanel floorplan i design in inkscape) in which I foresee an xml element (a space) to inject the shadow.py svg data into…
Food for thought…

Thanks

Stbowling · October 22, 2019, 1:16am

I hope it works for you,
You could also consider storing them in a data base as influxdb.
That being said I think an xml file would be a better option.

Birgit_Lachner · October 27, 2019, 7:12pm

Hi …
well, beside the first little problems with the right names, a missing symbol, … the way to add the floorplan was really amazingly easy. Even to add new colors, …

I ask myself, how I can add actions to the buttons, like opening a new webpage. For example to open the page of the 3D-Printer-Control or others.

Regards, Birgit

Stbowling · October 27, 2019, 10:20pm

@lzaman If you find a way to inject the data from the shadow.pi file into a .xml file I would be very interested in how you did it.
Thank you in advance for any help you can provide.

Steve-

Stbowling · October 27, 2019, 10:24pm

Would this be done in a rule? or possibly another .py file.
Please excuse my previous comment .pi … I must be hungry and I was thinking of pie.
Steve-

lzaman · October 28, 2019, 1:58pm

Hi Steve,
I have not managed it yet but my thought is like this:
You use inkscape to design your floorplan.
This file should contain a tag which will be replaced by the shadow SVG code.
The python file then dynamically opens the inkscape svg, looks for the tag, calculates the shadows and injects them in that tag… saving it back to the finally used svg file.
This file will be updated dynamically through the Sunset_Azimuth item update…

But like I said, havent been able to implement it yet.

Best regards

Birgit_Lachner · October 30, 2019, 7:43pm

Hi Dome,
can you explain a bit more, how the Dashboard-Item should be defined. I don’t have any idea, how to do that?

Thanks, Birgit

lzaman · November 3, 2019, 1:40pm

Hi
So I have finally got a modification done. Now my floorplan is updated via this python script which will take a base file and dynamically add the shadow to the floorplan. The only issue though is that the shadow basically relies on a dynamic url (object with {{itemState}} trigger) to refresh the svg and the floorplan layout uses ng-include to inject the item-stream via angular. I have no knowledge of both of these systems so I’m kind off stuck with a floorplan that has the shadow when initially loading the habpanel page, but only updates the other items (not the shadow as the svg itself is not refreshed)

Any thoughts on how this could be solved?

Best regards
Lenny Zaman

MDAR · November 5, 2019, 5:18pm

Hi

I’m really having fun recreating a UI with SVG.

There is just one thing that I’m struggling with.

In a Widget, it is possible to read an itemValue and add to it.

For example, read a value of 10, add 5 and update the Item.

<button class="btn-pad btn-lg.round" ng-click="sendCmd(TheHour, +itemValue(TheHour)+5)"><i class="glyphicon glyphicon-chevron-up"></i></button>

Taken from the widgets used here - Individual Alarm clock for each Day of week, with adjustable duration

If I try a similar code in the SVG file, the Item value is appended, rather than added.

ng-click
sendCmd('Church1ON_ALARM_SUN_M',+(itemValue('Church1ON_ALARM_SUN_M')+5))

Pressing the button a few times results in

10555555

Rather than updated values of :

Have any of you got an idea of what I can try?

**** update ****

This works as expected…

ng-click
sendCmd('Church1ON_ALARM_SUN_M',(itemValue('Church1ON_ALARM_SUN_M')-5))

Which gives this

45
40
35
30
25
20

But changing it back to + just appends it like a string

Kim_Andersen · November 5, 2019, 5:40pm

I havn´t tried myself. But maybe this makes sense?
https://docs.angularjs.org/api/ng/directive/ngClick

MDAR · November 5, 2019, 5:42pm

I saw that too.

I don’t understand why - (minus) works, but + appends
(But in that example, + behaves with numbers as you’d expect)

Kim_Andersen · November 5, 2019, 5:59pm

Thats is odd. I have no idea how to then.
In that case I guess the solution is to use another item, and then use a openhab rule for adding to the exsisting item. A bit ackward solution, but + (plus) doesnt seem to behave as it should.

MDAR · November 5, 2019, 6:00pm

I could…

But there are quite a few to do…
And why of why does it work properly in a widget, but not an SVG?