I'm looking to add this Compass to Quest

Forgewright

11 Feb 2018 17:20 (edited)

Just putting this here if anyone wants to figure out how to add it to a Quest game.
I've tried for the last couple of weeks but am to ignorant.
It is a compass with a working arrow. Preferably in the left panes

Here's the Compass Link .

K.V.

11 Feb 2018 18:05 (edited)

Okay.

(The needle just spins and spins. Is that what you want? That's what the original script has going on (I think).)

compass.js

/*
* Modified version of https://github.com/rheh/HTML5-canvas-projects/tree/master/compass
*/
var img = null,
	needle = null,
	ctx = null,
	degrees = 0;
function clearCompassCanvas() {
	 // clear canvas
	ctx.clearRect(0, 0, 200, 200);
}
function drawCompass() {
	clearCompassCanvas();
	ctx.drawImage(img, 0, 0);
	ctx.save();
	ctx.translate(100, 100);
	ctx.rotate(degrees * (Math.PI / 180));
	ctx.drawImage(needle, -100, -100);
	ctx.restore();
	degrees += 5;
}
function imgLoaded() {
	setInterval(drawCompass, 100);
}
function initCompass() {
  var canvas = document.getElementById('compass');
  if (canvas.getContext('2d')) {
    ctx = canvas.getContext('2d');
    needle = new Image();
    needle.src = 'https://raw.githubusercontent.com/rheh/HTML5-canvas-projects/master/compass/needle.png';
    img = new Image();
    img.src = 'https://raw.githubusercontent.com/rheh/HTML5-canvas-projects/master/compass/compass.png';
    img.onload = imgLoaded;	
  } else {
    alert('Canvas not supported!');
  }
}

<!--Saved by Quest 5.7.6606.27193-->
<asl version="550">
  <include ref="English.aslx" />
  <include ref="Core.aslx" />
  <game name="Compass Image with Needle">
    <gameid>98aa909f-76b9-4b1d-8b66-df7604f75715</gameid>
    <version>1.0</version>
    <firstpublished>2018</firstpublished>
    <description><![CDATA[Compass and images from:<br/>https://github.com/rheh/HTML5-canvas-projects/tree/master/compass]]></description>
    <start type="script">
    </start>
  </game>
  <object name="room">
    <inherit name="editor_room" />
    <description type="script"><![CDATA[
      JS.eval ("$('#compass').remove();")
      msg ("<canvas id='compass' width='200' height='200'></canvas>")
      JS.eval ("initCompass();")
    ]]></description>
    <enter type="script">
      JS.eval ("initCompass();")
    </enter>
    <object name="player">
      <inherit name="editor_object" />
      <inherit name="editor_player" />
    </object>
  </object>
  <javascript src="compass.js" />
</asl>

Forgewright

11 Feb 2018 19:06

Nay. I'd have to get the needle to follow the script. Maybe just wiggle a little in a certain direction. Looking to make an instrument on a pirate ship.

Need to get the compass into an Additional Pane.

I could put direction into the status pane and quit trying to get so fancy, after all it is a Text adventure.

K.V.

11 Feb 2018 19:09 (edited)

The non-spinning (unless you tell it to) edition (rough draft):

compass.js

/*
* Modified version of https://github.com/rheh/HTML5-canvas-projects/tree/master/compass
*/

// Global variable
var img = null,
	needle = null,
	ctx = null,
	degrees = 360;

function clearCompassCanvas() {
	 // clear canvas
	ctx.clearRect(0, 0, 200, 200);
}

function drawCompass() {

	clearCompassCanvas();

	// Draw the compass onto the canvas
	ctx.drawImage(img, 0, 0);

	// Save the current drawing state
	ctx.save();

	// Now move across and down half the 
	ctx.translate(100, 100);

	// Rotate around this point
	ctx.rotate(degrees * (Math.PI / 180));

	// Draw the image back and up
	ctx.drawImage(needle, -100, -100);

	// Restore the previous drawing state
	ctx.restore();
}

function drawSpinningCompass() {
	clearCompassCanvas();
	ctx.drawImage(img, 0, 0);
	ctx.save();
	ctx.translate(100, 100);
	ctx.rotate(degrees * (Math.PI / 180));
	ctx.drawImage(needle, -100, -100);
	ctx.restore();
	degrees += 5;
}

function initCompassSpin() {
	spinInt = setInterval(drawSpinningCompass, 100);
}

function stopCompassSpin(){
  clearInterval(spinInt);
}

var dirObj = {
  'n':360,
  'ne':45,
  'e':90,
  'se':135,
  's':180,
  'sw':225,
  'w':270,
  'nw':315
}

function setCompass(direction){
  //Default is north
  for(var dir in dirObj){
    if(dir === direction){
       degrees = dirObj[direction];
       alert(dirObj[direction]);
    }
  }
}

function setCompassAndDraw(direction){
  setCompass(direction);
  drawCompass();
}

function initCompass() {
  var canvas = document.getElementById('compass');
  if (canvas.getContext('2d')) {
    ctx = canvas.getContext('2d');
    needle = new Image();
    needle.src = 'https://raw.githubusercontent.com/rheh/HTML5-canvas-projects/master/compass/needle.png';
    img = new Image();
    img.src = 'https://raw.githubusercontent.com/rheh/HTML5-canvas-projects/master/compass/compass.png';
    //img.onload = imgLoaded;	
    drawCompass();
  } else {
    alert('Canvas not supported!');
  }
}

<!--Saved by Quest 5.7.6606.27193-->
<asl version="550">
  <include ref="English.aslx" />
  <include ref="Core.aslx" />
  <game name="Compass Image with Needle">
    <gameid>98aa909f-76b9-4b1d-8b66-df7604f75715</gameid>
    <version>1.0</version>
    <firstpublished>2018</firstpublished>
    <description><![CDATA[Compass and images from:<br/>https://github.com/rheh/HTML5-canvas-projects/tree/master/compass]]></description>
    <start type="script">
    </start>
  </game>
  <object name="room">
    <inherit name="editor_room" />
    <description type="script"><![CDATA[
      JS.eval ("$('#compass').remove();")
      msg ("<canvas id='compass' width='200' height='200'></canvas>")
      JS.eval ("initCompass();")
    ]]></description>
    <object name="player">
      <inherit name="editor_object" />
      <inherit name="editor_player" />
    </object>
  </object>
  <javascript src="compass.js" />
</asl>

K.V.

11 Feb 2018 19:19 (edited)

As soon as I eat, I'll revise it so the image loads in the background when the game starts.

(Sometimes it doesn't load in the initial room description.)

...and I didn't see your post.

An additional pane?

A little wiggle?

Inconceivable!

(Actually, it sounds pretty easy to pull off. (Sorry. I just got done watching The Princess Bride.))

K.V.

11 Feb 2018 20:38 (edited)

Okay, check this out.

compass.js

/*
* Modified version of https://github.com/rheh/HTML5-canvas-projects/tree/master/compass
* Version 1.4
*/

var img = null,
	needle = null,
	ctx = null,
	degrees = 360;
	
function clearCompassCanvas() {
  if(typeof(ctx) !== "null"){
	ctx.clearRect(0, 0, 200, 200);
  }else{
    initCompass();
  }
}

function drawCompass() {
  if(typeof(ctx) !== "null"){
	clearCompassCanvas();
	ctx.drawImage(img, 0, 0);
	ctx.save();
	ctx.translate(100, 100);
	ctx.rotate(degrees * (Math.PI / 180));
	ctx.drawImage(needle, -100, -100);
	ctx.restore();
  }else{
    initCompass();
  }
}

function drawSpinningCompass() {
	clearCompassCanvas();
	ctx.drawImage(img, 0, 0);
	ctx.save();
	ctx.translate(100, 100);
	ctx.rotate(degrees * (Math.PI / 180));
	ctx.drawImage(needle, -100, -100);
	ctx.restore();
	degrees += 5;
}

function initCompassSpin() {
	spinInt = setInterval(drawSpinningCompass, 100);
}

function stopCompassSpin(){
  clearInterval(spinInt);
}

var dirObj = {
  'n':360,
  'ne':45,
  'e':90,
  'se':135,
  's':180,
  'sw':225,
  'w':270,
  'nw':315
}

function setCompass(direction){
  for(var dir in dirObj){
    if(dir === direction){
       degrees = dirObj[direction];
    }
  }
}

function setCompassByDegrees(deg){
  degrees = deg;
}

function setCompassAndDraw(direction){
  setCompass(direction);
  drawCompass();
}

function setCompassByDegreesAndDraw(deg){
  setCompassByDegrees(deg);
  drawCompass();
}

function initCompass() {
  var canvas = document.getElementById('compass');
  if (canvas.getContext('2d')) {
    ctx = canvas.getContext('2d');
    $("#needle-img").remove();
    needle = new Image();
    needle.src = 'https://raw.githubusercontent.com/rheh/HTML5-canvas-projects/master/compass/needle.png';
    $("#comp-img").remove();
    img = new Image();
    img.src = 'https://raw.githubusercontent.com/rheh/HTML5-canvas-projects/master/compass/compass.png';
    //img.onload = function(){alert('loaded compass');};
    img.onerror = function(){console.log('reloading compass');initCompass();};
    drawCompass();
  } else {
    alert('Canvas not supported!');
  }
}

<!--Saved by Quest 5.7.6404.15496-->
<asl version="550">
  <include ref="English.aslx" />
  <include ref="Core.aslx" />
  <game name="Compass Image with Needle">
    <gameid>98aa909f-76b9-4b1d-8b66-df7604f75715</gameid>
    <version>1.3</version>
    <firstpublished>2018</firstpublished>
    <description><![CDATA[Compass and images from:<br/>https://github.com/rheh/HTML5-canvas-projects/tree/master/compass]]></description>
    <feature_advancedscripts />
    <start type="script">
    </start>
    <inituserinterface type="script"><![CDATA[
      msg ("<div style='display:none'><img id='needle-img' src = 'https://raw.githubusercontent.com/rheh/HTML5-canvas-projects/master/compass/needle.png'/><br/><img id='comp-img' src='https://raw.githubusercontent.com/rheh/HTML5-canvas-projects/master/compass/compass.png'/></div>")
      msg ("<div id=\"compassImagePane\" style=\"display:none\" ><canvas id=\"compass\" class=\" ui-accordion-content ui-widget-content ui-corner-bottom  ui-corner-top\" width=\"200\" height=\"200\"></canvas></div>")
      JS.eval ("$('#compassImagePane').insertAfter($('#compassAccordion')).show();setTimeout(function(){initCompass();drawCompass();},100);")
    ]]></inituserinterface>
  </game>
  <object name="room">
    <inherit name="editor_room" />
    <description type="script">
    </description>
    <beforeenter type="script">
    </beforeenter>
    <enter type="script">
      JS.setCompassAndDraw ("s")
    </enter>
    <object name="player">
      <inherit name="editor_object" />
      <inherit name="editor_player" />
    </object>
    <exit alias="south" to="second room">
      <inherit name="southdirection" />
    </exit>
  </object>
  <object name="second room">
    <inherit name="editor_room" />
    <beforeenter type="script">
      JS.setCompassAndDraw ("n")
    </beforeenter>
    <exit alias="north" to="room">
      <inherit name="northdirection" />
    </exit>
  </object>
  <javascript src="compass.js" />
</asl>

To hide the image pane:
JS.uiHide("#compassImagePane")

To show it:
JS.uiShow("#compassImagePane")

To point the needle to a certain degree:
JS.setCompassByDegreesAndShow(degree)
(This can be 1-360, 360 being North.)

To point the needle to a certain direction:
JS.setCompassAndShow(direction)

Use abbreviations: "n","ne","e","se","s","sw","w","nw"

Forgewright

12 Feb 2018 01:47

I don't think that word means what you think it means....

Now I just need an altimeter and I can make the Spirit of St. Louis fly again!
No. Wait I was building a Pirate ship...

I was ready to call it quits after trying to do this. Searching and searching for the right code. I was close several times but as it has been said so many times before here, not having some quotes or a semi colon screws the pooch.

Nice KV, Thanks

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

I'm looking to add this Compass to Quest

Connect

Products

Resources

Support