×
Namespaces

Variants
Actions

Nokia Asha web apps - Traffic Light

From Nokia Developer Wiki
Jump to: navigation, search

This article shows how to create a Traffic Light using mwl’s timer() method.

Article Metadata
Code ExampleTested with
SDK: Nokia Web SDK 1.2.0
Devices(s): X3-00/ 02/ Emulator
Compatibility
Platform(s): Series 40 6th Edition and later
Series 40 6th Edition (initial release)
Device(s): Must have Nokia Browser
Article
Keywords: timer ()
Created: somnathbanik (21 Jun 2011)
Last edited: hamishwillee (09 May 2013)

Contents

Introduction

The timer() method expires after a interval of time. stopTimer() method is used to stop the timer or even the browser automatically stops timers when a page is unloaded. If this method is invoked with the same label as an existing timer, the method stops the running timer and replaces it with the new one.

General Syntax

<static> mwl.timer(label, interval, numberOfTimes, methodString)

Where label is the string that identifies the timer . interval is the time interval in milliseconds . numberOfTimes defines how many times the timer will execute, if its set to 0 it means that there is no upper bound or it’s a infinite timer. methodString is the statement to execute when the timer fires, it could be mwl functions also, it runs on the proxy server rather than the phone. So some times the timer also depends on the internet connection, if the connection is slow there may be different behavior in executing the statements when the timer fires

Basic Idea

We will create three div , each div has an image (red, yellow, green). The timer fires every after 2 sec, and display content in each div sequentially, leaving the other div in hidden position.

Implementation

Lets create a basic web app project ( File->New-> Series 40 web app (wgt) -> basic web app project)


basic.css

.show {
display: block;
}
.hide {
display: none;
}
.trafic
{
margin-left: auto;
margin-right: auto;
width:240px;
height: 300px;
overflow:hidden;
vertical-align: top;
background-color: #000000;
}
#view1
{
margin-left:80px;
margin-top:10px;
}
#view2
{
margin-left:80px;
margin-top:100px;
}
 
#view3
{
margin-left:80px;
margin-top:200px;
}
#StartCar
{
margin-left:70px;
margin-top:0px;
}

trafic is the main container which defines the total area of the screen along with the background color. hide and show are the classes to hide and show a particular div. We have taken three div view1, view2, and view3.

index.html

    <body onload="javascript:init();">
<div class="trafic">
<div class= "red" id="view1"><img src="TraficRed.png" alt="Loading"/></div>
<div class = "yellow" id="view2"><img src="TraficYellow.png" alt="Loading"/></div>
<div class = "green" id="view3"><img src="TraficGreen.png" alt="Loading"/></div>
<div id="StartCar">
<a onclick="mwl.timer('timer', 2000, 0, 'timer()'); return false;" href="#"> <img src="clickme.gif" /> </a>
</div>
</div>
</body>

When the program loads we see the image clickme.gif. On clicking the image mwl.timer() executes the timer() function ever after 2sec.

basic.js

We define two global variables: lightcount tells us whether red or the green light is activated right now. And LightString defines the light to be activated next.

var lightcount = 0;
var LightString = "Yellow";
function init()
{
// Add your code steps here
mwl.hide('#view1');
mwl.hide('#view2');
mwl.hide('#view3');
 
}
 
function timer()
{
mwl.hide('#StartCar');
 
if (LightString == "Red") {
 
lightcount =0;
LightString = "Yellow";
 
mwl.hide('#view2');
mwl.hide('#view3');
mwl.show('#view1');
 
 
 
}
else if(LightString == "Yellow")
{
 
if (lightcount == 0) {
 
 
LightString = "Green";
}
else
if (lightcount == 1) {
LightString = "Red";
}
 
mwl.hide('#view1');
mwl.hide('#view3');
mwl.show('#view2');
}
else if( LightString == "Green")
{
lightcount =1;
LightString ="Yellow";
mwl.hide('#view1');
mwl.hide('#view2');
mwl.show('#view3');
}
 
}

When the body loads we hide all the views in init() fundtion, leaving the Click Me image displayed in the screen. In timer() method first we hide the StartCar div which contains the clickme.gif image. Initially LightString is set to Yellow, the mwl.insertHTML() will display the view2 with the Yellow image hiding other views. As now the value of lightcount is 0 , so the LightString will set to Green and then when the timer fires again we see the green light on the screen. Once the green light is activated we set the lightcount to 1 and LightString to Yellow, so the next light on the screen is again Yellow but this time the value of lightcount is 1 and thus it change the LightString to Red and then next the Red light glows on the screen . As this is a infinite timer so this process keeps on repeating.

Source Code

The full source code presented in this article is available here File:TimerS40WebApps.zip

This page was last modified on 9 May 2013, at 13:43.
73 page views in the last 30 days.
×