PureBasic Forums - English

Posted: **Thu Mar 20, 2025 7:47 am**

What's the best way to stop flickering in a GUI application? Can it be double buffered and vsynced?

Posted: **Thu Mar 20, 2025 9:07 am**

No code snippet or gif/image to show what's happening? Flickering could be caused lots of ways.

Posted: **Thu Mar 20, 2025 9:35 am**

I'm making custom gadgets using drawing functions like Box() and Line() etc. When I resize parts of the application they flickers as they are being redrawn as the mouse moves. Also resizing the entire window they flicker. I could create a sample if you really want it but it would take some time.

Posted: **Thu Mar 20, 2025 1:28 pm**

Just post your actual source code - no need to create an extra example...

...as this will show if you draw directly to a window or use images or a canvas or...
It would also be easy to see then how often the refresh will take place and much more.

Posted: **Thu Mar 20, 2025 1:34 pm**

I usually draw to an image and then draw that image to the canvas to avoid flickering.

Posted: **Thu Mar 20, 2025 9:26 pm**

Code: Select all

Procedure WindowResize()
  Protected width.i = WindowWidth(0)
  Protected height.i = WindowHeight(0)
  StartDrawing(CanvasOutput(0))
  Box(0, 0, 130, 300, RGB(200, 200, 200)) 
  StopDrawing()
  ResizeGadget(1, 150, 0, Width-150, height)
  StartDrawing(CanvasOutput(0))
  Box(0, 0, 130, 50, RGB(255, 0, 0)) 
  StopDrawing()
EndProcedure

If OpenWindow(0, 0, 0, 600, 400, "Flicker GUI", #PB_Window_SystemMenu | #PB_Window_ScreenCentered | #PB_Window_SizeGadget)
  Define width.i = WindowWidth(0)
  Define height.i = WindowHeight(0)
  Define text.s
  CanvasGadget(0, 0, 0, 130, 400)
  StartDrawing(CanvasOutput(0))
  Box(0, 0, 130, 300, RGB(200, 200, 200)) 
  Box(0, 0, 130, 50, RGB(255, 0, 0)) 
  StopDrawing()
  EditorGadget(1, 150, 0, Width-150, height, #PB_Editor_WordWrap)
  text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  text = text + " Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  text = text + " Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  text = text + " Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  text = text + " Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  text = text + " Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  text = text + " Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  text = text + " Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  text = text + " Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  text = text + " Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  text = text + " Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  SetGadgetText(1, text)
  BindEvent(#PB_Event_SizeWindow, @WindowResize())
  Repeat
    Event = WaitWindowEvent(1)
  Until Event = #PB_Event_CloseWindow
EndIf

This is an example of how my application works. Pay attention to the red rectangle (which is a button) when resizing the window.

It flickers a lot more obviously on my application because it is drawing more things. The more things drawn I think the more flicker there is.

Posted: **Thu Mar 20, 2025 9:47 pm**

Is redrawing necessary in windowresize procedure?

Posted: **Thu Mar 20, 2025 10:03 pm**

coco2 wrote: Thu Mar 20, 2025 9:26 pmPay attention to the red rectangle (which is a button) when resizing the window

Nothing wrong here. The rectangle is solid and red with no flickering when resizing. Maybe it's your PC's graphics drivers. Can you test on another PC?

Posted: **Thu Mar 20, 2025 10:07 pm**

It's OK, my entire code is ~5000 lines.

I think the problem is I am drawing a full screen canvas then drawing all my gadgets on top of that.

I will try to do it another way. And also I will try to draw to an image and paste the image on the window.

Posted: **Thu Mar 20, 2025 10:11 pm**

Is there any way of capturing mouse button down (not click) on the window without a gadget?

Posted: **Thu Mar 20, 2025 10:13 pm**

I mean if I comment out the redrawing of the canvas, I still see the red box without flickering. I'm on windows, and not really used to canvas things.
That's why I don't know if redrawing is necessary. This works for me:

Code: Select all

Procedure WindowResize()
  Protected width.i = WindowWidth(0)
  Protected height.i = WindowHeight(0)
;  StartDrawing(CanvasOutput(0))
;  Box(0, 0, 130, 300, RGB(200, 200, 200)) 
;  StopDrawing()
  ResizeGadget(1, 150, 0, Width-150, height)
;  StartDrawing(CanvasOutput(0))
;  Box(0, 0, 130, 50, RGB(255, 0, 0)) 
;  StopDrawing()
EndProcedure

If OpenWindow(0, 0, 0, 600, 400, "Flicker GUI", #PB_Window_SystemMenu | #PB_Window_ScreenCentered | #PB_Window_SizeGadget)
  Define width.i = WindowWidth(0)
  Define height.i = WindowHeight(0)
  Define text.s
  CanvasGadget(0, 0, 0, 130, 400)
  StartDrawing(CanvasOutput(0))
  Box(0, 0, 130, 300, RGB(200, 200, 200)) 
  Box(0, 0, 130, 50, RGB(255, 0, 0)) 
  StopDrawing()
  EditorGadget(1, 150, 0, Width-150, height, #PB_Editor_WordWrap)
  text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  text = text + " Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  text = text + " Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  text = text + " Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  text = text + " Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  text = text + " Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  text = text + " Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  text = text + " Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  text = text + " Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  text = text + " Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  text = text + " Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  SetGadgetText(1, text)
  BindEvent(#PB_Event_SizeWindow, @WindowResize())
  Repeat
    Event = WaitWindowEvent(1)
  Until Event = #PB_Event_CloseWindow
EndIf

Posted: **Thu Mar 20, 2025 10:16 pm**

I am using a full screen canvas so I can capture the mouse dragging. Unless there is some other way of capturing dragging?

PureBasic Forums - English

Flickering in GUI application

Flickering in GUI application

Re: Flickering in GUI application

Re: Flickering in GUI application

Re: Flickering in GUI application

Re: Flickering in GUI application

Re: Flickering in GUI application

Re: Flickering in GUI application

Re: Flickering in GUI application

Re: Flickering in GUI application

Re: Flickering in GUI application

Re: Flickering in GUI application

Re: Flickering in GUI application