Implementing images to a custom pane

[Murraybrian]

I am currently trying to implement a map object to custom pane I added using Quest 5.9.

I found an old forum that discussed how to add a custom pane. This worked out well, the code I used is:

JS.eval ("$('<h3 id=\"mapLabel\" class=\"ui-accordion-header ui-helper-reset ui-state-active ui-corner-top\"><span class=\"ui-icon ui-icon-triangle-1-s\"></span><span class=\"accordion-header-text\">Map</span></h3><div id=\"mapAccordion\" class=\"ui-accordion-content-active ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom\"></div>').insertBefore(\"#inventoryLabel\");$('#gridPanel').hide();$('#gamePanelSpacer').height('0');var size = $(\"#mapAccordion\").innerWidth();$('#gridCanvas').width(size).height(size).appendTo($('#mapAccordion'));paper.view.viewSize.width = size;paper.view.viewSize.height = size;$(\"#gridPanel\").hide();$(\"#mapLabel\").bind(\"click\", $._data($(\"#inventoryLabel\")[0]).events['click'][0]['handler']);$(\"#mapLabel\").bind(\"mouseover\", $._data($(\"#inventoryLabel\")[0]).events['mouseover'][0]['handler']);$(\"#mapLabel\").bind(\"mouseout\", $._data($(\"#inventoryLabel\")[0]).events['mouseout'][0]['handler']);")

This was put into the game/Advanced Scripts tab, in the User Interface Initialisation script.

The map object is added to the player inventory early in the game, but I have not figured out how to get it to show in the accordion label when I click the Show Map command. Any advice on how to implement this would be great. I plan on adding another pane that will show character images as well, but that will be easy once I get this map to work.

[KVonGit]

Hello.

The map object is added to the player inventory early in the game, but I have not figured out how to get it to show in the accordion label when I click the Show Map command.

Not quite sure what you're wanting to do...

Are you trying to move Quest's map into your custom pane? Or are you trying to display an image you have of a map in the custom pane?

Can you share your Show Map command?

[Murraybrian]

I want to add my own custom map image into the custom pane that I created. Here is the ShowMap function:

<function name="ShowMap" type="script"> JS: $("#mapAccordion").html("<img src='Basic Map3.png' style='max-width:100%; max-height:100%;' />"); </function>

I had issues with the code truncating when I added it under functions, but it seems fine when I add it the verbs in the Map object. Is this the issue?

[KVonGit]

That looks like it should be:

<function name="ShowMap" type="script"><![CDATA[
  JS.eval("$('#mapAccordion').html('<img src=\"" + GetFileURL("Basic Map3.png")  + "\" style=\"max-width:100%; max-height:100%;\" />');")
]]></function>

---

In JS, ' is the same as ". This JS is nested in JS.eval(""), and there we have to use " for Quest. So, I use ' in the JS inside that whenever possible, to avoid having to escape the double quotes like \" for things to work. But... in the HTML, things that set elements properties must be double quotes. So <img src='Basic Map3.png'/> won't work. Has to be <img src="Basic Map3.png"/>. But... We have that inside JS.eval(""), so we have to escape any " like so: JS.eval("$('#mapAccordion').html('<img src=\"Basic Map3.png\" style=\"max-width:100%; max-height:100%;\" />');")

...but that would be an invalid URL when doing it this way from Quest. The image will be a game resource, and we need the URI for the game's resource files. To get that, we use Quest's GetFileURL function. So, that line would need to be:

  JS.eval("$('#mapAccordion').html('<img src=\"" + GetFileURL("Basic Map3.png")  + "\" style=\"max-width:100%; max-height:100%;\" />');")

[Murraybrian]

Wow! Its always something simple lol. Glad I learned not to get upset when coding becomes troublesome. Thanks for explaining that in depth, JS isnt my primary language. Im learning as I go.

I thought the GetFileURL setup was for the online version, but wasn't needed for offline. At least thats what I read in the Quest guide.
Everything works as it should, now I can finally do away with the floating images. It's a bit frustrating that the quest guide doesnt really go over custom images.

[KVonGit]

I thought the GetFileURL setup was for the online version, but wasn't needed for offline.

It's for both. When playing in the Windows app, the URL returned by GetFileURL will be like quest://local/Basic Map3.png, but online it will be like https://media.textadventures.co.uk/gameresources/UNIQUE_ID_FOR_GAME/Basic Map3.png.

---

It's a bit frustrating that the quest guide doesnt really go over custom images.

Yeah... Once we start adding custom images and stuff like that, it would be hard to document how to handle things, I guess. It's like that's where we cross the line from Quest user over to web developer. Like, Quest can do stuff like that, but not by default. We're basically using Quest code to pass our custom JavaScript code to the browser to manipulate things from there, usually in unpredictable ways.

Displaying images cross-platform, cross-browser, for all screen dimensions can get frustrating. (For me, anything concerning things lining up on the screen properly will usually end up discouraging me, but I'm not too good with CSS.)

[Murraybrian]

It's for both. When playing in the Windows app, the URL returned by GetFileURL will be like quest://local/Basic Map3.png, but online it will be like https://media.textadventures.co.uk/gameresources/UNIQUE_ID_FOR_GAME/Basic Map3.png.

Very good to know. I quickly realized that anything out of the norm with quest requires a lot more effort. Default wise it is very simple and easy to use. Now I also realize that I need to make sure the online version matches. At least I know how to get it to work, I just have to play with it now (the fun part). Thanks again for answering this question and assisting my previous one from the other day. Almost fried my brain on this one tbh.