PhoneGap compatible Compass Sample

This Phonegap compatible Compass sample is  the simple application which was written on HTML5 and uses PhoneGAP compatible Compass API to get compass headings from device sensors.

Application have one panel with compass imape and two buttons. Button Run switches on/off reading compass headings from device sensor, button Freeze fixes on the screen compass rose or needle during device rotation.

Internal structure of application

Application consistes of main index.html file, the list of javascripts files and the list css/images files.

General layout is written on JQueryMobile framework, so internal structure of index.html file will be familiar. (More details about JQueryMobile can be found in documentation )

// we have one page
<div data-role="page" id="page1">
    // header of the page
        <div data-role="header">  
            <h1>Compass</h1>  
        </div> 
 
    // content of the page
        <div data-role="content">
        // elements of compass
        // image of compass rose
            <div id=compass></div>
 
        //  image of compass needle
            <div id=needle></div>

        //  box for info panel
            <div id=info-panel></div>
        </div>
 
    // footer of the page
        <div data-role="footer" data-position="fixed">
        //  button Run/Stop
            <select data-role="slider" name="control" id="control">
                <option value="on">Run</option>
                <option value="off">Stop</option>
            </select>

        // button Freeze
            <select data-role="slider" name="freeze" id="freeze">
                <option value="on">Needle Free</option>
                <option value="off">North Freeze</option>
            </select>
        </div>
</div>

Compass object consists of 2 separate div boxes, which have thier own css style description in compass.css file

#compass { 
    width:200px;
    height:200px;
 
    /*border: solid 2px red;*/ 
    border-radius:200px; 
    background:url(../resource/compass_rose.png); 
    margin-left:auto; margin-right:auto; 
} 
#needle { 
    position:absolute; 
    background:url(../resource/needle.png); 
    width:24px; 
    height:200px; 
    z-index:1000; 
    top:60px; 
    left:50%; 
    -webkit-transform:translateX(-12px); 
}

Reportez-vous à notre Notice d'optimisation pour plus d'informations sur les choix et l'optimisation des performances dans les produits logiciels Intel.