Drawing a .svg
Frederik
30 Jul 2014, 09:58Hi 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:
Any ideas?
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
30 Jul 2014, 19:32I've never used these functions, but the doc for Grid_LoadSvg (http://docs.textadventures.co.uk/quest/ ... adsvg.html) says:
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:
Or it might just be:
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.
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
31 Jul 2014, 12:15Can't get it to work - where should I save the .svg file? In the saved games folder right?

jaynabonne
31 Jul 2014, 22:21I 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:
If I remove the <svg> start and end tag:
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.
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
01 Aug 2014, 14:21Sigh, 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?
This is so over my head, but I really want it to work!
Any ideas Jaynabonne?
Frederik
01 Aug 2014, 19:15Trying the .svg again;
currently I have:
Which gives me this error:
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!
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
01 Aug 2014, 19:25The GetFileURL part was wrong. Just use GetFileData("map.svg").
You can test it by doing something like:
That will dump the string/data read.
You can test it by doing something like:
data = GetFileData("map.svg")
msg(data)
That will dump the string/data read.
Frederik
02 Aug 2014, 11:26 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
02 Aug 2014, 14:44Alright, I think the LoadSVG and DrawSVG commands are bugged; I can show my .svg files by using
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...
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
02 Aug 2014, 15:23That'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.

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
02 Aug 2014, 16:51Here'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.
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
02 Aug 2014, 18:38Thanks 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!
Thanks a bunch anyway for all the help!
Frederik
05 Aug 2014, 17:38Hey Jay,
Alex replied my email - it was very easy actually. In the code:
"svgid" and "svgsymbolid" had to be reversed, so:
Now it works!
Yay!
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
05 Aug 2014, 18:07Great! 


Pertex
05 Aug 2014, 20:12Frederik, 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
06 Aug 2014, 07:35Here you go.

Pertex
06 Aug 2014, 12:02strange, it does not work here with the offline version of Q551. I can't see the picture

jaynabonne
06 Aug 2014, 18:46Frederik, what does your svg file look like?
If I put this in circle.svg:
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:
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?
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
08 Aug 2014, 08:44I'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!
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
11 Aug 2014, 09:45no, does not work on my computer with Q5.5. and Q5.5.1

jaynabonne
11 Aug 2014, 10:02It doesn't work for me as well. No console error output, but no display either.