Add animation to svg template for Habpanel

I am building a Dash for my Victron setup on Hab panel and I am using the tutorial where you use a svg file as your base. To make things even nicer I would like to add animated lines in stead of static lines to the dash but so far I have not managed to get this going.
This is what I have so far :

Can some one maybe help? I just don’t have enough skill on this one :blush:

1 Like

What do you want the lines to do in their animation? Have you looked at animating the svg lines through CSS?

1 Like

My little cheat is to import a gif image into the SVG. (Manually editing the exported SVG to ensure the path to the gif is relative, rather than literal)

It’s not clever, but it works.

I do like the look of a CSS method, I’ll have to look into that.

This what I would like it to do. But I will have a look at the CSS trick as well

1 Like

Do you have a link as how how to import the gif into the SVG?

Please keep us posted Stuart :slight_smile:


It’s exactly the same process as importing and linking any other image (or at least it is in Inkscape).

The only thing to do is to open the SVG file in a text editor and change the image file path (for the image you imported) to a relative path, rather than an absolute.

Just search the SVG text for the filename that you imported.

Just like how the process is described here, except I tried it with a Gif image


Ok it took some time to figure this out but I managed to get this going , there is a couple of ways to dot his but I am taking the “easy way” not necessarily the correct way. So if there is a better/correct way please share :smile:

I used Note++ and my web browser to check the code.

  1. Download the test file
  2. Open in Note++ and save to Openhab html file


  1. Run the file in the browser to test — openhabIp:8080/static/test.svg
    You can tweak the info as needed.
  2. Once you are happy import into your dash in Inscape as described above

Hope this makes sense !
Thank you all for the help!!


If it works, then that’s okay.

Making it better / smoother / tidier can be a task for later.

I always find that getting something working first is satisfying.

1 Like

Awesome what you guys are doing! :clap:


Ok I have one more question , so far :smile: . Is it possible to show/hide a SVG image with ng-click?

Currently I have a additional info “pop-up” that if I click it will ng_show the values and then after a timeout it hides the info
2020-08-11_071631 2020-08-11_071701

This is done by ng-click - send command to a MQTT item in Opehab this will trigger the state of another mqtt item that will trigger ng-show for the PV data page (done via node red) . It works but there must be a better way to do this. I am hoping to setup a variable inside the browser with ng-click that will change the status of the “popup” but I seem to ask google the incorrect question.
Any help or link will be much appreciated,


Take a long / slow read of that thread I put a link to above.

If it’s possible, it’ll probably be mentioned in there.

Good luck

It is possible, if you use Layers in the SVG. I use it quite alot for several stuff. I have then added the layer to an switch item in openhab. Then I´m able to turn on/off a layer (visual component) ind the layout.
The switch items have Google Assistant metadata, so I can use voice command to turn the layer on/off.

This is my monitor (SVG) which show the status of my house:

The four green buttons in the lower left corner are click-able buttons which will de/activate layers. When green, the layer is activated. Red means deactivated. The button “Vent” will deactive the ventilation components (thats the ventilation system above the buttons). If I hit the button (or tell Google to turn it off), it will simply dissapear from the monitor :slight_smile:

The monitor is still, Work in progress.

1 Like

Looks awsome @Kim_Andersen , would you mind sharing the part where you activate the layer?

I have gone through most if not all if the thread, that is where I got most of my info. All of the info there is linked to openhab Items and that works quite well. But Ill have a look again maybe I missed something.

1 Like

Ok sofar this is what I managed to do , again thank you @Kim_Andersen and @MDAR , it helps if you have a reasonable idea what to look for.

On your “swicth” set the following
cursor : pointer
ng-click : switch=1
ng-init : switch=0 ( this is the one that I missed as you need to “activate/set the variable”

Then on you pop up set the
ng-show : switch==1
cursor : pointer
ng-click : switch=0

So when the page load “ng-init : switch=0” will set the variable to 0 when you click the switch it will set to 1 and activate the popup then by clicking the popup it will set the switch to 0 and deactivate the popup.

Hope this help , next setup a timer on click

1 Like

Sure… I´ll add some more info later (hopefully tonight).