Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

How to load images dynamically on WRT Widgets

From Wiki
Jump to: navigation, search
Article Metadata
Article
Created: felipebzr (12 Sep 2008)
Last edited: hamishwillee (01 Aug 2012)
Featured Article
05 Oct
2008

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.

Diagram webruntime.png

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 Nokia Developer 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.

Contents

Web Runtime QuickStart

If you are not familiar with widgets development basics then you may look at the Nokia Developer 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.developer.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.developer.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.developer.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.

See also

There are many resources that you can use to find out more about developing widgets. Some of them are listed below.

Widgets for the S60 Platform eLearning

Getting Started with Web Runtime Widgets for S60 Screencast

Web Developer's Library

Author

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

This page was last modified on 1 August 2012, at 05:28.
171 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×