How to fix canvas flicker in Windows 7/8/10?

Coded by REALbasic Demi-God Joe Strout. My favourite example. I would look at it, be totally baffled, and had no clue where to even begin. Took me literally years to figure out how he did it …

Not even your own double-buffering?

I would pose the same question. Michel, you did this in Windows? How did you do it?

The thing about that example is that it has no other controls on the window.
Just the canvas.

And I expect (havent tried) that it doesn’t even need the canvas, since everything it does should work just as well using window and its graphics events.

[quote=343659:@Derek DiBenedetto]Yep, I feel you. I want to have a graphics in a canvas that are transparent, that change when you mouse over them smoothly to something else. I can’t really get that now without turning off Erase Background and Double-Buffering on, which eliminates the graphic’s transparency and makes it look a little ugly. Or is there a way to do this in Windows 10, Xojo 2016R4.1?

This is one reason I haven’t renewed my license.[/quote]

Post up a little sample project and the images and I’ll take a look, or point me to the ticket if you have on in on it with a sample project and I’ll see if I can work something out.

I draw only in one canvas. That’s it. See the canvasdrawdrag example. No flicker. Tha big mistake coming from Mac is to stack controls.

[quote=343700:@Jeff Tullin]The thing about that example is that it has no other controls on the window.
Just the canvas.[/quote]

That is the whole point. On Windows, flicker comes from painting in the window, stacking controls. If you draw everything yourself, no flicker.

Xojo’s cross platform in fact is deceptive. Sure, you can cross compile, but each platform needs its own optimization. Especially Windows.

It is not by mistake the new Windows design guidelines do away with old fashion controls. You can perfectly draw an entire web-style UI on a single canvas, with not that much work.

I think my biggest issue with windows UI is that that it really doesn’t “just work” well with complex projects. The example projects where there’s a button on a blank window work great cross platform without any modification…but that’s not the real world. Happy with the HiDPI improvements but on windows I feel like the UI framework is just barely on the right side of acceptable. As windows UI evolves XOJO needs to evolve to keep pace.

There’s no boilerplate example for working with windows controls to reduct flicker. Information is scattered around forum posts, blog entries and the documentation. It takes a lot of work to gather all that info, test and modify. This is not in keeping with the XOJO approach of keeping things simple.

I can accept limitations. Yes native MS apps sometimes display flicker, but please don’t condescend with suggesting that our complaints aren’t valid. There are area lot of apps and frameworks that don’t have flicker issues so things can be better. Bottom line is that past a certain level the flicker can limit UI design choices and create a product that appears unprofessional. That’s the core of the problem XOJO should seek to address. This can be done through framework improvements but also through better documentation. A good example project that uses advanced UI concepts that demonstrates potential improvements would go a long way to acknowledging and responding to the complaints of the community in a way we all relate to… code that complies into an application.

My $.02

  1. on Windows turn transparency OFF
  2. set erase background false
  3. dont overlap controls (see #1) overlapped & transparent is a recipe for flicker
  4. pass false to refresh & invalidate (see #2)
  5. turn double buffer ON for controls that support this

How come the Windows IDE does not exhibit flicker ?

Michel, in some ways, it does… Try to resize the navigator or the library will there are open and on windows 10 it’s not going smooth when resizing…

There is only a very slight amount of flickering on Xojo 2017 v1.1 on my Surface Book (nothing to complain about). A very minor issues are the top right search bar flickering when resizing the IDE, and the IDE does not resize smooth like it does on my Mac Mini.

Something from Word happens when I resize a table, as it seems to cause major flickering in Xojo. Below is a video that was taken on my Surface Book.

Word Table and Xojo Flicker YouTube

You can also see it in the search box of navigator when you resize the width of the navigator.

Its probably the 4 fps that you get when resizing the window which hide a few gremlins.

[quote=343732:@Eugene Dakin]Something from Word happens when I resize a table, as it seems to cause major flickering in Xojo. Below is a video that was taken on my Surface Book.

Word Table and Xojo Flicker YouTube [/quote]

Eugene, are you looking at my screen? :wink: I just put this in <https://xojo.com/issue/49006> a few minutes ago.

I have also seen that problem with the flashing IDE in the background, I have it sitting in a draft on another post, let me post it.

In the current Beta IDE there’s also artifacts if you rapidly scroll up and down sometimes it leaves a thin blue or white line. I’m able to replicate when I put a control on an empty window with a custom color, although I do not see this result when the control is placed on a rect object.

[quote=343709:@Norman Palardy]
4) pass false to refresh & invalidate (see #2)[/quote]

This just solved an annoying problem I was dealing with! Thanks @Norman Palardy!

If you are bored have a read of https://forum.xojo.com/37786-controls-flickering-on-scroll/0/ to see when i figured that one out. Before then the consensus seemed to be that we had to live with the flicker, but we are slowly highlighting and working around or fixing the problems. Compare the first two gifs against the last one I posted, a bit different.

Only through testing and sharing our findings do we work this stuff out. This isn’t a witch hunt, we’re just trying to get the best out of the tool we love or we will love (when a few things are fixed) :slight_smile:

Hehe, looking back on that thread now, its surprising what a bit more time and knowledge does for you.

I can now answer that question myself, but noone did give me an answer back then :frowning: I was actually right in my assumption :slight_smile:

I frankly regret the apparent need to blame, every time we discuss flicker. What is important is to find ways to minimize or suppress it. No whodunnit.

I get jealous every time I use Source Tree.

This is windows 10

Off topic question.

How about draw something in window.paint or ContainerControl.paint events? is it a bad idea?

[quote=343841:@Asis Patisahusiwa]Off topic question.

How about draw something in window.paint or ContainerControl.paint events? is it a bad idea?[/quote]
Don’t hijack. Make a new thread.

Here’s a small sample project with a button on a background that updates when you mouse over it: Sample Project

It works some of the time, but some of the time it flickers with a big white box on top of it. It just doesn’t look professional or smooth. I use invalidate(false) for the image switchovers. I really need it to be transparent, thus not using Double Buffering or turning Erase Background off. I’m curious if there’s a way to at least (mostly) or completely eliminate this white box flashing that happens sometimes.

I’m using Windows 10, Xojo 2016 R4.1, Intel video card (latest drivers), 12 GB RAM.