From Forum Nokia Wiki

ID		Creation date	January 3, 2009
Platform	S60 1st Edition, S60 2nd Edition, S60 3rd Edition	Tested on devices	Nokia N95, Nokia E90
Category	Python	Subcategory	UI

Keywords (APIs, classes, methods, functions): appuifw, graphics

Overview

This article explains how to use the Canvas class from the appuifw module in Python.

Canvas is a UI control that provides a drawable area on the screen and support for handling key events.

Preconditions

Note: The method open of the Image class is not available in S60 1st Edition.

Source code

Simple canvas example with an image being displayed

import appuifw, e32, graphics
 
 
app_lock = e32.Ao_lock()
#Define the exit function 
def quit():
	app_lock.signal()
appuifw.app.exit_key_handler = quit
 
#Open an image
img = graphics.Image.open("C:\\logo_forumnokia.gif")
 
#Define a function that will be called when the canvas needs to be redrawn
def handle_redraw(rect):
	#Place the image on the canvas
	c.blit(img)
 
#Create an instance of Canvas and set it as the application's body
c = appuifw.Canvas(redraw_callback=handle_redraw)
appuifw.app.body = c
 
#Wait for the user to request the exit
app_lock.wait()

Complex canvas example with key binding, shape drawing and text writing

import appuifw, e32, graphics, sysinfo
from key_codes import *
 
 
app_lock = e32.Ao_lock()
#Define the exit function 
def quit():
	app_lock.signal()
appuifw.app.exit_key_handler = quit
 
#Set the screen to full
appuifw.app.screen = 'full'
 
#Get the screen's width and height
screen_w, screen_h = sysinfo.display_pixels()
 
#Define a set of coordinates at which a dot will be drawn on the image
coord = (screen_w / 2, screen_h / 2)
 
#Define a function that will be called when the canvas needs to be redrawn
def handle_redraw(rect):
	#Clear the canvas
	c.clear()
	#Write text
	c.text((screen_w / 10, screen_h - screen_h / 10), u"Move the dot", 0x008000, font=(u'Nokia Hindi S60', 35, appuifw.STYLE_BOLD))
	#Draw the dot
	c.point(coord, 0xff0000, width=10)
 
#Define a function that will be called when one of the bound keys is pressed
def move(direction):
	global coord
	#Modify the dot's coordinates by 10 pixels according to the direction
	if (direction == 'left') and (coord[0] - 10 >= 0):
		coord = (coord[0] - 10, coord[1])
	if (direction == 'right') and (coord[0] + 10 <= screen_w):
		coord = (coord[0] + 10, coord[1])
	if (direction == 'up') and (coord[1] - 10 >= 0):
		coord = (coord[0], coord[1] - 10)
	if (direction == 'down') and (coord[1] + 10 <= screen_h):
		coord = (coord[0], coord[1] + 10)
	#Redraw the canvas
	handle_redraw(())
 
#Create an instance of Canvas and set it as the application's body
c = appuifw.Canvas(redraw_callback=handle_redraw)
appuifw.app.body = c
 
#Bind the navigation keys
c.bind(EKeyLeftArrow, lambda:move('left'))
c.bind(EKeyRightArrow, lambda:move('right'))
c.bind(EKeyUpArrow, lambda:move('up'))
c.bind(EKeyDownArrow, lambda:move('down'))
 
#Wait for the user to request the exit
app_lock.wait()

Post conditions

The Canvas object is created and displayed.

Simple canvas example with an image being displayed

Complex canvas example with key binding, shape drawing and text writing

Additional information

The constructor for the Canvas class is Canvas([redraw_callback=None, event_callback=None, resize_callback=None]), where

• redraw_callback is a function that is called whenever a part of the canvas has been obscured by something, is then revealed and needs to be redrawn.
• event_callback is a function that is called whenever a raw key event is received.
• resize_callback is a function that is called when screen size is changed when the canvas rect size has been changed. It takes a two-element tuple that contains the new clientRect width and height as its argument.

Instances of Canvas have the attribute size, which is tuple containing the current width and height of the canvas.