How to load images dynamically on WRT Widgets

From Forum Nokia Wiki

Reviewer Approved

When planning to build Web Runtime (WRT) widgets, bear in mind that widgets are Web pages and some common tasks are done in exactly the same way as in Web development.

Widgets use the same standard Internet technologies as Web pages (HTML, JavaScript, AJAX, CSS, Flash). In this article JavaScript, HTML, and CSS are used to load images on demand, which is essential to reduce costs with data transfer. By following the instructions given in this article you will be able to build a camera surveillance system based on BBC London Jam Cams.

Web Runtime Widgets is an extension to the Webkit-based browser engine on S60 3rd Edition, FP2. For a complete list of devices compatible with S60 3rd Edition, FP2, see the Forum Nokia device specifications. You should also know that there are several S60 3rd Edition, Feature Pack 1 devices (such as Samsung SGH-G810, SGH-i450, SGH-i550, SGH-i560, and LG-KT610) that support Web Runtime, as well as selected Nokia S60 3rd Edition, Feature Pack 1 devices that support WRT via software update (from the following sw onwards): Nokia E90 Communicator sw 210.34.75, Nokia N82 sw 20.0.062, Nokia N95 sw 21.0.016, and Nokia N95 8GB sw 15.0.015.

To get an up-to-date list of supported devices, go to the WRT Wiki page.

Web Runtime QuickStart

If you already haven't, familiarize yourself with widgets development basics. Take a look at the Forum Nokia widgets Web page to get an overview or check out the Web Runtime QuickStart page.

How to load images at run-time

Widgets can embed resources to be used in both offline and online mode but there are times when you need to load updated images, such as in a surveillance system. Web developers probably know an easy way to do this, since overloading must be avoided in high-performance Web sites.

The below code shows a simple page that loads an image on startup.

<html>
<head>
 
<script type="text/javascript">
 
function loadImage(aLink) {
         var _imgCam = document.getElementById('imgCam');
         _imgCam.src = aLink;
}
 
</script>
</head>
 
<!--- execute the loadImage function on load --->
<body onload="loadImage('http://www.forum.nokia.com/img/forum_nokia_logo.gif')">
<img id="imgCam" />
</body>
</html>

Handling image loading and errors

The code below displays a friendly image (animated GIF) when requesting for external data and implementing an error handling mechanism.

<html>
<head>
 
<script type="text/javascript">
 
function loadImage(aLink) {
        var _imgCam = document.getElementById('imgCam');
        var _divLoading = document.getElementById('divImgLoading');
        var _divLoaded = document.getElementById('divImgLoaded');
       _imgCam.src = null; 
}
 
_imgCam.onload = function (evt) {
       _divLoading.style.visibility = 'hidden';
       _divLoaded.style.visibility = 'visible';
} 
 
_imgCam.onerror = function (evt) {
        _divLoading.style.visibility = 'hidden';
        _divLoaded.style.visibility = 'hidden';
        alert('Error loading image');
}
 
_divLoaded.style.visibility = 'hidden';
_divLoading.style.visibility = 'visible';
_imgCam.src = aLink;
 
</script>
 
<style media="screen">
    #divImgLoading {
        position: absolute;
    }
 
    #divImgLoaded {
        position: absolute;
    }
</style>
</head>
 
<!--- execute the loadImage function on load --->
<body onload="loadImage('http://www.forum.nokia.com/img/forum_nokia_logo.gif')">
<div id="divImgLoading" style="visibility:hidden">
<img src="loading.gif" />
</div>
 
<div id="divImgLoaded" style="visibility:hidden">
<img id="imgCam" />
</div>
</body>
</html>

Handling key events

Once the image is loaded, the user can go back to the camera's menu by pressing any key.

window.onkeydown = function() {
     divLoading.style.visibility = 'hidden';
     divImgLoaded.style.visibility = 'hidden'; 
}

For a complete guide in how to handle key events, see the article How to interpret key events in WRT widgets?.

How to use intervals

Very often we want to repeat actions at periodic intervals in applications, for example, by using an interval function to update a time display.

Usage

var interval_name = setInterval(function, interval, params...);
clearInterval(interval_name);

Example

var img_interval = setInterval(loadImage, 60000, "http://www.forum.nokia.com/img/forum_nokia_logo.gif");

Using device native features

The setDisplayLandscape method was used to change the orientation to the landscape mode. This is the unique device native feature used in this example.

// event handler
   window.onload = function() {
         // check if rotation is supported
        if(widget.isrotationsupported) {
           // changes the orientation of the widget screen
           widget.setDisplayLandscape(); 
       }
   }

Conclusion

The rapid-development time and power of WRT has shown how easy and fast it is to develop content for Nokia devices using existing Web technologies. The distribution mechanism used by widgets is one of the WOW factors of the technology adoption.

Author

--FelipeAndrade 20:10, 12 September 2008 (EEST) Profile

Community: Wiki