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 
What do you want the lines to do in their animation? Have you looked at animating the svg lines through CSS?
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.
Do you have a link as how how to import the gif into the SVG?
Please keep us posted Stuart 
Hi
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 
I used Note++ and my web browser to check the code.
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.
Awesome what you guys are doing! 
Ok I have one more question , so far 
. 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
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,
Hi
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
The monitor is still, Work in progress.
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.
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
Sure… I´ll add some more info later (hopefully tonight).
