pygfx · Vipitis · Sep 16, 2025 · Sep 16, 2025 · Sep 17, 2025 · Sep 17, 2025
diff --git a/examples/local_browser.html b/examples/local_browser.html
@@ -14,18 +14,41 @@
     </style>
 </head>
 <body>
+<!-- WIP: make it more of a "Playground"? -->
+<select id="example-select">
+    <option value="events.py">events.py</option>
+    <option value="noise.py">noise.py</option>
+    <option value="snake.py">snake.py</option>
+</select>
+<!-- maybe something like add example (to test spawning more canvases and also closing them?) -->
+<button id="reload-example">Reload example</button>
+<button id="reload-page" style="background-color: orange;"onclick="location.reload();">Reload page</button>
+<select id="lib-path">
+    <option value="../dist/rendercanvas-2.2.1-py3-none-any.whl" selected>local ./dist/</option>
+    <option value="rendercanvas">latest PyPI</option>
+</select>
+<input type="checkbox" id="load-wgpu">Load WebGPU (experimental)</input>
+<br>
+<!-- maybe wrap in a div so content after it still shows? -->
 <canvas id="canvas" style="background-color: lightgrey;"></canvas><br>
 some text below the canvas!
+<!-- TODO: redirect the Python stdout/stderr to some kind of text box at the bottom -->
 <script type="text/javascript">
+
+    async function loadPythonExample(example_path){
+        let response = await fetch(example_path);
+        let pythonCode = await response.text();
+        return pythonCode;
+    }
+
     async function main(){
 
         // fetch the file locally for easier scripting
-        // --allow-file-access-from-files or local webserver
+        // start chrome --allow-file-access-from-files %cd%\examples\local_browser.html or local webserver
         // TODO: replace the actual code here (unless you have the module)
-        pythonCode = await (await fetch("snake.py")).text();
-        // pythonCode = await (await fetch("events.py")).text();
-        // pythonCode = await (await fetch("noise.py")).text();
-
+        let example_select = document.getElementById("example-select");
+        let reload_example_button = document.getElementById("reload-example");
+        pythonCode = await (await fetch(example_select.value)).text();
 
         // Load Pyodide
         let pyodide = await loadPyodide();
@@ -38,6 +61,18 @@
 
         // Run the Python code async because some calls are async it seems.
         pyodide.runPythonAsync(pythonCode);
+
+        // on click, we reload the example (or a difference one)
+        reload_example_button.onclick = async function() {
+            // interrupt existing code?
+            // sounds complex: https://pyodide.org/en/stable/usage/keyboard-interrupts.html
+            pyodide.setInterruptBuffer([2]);
+            pyodide.setInterruptBuffer([2]);
+
+            let example_file = example_select.value;
+            pythonCode = await (await fetch(example_file)).text();
+            pyodide.runPythonAsync(pythonCode);
+        };
     }
     main();
 </script>

diff --git a/rendercanvas/html.py b/rendercanvas/html.py
@@ -17,7 +17,7 @@

 # packages available inside pyodide
 from pyodide.ffi import run_sync, create_proxy
 from js import document, ImageData, Uint8ClampedArray, window, HTMLCanvasElement, ResizeObserver


 # needed for completeness? somehow is required for other examples - hmm?
@@ -84,7 +84,7 @@
                     res += (mouse_button_map.get(i, i),)
             return res
 
-
+        self._pointer_inside = False # keep track for the pointer_move event
         # resize ? maybe composition?
         # perhaps: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver
 
@@ -93,7 +93,7 @@
            # print(entry)
            new_size = ()
            ratio = self.get_pixel_ratio()
            if entry.devicePixelContentBoxSize: # safari doesn't 
                new_size = (entry.devicePixelContentBoxSize[0].inlineSize, entry.devicePixelContentBoxSize[0].blockSize)
            else:
                lsize = ()
@@ -160,9 +160,9 @@
         self.canvas_element.addEventListener("pointerup", self._pointer_up_proxy)
 
         # pointer_move
-        # TODO: track pointer_inside and pointer_down to only trigger this when relevant?
-        # also figure out why it doesn't work in the first place...
         def _html_pointer_move(proxy_args):
+            if (not self._pointer_inside) and (not proxy_args.buttons):  # only when inside or a button is pressed
+                return
             modifiers = tuple(
                 [v for k, v in key_mod_map.items() if getattr(proxy_args, k)]
             )
@@ -199,6 +199,7 @@
                 "time_stamp": proxy_args.timeStamp,
             }
             self.submit_event(event)
+            self._pointer_inside = True
 
         self._pointer_enter_proxy = create_proxy(_html_pointer_enter)
         self.canvas_element.addEventListener("pointerenter", self._pointer_enter_proxy)
@@ -220,6 +221,7 @@
                 "time_stamp": proxy_args.timeStamp,
             }
             self.submit_event(event)
+            self._pointer_inside = False
 
         self._pointer_leave_proxy = create_proxy(_html_pointer_leave)
         self.canvas_element.addEventListener("pointerleave", self._pointer_leave_proxy)
@@ -299,24 +301,24 @@
         self._key_up_proxy = create_proxy(_html_key_up)
         document.addEventListener("keyup", self._key_up_proxy)
 
-        # char
-        def _html_char(proxy_args):
-            print(dir(proxy_args))
-            modifiers = tuple(
-                [v for k, v in key_mod_map.items() if getattr(proxy_args, k)]
-            )
-            event = {
-                "event_type": "char",
-                "modifiers": modifiers,
-                "char_str": proxy_args.key,  # unsure if this works, it's experimental anyway: https://github.com/pygfx/rendercanvas/issues/28
-                "time_stamp": proxy_args.timeStamp,
-            }
-            self.submit_event(event)
-
-        self._char_proxy = create_proxy(_html_char)
-        document.addEventListener(
-            "input", self._char_proxy
-        )  # maybe just another keydown? (seems to include unicode chars)
+        # char ... it's not this
+        # def _html_char(proxy_args):
+        #     print(dir(proxy_args))
+        #     modifiers = tuple(
+        #         [v for k, v in key_mod_map.items() if getattr(proxy_args, k)]
+        #     )
+        #     event = {
+        #         "event_type": "char",
+        #         "modifiers": modifiers,
+        #         "char_str": proxy_args.key,  # unsure if this works, it's experimental anyway: https://github.com/pygfx/rendercanvas/issues/28
+        #         "time_stamp": proxy_args.timeStamp,
+        #     }
+        #     self.submit_event(event)
+
+        # self._char_proxy = create_proxy(_html_char)
+        # document.addEventListener(
+        #     "input", self._char_proxy
+        # )  # maybe just another keydown? (seems to include unicode chars)
 
         # animate event doesn't seem to be actually implemented, and it's by the loop not the gui.