Image Buffering with Canvas

[dottore11]

Hey guys, I'm relatively new to developing for the S60 and have thoroughly checked FAQs, the wiki, and relevant articles regarding this question so I hope this isn't answered somewhere already.

Anyway, I wanted to make a simple application that debugged the N95's accelerometer information onto the screen (I chose to use a canvas), and I was cleaning it up and wanted to put a nice logo on the bottom. However, because I was clearing and redrawing the canvas every single time, there was a lot of flickering with the image being drawn over and over. Is there a way to fix this using some sort of buffering, or perhaps an easier way of going about what I'm doing? I've attached the relevant code below.

# Manual: "Support is device dependent, e.g. Nokia 5500 supports # OrientationEventFilter 
#and Nokia N95 supports RotEventFilter"
import sensor, 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

'''Initialization'''
appuifw.app.screen = 'full'
screen_w, screen_h = sysinfo.display_pixels()
xAxisData = yAxisData = zAxisData = 0

'''Returns the dictionary of available sensors ''' 
sensors = sensor.sensors()


def handle_sensor_raw(a_data):
    ''' What happens when a sensor event is received '''
    
    global xAxisData, yAxisData, zAxisData
    
    yAxisData = a_data['data_1']
    xAxisData = a_data['data_2']
    zAxisData = a_data['data_3']
    handle_redraw(())
    #print 'X-Axis: ', xAxisData
    #print 'Y-Axis: ', yAxisData
    #print 'Z-Axis: ', zAxisData
    
def handle_redraw(rect):
    # Clear canvas
    c.clear()
    # Write text
    c.text((screen_w/10, screen_h - screen_h / 2 - 30), u'x-Axis: '+str(xAxisData), 0x0080000, font='title')
    c.text((screen_w/10, screen_h - screen_h / 2 - 10), u'y-Axis: '+str(yAxisData), 0x0080000, font='title')
    c.text((screen_w/10, screen_h - screen_h / 2 + 10), u'z-Axis: '+str(zAxisData), 0x0080000, font='title')


    
# Does this device have Accelerator Sensor? If so, set it up.
if sensors.has_key('AccSensor'):
    SENSOR_ACC = True 
    sensor_data = sensors['AccSensor'] 
    sensor_acc = sensor.Sensor(sensor_data['id'], sensor_data['category']) 
    #sensor_acc.set_event_filter(sensor.OrientationEventFilter()) 
    # should probably add some sort of event filter here
    sensor_acc.connect(handle_sensor_raw)

# Create instance of Canvas and set it up
c = appuifw.Canvas(redraw_callback=handle_redraw)
appuifw.app.body = c    


# Wait for user to request exit
app_lock.wait()

# turn off sensor to save power
sensor_acc.disconnect()

Thanks so much for your help guys!

- David

EDIT: I realized that I pasted in code where I had already taken out the drawing of the logo. Basically what I did was I had a c.blit command that redrew the image right after each of the c.text commands in the relevant callback method. So I guess I'm asking what's the best way to accomplish what I'm trying to do.

[bogdan.galiceanu]

Hi,

You could place everything on a blank image and then put that on the canvas. So you create a blank image the size of the screen, draw the text and logo on it, and your handle_redraw function would have c.blit(img) at the end. That way everything is drawn at once, hopefully avoiding any flickering.

[dottore11]

Thanks, this worked like a charm. For reference, the code I used is below. Thanks for all your help!

# Manual: "Support is device dependent, e.g. Nokia 5500 supports # OrientationEventFilter 
#and Nokia N95 supports RotEventFilter"
import sensor, appuifw, e32, graphics, sysinfo
from key_codes import *

# no idea what this line does
app_lock = e32.Ao_lock()

'''Define the exit function'''
def quit():
    app_lock.signal()
appuifw.app.exit_key_handler = quit

'''Initialization'''
appuifw.app.screen = 'full'
screen_w, screen_h = sysinfo.display_pixels()
xAxisData = yAxisData = zAxisData = 0

'''Returns the dictionary of available sensors ''' 
sensors = sensor.sensors()
blank = graphics.Image.open('C:\\Data\\Images\\Pictures\\blankscreen.gif')
duke = graphics.Image.open('C:\\Data\\Images\\Pictures\\duke_logo.gif')


def handle_sensor_raw(a_data):
    ''' What happens when a sensor event is received '''
    
    global xAxisData, yAxisData, zAxisData
    
    yAxisData = a_data['data_1']
    xAxisData = a_data['data_2']
    zAxisData = a_data['data_3']
    handle_redraw(())
    #print 'X-Axis: ', xAxisData
    #print 'Y-Axis: ', yAxisData
    #print 'Z-Axis: ', zAxisData
    
def handle_redraw(rect):
    # Clear canvas
    #c.clear()
    blank.clear()
    # Write text
    blank.text((screen_w/10, screen_h - screen_h / 2 - 30), u'x-Axis: '+str(xAxisData), 0x0080000, font='title')
    blank.text((screen_w/10, screen_h - screen_h / 2 - 10), u'y-Axis: '+str(yAxisData), 0x0080000, font='title')
    blank.text((screen_w/10, screen_h - screen_h / 2 + 10), u'z-Axis: '+str(zAxisData), 0x0080000, font='title')
    # Write Logo and blank
    blank.blit(duke, target=(0,200))
    c.blit(blank)


    
# Does this device have Accelerator Sensor? If so, set it up.
if sensors.has_key('AccSensor'):
    SENSOR_ACC = True 
    sensor_data = sensors['AccSensor'] 
    sensor_acc = sensor.Sensor(sensor_data['id'], sensor_data['category']) 
    #sensor_acc.set_event_filter(sensor.OrientationEventFilter()) 
    # should probably add some sort of event filter here
    sensor_acc.connect(handle_sensor_raw)

# Create instance of Canvas and set it up
c = appuifw.Canvas(redraw_callback=handle_redraw)
appuifw.app.body = c    


# Wait for user to request exit
app_lock.wait()

# turn off sensor to save power
sensor_acc.disconnect() 

[marcelobarrosalmeida]

dottore11

To avoid (in fact, minimize) conflicts from you call to handle_redraw() and canvas calls to handle_redraw(), I recommend to use only blit() inside handle_redraw(). For instance, if you code is writing in "blank" and you rotate the phone, you may have two calls to handle_redraw() at nearly same time.

My suggestion:

def my_handle_redraw(rect=None):
    # Clear canvas
    #c.clear()
    blank.clear()
    # Write text
    blank.text((screen_w/10, screen_h - screen_h / 2 - 30), u'x-Axis: '+str(xAxisData), 0x0080000, font='title')
    blank.text((screen_w/10, screen_h - screen_h / 2 - 10), u'y-Axis: '+str(yAxisData), 0x0080000, font='title')
    blank.text((screen_w/10, screen_h - screen_h / 2 + 10), u'z-Axis: '+str(zAxisData), 0x0080000, font='title')
    # Write Logo and blank
    blank.blit(duke, target=(0,200))
    handle_redraw()

def handle_redraw(rect=None):
    if c and blank:
        c.blit(blank)

So, for canvas, use handle_redraw() ( c = appuifw.Canvas(redraw_callback=handle_redraw) ) but when calling the redrawing by yourself, use my_handle_redraw()