Design your SVG floorplan or dashboard for HABPanel with Inkscape

Tags: #<Tag:0x00007f875f73c538> #<Tag:0x00007f875f73c038> #<Tag:0x00007f875f4e7dc8>

(Dhanasekar Jaganathan) #145

.CSS file :

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


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

/*   width:"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;

(Stefan Höhn) #146

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.

(Dhanasekar Jaganathan) #147

Ok… I will try this and update you .

(Christian) #149

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

(Juan Pedro) #150

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%.

(Dhanasekar Jaganathan) #151

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

My Inkscape file,

Now it is looking like this,

(Shorty707) #152

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?

(E. Gerland) #153

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

(Antonio Jose) #154

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