Flickering when redrawing the canvas.

[ORDL-AMF]

import time
import pathlib
import threading

import toga
from toga.style import Pack
from toga.constants import COLUMN
from travertino.colors import rgb
from travertino.constants import SANS_SERIF, ROW, CENTER


class LinePosition:
    x = 0
    y = 0
    x2 = 0
    y2 = 0
    shouldRender = False


class FenceLine:
    def __init__(self, x, y, x2, y2):
        self.x = x
        self.y = y
        self.x2 = x2
        self.y2 = y2
        self.length = self.x + self.x2 + self.y + self.y2


class FenceEstimator(toga.App):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.sync_event = threading.Event()
        self.linePos = LinePosition()

    def startup(self):
        self.startX = 0
        self.startY = 0
        self.newX = 0
        self.newY = 0
        self.fenceLines = []

        # Create the canvas
        self.canvas = toga.Canvas(
            style=Pack(flex=1, width=1280, height=720),
            on_resize=self.on_resize,
            on_press=self.on_press,
            on_drag=self.on_drag,
            on_release=self.on_release,
        )

        # Create a slider for zoom control
        self.slider = toga.Slider(min=1, max=3, on_change=self.on_slider_change)
        self.slider.value = 1  # Set initial value of the slider

        # Create the button with the icon
        icon_path = str(pathlib.Path("resources/fence.png"))  # Convert to string
        self.icon = toga.Icon(icon_path)
        self.fenceTool = toga.Button(style=Pack(padding=(0, 0, 32, 32)), on_press=self.on_button_click, icon=self.icon)
        self.postTool = toga.Button(style=Pack(padding=(0, 0, 32, 32)), on_press=self.on_button_click, icon=self.icon)
        self.houseTool = toga.Button(style=Pack(padding=(0, 0, 32, 32)), on_press=self.on_button_click,
                                      icon=self.icon)
        self.gateTool = toga.Button(style=Pack(padding=(0, 0, 32, 32)), on_press=self.on_button_click, icon=self.icon)

        self.selectionBox = toga.Box(style=Pack(direction=ROW, padding=0),
                                      children=[self.fenceTool, self.postTool, self.houseTool, self.gateTool])
        self.leftPanel = toga.Box(style=Pack(direction=COLUMN, padding=20), children=[self.selectionBox])

        # Create the first box to hold the canvas and slider
        self.label = toga.Label("Zoom")
        self.sliderBox = toga.Box(style=Pack(direction=COLUMN, alignment="center", padding=20),
                                   children=[self.label, self.slider, self.leftPanel])
        self.canvasBox = toga.Box(style=Pack(flex=1, direction=COLUMN, padding=20), children=[self.canvas])

        self.scroll_container = toga.ScrollContainer(content=self.canvasBox,
                                                     style=Pack(flex=1, direction=COLUMN, padding=20), horizontal=True,
                                                     vertical=True, on_scroll=self.on_scroll)

        # Create a box to hold both box1 and box2
        self.container_box = toga.Box(style=Pack(flex=1, direction=ROW, padding=20),
                                       children=[self.sliderBox, self.scroll_container])

        # Initial zoom factor
        self.zoom_factor = 1.0

        # Draw canvas content
        self.draw_canvas()



        # Add the scroll container to the main window
        self.main_window = toga.MainWindow(title=self.formal_name, size=(1280, 720))
        self.main_window.content = self.container_box
        self.main_window.show()

        # Start the worker thread
        t = threading.Thread(target=self.update)
        t.start()

    def tick(self):
        if self.linePos.shouldRender:
            print("DRAWING LINE POS")
            self.draw_line(self.linePos.x, self.linePos.y, self.linePos.x2, self.linePos.y2)
            self.sync_event.set()  # Signal the worker thread to update

    def draw_canvas(self):
        self.canvas.context.clear()
        self.sync_event.set()

        self.draw_rect(100, 100, 32, 32)

        # Draw grid lines
        grid_spacing = 32  # Adjust the spacing between grid lines as needed
        canvas_width = 1280
        canvas_height = 720

        # Draw horizontal grid lines
        for y in range(0, canvas_height, grid_spacing):
            self.draw_line(0, y, canvas_width, y)

        # Draw vertical grid lines
        for x in range(0, canvas_width, grid_spacing):
            self.draw_line(x, 0, x, canvas_height)

        for line in self.fenceLines:
            self.draw_line(line.x, line.y, line.x2, line.y2)

        self.draw_text()

    def update(self):
        target_frame_time = 1 / 60  # Target time for each frame (in seconds)
        while True:
            frame_start_time = time.time()

            self.sync_event.wait()  # Wait for the event to be set
            self.tick()
            self.draw_canvas()
            self.sync_event.clear() # Clear the event after processing

            frame_end_time = time.time()
            frame_time = frame_end_time - frame_start_time

            # If the frame took less time than the target frame time, sleep for the remaining time
            if frame_time < target_frame_time:
                time.sleep(target_frame_time - frame_time)

    def draw_rect(self, x, y, width, height):
        rect_width = width * self.zoom_factor
        rect_height = height * self.zoom_factor
        rect_x = (x * self.zoom_factor) + self.zoom_factor
        rect_y = (y * self.zoom_factor) + self.zoom_factor

        with self.canvas.Fill(color=rgb(149, 119, 73)) as rect:
            rect.rect(x=rect_x, y=rect_y, width=rect_width, height=rect_height)

    def draw_line(self, x, y, x2, y2):
        line_x1 = (x * self.zoom_factor) + self.zoom_factor
        line_y = (y * self.zoom_factor) + self.zoom_factor
        line_x2 = (x2 * self.zoom_factor) + self.zoom_factor
        line_y2 = (y2 * self.zoom_factor) + self.zoom_factor

        with self.canvas.Fill(color=rgb(149, 119, 73)) as line:
            line.begin_path()
            line.move_to(line_x1, line_y)
            line.line_to(line_x2, line_y2)
            line.stroke(color="orange")

    def draw_text(self):
        font_size = 20 * self.zoom_factor
        font = toga.Font(family=SANS_SERIF, size=font_size)
        text_width, text_height = self.canvas.measure_text("Fence", font)

        x = (((150 - text_width / 2) * self.zoom_factor) + self.zoom_factor * 150)
        y = ((175 - text_height / 2) * self.zoom_factor) + self.zoom_factor * 175

        with self.canvas.Stroke(color="REBECCAPURPLE", line_width=4.0) as rect_stroker:
            rect_stroker.rect(
                x - 5, y - 5,
                text_width + 10, text_height + 10,
            )
        with self.canvas.Fill(color=rgb(149, 119, 73)) as text_filler:
            text_filler.write_text("Fence", x, y, font, toga.constants.Baseline.TOP)

    def on_resize(self, widget, width, height, **kwargs):
        if widget.context:
            widget.redraw()

    def on_press(self, widget, x, y, **kwargs):
        self.startX = x
        self.startY = y
        self.sync_event.set()

    def on_drag(self, widget, x, y):
        self.newX = x
        self.newY = y
        self.linePos.x = self.startX
        self.linePos.y = self.startY
        self.linePos.x2 = self.newX
        self.linePos.y2 = self.newY
        self.linePos.shouldRender = True
        self.sync_event.set()



    def on_release(self, widget, x, y):
        self.fenceLines.append(FenceLine(self.startX, self.startY, self.newX, self.newY))
        self.linePos.shouldRender = False

        self.sync_event.set()  # Set the event to signal the worker thread to update


    def on_scroll(self, widget):
        pass

    def on_slider_change(self, widget):
        self.zoom_factor = widget.value
        self.sync_event.set()  # Set the event to signal the worker thread to update

    def on_button_click(self, widget):
        self.main_window.info_dialog("Button Clicked", "You clicked the button!")

    def on_hover(self, widget):
        pass


def main():
    return FenceEstimator()


if __name__ == '__main__':
    main().main_loop()

I'm getting flickering when redrawing the canvas, any ideas on how to implement double buffering? Or maybe go about this a different way?

[freakboy3742]

As you've been told repeatedly on Discord: posting hundreds of lines of code and asking "why doesn't this work" isn't a productive way to get help. Instead, you should be asking specific questions, and providing minimal reproduction cases (or, at the very least, significantly cut down sample code).

As you've also been told repeatedly on Discord - the reason you're seeing flickering is that the approach you're taking to the problem is incorrect. The thread is the cause of the flickering, because the thread's activity isn't coordinated with the event loop. You're treating the canvas as a surface where every time you change the canvas, you need to redraw the entire canvas. That's not what the canvas does. Instead, it's a set of drawing instructions that knows how to redraw itself; if you want to change the image, you alter the properties of the existing drawing instructions. This doesn't require clearing and re-creating the canvas - it means keeping a handle to the drawing object that you want to manipulate, and altering the position/scale/whatever of that drawing object. Toga will manage the process of redrawing, double buffering etc.