Discussion Board

Results 1 to 4 of 4
  1. #1
    Registered User
    Join Date
    Dec 2009

    Image Buffering with Canvas

    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():
    appuifw.app.exit_key_handler = quit
    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']
        #print 'X-Axis: ', xAxisData
        #print 'Y-Axis: ', yAxisData
        #print 'Z-Axis: ', zAxisData
    def handle_redraw(rect):
        # Clear canvas
        # 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']) 
        # should probably add some sort of event filter here
    # 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
    # turn off sensor to save power
    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.
    Last edited by dottore11; 2009-12-26 at 07:26.

  2. #2
    Nokia Developer Moderator
    Join Date
    Oct 2007
    Deva, Romania

    Re: Image Buffering with Canvas


    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.

  3. #3
    Registered User
    Join Date
    Dec 2009

    Re: Image Buffering with Canvas

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

    PHP Code:
    # Manual: "Support is device dependent, e.g. Nokia 5500 supports # OrientationEventFilter 
    #and Nokia N95 supports RotEventFilter"
    import sensorappuifwe32graphicssysinfo
    from key_codes import 

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

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

    appuifw.app.screen 'full'
    screen_wscreen_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 xAxisDatayAxisDatazAxisData
    xAxisData a_data['data_2']
    zAxisData a_data['data_3']
    #print 'X-Axis: ', xAxisData
        #print 'Y-Axis: ', yAxisData
        #print 'Z-Axis: ', zAxisData
    def handle_redraw(rect):
    # Clear canvas
    # Write text
    blank.text((screen_w/10screen_h screen_h 30), u'x-Axis: '+str(xAxisData), 0x0080000font='title')
    blank.text((screen_w/10screen_h screen_h 10), u'y-Axis: '+str(yAxisData), 0x0080000font='title')
    blank.text((screen_w/10screen_h screen_h 10), u'z-Axis: '+str(zAxisData), 0x0080000font='title')
    # Write Logo and blank

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

    # Create instance of Canvas and set it up
    appuifw.app.body c    

    # Wait for user to request exit

    # turn off sensor to save power

  4. #4
    Super Contributor
    Join Date
    Nov 2007

    Re: Image Buffering with Canvas


    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
        # 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))
    def handle_redraw(rect=None):
        if c and 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()

Similar Threads

  1. load image problem
    By Pmarcoen in forum Mobile Java Media (Graphics & Sounds)
    Replies: 2
    Last Post: 2009-08-23, 06:19
  2. overlay an image over camera canvas on nokia n 95 using overlaycontrol
    By colea2001 in forum General Development Questions
    Replies: 2
    Last Post: 2009-05-04, 14:08
  3. problem with loading 2 image, png, in canvas
    By D|3-H4rD in forum Mobile Java Media (Graphics & Sounds)
    Replies: 7
    Last Post: 2007-04-15, 09:10
  4. Opening a JPEG Image
    By ummarbhutta in forum Mobile Java Media (Graphics & Sounds)
    Replies: 8
    Last Post: 2007-02-15, 06:34
  5. Nokia Image Converter
    By davidpurdie in forum General Development Questions
    Replies: 0
    Last Post: 2004-02-18, 15:31

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts