Canvas+ Background

[Danko22]

Hi everyone,

I'm trying to develop a tool that indicates the volume of the audio file you are listening to using Pys60. the question is that, we are in a screen all the time with a background and all, but I want to draw something that indicates the volume everytime that is changes, so the screen is changing as well. My idea is to draw ten little balls, which are green or black (for instance if the volume is 6, you will see 6 little green balls and 4 black balls). These balls are changing all the time dependig of the volume, but the background is always the same, but the balls are on it. I don't know if I should use a handle redraw function in this case, or there are other ways. Any suggestion?

Well, hopefully I wrote it enough clear...:-)

Thanks in advanced!

[bogdan.galiceanu]

Here's what I tried and it worked as expected:

import appuifw, e32

def circles(n):
	y = 20
	x = 20
	for i in range(n):   #n is the number of green circles
		c.point((x,y), (0,255,0), width=7)
		x += 30
	for i in range(10-n):  #the number of black circles
		c.point((x,y), (0,0,0), width=7)
		x += 30

c = appuifw.Canvas()
appuifw.app.body = c

circles(4)
e32.ao_sleep(3)
circles(7)
e32.ao_sleep(3)

A redraw callback should be used if there is the chance that your application will be obscured by other UI elements (dialogs, menus etc.) in order to automatically redraw what's on the canvas, and/or if you're displaying an image that gets modified from time to time, in order to update the image that is shown. So that would look something like this:

import appuifw, e32, graphics

img = graphics.Image.new((500,320)) #Specify more appropriate size instead

def circles(n):
	y = 20
	x = 20
	for i in range(n):   #n is the number of green circles
		img.point((x,y), (0,255,0), width=9)
		x += 30
	for i in range(10-n):  #the number of black circles
		img.point((x,y), (0,0,0), width=9)
		x += 30
	handle_redraw(())

def handle_redraw(rect):
	c.blit(img)

c = appuifw.Canvas(redraw_callback=handle_redraw)
appuifw.app.body = c

circles(4)
e32.ao_sleep(3)
circles(7)
e32.ao_sleep(3)
circles(1)
e32.ao_sleep(3)

[Danko22]

Hey Bogdan! Thank you so much, that's totally what I was asking for. I adapted the code so now it works as I wanted :

import appuifw, e32, audio, key_codes

def circles(n):
y = 100
x = 100
for i in range(n): #n is the number of green circles
canvas.point((x,y), (0,255,0), width=9)
x += 20
for i in range(10-n): #the number of black circles
canvas.point((x,y), (0,0,0), width=9)
x += 20


S = audio.Sound.open("c:\\ABC.wav")
#S.set_volume()
S.play(audio.KMdaRepeatForever)

canvas = appuifw.Canvas()
appuifw.app.body = canvas

def VolUp():
global S
S.set_volume(S.current_volume() + 1000)
n = S.current_volume()
q = n/1000
circles(q)

def VolDown():
global S
S.set_volume(S.current_volume() - 1000)
n = S.current_volume()
q = n/1000
circles(q)

canvas.bind(key_codes.EKeyRightArrow, VolUp)
canvas.bind(key_codes.EKeyLeftArrow, VolDown)

appuifw.app.exit_key_handle = quit
app_lock = e32.Ao_lock()
app_lock.wait()

So this part works.
Now I'm trying to join this with the other code that I have, and I'm having some problems because there I am already using canvas, and other img and so on. Basically I have a funtion that is a menu, with a background image etc..Something like that :

img = Image.open('c:\\interface1v3.jpg')
def menu2():
global S

appuifw.app.screen='full'
canvas = appuifw.Canvas()
appuifw.app.body = canvas

canvas.blit(img)
canvas.bind(key_codes.EKeyRightArrow, VolUp)
canvas.bind(key_codes.EKeyLeftArrow, VolDown)

So I just want to put the circles on the background image of the menu, I don't want the backgorund image to disappear. I'm just having problems in handling the different canvas...Any idea?

Thanks :-)

[bogdan.galiceanu]

Here's what I came up with. I'm not able to test it on a device or emulator right now but it should work.

import appuifw, e32, audio, key_codes
from graphics import *

def circles(n):
	y = 100
	x = 100
	for i in range(n): #n is the number of green circles
		img.point((x,y), (0,255,0), width=9)
		x += 20
	for i in range(10-n): #the number of black circles
		img.point((x,y), (0,0,0), width=9)
		x += 20
	handle_redraw(())

S = audio.Sound.open("c:\\ABC.wav")
S.play(audio.KMdaRepeatForever)

img = Image.open('c:\\interface1v3.jpg')

