Open the command-line tool, create a new PhoneGap project named compass, and add the platforms you want to target for this example.

Add the Compass API plugin using the following command:

$ cordova plugin add cordova-plugin-device-orientation

Go to the www folder and open the index.html file. The three div tags are used to handle the compass arrows and the background:

<section id="compass">
    <div id="compassbg"></div>
    <div id="north"></div>
    <div id="arrow"></div>
</section>

Go to the css folder, open the index.css file, and define the rules needed to have a separate background for each element of the compass:

#compassbg {
    background-image: url(../img/Compass.png);
}
#north {
    background-image: url(../img/arrow_direction.png);
}

#arrow {
    background-image: url(../img/arrow_beta.png);
}

#compass, #arrow, #north, #compassbg  {
    background-repeat: no-repeat...