I thought it would be good to put a button in the centre of the compass rose that does LOOK.

There is not much in there with an id. It is set up with two tables inside a third, and the third has the id "compassTable". I thought I could replace the inner HTML of that with my customised HTML. To get the HTML right, I copied it from an on-line game, and pasted it into an attribute on the game object.

But it does not work. For some reason the buttons no longer get enabled or disabled to reflect the rooms available (though you can click on them).

I can replace the inner HTML like this, and the compass rose is there (and this is the replaced HTML, the exits are the same as they were for the game I copied from):

JS.eval ("$('#compassTable').html('" + game.look_button + "');")

game.look_button has the HTML code from the on-line game, excluding the table tabs of the compassTable element, and has not been modified at this stage.

I have looked though the code I copied and compared that to HTML in the editor game, and it looks the same, so I am mystified.

I do not know where the compass buttons are updated; as far as I know it is not in the Quest code, but the underlying C#, which I am not at all familiar with. I guess it is checked every turn incase an exit is added or becomes visible. I would have guessed it just accessed the button through its id, which would still work fine, but it seems not.

Anyone got any ideas?

Game:

<!--Saved by Quest 5.6.5783.24153-->
<asl version="550">
  <include ref="English.aslx" />
  <include ref="Core.aslx" />
  <game name="test_game">
    <gameid>ebd963a1-e1fc-4d7f-8cc6-5b589caad5c0</gameid>
    <version>1.0</version>
    <firstpublished>2016</firstpublished>
    <feature_limitinventory />
    <attr name="look_button"><![CDATA[
                    <tbody><tr>
                        <td>
                            <table>
                                <tbody><tr>
                                    <td>
                                        <button disabled="" role="button" id="cmdCompassNW" class="compassbutton ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary ui-button-disabled ui-state-disabled" type="button" title="northwest" onclick="compassClick(_compassDirs[0]);"><span style="left: 0.8em;" class="ui-button-icon-primary ui-icon ui-icon-arrowthick-1-nw"></span><span style="left: 0.8em;" class="ui-button-text"></span></button>
                                    </td>
                                    <td>
                                        <button role="button" id="cmdCompassN" class="compassbutton ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" type="button" title="north" onclick="compassClick(_compassDirs[1]);"><span style="left: 0.8em;" class="ui-button-icon-primary ui-icon ui-icon-arrowthick-1-n"></span><span style="left: 0.8em;" class="ui-button-text"></span></button>
                                    </td>
                                    <td>
                                        <button disabled="" role="button" id="cmdCompassNE" class="compassbutton ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary ui-button-disabled ui-state-disabled" type="button" title="northeast" onclick="compassClick(_compassDirs[2]);"><span style="left: 0.8em;" class="ui-button-icon-primary ui-icon ui-icon-arrowthick-1-ne"></span><span style="left: 0.8em;" class="ui-button-text"></span></button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <button disabled="" role="button" id="cmdCompassW" class="compassbutton ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary ui-button-disabled ui-state-disabled" type="button" title="west" onclick="compassClick(_compassDirs[3]);"><span style="left: 0.8em;" class="ui-button-icon-primary ui-icon ui-icon-arrowthick-1-w"></span><span style="left: 0.8em;" class="ui-button-text"></span></button>
                                    </td>
                                    <td>
                                        &nbsp;
                                    </td>
                                    <td>
                                        <button role="button" id="cmdCompassE" class="compassbutton ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" type="button" title="east" onclick="compassClick(_compassDirs[4]);"><span style="left: 0.8em;" class="ui-button-icon-primary ui-icon ui-icon-arrowthick-1-e"></span><span style="left: 0.8em;" class="ui-button-text"></span></button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <button disabled="" role="button" id="cmdCompassSW" class="compassbutton ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary ui-button-disabled ui-state-disabled" type="button" title="southwest" onclick="compassClick(_compassDirs[5]);"><span style="left: 0.8em;" class="ui-button-icon-primary ui-icon ui-icon-arrowthick-1-sw"></span><span style="left: 0.8em;" class="ui-button-text"></span></button>
                                    </td>
                                    <td>
                                        <button role="button" id="cmdCompassS" class="compassbutton ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" type="button" title="south" onclick="compassClick(_compassDirs[6]);"><span style="left: 0.8em;" class="ui-button-icon-primary ui-icon ui-icon-arrowthick-1-s"></span><span style="left: 0.8em;" class="ui-button-text"></span></button>
                                    </td>
                                    <td>
                                        <button disabled="" role="button" id="cmdCompassSE" class="compassbutton ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary ui-button-disabled ui-state-disabled" type="button" title="southeast" onclick="compassClick(_compassDirs[7]);"><span style="left: 0.8em;" class="ui-button-icon-primary ui-icon ui-icon-arrowthick-1-se"></span><span style="left: 0.8em;" class="ui-button-text"></span></button>
                                    </td>
                                </tr>
                            </tbody></table>
                        </td>
                        <td>
                            <table>
                                <tbody><tr>
                                    <td>
                                        <button disabled="" role="button" id="cmdCompassU" class="compassbutton ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary ui-button-disabled ui-state-disabled" type="button" title="up" onclick="compassClick(_compassDirs[8]);"><span style="left: 0.8em;" class="ui-button-icon-primary ui-icon ui-icon-triangle-1-n"></span><span style="left: 0.8em;" class="ui-button-text"></span></button>
                                    </td>
                                    <td>
                                        <button disabled="" role="button" id="cmdCompassIn" class="compassbutton ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-button-disabled ui-state-disabled" type="button" title="in" onclick="compassClick(_compassDirs[10]);"><span style="left: 0.8em;" class="ui-button-text">in</span></button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <button disabled="" role="button" id="cmdCompassD" class="compassbutton ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary ui-button-disabled ui-state-disabled" type="button" title="down" onclick="compassClick(_compassDirs[9]);"><span style="left: 0.8em;" class="ui-button-icon-primary ui-icon ui-icon-triangle-1-s"></span><span style="left: 0.8em;" class="ui-button-text"></span></button>
                                    </td>
                                    <td>
                                        <button disabled="" role="button" id="cmdCompassOut" class="compassbutton ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-button-disabled ui-state-disabled" type="button" title="out" onclick="compassClick(_compassDirs[11]);"><span style="left: 0.8em;" class="ui-button-text">out</span></button>
                                    </td>
                                </tr>
                            </tbody></table>
                        </td>
                    </tr>
                </tbody>
                            
                    ]]></attr>
    <start type="script">
      JS.eval ("$('#compassTable').html('" + game.look_button + "');")
    </start>
    <roomenter type="script">
    </roomenter>
  </game>
  <object name="room">
    <inherit name="editor_room" />
    <object name="player">
      <inherit name="editor_object" />
      <inherit name="editor_player" />
      <maximumvolume type="int">3</maximumvolume>
    </object>
    <exit alias="west" to="secondroom">
      <inherit name="westdirection" />
      <visible />
      <locked />
    </exit>
    <exit alias="southeast" to="thirdroom">
      <inherit name="southeastdirection" />
      <locked type="boolean">false</locked>
      <visible />
    </exit>
  </object>
  <object name="secondroom">
    <inherit name="editor_room" />
    <exit alias="east" to="room">
      <inherit name="eastdirection" />
    </exit>
  </object>
  <object name="thirdroom">
    <inherit name="editor_room" />
    <exit alias="northwest" to="room">
      <inherit name="northwestdirection" />
    </exit>
  </object>
