Change the shape/image in an SVGIcon via script

#1 · April 20, 2020, 3:42 am

I do not see a neo-command to change the shape/image (say from car to chair) inside an SVGIcon.

In my App, it is not practical to flip one object with another (previously hidden0 one, as I need to have more than a dozen such images ... each of which could take on one of five different shapes.

Is there a property to get/replace the xml data for such objects ?

#2 · April 20, 2020, 10:04 am

Hi @gaev, yes it's possible very easily.
Just put off-page the icon shapes you need and then use this code to change one icon shape for another one positioned off-screen:

GetObjectHTML "SVGicon2" [iconinfo]
SetObjectHTML "SVGicon1" "[iconinfo]"

Where SVGicon2 is off-screen and SVGicon1 is the icon we want to change.
Please test it on a modern web browser and not from the "Run" button.
Sample app attached.
Best regards.

Uploaded files:

You need to login to have access to uploads.

#3 · April 20, 2020, 2:09 pm

@luishp

Thanks ... looking at the Property Panel, I thought this was defined as a Property ... so I tried GetObjectAttribute (with no luck).

Using this code ...

GetObjectHTML "SVGicon2" [SVGicon2HTML]
BeginJS
alert($App.SVGicon2HTML);
EndJS

... I was able to examine/extract the said HTML ... for one such image, it looked like ...

<path d="M423.5 0C339.5.3 272 69.5 272 153.5V224H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48h-48v-71.1c0-39.6 31.7-72.5 71.3-72.9 40-.4 72.7 32.1 72.7 72v80c0 13.3 10.7 24 24 24h32c13.3 0 24-10.7 24-24v-80C576 68 507.5-.3 423.5 0z"></path>

... which got the creative juices flowing ... I applied this code to another SVG object ...

SetVar "[svgPath]" "<path d='M423.5 0C339.5.3 272 69.5 272 153.5V224H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48h-48v-71.1c0-39.6 31.7-72.5 71.3-72.9 40-.4 72.7 32.1 72.7 72v80c0 13.3 10.7 24 24 24h32c13.3 0 24-10.7 24-24v-80C576 68 507.5-.3 423.5 0z'></path>"
SetObjectHTML "SVGicon3" "[svgPath]"

... note that I had to replace double quotes for the value of d= with single quotes

It worked !!! ... so, instead of storing hidden SVG objects, one can merely store the above information in a [variable] ... this variable could be populated in the App's start-up section ... or loaded from a text file on some server as and when needed ... real easy and flexible.

I read somewhere that there are utilities and/or online facilities to convert png images to svg data ... next project.

Thanks again.

asmat has reacted to this post.

#4 · April 20, 2020, 4:44 pm

I read somewhere that there are utilities and/or online facilities to convert png images to svg data ... next project.

Yes@gaev! indeed, although SVG works better for vector images, you can save any image in SVG format and even use layers so each one of them can be moved or programmed independently (even more using neoSVG plugin). Take a look at this video tutorial. I allways recommend Affinity Designer software.

Best regards.

Vadim and asmat have reacted to this post.

#5 · January 10, 2021, 2:04 pm

@gaev

After reading the way you worked around your problem, is it possible to post an example of this working. I have the same problem with needing to load a large number of Images, and think this method may help.

yours

Michael.

#6 · January 11, 2021, 12:53 am

@m-burdess:

After reading the way you worked around your problem, is it possible to post an example of this working.

The gist of this technique is to populate the SVG Object with (HTML) content using this command ...

SetObjectHTML "yourSVGObjectNameHere" "[variableThatContainsTheSVGPath]"

There is more than one design for loading the SVG (path) descriptions (text) into variables, and depends on how many and how large the SVG files are.

needing to load a large number of Images.

Note that I only tried using icon (svg) files; if you were going to use png or jpg files, you will need to use publically available utilities to convert them first.

1) A quick and dirty way to extract the SVG (path) descriptions (text) from svg files is to have a separate VisualNEO project with ...

- an SVG Object (say mySVGObject)
- a Push Button Object with this code ...

GetObjectHTML "mySVGObject" [mySVGPathText]

- a TextEntry Object (say mySVGPathText, with a corresponding variable [mySVGPathText])

... then ...

- populate the SVG Object with a svg file

- click on the Button Object

... this will result in the path information visible in the TextEntry Box ...

- replace double quotes for the value of d= with single quotes

- save this descriptive text in a text file ... one way would be to ...

- copy it to the clipboard
- switch to a text editor like notepad.exe
- paste it
- save it to a file

Repeat process for as many svg files as you need.

2) Back in your real project, depending on the number and size of the files, you may elect to populate corresponding variables ...

- either all at once (using SetVar commands) in the Start up section of the App
- or one at a time as needed (using FileToVar commands)

If this is not entirely clear, please let me know how many files and the average/total size of these files ... and I will try and build a sample.

Vadim has reacted to this post.

#7 · January 11, 2021, 11:10 am

@m-burdess note thet you can also load external svg files using LoadHTML command.
Regards.

Change the shape/image in an SVGIcon via script - Forum

Change the shape/image in an SVGIcon via script