Trouble with Dialog API, Image Maps, and Calling Passages on Click

Authoring Twine
,
1

I am trying to set up an image map where, on click, a dialog opens that prints the contents of another passage. So far, I’ve gotten the image map to work, got the dialog to open, but what prints is a string of the code I was using to call the passage, not the passage itself.

Here’s the specific line of the area map that’s no quite working: <area shape="rect" alt="mirror" coords="568,280,888,520" onclick="SugarCube.Dialog.setup('', 'description');SugarCube.Dialog.wiki('SugarCube.Story.get(&quot;Test Description&quot;).processText()');SugarCube.Dialog.open();"/>

The result:

image
image762×473 41.1 KB

And here’s the full passage code (though I haven’t added anything to the other parts of the image map until i get this part solved).

<map id="qmarsha" name="qmarsha">
	<area shape="rect" alt="mirror" coords="568,280,888,520" onclick="SugarCube.Dialog.setup('', 'description');SugarCube.Dialog.wiki('SugarCube.Story.get(&quot;Test Description&quot;).processText()');SugarCube.Dialog.open();"/>
	<area shape="poly" alt="bed" title="" coords="-4,480,296,428,484,636,976,748,980,892,808,988,600,908,328,1052,4,960,4,960"/>
	<area shape="poly" alt="window" title="" coords="1088,72,1064,568,1556,696,1548,128"/>
	<area shape="poly" alt="bench" title="" coords="1468,944,1592,648,1680,620,1864,700,1896,1052,1688,1024"/>
	<area shape="poly" alt="locker" title="" coords="1656,320,1808,344,1812,16,1656,52"/>
</map>

<div class="resizable imageMapObserve">
	<img id="room" @src="$setup_path+'images/abstractbedroomtest.png'" usemap="#qmarsha">
</div>

Thank you for any help in advance!

2

Anytime you need to use the undocumented SugarCube debug interface in your project’s code to achieve an outcome, it’s a sure sign you’re doing something the wrong way. As that interface is meant to be used in the web-browser’s Console, if at all.

You basically have an execution context / scoping issue. You want to use the Dialog API, which is only available in SugarCube’s own Private Scoped Context, from the private scoped context that the web-browser uses to execute JavaScript based event handlers that have been assigned to an “event” based attribute of a HTML element.
eg. from the onclick event handle of an <area> element.

And it’s not possible to directly access something defined in one Private scoped context from another Private scoped context. So you need a way of elevating the scope of SugarCube features you need, or at least defines something globally that can access something defined in SugarCube’s Private scope.

The following JavaScript example should be placed within the Story > JavaScript area of your project, because code in that area is executed in SugarCube’s Private Scoped context. The example:

  • defines a Namespace, which is used to isolate a project’s “Global like” things from those of the web-browser itself or from those of any third-party addon being used.
  • defines a description() method on that Namespace, which is used call the Dialog API methods required to show a Dialog.
/* Create your personal unique Namespace. */
window.GE = window.GE || {};

GE.description = function description(passage) {
	Dialog.setup('', 'description');
	Dialog.wiki(Story.get(passage).processText());
	Dialog.open();
};

warning: GE is the personal unique Namespace I use to isolate my “global like” JavaScript variables & methods. You should use your own unique identifier!

The following Passage code demonstrates using the above description() method from an <area> element. Selecting the Yellow tile in the coloured square will display a Dialog contain the contents of a Test Description Passage.

<map name="coloured-square">
	<area shape="rect" alt="yellow tite" title="yellow tite" coords="0,0,100,100" onclick="GE.description('Test Description')">
</map>

<img src="https://i.pinimg.com/564x/e8/11/fa/e811fae95cfff261aa78a493448ff8d5.jpg" usemap="#coloured-square" width="200" height="200">

note: I have set the image to a fixed dimension of 200px x 200px so that the coordinates will always be correct for the example. You don’t need to do that for own image-map.

2 Likes
3

That worked! Thank you I had no idea about Namespaces or Private Scoped issues - this is awesome and I learned a ton. :grinning: