Another transparent window question...

Targets Windows
1

Hello guys

I am stuck on an issue. Here is what I am trying to do: A simple animation when the user launches the application that would last about 2 seconds. It would probably involve a circle turning on its vertical axis, something that is easily done with a Canvas. Now I would like the user to see only the circle and not the whole window while the application is loading. I searched the Web, this forum and the example supplied with Xojo and I came to the conclusion that there is two possible ways to do it:

  • Using some declares, I was able to dim or make fully transparent a window, but, unfortunately, all the elements are also made transparent, including the Canvas, so not really a possible option unless there is way to modify it.
  • I also looked at the example supplied with Xojo and it seemed like the best option. I was thinking of simply filling the whole canvas with the color I would like to use and set a mask that would show my rotating circle. This mask will have to be updated pretty quickly if I want it to look like an animation. But when I code it, I only see the final result, that is, the full circle, not the steps in between.

Now, I know that there is at least one plug-in by MBS that I could use but in order to learn, I would rather try to figure it out myself. Also, for now, I am not looking for you guys to give a code because, as I said, I would like to work it out first. But I would appreciate some pointers or some ideas on how the more experienced coders would do it. Please let me know if you see other ways to achieve what I am trying to do.

EDIT: I forgot to mention that I am working on Windows 10.

Thanks in advance

Rick

P.S.: As usual, please forgive any mistakes since English is not my first language

2

You need to make the window BACKGROUND transparent, not the window.

3

@Markus Winter : Thanks for your answer. As far as I can see, there is no Properties to set the window background to transparent on Windows. So that is why I was looking at Declare unless you have some other options. I did find a way to create a window with a transparent layer using declares and that is what I am looking at now. I just need to find a way to keep the control visible.

Thanks

Rick

4

https://documentation.xojo.com/index.php/Window.Backdrop ?

5

Check out the project at /Applications/Xojo 2016 Release 3/Example Projects/Platform-Specific/Windows/CustomWindowShape.

It uses a picture with a black mask to keep areas opaque. You could probably tweak the mask picture to protect the controls.

6

@Michel B:

Hello Michel. It is actually the base of my second option. I could actually adjust the mask to hide only the background and not the control. In my case, since it is an animation, that would mean changing the mask quickly. From the tests I made, the methods that hides the background may not be quick enough to keep up. Unless there is a setting I missed. Will check again.

Merci

Rick

7

@Emile Schwarz : The backdrop enables me to put a picture in. But even if the file has an Alpha channel, it does not seem to hide the background.

Rick

8

[quote=360329:@Richard Hille]hide[/quote] ?
Don’t you talk about transparent ?

9

@Emile Schwarz : Hiding for me meant making the background transparent. Sorry for the confusion.

10

Here you go, I just threw this together as an example:

https://www.dropbox.com/s/at4ktyd0cxkn126/TestCircleRotationOnTransparentBackground.xojo_binary_project?dl=1

Let me know if you have any questions.

11

[quote=360328:@Richard Hille]@Michel B:

Hello Michel. It is actually the base of my second option. I could actually adjust the mask to hide only the background and not the control. In my case, since it is an animation, that would mean changing the mask quickly. From the tests I made, the methods that hides the background may not be quick enough to keep up. Unless there is a setting I missed. Will check again.

Merci

Rick[/quote]

What is slow in that example is the way the program goes pixel by pixel to see where the transparent zone is.

Look in the code for range, that is how transparency is obtained, and then you can manage it more efficiently.

I did not look at Julian’s example, but it is possible it does just that.

12

My method (SetLayeredWindowAttributes) uses a colour key for the background portion that you want transparent, much like how green screen works in video/movies. You end up with similar results, you just don’t have to calculate the mask yourself as you do with SetWindowRgn.

13

Thanks guys. Will look at it in detail.

Thanks again

Rick