SpinningArrow Sample Overview

The SpinningArrow sample application demonstrates how you can create a simple rotation image application using the rotate CSS element.

For information on creating the sample application project in the IDE, see Creating Sample Applications.

The following figure illustrates the main screen of the SpinningArrow.

Figure: SpinningArrow screen

The application opens with the main screen that shows a spinning arrow after touching the screen.

Source Files

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

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/main.js	This file contains the code for handling the canvas functionality of the application.

Implementation

The following code adds the event handlers for the click and rotary events,

document.getElementById('direction_button').addEventListener('click', rotateArrow, false);
document.addEventListener('rotarydetent', function(ev) 
{
    var direction = ev.detail.direction;
    rotateArrow(direction);
});

The rotateArrow() function rotates the arrow image based on the events.

function rotateArrow(rotary_direction) 
{
    var interval,
        direction = document.querySelector('#direction');

    /* If there is a rotary event direction, 'initial_time' is increased */
    if (rotary_direction === "CW" || rotary_direction === "CCW")
    {
        if (initial_time < 150)
        {
            initial_time = initial_time + 1;
        }
    }
    /* If there is no direction and a click event, 'initial_time' is set randomly */
    else 
    {
        initial_time = (Math.random() * 50) + 100;
    }

    if (click_status === false) 
    {
        direction.style.transform = 'rotate(' + deg + 'deg)';
        click_status = true;
        /* setInterval at 0.075 sec */
        interval = setInterval(function() 
        {
            if ((initial_time--) < 0) 
            {
                clearInterval(interval);
                click_status = false;
            }

            /* If rotary_direction is "CW", then rotate to right */
            if (rotary_direction === "CW")
            {
                deg = deg + initial_time;
            }
            /* If rotary_direction is "CCW", then rotate to left */
            else
            {
                deg = deg - initial_time;
            }

            direction.style.transform = 'rotate(' + deg + 'deg)';
        }, 75);
    }
}