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

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.

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);
   }
}