[Takis Karagiannopoulos]

To Wayne or someone else who can help out,

I saw the post for a compass here http://www.genuitec.com/support-genuitec/viewtopic.php?f=14&t=6009 (Examples, HOW-TOs).

As i could not reply to this post i start a new one here.

First of all this is an incretible app and very useful!

I would like to ask if you can reverse the degrees. For examble East 180 to West 270.

And, if it is possible, when the compass shaws specific degrees a text can appear.. How can i do this?

Thank you for your help.

Waiting for an answer

Takis

[support-michael]

> I would like to ask if you can reverse the degrees. For examble East 180 to West 270.

hmm! I don’t understand this question. Please restate it?
The compass dial points to the current degree value provided by the device. In the following screenshot East and West are 90 degrees and 270 degrees respectively. See attachment compass-east-west.png

> it is possible, when the compass shaws specific degrees a text can appear.. How can i do this?

The text widget that displays the current degrees is updated with small amount of javascript. See updateHeadingText function in the compass_www/compass_custom.js file. You can implement any type of special text output based on current heading in a similar manner by examining the heading value.

function updateHeading(h) {
    var heading = h.magneticHeading.toFixed(2);
    
    updateHeadingText(heading);
    
    //setup compass display
    compassDevice.degrees = h.magneticHeading;
    drawCompassDevice();
}

function updateHeadingText(txt) {
    $('[id$=headingTxt]').text(txt);
}

Attachments:

You must be logged in to view attached files.

[Takis Karagiannopoulos]

Thank you for the reply.

I have changed the photo with your “arrow” with this photo .

So when the compass calculates, the photo moves like your arrow.

I have a text field which counts degrees at the top of the compass.
I need the same one at the bottom of the compass, so it can count the opposite.

Example On the photo above you see the Heading 1 field which counts degrees and works great for the compass.
I need one more field that will count degrees in the area Heading 2.

The second think is, how can we create text field for every degree. I did not understand what you wrote me.
Example i need for 15-18 degrees the text : “Sample 1” etc. 18-20 degrees “Sample 2”
I need this to be done for the whole compass.

I would appreciate if you could help me

Thank you
Takis

[support-octavio]

Hi takis,

As Wayne stated, you need to update the value of your textfields in the updateHeading function and set the value based on current heading. You will need to do something similar adding your snippet to set the text of secondary widget with your heading 2 value (you should calculate it in updateHeading function). Hope this make sense.

function updateHeading(h) {
var heading = h.magneticHeading.toFixed(2);

updateHeadingText(heading); // Call the function that receives the value of current heading value to set in the text widget value

//setup compass display
compassDevice.degrees = h.magneticHeading;
drawCompassDevice();
}

function updateHeadingText(txt) {
$(‘[id$=headingTxt]’).text(txt); // the funtion receives the value of heading and update the value of text widget
}

[Takis Karagiannopoulos]

Octavio,

thanx a lot for your help.
i tried a lot to solve the problem but i am not a code expert.
So i send you a sample file if you can help.
I need text to appear when the compass shows degrees.
Differnt text for every part of the compass.

Thank you very much for the help.

Takis

Attachments:

You must be logged in to view attached files.

[Takis Karagiannopoulos]

Octavio,
i understand that you are bussy, but i appreciate if you could help me find a solution.
Please be so kind and give me a sample how to do it, and i will finish it by my own.

Thank you
Takis

[Takis Karagiannopoulos]

Octavio or someone else who knows,

i tried to solve the problem with the compass i mentioned in previous posts, but did not find a dolution.
I would appreciate if someone could help me out.
I only need an example code, so i can go forward.

Thank you again

Takis

[Brandon]

@ Takis
If I understand correctly the opposite one should show the opposite of the real compass.
To do this you need a little coding math. I think something like this is what you mean:

if (degree > 180)
{
oppDegree = degree – 180;
}else
{
oppDegree = degree + 180;
}

then set your text field to oppDegree

[Takis Karagiannopoulos]

Thank you Brandon for the quick reply.

I tried the script but it does not work.

I created the text field oppDegree and put the code to custom.js
But it does not work. What did i do wrong?

/**
 * Called when document is loaded.
 */
phoneui.documentReadyHandler = function() {
    if (phoneui.cordovaAvailable()) { 
        // Running on device; wait for device API libraries to load
        document.addEventListener("deviceready", initCompassDevice, false);
    } else { 
        //running in browser, give UI 1/2 sec to init
        setTimeout(initCompassDevice, 500);
    }
}

//incorporated compass graphics and animation technique adapted from: 
//http://geeksretreat.wordpress.com/2012/05/09/html-5-canvas-an-animated-compass/

var compassDevice = {
        img:    null,
        needle: null,
        ctx:    null,
        degrees:0};

function updateHeading(h) {
    var heading = h.magneticHeading.toFixed(2);
    
    updateHeadingText(heading);

    //setup compass display
    compassDevice.degrees = h.magneticHeading;
    drawCompassDevice();
}

function compassError(error) {
    updateHeadingText('ERROR');
}

function updateHeadingText(txt) {

    $('[id$=headingTxt]').text(txt);

//code oppDegree//

if (degree > 180)
{
oppDegree = degree - 180;
}else
{
oppDegree = degree + 180;
}

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

function drawCompassDevice() {

    clearCompassDevice();

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

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

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

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

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

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

}

function initCompassDevice() {
    // Grab the compass element
    var canvas = document.getElementById('compass-device');

    // Canvas supported?
    if (canvas.getContext('2d')) {
        compassDevice.ctx = canvas.getContext('2d');

        // Load the needle image
        compassDevice.needle = new Image();
        compassDevice.needle.src = 'needle.png';

        // Load the compass image
        compassDevice.img = new Image();
        compassDevice.img.src = 'compass.png';

    } else {
        updateHeadingText('UI ERROR');
        return;
    }
    
    //start continuous monitoring of compass heading changes
    var options = { frequency: 250 };
    compassWatch = navigator.compass.watchHeading(
                        updateHeading, 
                        compassError, 
                        options);
}

[Brandon]

Try this;

function updateHeadingText(txt) {

$(‘[id$=headingTxt]’).text(txt);

//code oppDegree//

degree = compassDevice.degrees; //set degree to current heading

if (degree > 180)
{
oppDegree = degree – 180;
}else
{
oppDegree = degree + 180;
}

} //It looks like you were missing this bracket also – if not please ignore

You must now assign the oppDegree variable to the text field you want to display it in.

[Takis Karagiannopoulos]

Thank you for the reply Brandon, i appreciate it.

I tried the code and it does not work. I t does not appear at all. What is wrong?

function updateHeadingText(txt) {
    $('[id$=headingTxt]').text(txt)
//      $('[id$=oppDegree]').text(txt);   // With this code i see the degrees of the heading. but the degrees are the same as headingTxt.

degree = compassDevice.degrees; //set degree to current heading

if (degree > 180)
{
 oppDegree = degree - 180;
} else {
        oppDegree = degree + 180;
}
}

[Brandon]

You still need to set your opposite text, which if Im not mistaken by your code might be soemthing like this:
At the end of the function, before the last bracket, try this line:

 $('[id$=oppDegree]').text(oppDegree); //setting your opposite text to the oppDegree

[Takis Karagiannopoulos]

Brandon, thank you very much!!!
This is the solution.

And one last question.
How can i import text to specific degrees?
This is the code

valueDegree = compassDevice.degrees;
  if (valueDegree >= 337.50 || (valueDegree >= 0 && valueDegree < 22.50))
{
        infoDegree.value = Sample 01;
  } else if (valueDegree >= 22.50 && valueDegree < 67.50))
{
        infoDegree.value = Sample 02 
  }
        $('[id$=infoDegree]').text(infoDegree);
}

[Brandon]

Try something like this:

valueDegree = compassDevice.degrees;
  if (valueDegree >= 337.50 || (valueDegree >= 0 && valueDegree < 22.50))
{
      $('[id$=infoDegree]').text('Sample 01');

  } else if (valueDegree >= 22.50 && valueDegree < 67.50))
{
        $('[id$=infoDegree]').text('Sample 02');
  }
        
} 

[Takis Karagiannopoulos]

Brandon.
thank you so much for helping me out.

Everything worked fine, but only in the simulator. When i tried it on ipad, the oppDegree createds for some reason extra numbers. For examble 58.50789858988.
How can i deactivate the other numbers?

Thank you in advance

 function updateHeadingText(txt) {

    $('[id$=headingTxt]').text(txt)

    degree = compassDevice.degrees

  if (degree > 180) {
                   oppDegree = degree -180;

  } else {
          oppDegree = degree +180
}
     $('[id$=oppDegree]').text(oppDegree);

test on iPad 4, iOS 7.0.4
MobiOne 2.6.1

[Author]

Posts