PyS60 UI tutorials, part 1: Text and Canvas

by Bogdan Galiceanu


Warning: ksort() expects parameter 1 to be array, object given in /home/croozeus/public_html/blogs/wp-content/plugins/yet-another-related-posts-plugin/includes.php on line 256

I’ve recently written some articles about UI controls on the Forum Nokia Wiki. I thought I’d publish some of the material here 🙂

In this post  we’ll talk about Text and Canvas from the appuifw module.

Text

Text is a text editor UI control that allows text with various formatting to be displayed.

Code:

import appuifw, e32
app_lock = e32.Ao_lock()
#Define the exit function
def quit():
  app_lock.signal()
appuifw.app.exit_key_handler = quit
 
#Create an instance of Text and set it as the application's body
t = appuifw.Text()
appuifw.app.body = t
 
#Set the color of the text
t.color = 0xFF0000
#Set the font by name, size and flags
t.font = (u"Nokia Hindi S60", 25, None)
#Set the color in which the text will be highlighted
t.highlight_color = 0xFFFF00
#Highlight the text in a normal way and set the style of the text to underlined
t.style = (appuifw.HIGHLIGHT_STANDARD | appuifw.STYLE_UNDERLINE)
 
#Write text to see the effect
t.add(u"This is an example")
 
#Wait for the user to request the exit
app_lock.wait()

The following screenshot illustrates the output:

text

Canvas

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

Code:

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()

The following screenshot illustrates the output:

canvas2

Related posts:

  1. Simple window manager for PyS60 Some days ago I was asked about a PyS60 application...
  2. Font Test v1.20 This is sample code for PyS60 (at least v1.4.5), presenting...
  3. Watch Me – Light Touch v1.00 Watch Me - Light Touch is a fun little application...
  4. Undocumented appuifw.Text() font method parameters PyS60 1.4.4 manual briefly says (page 27) that the "font"...
  5. Nixie Watch v1.20 (for touch screen) Nixie (tube) watch is an amazing analog watch look-a-like, which...

Related posts brought to you by Yet Another Related Posts Plugin.