saving graphics view to svg *from script*

pfb shared this question 1 month ago
Answered

Hi all,

I need to produce quite a few images. I prepared a ggb construction which draws what I want according to the values of two sliders.

I'd like to iterate on the values of the sliders and produce an svg image for each iteration.

Since the combinations are as many as 121, I'd like to do that with some sort of batch script.

In order to do so, I need a script command for exporting the graphics view to svg.

I skimmed through the scripting commands, but I was not able to find anything like that.

Is there a way of obtaining what I want with a script?

Thanks a lot for any insight

Francesco

Best Answer

Comments (23)

photo
1

Modify the two sliders so that they depend from one slider and use the command ExportImage on a script on that slider. And build the export filename with dynamic text depending on either the two sliders or the third slider.

No example -> no example solutions.

photo
1

Hi Loco,

thanks a lot for your help! I looked at the list of ggb script commands, but for some reason I missed ExportImage. Now that I think of it, I believe I have already used it a while ago. I must have forgotten.

I'm going to try to control the sliders through a script associated to a button, and nested for loops.

If I fail, I'll do as you suggest (I'm guessing I need modulo operator and integer division).

Thanks a lot again!

Francesco

photo
1

If that doesn't work please post your .ggb file (it's also possible with some JavaScript)

photo
1

Hi Michael, I'm also interested in the js way of doing this.

So far I'm unable to save "silently". I have to confirm the saving of each individual file, which makes the process very long and awkward.

I looked into the manual of ExportImage, but I found nothing really relevant. It seems to me that all of the commands except the very first should save directly, without prompting the user..

But maybe I got that wrong.

I'm using chrome on a macbook.

photo
1

I forgot,

this is my ggb. Ideally, animating the DD cursor should produce 100 svg images.

As I mention, ggb prompts me for confirmation at each iteration, which I'd like to skip.

The files look good, though.

photo
photo
1

Hi again,

I ended up following your advice. I ran into a problem, though. I'm working on chrome, on a macbook.

Apparently, the instruction

ExportImage("filename", fname, "view", 1,"type","svg");

does not directly export the image, but causes a confirmation window to appear. The user needs to push a button to save each file.

Is there a way to bypass this, and save all the files in "silent mode"?

photo
1

If there is a unavoidable prompt i then there is no easy way out of GGb that i know of. May be the JS-way of Mr Borcherds might help.

If that is no help i suggest to have a look into the Option of multi page pdf export (type: pdf & slider n). With some 3rd party tools it should be easy to split the pages up and translate the content to svg. Could work or not i cant promise .

The last method i can think of is a brute force bot approach. Modify the GGb-File by a script (unpack, modify the slider values and pack it), open it via script (should be possible), wait for some time to load fully and process scripted UI tasks (simple repetitive mouse & keyboard tasks) (it is also possible to omit the file modifying and set the slider values here)... rinse and repeat.

Never done that so cant give a promise on that either. Just some ways of approach.

There are some other possible ways that depend on your file content.

photo
1

Okay a quick test with your file shows my that my last first suggestion works. The only problem is that your file naming will be lost.

  1. delete the export line in your slider (funny, the slider option works with svg too... you just have to accept the save dialogue 100 time after that)
  2. open your file and provide this command to GGb
    ExportImage( "type", "pdf", "filename", "test.pdf", "slider",DD )
  3. save that pdf and move it to a separate folder/directory
  4. i use debian on wsl therefore the next steps might or might not work on mac bash/zsh i installed pdf2svg via my package manager
    sudo apt install pdf2svg
  5. go to the location of that exported PDF and use the following bash command
    for i in {1..100}; do pdf2svg test.pdf "test_$i.svg" $i; done

This gave me the 100 SVGs.

photo
1

Hi Loco,

thanks a lot... that's quite a hack!

But in order to get my 100 svg I have to create a multipage pdf and and install an external application to convert that to multiple svg. Ok.

What do the svg look like? Are they really vector images? Or else, going through the pdf step makes them raster figures inside an svg "envelope"? (Apologies for my lack of specific language).

Anyway thanks again, this is good to know!

photo
1

Yes those are still vector images.

The JS solution bellow is another way i did not knew. I am a bit curious on how to access GGb without the browser.

photo
1

Ok, this is good! Thanks a lot for your help.

I'm trying to "reverse engineer" Michael's code, but so far I was not able to make it work...

photo
photo
1

Open https://www.geogebra.org/m/ctvsnmzx


Copy and paste this in the browser's console (F12)

var SVGs=[]
for (var i = 0 ; i < 100 ; i++) {
ggbApplet27512145.setValue("DD",i);
SVGs[i] = ggbApplet27512145.exportSVG()
}


Note: I've redefined things so that they update with DD to keep it simple, for example

θ=(1-2*RandomBetween(0,1+0DD))*RandomBetween(5,20+0DD)°

photo
1

... and here's an automatic version:


https://test.geogebra.org/~...

Change these parameters as you need

width=800&height=500&min=0&max=99&step=1&id=ctvsnmzx

photo
1

really cool! Thanks one thousand times!

So you're using js but outside the applet, from the html page... I tried using js from inside the applet, but came up with nothing useful.

I roughly understand how the script works... So you create a zip object, populate it with the svg files and finally you save the zip file. Very cool.

I'm not sure I understand some details... for instance the "api" argument in pretty much all the functions.

Anyway this saves me a ton of work. So far I had to create the images individually, by hand.

Thanks, really

Francesco

photo
1

Hi Michael,

thanks a lot, this is very interesting.

I tried downloading and "reverse engineering" your code.

So far I was not able to make your code work on my webpage. Initially I thought this had to do with the three scripts you include at the top of your code (jszip.js, jszip-utils.js and FileSaver.js) from a local folder ("../").

I downloaded those codes from github, put them just outside the folder containing the copy of your html page.

Unfortunately this does not seem to change anything.

I'd really like to make it work, so that I can tweak the filenames and some other details (and, of course, so that I learn something new).

Do you have any insight as to why I'm not able to make your webpage work on my website?

Thanks a lot

Francesco

photo
1

Please post the link

photo
1

Hi Michael,

thanks again for your availability.

Here's "my" webpage. That should be an exact copy of yours, except for the fact that I put the above-mentioned scripts in ../JS/ and corrected the links accordingly.

Cheers

Francesco

photo
1

Try clicking on "Raw" (and don't use "Save page as...")

photo
1

oh... ok I didn't know this. My knowledge of js is really basic, and I never used github. I assumed that downloading the files would work.

I'll try what you suggest.


Are the three js you include enough, or else do they call other stuff that I should include as well?

Thanks again!

photo
1

Ok, strike that. It works with just the three files (I just had to clear the cache).

This is great!

I'll play around with this. I think it is going to be really useful for me.

Thanks again!

photo
© 2020 International GeoGebra Institute