changing text and animate objects

[SamuelJoly]

As I'm now able to get my data, I was wondering if someone could give me a quick example of how to modify the text and animate objects. If For example, my most recent data is "450" how do I modify the text present on my SVG to be 450. Also, How could I do animations(like to change my rectangle color)? I haven't been able to use properly use SVG.js.

This is what I use for testing as SVG:

[itnas]

1. SVG Mappings (Example) SVG ID : text7913 --> Mapped Name : showText
2. JS Render Code options.animateLogo(svgmap, data); let buffer = data.series[0].fields[1].values.buffer; let lastValue = buffer[buffer.length - 1]; svgmap.showText.text(lastValue.toString());
3. JS Init Code options.animateLogo = (svgmap, data) => { }

[henjoe]

Hi @itnas ,

Thank you for your example. May I know how about changing the fill color of the rectangle? It seems like this does not work on my side: svgmap.rectObject.style.fill('green')

I know there should be some problem on my syntax, but to be honest, I really don't know here. Hoping for your guidance.

Thank you.

Regards, Henjoe

[rothestar]

1. SVG Mappings (Example) SVG ID : text7913 --> Mapped Name : showText
2. JS Render Code options.animateLogo(svgmap, data); let buffer = data.series[0].fields[1].values.buffer; let lastValue = buffer[buffer.length - 1]; svgmap.showText.text(lastValue.toString());
3. JS Init Code options.animateLogo = (svgmap, data) => { }

I did that, but the data I am getting from grafana are temperature is a number value, how can I reduce to only show 1 decimal point.??

[henjoe]

1. SVG Mappings (Example) SVG ID : text7913 --> Mapped Name : showText
2. JS Render Code options.animateLogo(svgmap, data); let buffer = data.series[0].fields[1].values.buffer; let lastValue = buffer[buffer.length - 1]; svgmap.showText.text(lastValue.toString());
3. JS Init Code options.animateLogo = (svgmap, data) => { }

I did that, but the data I am getting from grafana are temperature is a number value, how can I reduce to only show 1 decimal point.??

Just change the svgmap.showText.text(lastValue.toString()) to:

svgmap.showText.text(lastValue.toFixed(1).toString())

[rothestar]

Nice, workes well. I Have tried many variation of tofixed, none of them worked... is there a place where I can learne the right syntax...

I have another issue when i have a text field and change the value the value drops one line down, so I have to place the text field one line above the desired location.

The active result looks like this:

Is this a bug or is it a syntax error??

you can see the working site here: http://iot.djhhadsten.dk:3000/d/unrLkrqGk/modul-2-10?orgId=1&var-time=1h&var-UnitNo=h106_1&refresh=10s

[henjoe]

Nice, workes well. I Have tried many variation of tofixed, none of them worked... is there a place where I can learne the right syntax...

I have another issue when i have a text field and change the value the value drops one line down, so I have to place the text field one line above the desired location.

The active result looks like this:

Is this a bug or is it a syntax error??

you can see the working site here: http://iot.djhhadsten.dk:3000/d/unrLkrqGk/modul-2-10?orgId=1&var-time=1h&var-UnitNo=h106_1&refresh=10s

I have the same experience with you, so I just adjusted my SVG file to be above on my desired positions. I don't know if it is a bug or not, but basically adjusting will do the tricks.

[rothestar]

Yes I can live with that, just wundering... I dont want to abuse your knowlage but I have one last issue... I would like to change the stroke color af the dark blue line based on a value 0 or 1, when the value is 1 (hotgas defrosting) i would like the line to change color to red... can you help with this one to??

my code looks like this now:

svgmap.hotgas.style.stroke.red(hotgas_on>0)

[henjoe]

Yes I can live with that, just wundering... I dont want to abuse your knowlage but I have one last issue... I would like to change the stroke color af the dark blue line based on a value 0 or 1, when the value is 1 (hotgas defrosting) i would like the line to change color to red... can you help with this one to??

my code looks like this now:

svgmap.hotgas.style.stroke.red(hotgas_on>0)

I actually discovered it based on what I read on SVGdotjs documentaton. I asked the same question before and no one answered me, and now I will be sharing this to you.

In order to change the attribute of specific svg tag, you will need this syntax ( for example svg tag is showText ).

svgmap.showText.attr('style','fill:green')

This changed the color of text to be color green, same thing with other object on your SVG :)

Knowing those tricks really does everything specially on creating a basic SCADA HMI. Hope this helps.

[rothestar]

Ok I can change the attr with this code:

svgmap.hotgas.attr('style','stroke:red;fill:none;stroke-width: 3px')

but the question is how can I do that based on a boolean value??

let hotgas_on = lastdefrost > 1 && lastdefrost < 45;

I can show and hide a copied path with this:

svgmap.hotgas.showOn(hotgas_on > 0 )

but now I have two paths to maintain, It would be more elegant if I just could add the new attribude based on the value of " hotgas_on"

[acedrew]

@rothestar It's just javascript.

if ( lastdefrost > 1 && lastdefrost < 45) {
  svgmap.hotgas.attr('style','stroke:red;fill:none;stroke-width: 3px')
} else {
  svgmap.hotgas.attr('style','stroke:blue;fill:none;stroke-width: 3px')
}

or

let color = hotgas_on ? 'red' : 'blue';
svgmap.hotgas.attr('style',`stroke:${color};fill:none;stroke-width: 3px`)

[rothestar]

thanks Works like a charme...

I just needed some guidance. I think where I have read about animations on svg, it has been explained too complicated. Your explanation makes so much sense