View Full Version : Application Toolbar On Canvas For S60v3/S60v5 Devices

26-06-2009, 06:37 AM

Toolbar on canvas for touch and non touch S60 devices
by Marcelo Barros

Toolbars are a common components in modern operating systems, in general represented as a panel with small icons or similar components that can be moved and enabled/disabled. Toolbars add functionality and facilities for users, making enjoyable the user experience. However, few S60 applications have support for toolbars, even in touch enabled devices, like XpressMusic 5800, where touch screen is an invite for toolbars.

In this Forum Nokia article is presented a toolbar implementation for PyS60 applications called CanvasToolbar. It can be used with S60 3rd and 5th devices, with support for moving and enabling/disabling functions.

CanvasToolbar is a remote controlled component. It does not have its own event loop for processing key presses or touches. Instead, a callback function is used to notify selections or focus changes. This design decision keeps the component small and simple to use while leaving all control actions to the main loop of canvas based applications.
For using it, create a set of icons with same size and load them as a list of Image objects. After, create a CanvasToolbar with the following parameters:
canvas (Image): image buffer where toolbar will be drawn. In general, this is our screen buffer.
sel_cbk (function): a callback to be called when an icon is selected or toolbar is touched.
redraw_cbk (function): a callback to be called when redrawing is necessary.
imgs (list of Images): image list with icons.
position ((int,int)): initial position for drawing the toolbar.
background color ((int,int,int)): toolbar background color.

It will be necessary to write some event loop for touch devices or to create key binds for non touch devices. In next sections, CanvasToolbar source code and usage examples are presented.

CanvasToolbar and non touch devices
CanvasToolbar is used with E71. Left navi key was programmed to show/hide the toolbar and up/down navi keys are used to change the focus. Selection key is used to select. It can be download from this link. Copy code and icons to e:\python\.

CanvasToolbar and touch devices
In the following code snippet, CanvasToolbar is used with XpressMusic 5800. Double touch show/hide the toolbar. It can be download from this link. Copy code and icons to e:\python\.

Tested on devices E71, XpressMusic 5800

<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/CJ9mwvuI3gc"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/CJ9mwvuI3gc" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object>