Transparency

[DrivingMobileInnovation]

How to create transparent or partly transparent objects, text etc?

[jethro.fn]

By rendering the text to a grayscale image and using that as a mask for blitting another solid color image to any drawable (S60 2nd Edition FP2 and later only).

[DrivingMobileInnovation]

Any examples? Thank you.

I mean if I insert an image on the canvas and for example rectangle object on that image, is it possible to see thru that rectangle? Is there any way to change transparancy like 0...100% ?

[jethro.fn]

Here's an example:

import appuifw
import graphics

def redraw(area):
    global body

    bw, bh = body.size

    # Draw a colourful background.
    body.clear(0x009900)
    body.polygon(((0, 0), (bw, 0), (0, bh)),
                 outline = 0xFFFF00, fill = 0xFFFF00)

    # Create an Image() for text mask and its foreground colour.
    textimgsize = (320, 20)     # Large enough area for text
    textimg = graphics.Image.new(textimgsize, "L")  # "L" means grayscale.
    textimg.clear(0x000000)     # Fully transparent mask
    colorimg = graphics.Image.new(textimgsize)
    colorimg.clear(0xFFFFFF)    # White text

    textmsg = u"75% transparent text"
    fontspec = (None, None, graphics.FONT_BOLD)     # Default bold font

    # Calculate text size and offsets.
    tleft, ttop, tright, tbottom = textimg.measure_text(textmsg,
                                                        fontspec)[0]
    tw = (tright - tleft)
    th = (tbottom - ttop)

    # Draw the message with 75% transparency.
    alpha = 0xC0C0C0   # Light gray
    textimg.text((-tleft, -ttop), textmsg, alpha, fontspec)
    body.blit(colorimg, target = ((bw - tw) / 2, (bh - th) / 2),
              mask = textimg)

# Use a Canvas() as the application body.
body = appuifw.Canvas(redraw, None, redraw)
appuifw.app.body = body

Transparency is controlled with the alpha variable, by setting it to values between 0x000000 (fully transparent) and 0xFFFFFF (fully opaque). Contents of colorimg determines the text foreground color. In the example it is filled with solid white, but it can contain anything. For example, color gradients can be used for nice graphical effects.

[DrivingMobileInnovation]

Thank you. Looks nice.

[DrivingMobileInnovation]

What I'm doing wrong? I just try to draw a green transparent point on a image.

import appuifw
import graphics
import e32

def quit():
    global running
    running = False

def object():
    imgsize = (100, 100)
    img = graphics.Image.new(imgsize, "L")
    img.clear(0x000000)
    colorimg = graphics.Image.new(imgsize)
    colorimg.clear(0x00FF00) # GREEN

    alpha = 0x888888
    img.point((100, 100), width=30, fill=alpha)
    canvas.blit(colorimg, target = (100, 100), mask = img)

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

x = y = 0
canvas = appuifw.Canvas()
appuifw.app.body = canvas
w, h = canvas.size
appuifw.app.exit_key_handler = quit
img = graphics.Image.new((w, h))
PATH = u"e:\\Python\\"
image = graphics.Image.open(PATH + "pic.jpg")

running = True
while running:
    img.blit(image, target = (x, y, w, h), scale = 0)
    handle_redraw(None)
    e32.ao_yield()

[jethro.fn]

What I'm doing wrong? I just try to draw a green transparent point on a image.

    ...
    imgsize = (100, 100)

    ...
    img.point((100, 100), width=30, fill=alpha)

Looks like the point is outside the mask image area, although something should be visible in the bottom-right corner as the width argument is > 1.

[shubhendra]

Hi jethrno.fn,
The code you have given as example is giving error in my emulator (2nd edition FP3).

Error code is,

bw,bh = body.size

NameError : global name 'body' is not defined

Any Suggestions?

[jethro.fn]

Hi jethrno.fn,
The code you have given as example is giving error in my emulator (2nd edition FP3).

I only tested it on a real 3rd Edition device, although there shouldn't be anything that requires 3rd Edition. Did you copy the whole thing? The example is so long that on my browser, four of the lines are not visible. You need to scroll the textarea to see them.

[shubhendra]

Ya i had copied the whole code, let me try it on 3rd edition emulator.

[gaba88]

hi jethro.fn
same here i have tested this on my dveice but getting the error. can you spot the reason.

[jethro.fn]

Sounds like the callback is called before the body variable has been set (i.e. before the constructor returns). Somehow it doesn't happen on my N95. Try to change the redraw()-function like this:

def redraw(area):
    global body

    if not body:
        return

    bw, bh = body.size

    ...

An change the end to:

# Use a Canvas() as the application body.
body = None
body = appuifw.Canvas(redraw, None, redraw)
appuifw.app.body = body

[DrivingMobileInnovation]

Here is a working version:

import appuifw
import graphics
import e32

def quit():
    global running
    running = False

def handle_redraw(rect):
    canvas.clear(0x009900)
    canvas.polygon(((0, 0), (bw, 0), (0, bh)), outline = 0xFFFF00, fill = 0xFFFF00)

    textimgsize = (320, 20)
    textimg = graphics.Image.new(textimgsize, "L")
    textimg.clear(0x000000)
    colorimg = graphics.Image.new(textimgsize)
    colorimg.clear(0xFFFFFF)

    textmsg = u"75% transparent text"
    fontspec = (None, None, graphics.FONT_BOLD)

    tleft, ttop, tright, tbottom = textimg.measure_text(textmsg, fontspec)[0]
    tw = (tright - tleft)
    th = (tbottom - ttop)

    alpha = 0xC0C0C0  
    textimg.text((-tleft, -ttop), textmsg, alpha, fontspec)
    canvas.blit(colorimg, target = ((bw - tw) / 2, (bh - th) / 2), mask = textimg)

canvas = appuifw.Canvas()
appuifw.app.body = canvas
bw, bh = canvas.size
appuifw.app.exit_key_handler = quit

running = True
while running:
    handle_redraw(None)
    e32.ao_yield()

[shubhendra]

import appuifw
import graphics
import e32

def quit():
    global running
    running = False

def handle_redraw(rect):
    canvas.clear(0x009900)
    canvas.polygon(((0, 0), (bw, 0), (0, bh)), outline = 0xFFFFFF, fill = 0x000000)

    textimgsize = (320, 20)
    textimg = graphics.Image.new(textimgsize, "L")
    textimg.clear(0x000000)
    colorimg = graphics.Image.new(textimgsize)
    colorimg.clear(0xFFFFFF)

    textmsg = u"75% transparent text"
    fontspec = (None, None, graphics.FONT_BOLD)

    tleft, ttop, tright, tbottom = textimg.measure_text(textmsg, fontspec)[0]
    tw = (tright - tleft)
    th = (tbottom - ttop)

    alpha = 0xC0C0C0  
    textimg.text((-tleft, -ttop), textmsg, alpha, fontspec)
    canvas.blit(colorimg, target = ((bw - tw) / 2, (bh - th) / 2), mask = textimg)

canvas = appuifw.Canvas()
appuifw.app.body = canvas
bw, bh = canvas.size
appuifw.app.exit_key_handler = quit

running = True
while running:
    handle_redraw(None)
    e32.ao_yield()

Just to see the text clearly, new example.

[gaba88]

Hi DrivingMobileInnovation,
it seems you are faster than me as i was just to put corrected code here.
Btw i have created a wiki page on this have a look.