Gtk3 copilot-generated GPT-4.1

Copilot

Copilot navigation
Copilot Chat
New conversation
You said: Can you port https://github.com/HinTak/skia-python-examples/blob/main/SkiaSDLExample.py to pygtk3 please?
Can you port https://github.com/HinTak/skia-python-examples/blob/main/SkiaSDLExample.py to pygtk3 please?
2/2
1 reference
Copilot said: Here is a plan for porting `SkiaSDLExample.py`
Here is a plan for porting SkiaSDLExample.py to use PyGTK3 (with Gtk+3 and Cairo) instead of SDL2:

Key Considerations:

SDL2 handles window creation, events, and OpenGL context. In PyGTK3, Gtk.Window and Gtk.DrawingArea handle windowing and drawing, and Gdk/Cairo is used for drawing (not OpenGL).
Skia can render to a Cairo surface but the integration is less direct than OpenGL.
Event handling is via Gtk signals (button-press-event, button-release-event, motion-notify-event, key-press-event, etc).
The application logic (drawing rectangles, star, etc.) can mostly be preserved.
Implementation Plan:

Create a Gtk.Window with a Gtk.DrawingArea.
Use Cairo for drawing. If Skia-Python supports rendering into a Cairo surface, use it; otherwise, port drawing logic to Cairo.
Handle mouse and keyboard events using Gtk signals.
Maintain application state similar to ApplicationState.
Redraw on expose and input events.
Here is the ported code:


SkiaGTKExample.py
#!/usr/bin/env python3
# -*- coding: utf-8 -*-
#
#  Skia + GTK3 (PyGObject) example ported from SkiaSDLExample.py
#
#  Copyright 2024 Hin-Tak Leung
Notes:

This version ports the drawing and interaction logic to Gtk/Cairo, which is the standard for PyGTK3.
If you want to use Skia drawing on a Cairo surface, check if skia-python supports creating a Skia surface from a Cairo context (Surface.MakeFromCairo(cairo_context)). If so, you can adapt the drawing logic accordingly.
The star is redrawn and rotated on each frame using a timer via repeated calls to queue_draw().
Rectangle drawing uses mouse drag. Pressing ESC quits.
You may need python3-gi, PyGObject, and skia-python (optional) installed.
Let me know if you want the Skia-specific Cairo integration as well, or if you want to keep the entire drawing logic in Skia!

You said: I want to keep the entire drawing
I want to keep the entire drawing logic in skia, and uses opengl
Copilot said: Great! To port the SDL2+Skia+OpenGL example to
Great! To port the SDL2+Skia+OpenGL example to PyGTK3 but keep all Skia drawing and OpenGL usage, the main idea is:

Use PyGObject (PyGTK3) to create a window and an OpenGL-capable drawing area (Gtk.GLArea).
Use PyOpenGL (for context management if needed).
Use Skia’s OpenGL backend to render into the OpenGL context provided by Gtk.GLArea.
Handle mouse, key, and window events via GTK signals, similar to SDL’s event loop.
Call Skia drawing routines inside the Gtk.GLArea’s render callback.
Manage resizing and redraw via GTK signals, not polling.
Below is a direct port sketch, preserving the original Skia logic but using GTK’s GLArea for context and event handling. Some OpenGL context setup is handled by GTK, so you can skip the SDL-specific context setup.


SkiaGTKGLExample.py
#!/usr/bin/env python3
# -*- coding: utf-8 -*-

import gi
gi.require_version("Gtk", "3.0")
from gi.repository import Gtk, Gdk, GObject, GLib
Key Points:

This uses Gtk.GLArea for an OpenGL context and delivers OpenGL events to Skia, just like SDL2 did.
All drawing is handled by Skia, via its OpenGL backend.
Mouse, motion, and key events are handled using GTK signals mapped to Skia logic.
Rotating star and rectangle drawing logic is preserved from your original.
This is the closest GTK/OpenGL/Skia analog to your original SDL2 code.
Dependencies:

PyGObject (python3-gi)
PyOpenGL
skia-python (must be built/installed with OpenGL support)
GTK3 development libraries at build time
Let me know if you want further tweaks or explanations!

Author: HinTak

SkiaGTKExample.py

@@ -0,0 +1,154 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+#
+#  Skia + GTK3 (PyGObject) example ported from SkiaSDLExample.py
+#
+#  Copyright 2024 Hin-Tak Leung
+#
+#  Ported to PyGTK3 by Copilot
+
+import gi
+gi.require_version("Gtk", "3.0")
+from gi.repository import Gtk, Gdk
+import cairo
+from collections import namedtuple
+import math
+import sys
+
+try:
+    from skia import ColorWHITE, ColorBLACK, Surface, Paint, Font, Rect, Path, Point
+    HAS_SKIA = True
+except ImportError:
+    HAS_SKIA = False
+
+RectState = namedtuple('RectState', ['left', 'top', 'right', 'bottom'])
+
+class ApplicationState:
+    def __init__(self, width=800, height=600):
+        self.fQuit = False
+        self.window_width = width
+        self.window_height = height
+        self.fRects = []
+        self.dragging = False
+        self.current_rect = None
+        self.rotation = 0
+
+def create_star_path(center_x, center_y, radius):
+    # Create a 5-pointed star path in Cairo (or Skia)
+    path = []
+    num_points = 5
+    for i in range(num_points * 2):
+        angle = i * math.pi / num_points
+        r = radius if i % 2 == 0 else radius * 0.5
+        x = center_x + r * math.sin(angle)
+        y = center_y - r * math.cos(angle)
+        path.append((x, y))
+    return path
+
+class SkiaGTKExample(Gtk.Window):
+    def __init__(self):
+        super().__init__(title="Skia GTK Example")
+        self.set_default_size(800, 600)
+        self.state = ApplicationState(800, 600)
+
+        self.drawing_area = Gtk.DrawingArea()
+        self.add(self.drawing_area)
+
+        # Connect signals
+        self.connect("destroy", Gtk.main_quit)
+        self.drawing_area.connect("draw", self.on_draw)
+        self.drawing_area.add_events(Gdk.EventMask.BUTTON_PRESS_MASK |
+                                     Gdk.EventMask.BUTTON_RELEASE_MASK |
+                                     Gdk.EventMask.POINTER_MOTION_MASK |
+                                     Gdk.EventMask.KEY_PRESS_MASK |
+                                     Gdk.EventMask.STRUCTURE_MASK)
+        self.drawing_area.set_can_focus(True)
+        self.drawing_area.grab_focus()
+        self.drawing_area.connect("button-press-event", self.on_button_press)
+        self.drawing_area.connect("button-release-event", self.on_button_release)
+        self.drawing_area.connect("motion-notify-event", self.on_motion_notify)
+        self.connect("key-press-event", self.on_key_press)
+        self.drawing_area.connect("configure-event", self.on_configure)
+
+    def on_draw(self, widget, cr):
+        width = widget.get_allocated_width()
+        height = widget.get_allocated_height()
+        self.state.window_width = width
+        self.state.window_height = height
+
+        # White background
+        cr.set_source_rgb(1, 1, 1)
+        cr.rectangle(0, 0, width, height)
+        cr.fill()
+
+        # Draw help message
+        cr.set_source_rgb(0, 0, 0)
+        cr.select_font_face("Sans", cairo.FONT_SLANT_NORMAL, cairo.FONT_WEIGHT_NORMAL)
+        cr.set_font_size(18)
+        cr.move_to(10, 24)
+        cr.show_text("Click and drag to create rects. Press esc to quit.")
+
+        # Draw random-colored rectangles
+        import random
+        random.seed(0)
+        for rect in self.state.fRects:
+            color = ((random.randint(0,255)/255, random.randint(0,255)/255, random.randint(0,255)/255, 0.27))
+            cr.set_source_rgba(*color)
+            l, t, r, b = rect.left, rect.top, rect.right, rect.bottom
+            cr.rectangle(l, t, r-l, b-t)
+            cr.fill()
+
+        # Draw rotating star in the center
+        cr.save()
+        cx = width / 2
+        cy = height / 2
+        cr.translate(cx, cy)
+        cr.rotate(math.radians(self.state.rotation))
+        self.state.rotation = (self.state.rotation + 1) % 360
+        cr.set_source_rgb(0, 0, 0)
+        star_path = create_star_path(0, 0, 50)
+        cr.move_to(*star_path[0])
+        for pt in star_path[1:]:
+            cr.line_to(*pt)
+        cr.close_path()
+        cr.stroke()
+        cr.restore()
+
+        # Schedule next redraw for animation
+        self.drawing_area.queue_draw()
+
+    def on_button_press(self, widget, event):
+        if event.button == 1:
+            self.state.dragging = True
+            self.state.current_rect = RectState(event.x, event.y, event.x, event.y)
+
+    def on_motion_notify(self, widget, event):
+        if self.state.dragging and self.state.current_rect:
+            self.state.current_rect = self.state.current_rect._replace(right=event.x, bottom=event.y)
+            self.queue_draw()
+
+    def on_button_release(self, widget, event):
+        if event.button == 1 and self.state.dragging:
+            rect = self.state.current_rect
+            # Normalize rectangle
+            left, right = sorted([rect.left, rect.right])
+            top, bottom = sorted([rect.top, rect.bottom])
+            self.state.fRects.append(RectState(left, top, right, bottom))
+            self.state.dragging = False
+            self.state.current_rect = None
+            self.queue_draw()
+
+    def on_key_press(self, widget, event):
+        if event.keyval == Gdk.KEY_Escape:
+            Gtk.main_quit()
+
+    def on_configure(self, widget, event):
+        self.queue_draw()
+
+    def queue_draw(self):
+        self.drawing_area.queue_draw()
+
+if __name__ == "__main__":
+    win = SkiaGTKExample()
+    win.show_all()
+    Gtk.main()

