Design your SVG floorplan or dashboard for HABPanel with Inkscape

EDIT. I have two problems.

  1. I cant get the svg icon to change… (this has become secudary now because of #2).
  2. I simply cant get ng-class to work for the PIR. And I fail to understand why.

I made two new objects in Inkscape.
They´re are totally identical, except one is using ng-class from a door contact, and the other is using ng-class from a proxy item of the PIR involved.
They both uses the same css id.

Problem:
Only the door contact is working.

This is my items:

Switch      ZWaveNode5ZW100MultiSensor6_MotionAlarm      "Multisensor6 PIR Alarm [MAP(motion.map):%s]"      <cum_motion>  	(gMotion)	{channel="zwave:device:controller:node5:alarm_motion"}
Switch      ProxyMultiSensor       "Multisensor6 PIR Alarm [MAP(motion.map):%s]"

And this is a small rule to have the proxy behave like the original:

rule "Proxy Multisensor6"
when
	Item ZWaveNode5ZW100MultiSensor6_MotionAlarm changed
then 
    if(ZWaveNode5ZW100MultiSensor6_MotionAlarm.state == OFF)
	ProxyMultiSensor.sendCommand(OFF)
    else
	ProxyMultiSensor.sendCommand(ON)
end

This is two screendumps of the setup on Inkscape. First the door contact:

And the proxyitem of the PIR:

Normally I would say, this is due to wrong state of the proxyitem.
But this is the tail log from openhab:

2019-05-11 13:52:11.572 [ome.event.ItemCommandEvent] - Item 'ProxyMultiSensor' received command OFF
2019-05-11 13:52:11.596 [vent.ItemStateChangedEvent] - ProxyMultiSensor changed from ON to OFF
2019-05-11 13:54:30.007 [ome.event.ItemCommandEvent] - Item 'ProxyMultiSensor' received command ON
2019-05-11 13:54:30.038 [vent.ItemStateChangedEvent] - ProxyMultiSensor changed from OFF to ON
2019-05-11 13:54:49.614 [ome.event.ItemCommandEvent] - Item 'ProxyMultiSensor' received command OFF
2019-05-11 13:54:49.620 [vent.ItemStateChangedEvent] - ProxyMultiSensor changed from ON to OFF
2019-05-11 13:54:54.325 [ome.event.ItemCommandEvent] - Item 'ProxyMultiSensor' received command ON
2019-05-11 13:54:54.355 [vent.ItemStateChangedEvent] - ProxyMultiSensor changed from OFF to ON
2019-05-11 13:55:15.613 [ome.event.ItemCommandEvent] - Item 'ProxyMultiSensor' received command OFF
2019-05-11 13:55:15.621 [vent.ItemStateChangedEvent] - ProxyMultiSensor changed from ON to OFF

I have tried with the original PIR item as well (I was using the original PIR item all the time and it didn´t work, In a try to find a reason for not working, I thought it might be due to the item name. So I created the proxy item indsted). Didn´t do any good either…

Can someone explain what the heck is going on? I really dont get it :frowning:

This is the screendump from habpanel when the door contact is OPEN:

EDIT…
Figured the problem… I have to use ‘, true’ in the argument, even though this is not a trasnform item…
Like this:
itemState(‘some_pri’, true) == ‘ON’

The my PIR sensors are working.

Ohh I did… I have spend 2 days now trying eveything… But see above… I have two problems… :slight_smile:

New question…

How to use ng-class with a dimmer…
It´s not ON/OFF, so how to use a dimmer values 0-100%.

I really wish there is somewhere to read about this stuff, but because it´s a mix of svg, angularJs and openhab, it´s pretty hard to know what syntax to use. I have tried many combinations, but I cant guess this syntax for using a dimmer.

That’s something I think I can explain, that’s just plain Javascript. However, what do you want to achieve exactly?
Do you want to get an ON/OFF kind of behaviour, and if yes, what kind of threshold would you want, or would you want some discrete levels? or… ?

I just want my icon to show that the light is on. No need for how much it´s dimmed. just ON/OFF.

Simplest way would be something like

ng-class {'light-on': itemState('dimmedLight') > 0}

and then set the default appearance for the situation where the light is dimmed to 0, meaning it is off.

Alternative solution could be using the ternary operator (an in-line if-else statement):

{ (itemState('dimmedLight') > 0) ? "light-on" : "light-off" }

This one worked great. I didnt try the other, as I believe it would be the same result, right?

I use a version of this with a series of button to show the (current) level and toggle the levels between 0 and the value of the button.

Yeah in principle the same result, but then you can set the light-on and light-off style separately in your CSS. Just a matter of what you like best.

It sounds very advance to me?
I have struggled for a couple of days now just to get the damn motion detection icon to behave… I gave up using two svg.s, Insted I edited the icon and just used fill insted… Result is the same but much easyer and simple, which is my kind of level in this inkscape/svg damn stuff. Inkscape is driven me nuts… Ever worked with it? Everytime I grap and hold an icon to move it, it moves the whole project… Arrrgh :face_with_symbols_over_mouth: :slight_smile:

I like whatever works and is simple…This one works, and it´s simple… I couldn´t be more pleased :smiley:

Layers man, work with layers :slight_smile:

Create a layer

Right click an element and choose “Move to layer”

https://www.google.com/search?q=inkscape+layers+tutorial&oq=imkscape+layers

I lock the layers I don’t want to work with.

Apparently… It’s possible to show and hide layers with openHAB2 item states, but I haven’t got that far yet.

(I use InkScape for all my DTP stuff, so far my little brain is coping well with it, but I did used to work (commercially) in CorelDraw 8 many years ago)

Haha yeah, I had thought about it… But I had to learn how to use layers. And that wasn´t my first choise… Insted I kill myself with dragging around with the whole main project :smiley:

1 Like

If you ever get that far, I might be interested in how to…
My floorplan is becoming rather crowded by now. (I have to limit myself to 900x600px due to low resolution of the 9.6 inch tablet I´m using).
My main idea with this floorplan was originally to make it a monitor only. But if I could enable/disable layers from a button on the main floorplan, I believe this would be a great way to deal with the crowded objects. Then I could have one layer for security/present detection etc. One layer for climate, one for ligting etc.
I know I´ll have to learn to work with layers then, but I guess thats just yet another bump on the road :slight_smile:

Hi

I haven’t had a chance to look into how to toggle layers in SVG files, someone mentioned it earlier in this thread you so you might be better off scrolling through and finding the comment. No 13 ?

Alternatively

I make use of the

Switch dashboard with item value

When this item changes to a dashboard’s name, switch to it:

feature of HabPanel.

then in the SVG file I simply have a set of “menu” buttons that force habpanel swap to the new page.

the down side is that you’d need separate string Items and Habpanel / SVG configuration for each device, unless you want every panel to swap to the new page.

It is actually pretty easy… I got it working with virtuel (proxy) switches toggling two layers with two switches.

  1. Define your layer (naming). <- Very important.
  2. Set the ng-class for the layer.
  3. Define a virtuel switch.
  4. Add the switch to the SVG icon or anything, and use it to toggle the specific layer…
  5. Define the class ID in the CSS wether to display or hide the layer.
    It is a simple as that.

Here is a step/picture guide:

Step 1. Define layer (name). And set ng-class for the layer:


Notice the layer “Pir”, it´s the name.
In the xml editor, find that specific layer, and insert the ng-class ID for the layer… In this case it´s called: layer-visible, and it will trigger as soon as the item PirDisplay state is ON. This is because I have chose the layer to be invisible as default. (see the layer editor, it´s invisible).

The class ID should be defined in the CSS like this:

/* Hide Layers */
.layer-visible {
  display: initial !important;
}
.layer-hidden {
  display: none !important;

Notice I have two ID´s. One for visible layer and one for invisible layer. I only use layer-visible in this example. But layer-hidden does the opposite, it will hide the layer which I could use, if I want to hide a layer which has been set to visible by default.

Next step, we need to have a trigger. I have chosen to use a virtuel switch in openhab. It´s defined just like any other item switch.

items:

Switch   PirDisplay     "PIR display SVG [%s]"          <switch>
Switch   ClimaDisplay   "Clima display SVG [%s]"        <switch>

All thats needed now (in this case) is to trigger the layer switch. I have chosen to create a very simple self-made button in Inkscape, just to make it simple and working, like this:

Notice the trigger (deep-red circle) is set with the ng-click meaning: Whenever I click this button, it will trigger the PirDisplay virtuel item (switch) in openhab, and then this will trigger the layer “Pir” (screenshot 1).
I have added a ng-class to the trigger as well, so the button will change color, when the very same item turns to ON. But thats just pure pratical. It has nothing to do with the show/hide layers.

Thats it… Not really any rocket science in this one. It just took me a few mintues to figure :slight_smile:
Hope it makes sense and useable to anyone. Otherwise ask…

2 Likes

Hello All :slight_smile:

I’ve just completed a commercial job using Osram Sympholight and to say the end user experience lacks the level of detail that I’ve come to expect from openHAB2 is an understatement.

So as an experiment, I’d like to see if I can achieve what Sympholight can’t in HabPanel, with an SVG file.

So before I start laying up the nuts and bolts, may I ask if anyone has any idea how I might achieve the one thing that we really wanted to offer the client, but just couldn’t.

Imagine a building with a couple of RGB lights on the outside.

What we wanted to do was provide a layout or image of the building in the UI and insert overlays that changed colour to match the actual output state of the lamps.

Much like how a colourpicker works, but without interaction.

I’m happy to (find a way to) convert the HSL colourpicker value into 6 digit hex, so is there anyway to use this value to set the colour of an element in an SVG file?

(Or better still, can the HSL value be used directly?)

Many thanks in advance,

Stuart

___ update ____

I’ve found this, but haven’t experimented with it yet.

**** Working notes ****

[ng-style]="{ fill: color }"

Would this work ?-

ng-style "{ fill: hsl(itemState(‘ColourPicker’)) }"

Hello everyone,
I’m having a slight issue with ng-style in the svg.
I’m trying to use transform:rotate(angle,cx,cy) on a path (d=“m 4250,11000 h 500”)
Adding this via xml in Inkscape works just fine but for some reasong when I add it in ng-style I never get a result
The angle is coming from my Local Sun thing, it’s the sun’s azimuth in radians
this is my ng-style xml entry
{transform:rotate(((itemState(‘LocalSun_Position_Azimuth’) | number:2)*180/3.14),4500,11000)}
for some reason this is not doing anything at all.
I am pretty new to this but have been looking all over the website/internet for a solution alas to no avail.
Anybody have any idea what is going wrong here?

Best regards
Lenny Zaman

Hello,

how can I get a HTTP Command in this habpanel?

Thanks

1 Like

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

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.