Design your SVG floorplan or dashboard for HABPanel with Inkscape

.CSS file :

.logo-wrapper svg {
/*width: 1250px;
  height: 510px;*/
/*width:"100%"
height:"100%"*/

}

.logo-wrapper svg stroke-line {
fill: #757575 !important;
}


div{
/*   width:"100%"
height:"100%"*/
    /*background-color: #00ffff;*/
/*background-color: #E5E8E8*/
/*background-color: #AED6F1  ;*/
/*background-color: #FFEBEE;*/
background-color: #E0F7FA;
}

.logo-wrapper svg line {
  fill: #CD5C5C !important;
}
/*.logo-wrapper svg path{
  fill: #CD5C5C !important;
}*/

.logo-wrapper svg text{
  fill: #990011 !important;
  width: 50%;
    border: 1px solid black; 
}

.light_true {
fill: yellow !important;
}

.light_false {
fill: red !important;
}

.light-enable {
fill: red !important:
}

/*.light-on {
    fill: #ff0000 !important;
}*/

.light-noun {
fill: #ff0000 !important:
}

.light_on {
fill: #4fc497 !important;
}

.light_off {
fill: #c83737 !important;
}

.lighton {
fill: #4fc497 !important;
}

.lightoff {
fill: #red !important;
}

.opacity1 {
	opacity: 1 !important;
	
}

.opacity0 {
	opacity: 0.2 !important;
	
}

Sorry, I am out of ideas. The only thing I would again try to move the lower right corner downwards as far as you can (keep holding downwards outside the window far beyond the actual svg.). That worked for me.

Ok… I will try this and update you .

I had the same issue and I can see that you have a lot of white space in the top section of your floorplan.
In my case all of this whitespace belongs to the svg image.

To resolve, select all items in Inkscape and select “Edit >> Resize Page to Selection”. This action then crops the image to the items you have and it should also display OK in habpanel

Hi @Kergilo

Just in case you did not solve your problem, the problem is with type casting. The first is concatenating strings, the second is transforming the Temperatura item to a number and then substracting 1.

To make the first also work, try this:

 sendCmd(‘Temperatura’, (itemState(‘Temperatura’) - 0) + 1)

I know it looks silly, but works. Substracting “0” converts the temperature to a number that then you can operate.

This trick works also with comparators, for instance in the ng-class directive:

{"light-50":((itemState('luzTestDim')-0)>0)&&((itemState('luzTestDim')-0)<100),"light-on": itemState('luzTestDim') == '100'  }

You will have “light-50” if a light is on but dimmed and “light-on” if it is 100%.

Thanks for info. I have removed extra white space in Inkscape.

My Inkscape file,

Now it is looking like this,

I would like to see a feedback when I clicked a button (unrelated to the ng class and css that actually changes the color of a button when a item state changes.

purely along with a sendcmd I would like the button to e.g. change color for a few seconds to get feedback that the click was recognized.

is that possible?

Any one who has an idea how to squeeze a webview (map into the upper left corner) to fill the space?

I solved it but i didn’t know how to work with comparators. Thanks ^^

@Kim_Andersen: I was struggling to implement it as well, but for me it worked when I inserted the following (using itemValue and shuffling a bit with the quotes) in the ng-bind of the XML:

(itemValue('rweTemp5a6130') | number:1) + " °C"

1 Like

Thank you, Yannik. Great work! I’m missing the CSS to get rid of this little blue box, but that’s not a big issue to me. Following your tutorial (and this tutorial for getting paper floorplan into inkscape) I was able to do a good first job.

1 Like

After read almost the whole post (really long BTW) I was able to generate the map of my flat, Thanks to all you for your small piece of information.

I only have a problem when i want to apply a different color to a Text item,

I have try with ng-class and CSS without luck…; the fact any dynamic modification that i need to apply to ng-style doesnt’ work as use to work.

Any additional information would be really appreciated

thanks in advance

BR

I´m trying to exchange an image (object on my floorplan) from one svg to another based on state… I cant really figure how to to with in Inkscape or CSS…

This is the default svg.
dmotion

And when motion is detected, I would like it show this one:
dmotion-red

I´m not even sure if it makes sense to exchange the image like that or if there are other ways to do it.
In inkscape I have defined an ng-class like this:

ng-class {"motion-on": itemState('garage_pir') == 'ON' }

But I have no idea in the CSS file.

Can anybody help?

Have a div with a different background-url for the different classes?

Tried this, doesnt seem to work.

.motion-on {
<div style="background:url(/static/cu_motion-off.svg)"> </div>
}

Correct, that’s not how CSS is supposed to work. Get rid of the html, change the colon into a dash, but the proper quotation marks around the path and you are good to go.

Still cant seem to get it to work…
This is how it looks now:

.motion-on {
   background-image: url(/static/cu_motion-off.svg); 
}

I´m not sure about which quotation marks to use around the path. I have seen lots of css examples with and without…I have tried everything… But it just doesn´t show.

This is my ng-class code in inkscape:

ng-class {"motion-on": itemState('ZWaveNode5ZW100MultiSensor6_MotionAlarm') == 'ON' }

It really isn’t that hard. Please note the difference in the url itself as well…

.motion-on {
   background-image: url("/static/cu_motion-on.svg"); 
}
ng-class="{'motion-on': itemState('ZWaveNode5ZW100MultiSensor6_MotionAlarm') == 'ON' }"

Furthermore you will have to add a default class before the ng-class that sets the motion-off icon.
If that still doesn’t work, check the state of the item and check if the path is correct, as I can’t test that for you.

EDIT - Read below.

That was related to your comment about not being sure about the quotation marks, and using none whatsoever while my previous post was that you should use quotation marks. Then at least try something :slight_smile:

Then also include that in your .motion-on class, just for debugging:

.motion-on {
    background-image: url('/static/cu_motion-on.svg');
    fill: #ff0000 !important;
}

Basically, you do something like this:

<div class="motion-off" ngclass="{'motion-on': itemState('ZWaveNode5ZW100MultiSensor6_MotionAlarm') == 'ON' }"></div>

Which in the main SVG basically is nothing more than adding a class attribute.

with in your CSS added:

.motion-off {
    background-image: url('/static/cu_motion-on.svg');
    fill: #00ff00;
}

Then whenever the itemState is not equal to ON, the class of that div is set to motion-off, and whenever the itemState becomes ON, the class is “overruled” with the motion-on class.

Just first try if you can get the mechanism working with the fills, and when that works, remove the fills from the CSS and see why the background images are not working (if they still aren’t). My first guess would be the path being wrong then.

1 Like