Transparent PNG causing issues with Canvas.Backdrop

I’ve been creating my own buttons in Adobe Illustrator then saving in png format and inserting them into a canvas, this is so I can have nice rounded transparent corners. Then using basic code to toggle between two states/images using the canvas.backdrop. All has worked well, the images update as expected (with no requirement to invalidate the canvas).

However, this time I’ve used Illustrators transparency/opacity to overlay the image onto the main window so as the underlying image will show through (purely an aesthetic purpose, but I would like to have it work).

Here’s what I’m talking about:

Image 1 is the default position.
Image 2 is what it SHOULD look like when toggled.
Image 3 is what I get.

It seems as though the transparent grey surrounds are being multiplied producing the unwanted effect in the 3rd image.

I’ve tried mucking around with invalidate and also moving code into the paint event but to no avail. Somehow the canvas needs to be cleared. I looked at ClearRect but it doesn’t look like that will work, besides, I have rounded corners.

For what it’s worth, here is the basic code that toggles the images:

If cnvMODE.Backdrop = MODESwitchStandard Then cnvMODE.Backdrop = MODESwitchPresets Else cnvMODE.Backdrop = MODESwitchStandard End If
I don’t think it’s a code issue - but more to do with the images be transparent.

What do you guys think?

btw. I’m using 2016R3 on WIN7.

Tried EraseBackground = True
Invalidate( True ) ?

Thanks Derk,

I just tried EraseBackground = True, before setting the backdrop but it made no difference. Invalidate doesn’t help either.

Maybe you’re drawing it twice?

It’s possible, but I don’t think so Greg.

I’ve tried the default image (1) set in the IDE but no luck. I’ve changed the image to be none in the IDE then set in the Open event of the canvas - same thing.

I am sort of drawing it twice, in that image 1 is laid over image 2 - the common bits being the grey surrounds.

A couple of things that may help, but I can’t remember the exact circumstances because I was experimenting:
At one point, when toggling, the image got darker and darker. I may have been using “refresh” but I’m not sure.
The other thing is that now the “darken” issue only happens once - it stays dark, and toggles between the two images correctly, in that they are both now dark - but not what I want.

At the top of your paint event, type:

g.clearrect 0, 0, g.width, g.height

Lets see if that helps.

That gives me a grey rectangle - which is the default background of the window.
Also I can’t see any toggle of images.

To clarify, I can’t see any of my images, just the grey rectangle and some text which I’ve drawn in the paint event.

Ohhh. How about instead of using the backdrop property, you just draw the picture first thing.

I’ve often fell into the trap Greg mentioned. Backdrop is enticing because it’s so “default” and easy, but when I mixed approaches of setting the Backdrop and using Paint(), nothing ever worked out for me. I eventually stopped using Backdrop completely (well, honestly, not completely, but as much as possible).

what I would suggest is not using the bavkground and when the user changes the toggle only update the toggle graphic.

It sounds like what’s happening is that by updating the top layer, it updates the bottom layer, which in turn updates the top layer again.

iDK about Windows, but on the make you have layer backed views which resolves these kind of problems (and intoduce other issues).

Thanks all.

I moved the code to the paint event using g.DrawPicture but it made no difference and still has the same issue.
As originally speculated: “I don’t think it’s a code issue - but more to do with the images be transparent.”

So I decided to do an experiment. I re-created the 2 png files but this time I put solid white undermeath accross the diagonal leaving the top left transparent:

As can be seen clearly, when toggling, the top left multiplies the colour whereas the bottom right (with white behind) remains unchanged.

I put this down to a Windows issue. I’m not sure where to go from here. I guess I could have two separate canvases and toggle visibility?

Steve, this is the way the Xojo framework works on Windows with transparencies, you can see a similar problem with Label controls over painting and getting darker (as with your button) when you tab through text boxes.

There are a number of ways around this, too many to document here without me losing sanity points as some of them depend on how/what controls you are embedding inside. If you put a simple demo program together replicating the issue with the images in a zip I’ll take a look.

Thanks Julien. I was following a thread about windows flicker (can’t see which one now). But it was the one where you came up with some interesting and groundbreaking solutions using z-order. Most of it I couldn’t really understand. My program has a fixed window and therefore have never dealt with the flicker issues when re-sizing controls.

I’ve seen a similar issue with labels getting thicker and thicker when tabbing through text boxes, although I can’t remember how that one was solved as it was a while ago. I do however still get flashing labels when tabbing. I’ve sort of solved that by making some of the labels text fields and using ‘dirty methods’ to ensure the user can’t change them - but at least it’s better than flashing!.

With this particular issue, the toggle switch does not change transparency when tabbing through fields if that’s what you are referring to.

I’m referring to the way the button you show above gets darker and darker. If you knock together a simple example with the button in the same state (I.e. If it’s embedded in other controls) then I’ll take a look.

If it’s just straight on the window then that is a simple fix. It’s just quicker if you make a demo instead of me guessing and asking loads of questions :slight_smile:

Ok, thanks Julian.

I don’t wish to waste your time, but one last bit of info before I make a demo:

The canvas control is straight on the window and is not embedded in any other control.
The subtle “brushed metal” image that is seen underneath is drawn onto the main window in the paint event using PixmapShape.

In testing I’ve removed the paint event but still the same issue.

I’m just getting the demo together now - just have to sort out where/how to upload files.

Ok . . . finally . . . . the link is here:

The demo displays exactly the same issue as my original software. When clicking on the MODE panel, transparency seems to multiply.

Image format: PNG-24, saved from Adobe Illustrator CS2
XOJO2016R3 WIN7.

If anyone can concur, that would be something - a solution would be even better :slight_smile:

Cheers and thanks…

What happens (with Xojo 2016r3, as I think you mentioned you’re using) if you add one line of code in your cnvMode.MouseDown:

cnvMODE.Invalidate me.TrueWindow.RefreshRect(me.Left, me.Top, me.Width, me.Height)

Cheers for the demo. I’m on the mobile for a few hours, I’ll take a look when I get back.

I had a look at RectControl.TrueWindow in the Docs and cannot see any relevant information that helps.

But… well, well well… That code has worked for me pefectly Jurg!! :slight_smile: I don’t know how, or why - but it works.

Not only that, but I also have another small canvas that draws a question mark symbol that overlays the mode panel (as shown below). I eliminated it for this test as it introduced other issues, but now, it behaves exactly as it should also!

Pure serendipity :slight_smile:

Now all I have to do is to work on the code.


Thankyou everyone for your help.

[EDIT] And I guess it WAS a code issue afterall!