</asl>

One clue is that you get stuff like this in the console when you change rooms:

Uncaught Error: cannot call methods on button prior to initialization; attempted to call method 'disable'
Uncaught Error: cannot call methods on button prior to initialization; attempted to call method 'enable'

But I still don't know what the solution is.

Ok, this seems to fix it (though the icons seem skewed to me). Add this to your game object:

    <attr name="js"><![CDATA[
	   $("#cmdCompassNW").button();
	    $("#cmdCompassN").button();
	    $("#cmdCompassNE").button();
	    $("#cmdCompassW").button();
	    $("#cmdCompassE").button();
	    $("#cmdCompassSW").button();
	    $("#cmdCompassS").button();
	    $("#cmdCompassSE").button();
	    $("#cmdCompassU").button();
	    $("#cmdCompassD").button();    
	    $("#cmdCompassIn").button();    
	    $("#cmdCompassOut").button();    
    ]]>
    </attr>

And then in your start (or InitUserInterface function!) invoke this after you set up the HTML:

      JS.eval(game.js)

You could probably roll the previous eval line into the js attribute if you want.

It looks like you need to set up the "jQuery-ness" of the buttons before you use them.

Thanks. That fixed it.

I'm sure this will be very useful, thanks to both Pixie and Jay, as having a central clickable compass button is quite useful and familiar with people / common in games. Be it a 'look' action or whatever other action a person might want it to be.

