Example 31: Graphics primitives
import appuifw, e32, key_codes, graphicsWHITE = (255,255,255)
RED = (255,0,0)
BLUE = (0,0,255)
YELLOW = (255,255,0)
def draw_rectangle():
img.rectangle((50,100,100,150), fill = YELLOW)
def draw_point():
img.point((90,50), outline = RED, width = 30)
def draw_text():
img.text((10,40), u"Hello", fill = WHITE)
def handle_redraw(rect):
if img:
canvas.blit(img)
def handle_event(event):
ev = event["keycode"]
if event["type"] == appuifw.EEventKeyDown:
img.clear(BLUE)
if ev == key_codes.EKeyUpArrow:
draw_point()
elif ev == key_codes.EKeyRightArrow:
draw_text()
elif ev == key_codes.EKeyDownArrow:
draw_rectangle()
elif ev == key_codes.EKeyLeftArrow:
draw_point()
draw_text()
draw_rectangle()
handle_redraw(None)
def quit():
app_lock.signal()
img = None
canvas = appuifw.Canvas(redraw_callback = handle_redraw,\
event_callback = handle_event)
appuifw.app.body = canvas
appuifw.app.screen = "full"
appuifw.app.exit_key_handler = quit
w, h = canvas.size
img = graphics.Image.new((w, h))
img.clear(BLUE)
app_lock = e32.Ao_lock()
app_lock.wait()
At the beginning of the script we assign various colors to constants:
WHITE, RED, BLUE and YELLOW. The color representation consists of a
three-element tuple of integers in the range from 0 to 255, representing
the red, green and blue (RGB) components of the color.
If you have written some HTML code, you may be familiar with the
hexadecimal representation of a color: in this case, the color is specified
as a value such as 0xRRGGBB, where RR is the red, GG the green and
BB the blue component of the color, each of which is a hexadecimal
value from 0x0 to 0xff (0–255). Using this notation, we could specify, for
instance, YELLOW = 0xffff00.
Next we define three functions, each of which handles the drawing of
a single primitive:
• draw rectangle(): the first tuple specifies the top-left and lowerright
corners of the rectangle, in format (x1, y1, x2, y2) and the fill
parameter defines its color.
• draw point(): the first tuple specifies the center of the point at
(x,y). The parameter width specifies the size in pixels and outline
specifies the color.
• draw text(): draws the Unicode string u"Hello" on image at the
specific location that is defined in the first tuple.
Toward the bottom of the script you can see the following lines:
w, h = canvas.size
img = graphics.Image.new((w, h))
They create a new Image object whose size equals to the canvas.
Before these lines, notice that we create a Canvas object and
assign two callback functions to it, which handle redrawing of the canvas
and key events, correspondingly. As you might guess, the function
img.clear(BLUE) clears the image to blue initially. Note that the
image should be created only after the Canvas object is assigned to
the application body. Otherwise canvas.size may return an incorrect
tuple for the screen size.
The function handle event() draws the primitives on the image,
img, depending on which key is pressed. When any key is pressed down,
the image is first cleared for drawing. Then, a point, text, a rectangle or
all of these are drawn in the respective functions, based on the actual
keycode. Finally, we request the canvas to be redrawn by calling the
function handle redraw().
The function handle redraw() is simple: it gets a single parameter,
rect, that defines the area on the screen that must be redrawn. For
simplicity, we may omit this parameter and always redraw the whole
screen. A performance-critical application, say a game, might use the
rect parameter to speed up redrawing if only a fraction of the canvas
must be refreshed.
Both the Image and Canvas objects have a blit() function that
is used to copy one image to another. In this case, we copy img to
the canvas as whole, thus no additional parameters are specified for the
function. The if clause ensures that no blitting is performed until img
has been initialized appropriately.
