Drawing a .svg

Frederik
Hi guys,

Picked up my game during the holidays, but stuck at some point.
I want to load a .svg into the game, but can't seem to manage it.
Where should I save the picture? Is it in the same folder as where my savegame is?
Currently using the build-in map feature, with this code:

		JS.Grid_ClearAllLayers()
Grid_LoadSvg ("map.svg", "map")
Grid_SetCentre (0,0)
JS.Grid_ShowCustomLayer(true)
JS.Grid_DrawSvg ("map", "mapid", 0, 0, 5, 5)


Any ideas?

jaynabonne
I've never used these functions, but the doc for Grid_LoadSvg (http://docs.textadventures.co.uk/quest/ ... adsvg.html) says:

Loads and SVG file and associates it with an id, so it can subsequently be drawn on the custom grid drawing layer using Grid_DrawSvg.

The data parameter is the raw file data for the SVG file - you can load a string with file data using the GetFileData function.


So it looks like you need to insert a call to GetFileData to load the data. Then send it to Grid_LoadSvg. Probably something like:

url = GetFileURL("map.svg")
svg_data = GetFileData(url)
Grid_LoadSvg(svg_data)

Or it might just be:

svg_data = GetFileData("map.svg")
Grid_LoadSvg(svg_data)

Again, I haven't tried this myself, so it might need some tweaks. If you can't get it to work, it might help to post the game file and .svg file, and we can try to get it working.

Frederik
Can't get it to work - where should I save the .svg file? In the saved games folder right?

jaynabonne
I haven't been able to get this to work. Instead of using a file, I tried just including the svg data inline (see the attached). And all I get is a Javascript error: Uncaught TypeError: Cannot read property 'fill' of null.

That's if the .svg data looks like:

    <svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

If I remove the <svg> start and end tag:

  		<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />

then calling Grid_LoadSvg causes the SVG data to be displayed right away, even if you don't say to draw it (which seems less than useful).

The attached file just loads the svg data (it doesn't even draw), and that generates the JS error. Perhaps more experimentation will find data that works.

Frederik
Sigh, can't even get that red circle of yours to work...
This is so over my head, but I really want it to work!
Any ideas Jaynabonne?

Frederik
Trying the .svg again;

currently I have:
    JS.Grid_ClearAllLayers()
Grid_ShowCustomLayer(true)
Grid_SetCentre (0,0)
svgdata = GetFileData(GetFileUrl("map.svg"))


Which gives me this error:

Error running script: Error evaluating expression 'GetFileData(GetFileUrl("map.svg"))': Cannot find a file called 'quest://local/map.svg?c=81551578' in current path or application/resource path



Still not sure whether it's because I haven't saved it in the right folder (it's in the folder where all the Quest Games are saved), or because I am doing something wrong in my code.
Any help would be appreciated!

jaynabonne
The GetFileURL part was wrong. Just use GetFileData("map.svg").

You can test it by doing something like:

data = GetFileData("map.svg")
msg(data)


That will dump the string/data read.

Frederik
      JS.Grid_ClearAllLayers ()
Grid_ShowCustomLayer (true)
Grid_SetCentre (0, 0)
svgdata = GetFileData("map.svg")
Grid_LoadSvg ("svgdata", "svgid")
Grid_DrawSvg ("svgid", "svgsymbolid", 0, 0, 5, 5)


Got this, which doesn't show anything.
When I try your suggestion, Jaynabonne, the game gets stuck (nothing happens anymore, can't type, etc.)
I really want to get this to work :( :( :(

Frederik
Alright, I think the LoadSVG and DrawSVG commands are bugged; I can show my .svg files by using
msg (GetFileData("map.svg"))

I want to place several .svg files next to each other, so I can't use the msg() command for that.

Thanks for the help anyway Jaynabonne...

jaynabonne
That's funny - I suggested to use msg just to see the string. I forgot it would actually interpret it as HTML and show the image. :)

What sort of thing would you like to do? It might be possible to use HTML to layout the svg elements. And that HTML can be put in a fixed area above the text (I have done that with general HTML). Let me try that, but if you can give some specifics, I can tailor it for that.

jaynabonne
Here's a crude example that does something (attached). It sets the svg data as elements in the panel. The trick to the panel is you have to set "clearframe" to false in the game object. Otherwise, it removes the pane when it goes to get input.

You can also decide what panel height you wish. I haven't tried using HTML to lay things out (CSS, divs, etc). but I think it should be feasible.

And you can replace "game.mysvg" with a loaded svg file.

Frederik
Thanks Jay, the HTML does work. However, I'm more keen on making the .svg work. I mailed to Alex to ask whether it is bugged, else I'll dive in the HTML.
Thanks a bunch anyway for all the help!

Frederik
Hey Jay,

Alex replied my email - it was very easy actually. In the code:

Grid_DrawSvg ("svgid", "svgsymbolid", 0, 0, 5, 5)


"svgid" and "svgsymbolid" had to be reversed, so:

Grid_DrawSvg ("svgsymbolid", "svgid", 0, 0, 5, 5)


Now it works!
Yay!

jaynabonne
Great! :)

Pertex
Frederik, could you post a complete test game here displaying a svg file in the map? I have tried with your solution but for me it does not work.

Frederik
Here you go.

Pertex
strange, it does not work here with the offline version of Q551. I can't see the picture

jaynabonne
Frederik, what does your svg file look like?

If I put this in circle.svg:

<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="green" />

then it shows up... but it's not really working. (For example, it's not positionable. It's like what I had in earlier failures.)

If I add the SVG tags like this:


<svg>
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="green" />
</svg>

then I get the same "Uncaught TypeError: Cannot read property 'fill' of null " error I got before.

Do you have a .svg file that you can position where you like?

Frederik
I've added the .svg file I used. You can easily make one using the (free) program Inkscape. You can also use that program for editing scanned drawings into .svg files.

And yes, I can zoom in on the circle and move it around with my mouse.

Hope this works for you, if not, let me know!

Pertex
no, does not work on my computer with Q5.5. and Q5.5.1

jaynabonne
It doesn't work for me as well. No console error output, but no display either.

This topic is now closed. Topics are closed after 60 days of inactivity.

Support

Forums