So this is what I have. A colour blend for the background. The compass at the top so it stays still when the list change, and three new buttons, LOOK, WAIT and HELP. The orange has all gone too.

<!--Saved by Quest 5.6.5783.24153-->
<asl version="550">
  <include ref="English.aslx" />
  <include ref="Core.aslx" />
  <game name="Playing With The User Interface">
    <gameid>ebd963a1-e1fc-4d7f-8cc6-5b589caad5c0</gameid>
    <version>1.0</version>
    <firstpublished>2016</firstpublished>
    <feature_limitinventory />
    <js>
      $("#cmdCompassNW").button();
       $("#cmdCompassN").button();
       $("#cmdCompassNE").button();
       $("#cmdCompassW").button();
       $("#cmdCompassE").button();
       $("#cmdCompassSW").button();
       $("#cmdCompassS").button();
       $("#cmdCompassSE").button();
       $("#cmdCompassU").button();
       $("#cmdCompassD").button();   
       $("#cmdCompassIn").button();   
       $("#cmdCompassOut").button();   
    
                                        </js>
    <extrabuttonjs><![CDATA[
      <script>
        function ui_extra_look() {
          ui_extra('look');
        }          
        function ui_extra_wait() {
          ui_extra('wait');
        }          
        function ui_extra_help() {
          ui_extra('help');
        }          
        function ui_extra(s) {
          ASLEvent("HandleUiRequest", "" + s);
        }          
      </script>
      <style>
        .ui-selected {
          background-color: darkblue;
        }
      </style>
      
                                ]]></extrabuttonjs>
    <attr name="look_button"><![CDATA[
                                <tbody><tr>
                                    <td>
                                        <button disabled="" role="button" id="cmdCompassNW" class="compassbutton ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary ui-button-disabled ui-state-disabled" type="button" title="northwest" onclick="compassClick(_compassDirs[0]);"><span style="left: 0.8em;" class="ui-button-icon-primary ui-icon ui-icon-arrowthick-1-nw"></span><span style="left: 0.8em;" class="ui-button-text"></span></button>
                                    </td>
                                    <td>
                                        <button role="button" id="cmdCompassN" class="compassbutton ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" type="button" title="north" onclick="compassClick(_compassDirs[1]);"><span style="left: 0.8em;" class="ui-button-icon-primary ui-icon ui-icon-arrowthick-1-n"></span><span style="left: 0.8em;" class="ui-button-text"></span></button>
                                    </td>
                                    <td>
                                        <button disabled="" role="button" id="cmdCompassNE" class="compassbutton ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary ui-button-disabled ui-state-disabled" type="button" title="northeast" onclick="compassClick(_compassDirs[2]);"><span style="left: 0.8em;" class="ui-button-icon-primary ui-icon ui-icon-arrowthick-1-ne"></span><span style="left: 0.8em;" class="ui-button-text"></span></button>
                                    </td>
                                    <td>
                                        <button disabled="" role="button" id="cmdCompassU" class="compassbutton ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary ui-button-disabled ui-state-disabled" type="button" title="up" onclick="compassClick(_compassDirs[8]);"><span style="left: 0.8em;" class="ui-button-icon-primary ui-icon ui-icon-triangle-1-n"></span><span style="left: 0.8em;" class="ui-button-text"></span></button>
                                    </td>
                                    <td>
                                        <button disabled="" role="button" id="cmdCompassIn" class="compassbutton ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-button-disabled ui-state-disabled" type="button" title="in" onclick="compassClick(_compassDirs[10]);"><span style="margin-left:-7px;" class="ui-button-text">in</span></button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <button disabled="" role="button" id="cmdCompassW" class="compassbutton ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary ui-button-disabled ui-state-disabled" type="button" title="west" onclick="compassClick(_compassDirs[3]);"><span style="left: 0.8em;" class="ui-button-icon-primary ui-icon ui-icon-arrowthick-1-w"></span><span style="left: 0.8em;" class="ui-button-text"></span></button>
                                    </td>
                                    <td>
                                        <button role="button" id="cmdCompassL" class="compassbutton ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" type="button" title="look" onclick="ui_extra_look();"><span style="left: 0.8em;" class="ui-button-icon-primary ui-icon ui-icon-search"></span><span style="left: 0.8em;" class="ui-button-text"></span></button>
                                    </td>
                                    <td>
                                        <button role="button" id="cmdCompassE" class="compassbutton ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" type="button" title="east" onclick="compassClick(_compassDirs[4]);"><span style="left: 0.8em;" class="ui-button-icon-primary ui-icon ui-icon-arrowthick-1-e"></span><span style="left: 0.8em;" class="ui-button-text"></span></button>
                                    </td>
                                    <td>
                                        <button disabled="" role="button" id="cmdCompassD" class="compassbutton ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary ui-button-disabled ui-state-disabled" type="button" title="down" onclick="compassClick(_compassDirs[9]);"><span style="left: 0.8em;" class="ui-button-icon-primary ui-icon ui-icon-triangle-1-s"></span><span style="left: 0.8em;" class="ui-button-text"></span></button>
                                    </td>
                                    <td>
                                        <button disabled="" role="button" id="cmdCompassOut" class="compassbutton ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-button-disabled ui-state-disabled" type="button" title="out" onclick="compassClick(_compassDirs[11]);"><span style="margin-left:-10px;" class="ui-button-text">out</span></button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <button disabled="" role="button" id="cmdCompassSW" class="compassbutton ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary ui-button-disabled ui-state-disabled" type="button" title="southwest" onclick="compassClick(_compassDirs[5]);"><span style="left: 0.8em;" class="ui-button-icon-primary ui-icon ui-icon-arrowthick-1-sw"></span><span style="left: 0.8em;" class="ui-button-text"></span></button>
                                    </td>
                                    <td>
                                        <button role="button" id="cmdCompassS" class="compassbutton ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" type="button" title="south" onclick="compassClick(_compassDirs[6]);"><span style="left: 0.8em;" class="ui-button-icon-primary ui-icon ui-icon-arrowthick-1-s"></span><span style="left: 0.8em;" class="ui-button-text"></span></button>
                                    </td>
                                    <td>
                                        <button disabled="" role="button" id="cmdCompassSE" class="compassbutton ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary ui-button-disabled ui-state-disabled" type="button" title="southeast" onclick="compassClick(_compassDirs[7]);"><span style="left: 0.8em;" class="ui-button-icon-primary ui-icon ui-icon-arrowthick-1-se"></span><span style="left: 0.8em;" class="ui-button-text"></span></button>
                                    </td>
                                    <td>
                                        <button role="button" id="cmdCompassZ" class="compassbutton ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" type="button" title="wait" onclick="ui_extra_wait();"><span style="left: 0.8em;" class="ui-button-icon-primary ui-icon ui-icon-clock"></span><span style="left: 0.8em;" class="ui-button-text"></span></button>
                                    </td>
                                    <td>
                                        <buttonrole="button" id="cmdCompassH" class="compassbutton ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" type="button" title="help" onclick="ui_extra_help();"><span style="left: 0.8em;" class="ui-button-icon-primary ui-icon ui-icon-help"></span><span style="left: 0.8em;" class="ui-button-text"></span></button>
                                    </td>
                                </tr>
                </tbody>
                            
                                                            ]]></attr>
    <showborder type="boolean">false</showborder>
    <showcommandbar type="boolean">false</showcommandbar>
    <start type="script">
      OutputTextNoBr (game.extrabuttonjs)
      JS.eval ("$('#compassTable').html('" + game.look_button + "');")
      JS.eval ("$('#compassLabel').insertBefore('#inventoryLabel')")
      JS.eval ("$('#compassAccordion').insertBefore('#inventoryLabel')")
      JS.eval (game.js)
    </start>
    <roomenter type="script">
    </roomenter>
  </game>
  <object name="room">
    <inherit name="editor_room" />
    <object name="player">
      <inherit name="editor_object" />
      <inherit name="editor_player" />
      <maximumvolume type="int">3</maximumvolume>
    </object>
    <exit alias="west" to="secondroom">
      <inherit name="westdirection" />
      <visible />
      <locked />
    </exit>
    <exit alias="southeast" to="thirdroom">
      <inherit name="southeastdirection" />
      <locked type="boolean">false</locked>
      <visible />
    </exit>
    <object name="hat">
      <inherit name="editor_object" />
      <take />
    </object>
    <object name="teapot">
      <inherit name="editor_object" />
    </object>
  </object>
  <object name="secondroom">
    <inherit name="editor_room" />
    <exit alias="east" to="room">
      <inherit name="eastdirection" />
    </exit>
  </object>
  <object name="thirdroom">
    <inherit name="editor_room" />
    <exit alias="northwest" to="room">
      <inherit name="northwestdirection" />
    </exit>
  </object>
  <function name="InitUserInterface">
    JS.eval ("$('.ui-icon').css('background-image', 'url(" + GetFileURL("ui-icons_000000_256x240.png") + ")')")
    JS.eval ("$('#status').css('background-image', 'none');")
    JS.eval ("$('#status').css('background-color', 'darkblue');")
    JS.eval ("$('.ui-selected').css('background-color', 'darkblue');")
    JS.eval ("$('#compassLabel').css('color', 'darkblue');")
    JS.eval ("$('#statusLabel').css('color', 'darkblue');")
    JS.eval ("$('#inventoryLabel').css('color', 'darkblue');")
    JS.eval ("$('#placesObjectsLabel').css('color', 'darkblue');")
    JS.eval ("$('#gamePanes').css('background-color', 'transparent');")
    JS.eval ("$('#gameBorder').css('background-color', 'transparent');")
    JS.eval ("$('#gameBorder').css('border', 'none');")
    BackBlend ("lightblue", "#ffff80")
  </function>
  <function name="HandleUiRequest" parameters="s">
    if (s = "1") {
      HandleSingleCommand ("look")
    }
    else if (s = "2") {
      HandleSingleCommand ("wait")
    }
    else if (s = "3") {
      HandleSingleCommand ("help")
    }
    else {
      HandleSingleCommand (s)
    }
  </function>
  <function name="BackBlend" parameters="colour1, colour2">
    JS.eval ("$('#gamePanes').css('background-color', 'transparent');")
    JS.eval ("$('#gameBorder').css('background-color', 'transparent');")
    JS.eval ("$('body').css('background-color', '" + colour1 + "');")
    JS.eval ("$('body').css('background-image', 'linear-gradient(to bottom,  " + colour1 + ", " + colour2 + ")');")
    JS.eval ("$('body').css('background-image', '-webkit-linear-gradient(top,  " + colour1 + ", " + colour2 + ")');")
    JS.eval ("$('body').css('background-attachment', 'fixed');")
    JS.eval ("$('body').css('background-position', 'left bottom');")
  </function>
</asl>

NICE! Is there a place to add a save button to replace the button from the title bar when playing online?