×

Discussion Board

Page 1 of 2 12 LastLast
Results 1 to 15 of 17

Thread: Transparency

  1. #1
    Regular Contributor
    Join Date
    Mar 2008
    Posts
    57

    Transparency

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

  2. #2
    Super Contributor
    Join Date
    May 2004
    Location
    Tampere, Finland
    Posts
    524

    Re: Transparency

    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).

  3. #3
    Regular Contributor
    Join Date
    Mar 2008
    Posts
    57

    Re: Transparency

    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% ?
    Last edited by DrivingMobileInnovation; 2008-06-14 at 00:24.

  4. #4
    Super Contributor
    Join Date
    May 2004
    Location
    Tampere, Finland
    Posts
    524

    Re: Transparency

    Here's an example:

    Code:
    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.

  5. #5
    Regular Contributor
    Join Date
    Mar 2008
    Posts
    57

    Re: Transparency

    Thank you. Looks nice.
    Last edited by DrivingMobileInnovation; 2008-06-16 at 21:14.

  6. #6
    Regular Contributor
    Join Date
    Mar 2008
    Posts
    57

    Re: Transparency

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

    Code:
    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()
    Last edited by DrivingMobileInnovation; 2008-07-01 at 00:38.

  7. #7
    Super Contributor
    Join Date
    May 2004
    Location
    Tampere, Finland
    Posts
    524

    Re: Transparency

    Quote Originally Posted by DrivingMobileInnovation View Post
    What I'm doing wrong? I just try to draw a green transparent point on a image.

    Code:
        ...
        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.

  8. #8
    Regular Contributor
    Join Date
    Dec 2007
    Location
    Tempe, AZ
    Posts
    411

    Re: Transparency

    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?
    IDEAS is all they need but still they think only Genius can give them that.

  9. #9
    Super Contributor
    Join Date
    May 2004
    Location
    Tampere, Finland
    Posts
    524

    Re: Transparency

    Quote Originally Posted by shubhendra View Post
    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.

  10. #10
    Regular Contributor
    Join Date
    Dec 2007
    Location
    Tempe, AZ
    Posts
    411

    Re: Transparency

    Ya i had copied the whole code, let me try it on 3rd edition emulator.
    IDEAS is all they need but still they think only Genius can give them that.

  11. #11
    Nokia Developer Champion
    Join Date
    Feb 2008
    Location
    Ahmedabad, Gujarat, India
    Posts
    3,852

    Re: Transparency

    hi jethro.fn
    same here i have tested this on my dveice but getting the error. can you spot the reason.
    Last edited by gaba88; 2008-07-01 at 13:51.

  12. #12
    Super Contributor
    Join Date
    May 2004
    Location
    Tampere, Finland
    Posts
    524

    Re: Transparency

    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:

    Code:
    def redraw(area):
        global body
    
        if not body:
            return
    
        bw, bh = body.size
    
        ...
    An change the end to:

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

  13. #13
    Regular Contributor
    Join Date
    Mar 2008
    Posts
    57

    Re: Transparency

    Here is a working version:

    Code:
    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()

  14. #14
    Regular Contributor
    Join Date
    Dec 2007
    Location
    Tempe, AZ
    Posts
    411

    Re: Transparency

    Code:
    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.
    IDEAS is all they need but still they think only Genius can give them that.

  15. #15
    Nokia Developer Champion
    Join Date
    Feb 2008
    Location
    Ahmedabad, Gujarat, India
    Posts
    3,852

    Re: Transparency

    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.

Similar Threads

  1. How to set Image transparency for N-GAGE QD
    By joethegong in forum Mobile Java General
    Replies: 9
    Last Post: 2006-08-28, 09:45
  2. Transparency Help for Series 60 MIDP 1.0
    By joethegong in forum Mobile Java Media (Graphics & Sounds)
    Replies: 0
    Last Post: 2005-01-13, 08:27
  3. 4bit png with transparency
    By alex_crowther in forum Mobile Java Media (Graphics & Sounds)
    Replies: 2
    Last Post: 2004-06-09, 01:28
  4. drawPixels transparency bug on new Series 60 beta 0.2
    By marcilgen in forum Mobile Java General
    Replies: 0
    Last Post: 2003-03-26, 21:41

Posting Permissions

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