def handle_redraw(rect):
	canvas.blit(img)

appuifw.app.screen='full'
canvas = appuifw.Canvas(redraw_callback=handle_redraw)
appuifw.app.body = canvas

def VolUp():
	global S
	S.set_volume(S.current_volume() + 1000)
	n = S.current_volume()
	q = n/1000
	circles(q)

def VolDown():
	global S
	S.set_volume(S.current_volume() - 1000)
	n = S.current_volume()
	q = n/1000
	circles(q)

canvas.bind(key_codes.EKeyRightArrow, VolUp)
canvas.bind(key_codes.EKeyLeftArrow, VolDown)

appuifw.app.exit_key_handle = quit
app_lock = e32.Ao_lock()
app_lock.wait()

[Danko22]

Yes it works! my problem now is that I have an initial screen saying hello to the application. After that the user press 0 to select a song (a popup menu is opened), and once the song is selected, the main interface is opened ( where I want the volume circles tool). The thing, is that everything that happens in the main interface is in the same function, as I attached before (where you call volup, vol down, etc...) and in your example is not in a function. I'm having problems because if I work with your example the welcome screen is skipped! I don't really know how to handle it, and I'm trying and trying...

Thanks Bogdan :-)

[bogdan.galiceanu]

Sorry, I don't understand.

Can't you just bind 0 to the canvas, make a function that displays the welcome screen and call it at the very beginning, a function that shows that popup menu and that is called when 0 is pressed? Or do you mean you want everything to be in one function?

[Danko22]

I have a welcome screen. I press 0 and a pop up menu is showed, in which I select a song. Once a song is select I jump to the main interface, where I want the circles function work in.
The beginning is something like this :

img0 = Image.open('c:\\interfacepcl.jpg')
appuifw.app.screen='full'
canvas = appuifw.Canvas()
appuifw.app.body = canvas
canvas.blit(img0)
canvas.bind(key_codes.EKey0, press0)

When you selected the song, you go directly to a function menu() which is the main interface:

img = Image.open('c:\\interface1v3.jpg')
def menu2():
appuifw.app.screen='full'
canvas = appuifw.Canvas()
appuifw.app.body = canvas
canvas.blit(img)
canvas.bind(key_codes.EKeyRightArrow, VolUp)
canvas.bind(key_codes.EKeyLeftArrow, VolDown)
................
................
etc.............

I want the circles function work in here, inside the function, so the welcome image won't be skipped. Waht i don't really know how to do is how to handle the canvas inside this function, as I'm already working with it. I don't know if everything is clearer explained now...!

[bogdan.galiceanu]

OK, I think I understand now. If not, please bear with me. I'm sure we can solve this eventually

import appuifw, e32, audio, key_codes
from graphics import *

def circles(n):
	y = 100
	x = 100
	for i in range(n): #n is the number of green circles
		img.point((x,y), (0,255,0), width=9)
		x += 20
	for i in range(10-n): #the number of black circles
		img.point((x,y), (0,0,0), width=9)
		x += 20
	handle_redraw(())

S = audio.Sound.open("c:\\ABC.wav")
S.play(audio.KMdaRepeatForever)

#The first image, for the welcome screen
img = Image.open('c:\\interfacepcl.jpg')

def handle_redraw(rect):
	canvas.blit(img)

appuifw.app.screen='full'
canvas = appuifw.Canvas(redraw_callback=handle_redraw)
appuifw.app.body = canvas

#At this point, the welcome image should be shown

def VolUp():
	global S
	S.set_volume(S.current_volume() + 1000)
	n = S.current_volume()
	q = n/1000
	circles(q)

def VolDown():
	global S
	S.set_volume(S.current_volume() - 1000)
	n = S.current_volume()
	q = n/1000
	circles(q)

#This function will only be called when 0 is pressed
def press0():
	#Popup menu
	#After song is selected call the menu function
	menu()

def menu():
	global img
	img = Image.open('c:\\interface1v3.jpg')  #Replace the welcome image with the main image
	handle_redraw(())  #Redraw the canvas so the second image is shown

canvas.bind(key_codes.EKeyRightArrow, VolUp)
canvas.bind(key_codes.EKeyLeftArrow, VolDown)
canvas.bind(key_codes.EKey0, press0)

appuifw.app.exit_key_handle = quit
app_lock = e32.Ao_lock()
app_lock.wait()

So the idea is that you store the welcome image in img, and display it until the user pressed 0. After he does, the menu function is called which replaces the welcome image with the main image using in the same variable, img, and redraws the canvas in order to show the new image.

[Danko22]

It has worked

Thanks!!