A horizontal compass that slides across the screen according to which way you are facing.

For my app which is a navigation app I intend to allow the user to add points of interest and navigate to them. I’d like to include a compass at the top of the screen which has a north marker and alllows for he addition of extra markers defined by the user. However instead of being a traditional compass I’d like it to slide left and right according to your heading along with the icons. How might I go about this? Is there an obvious and simple way to do it?

  • here is what I use on a Glance widget, of course to adapt according your needs.

    (sorry I was not able to post it as code, blocked by the forum)

    function onUpdate(dc) {
    GlanceView.onUpdate(dc);
    dc.setColor(0xAA0000, -1);

    var SensInfo = Sensor.getInfo();
    heading_rad = SensInfo.heading;

    var gW = dc.getWidth(),gH = dc.getHeight();

    if (heading_rad==null||heading_rad==0){heading_rad=Activity.getActivityInfo().currentHeading;}

    if( heading_rad != null) {

    if( heading_rad < 0 ) {
    heading_rad = 2*Math.PI+heading_rad;
    }



    dc.drawRectangle(0, gH/2, gW, 1);
    dc.setColor(0xFFFFFF, -1);

    var heading_deg = heading_rad *180/Math.PI;
    var x = heading_deg/180.0*gW;
    dc.drawText(0-x, gH/2, 2, "W", 1|4);
    dc.drawText(gW/2-x, gH/2, 2, "N", 1|4);
    dc.drawText(gW-x, gH/2, 2, "E", 1|4);
    dc.drawText(gW+gW/2-x, gH/2, 2, "S", 1|4);
    dc.drawText(gW*2-x, gH/2, 2, "W", 1|4);
    dc.drawText(gW*2+gW/2-x, gH/2, 2, "N", 1|4);
    dc.drawText(gW*3-x, gH/2, 2, "N", 1|4);


    var z= gW.toFloat()/4.0;

    for (var i = 1;i<14;i=i+2){
    dc.drawRectangle(z*i-x, gH/2-4, 1, 10);
    }



    dc.setColor(0xAA0000, -1);
    dc.fillPolygon([[gW/2,0],[gW/2+7,10],[gW/2-7,10]]);
    dc.drawText(gW/2, gH/2+5, 2, (heading_rad*180/Math.PI).format("%03d")+"°",1);

    } else {
    dc.drawText(gW/2, gH/2, 2, "NO DATA", 1|4);
    }
    }