Page Example

Spinning Arrow Sample Overview

The Spinning Arrow sample application demonstrates how you can create a simple rotating image application using the rotate CSS element.

The following figure illustrates the main screen of the Spinning Arrow.

Figure: Spinning Arrow screen

SpinningArrow screen SpinningArrow screen

The application opens with the main screen that shows a spinning arrow after touching the screen or rotating the rotary detent.

Source Files

You can create and view the sample application project, including the source files, in the IDE.

Table: Source files
File name Description
config.xml This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.
css/style.css This file contains the CSS styling for the application UI.
index.html This is a starting file from which the application starts loading. It contains the layout of the application screens.
js/app.js This file contains the code for handling the canvas functionality of the application.

Implementation

Application Layout

Create the main page, which consists of 2 elements: arrow image and page button.

<!-- index.html -->
<div>
   <div id="direction"></div>
   <input type="button" id="direction-button"/>
</div>

Click and Rotary Events

Add event handlers for the click and rotary events:

/* js/app.js */
/* Handle the click event of the direction-button element */
document.getElementById('direction-button').addEventListener('click', function()
{
   rotateArrow("CW");
},
false);

/* Handle the rotarydetent event */
document.addEventListener('rotarydetent', function(ev)
{
   var direction = ev.detail.direction;
   rotateArrow(direction);
});

Arrow Image Rotation

The rotateArrow() method rotates the arrow image based on the events:

/* js/app.js */
function rotateArrow(rotaryDirection)
{
   var interval,
       direction = document.querySelector('#direction');

   /* If there is a click event and rotateStatus is false */
   if (rotateStatus === false)
   {
      /* initialTime sets a random number (100 ~ 150) */
      initialTime = (Math.random() * 50) + 100;
      rotateStatus = true;

      /* Every 0.075 seconds, run the interval timer */
      interval = setInterval(function()
      {
         /* If initialTime smaller than 0, clear the timer */
         if ((initialTime--) < 0)
         {
            clearInterval(interval);
            rotateStatus = false;
         }

         /* If direction is CW, rotate to clockwise direction */
         if (rotaryDirection === "CW")
         {
            deg = deg + initialTime;
         }
         /* If not, rotate to counter-clockwise direction */
         else
         {
            deg = deg - initialTime;
         }
         direction.style.transform = 'rotate(' + deg + 'deg)';
      }, 75);
   }
}