SkiaGTKGLExample.py

@@ -0,0 +1,167 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+
+import gi
+gi.require_version("Gtk", "3.0")
+from gi.repository import Gtk, Gdk, GObject, GLib
+from OpenGL.GL import *
+import sys
+
+from skia import *
+
+class ApplicationState:
+    def __init__(self, width, height):
+        self.fQuit = False
+        self.window_width = width
+        self.window_height = height
+        self.fRects = []
+
+def create_star():
+    kNumPoints = 5
+    concavePath = Path()
+    points = [Point(0, -50)]
+    rot = Matrix()
+    rot.setRotate(360.0 / kNumPoints)
+    for i in range(kNumPoints - 1): # skip 0
+        points.append(rot.mapPoints(points[i:i+1])[0])
+    concavePath.moveTo(points[0])
+    for i in range(kNumPoints):
+        concavePath.lineTo(points[(2 * i) % kNumPoints])
+    concavePath.setFillType(PathFillType.kEvenOdd)
+    assert not concavePath.isConvex()
+    concavePath.close()
+    return concavePath
+
+class SkiaGLArea(Gtk.GLArea):
+    def __init__(self):
+        super().__init__()
+        self.set_has_depth_buffer(False)
+        self.set_has_stencil_buffer(True)
+        self.set_auto_render(True)
+        self.set_required_version(3, 0)
+        self.connect("realize", self.on_realize)
+        self.connect("render", self.on_render)
+        self.connect("resize", self.on_resize)
+        self.add_events(Gdk.EventMask.BUTTON_PRESS_MASK |
+                        Gdk.EventMask.BUTTON_RELEASE_MASK |
+                        Gdk.EventMask.POINTER_MOTION_MASK |
+                        Gdk.EventMask.KEY_PRESS_MASK)
+        self.set_can_focus(True)
+        self.grab_focus()
+        self.state = ApplicationState(800, 600)
+        self.rotation = 0
+        self.star_image = None
+        self.helpMessage = "Click and drag to create rects.  Press esc to quit."
+        self.drag_rect = None
+
+    def on_realize(self, area):
+        self.make_current()
+        glClearColor(1, 1, 1, 1)
+        glClearStencil(0)
+        glClear(GL_COLOR_BUFFER_BIT | GL_STENCIL_BUFFER_BIT)
+        self.grContext = GrDirectContext.MakeGL()
+        self.star_image = self.make_offscreen_star()
+        GLib.timeout_add(16, self.queue_draw)  # ~60fps
+
+    def on_resize(self, area, width, height):
+        self.state.window_width = width
+        self.state.window_height = height
+
+    def make_offscreen_star(self):
+        # Draw star to an image so we can rotate/translate it efficiently
+        surface = Surface.MakeRasterN32Premul(100, 100)
+        canvas = surface.getCanvas()
+        canvas.clear(ColorWHITE)
+        paint = Paint()
+        canvas.save()
+        canvas.translate(50, 50)
+        canvas.drawPath(create_star(), paint)
+        canvas.restore()
+        return surface.makeImageSnapshot()
+
+    def on_render(self, area, glctx):
+        width = self.get_allocated_width()
+        height = self.get_allocated_height()
+        glViewport(0, 0, width, height)
+        glClearColor(1, 1, 1, 1)
+        glClearStencil(0)
+        glClear(GL_COLOR_BUFFER_BIT | GL_STENCIL_BUFFER_BIT)
+
+        # Setup Skia backend target for this frame
+        fb = glGetIntegerv(GL_FRAMEBUFFER_BINDING)
+        info = GrGLFramebufferInfo(fb, GL_RGBA8)
+        kStencilBits = 8
+        kMsaaSampleCount = 0
+        target = GrBackendRenderTarget(width, height, kMsaaSampleCount, kStencilBits, info)
+        surface = Surface.MakeFromBackendRenderTarget(
+            self.grContext, target, kBottomLeft_GrSurfaceOrigin, kRGBA_8888_ColorType, None, None
+        )
+        canvas = surface.getCanvas()
+        canvas.clear(ColorWHITE)
+        font = Font()
+        paint = Paint()
+
+        # Draw help message in the top left
+        paint.setColor(ColorBLACK)
+        canvas.drawString(self.helpMessage, 0, font.getSize(), font, paint)
+
+        # Draw rectangles
+        import random
+        random.seed(0)
+        for rect in self.state.fRects:
+            paint.setColor(random.randint(0, 0xFFFFFFFF) | 0x44808080)
+            canvas.drawRect(rect, paint)
+        if self.drag_rect:
+            paint.setColor(0x44808080)
+            canvas.drawRect(self.drag_rect, paint)
+
+        # Draw rotating star in the center
+        canvas.save()
+        canvas.translate(width / 2.0, height / 2.0)
+        canvas.rotate(self.rotation)
+        self.rotation = (self.rotation + 1) % 360
+        canvas.drawImage(self.star_image, -50.0, -50.0)
+        canvas.restore()
+
+        canvas.flush()
+        self.grContext.flush()
+        return True
+
+    def do_button_press_event(self, event):
+        if event.button == 1:
+            self.drag_start = (event.x, event.y)
+            self.drag_rect = Rect.MakeLTRB(event.x, event.y, event.x, event.y)
+            self.queue_draw()
+
+    def do_motion_notify_event(self, event):
+        if self.drag_rect:
+            x0, y0 = self.drag_start
+            self.drag_rect = Rect.MakeLTRB(x0, y0, event.x, event.y)
+            self.queue_draw()
+
+    def do_button_release_event(self, event):
+        if event.button == 1 and self.drag_rect:
+            self.state.fRects.append(self.drag_rect)
+            self.drag_rect = None
+            self.queue_draw()
+
+    def do_key_press_event(self, event):
+        if event.keyval == Gdk.KEY_Escape:
+            Gtk.main_quit()
+
+    def queue_draw(self, *args):
+        super().queue_draw()
+        return True  # GLib.timeout_add expects a bool
+
+class SkiaGTKGLWindow(Gtk.Window):
+    def __init__(self):
+        super().__init__(title="Skia + GTK3 + OpenGL")
+        self.set_default_size(800, 600)
+        self.area = SkiaGLArea()
+        self.add(self.area)
+        self.connect("destroy", Gtk.main_quit)
+
+if __name__ == "__main__":
+    win = SkiaGTKGLWindow()
+    win.show_all()
+    Gtk.main()