update trame+viewer doc

Author: jourdain

docs/.vitepress/config.mjs

@@ -52,7 +52,7 @@ export default defineConfig({
         {
           text: 'Introduction',
           items: [
-            { text: 'Getting started', link: '/guide/index' }
+            { text: 'Getting started', link: '/guide/' }
           ]
         },
         {
@@ -66,23 +66,23 @@ export default defineConfig({
         {
           text: 'For JavaScript developers',
           items: [
-            { text: 'Getting started', link: '/guide/js/index' },
+            { text: 'Getting started', link: '/guide/js/' },
             { text: 'Plain JavaScript', link: '/guide/js/plain' },
             { text: 'Building an application', link: '/guide/js/bundler' },
           ]
         },
         {
           text: 'For trame users',
           items: [
-            { text: 'Getting started', link: '/guide/trame/index' },
+            { text: 'Getting started', link: '/guide/trame/' },
             { text: '3D Widgets', link: '/guide/trame/widget' },
             { text: 'Method call', link: '/guide/trame/picking' },
           ]
         },
         {
           text: 'As a data viewer',
           items: [
-            { text: 'Getting started', link: '/guide/viewer/index' },
+            { text: 'Getting started', link: '/guide/viewer/' },
             { text: 'Generating data', link: '/guide/viewer/data' },
           ]
         },

docs/guide/trame/picking.md

@@ -1,8 +1,6 @@
 # Call to VTK.wasm from Python
 
-VTK 3D widgets let you interact with the 3D view in a way that you can drive a processing filter interactively.
-
-In the example below we cover how you can create such widget in plain VTK and how to enable it on the client within the WASM context.
+This example capture the usage of a vtkPiker and illustate the usage of method call from Python.
 
 ![Wheel picking](/assets/images/trame/pick1.png)
 
@@ -12,7 +10,7 @@ The code below highlight some important region and logic to understand.
 <<< ../../../examples/trame/picking/pick.py#vtk{py:line-numbers=42} [VTK 3D Widget]
 <<< ../../../examples/trame/picking/pick.py#trameWidget{py:line-numbers=82} [Trame widget]
 <<< ../../../examples/trame/picking/pick.py#trameChange{py:line-numbers=118} [State change]
-<<< ../../../examples/trame/picking/pick.py#py2wasmCall{py:line-numbers=128} [Method call]
+<<< ../../../examples/trame/picking/pick.py#py2wasmCall{py:line-numbers=129} [Method call]
 <<< ../../../examples/trame/picking/pick.py{py:line-numbers} [Full code (pick.py)]
 <<< ../../../examples/trame/picking/requirements.txt
 :::

docs/guide/viewer/data.md

@@ -1,19 +1,25 @@
 # VTK.wasm viewer data format
 
-Our VTK.wasm view rely on the state...
+While the viewer provides a convinient solution for sharing visualizations, it is also important to provide a simple approach for capturing such a scene into a standalone file.
 
+The `trame.widget.vtklocal.VtkLocal` widget provides a `save(file_name)` helper method that will ease such file creation. You can even see its usage within our trame examples. Once things stabilize, we may promote such method on the vtkObjectManager directly to ease access.
 
-<div style="width: 100%; height: 50vh; border-radius: 12px; overflow: hidden; margin: 1rem 0;">
+::: code-group
+<<< ../../../examples/trame/widget/clip.py#export{py} [Clipping]
+<<< ../../../examples/trame/picking/pick.py#export{py} [Picking]
+:::
+
+<div style="width: 100%; height: 25vh; border-radius: 12px; overflow: hidden; margin: 1rem 0;">
 <iframe src="/vtk-wasm/demo/viewer-basic.html" style="width: 100%; height: 100%; border: none;">
 </iframe>
 </div> 
 
-<div style="width: 100%; height: 50vh; border-radius: 12px; overflow: hidden; margin: 1rem 0;">
+<div style="width: 100%; height: 25vh; border-radius: 12px; overflow: hidden; margin: 1rem 0;">
 <iframe src="/vtk-wasm/demo/viewer-porsche.html" style="width: 100%; height: 100%; border: none;">
 </iframe>
 </div> 
 
-<div style="width: 100%; height: 50vh; border-radius: 12px; overflow: hidden; margin: 1rem 0;">
+<div style="width: 100%; height: 25vh; border-radius: 12px; overflow: hidden; margin: 1rem 0;">
 <iframe src="/vtk-wasm/demo/viewer-starfighter.html" style="width: 100%; height: 100%; border: none;">
 </iframe>
 </div> 

docs/guide/viewer/index.md

@@ -1,10 +1,16 @@
 # VTK.wasm viewer
 
-Thanks to VTK.wasm we are getting close to full parity with what is available in VTK C++ and therefore can create viewers that display scenes equivalent to what you can produce with ParaView or any VTK based application.
+Thanks to VTK.wasm we are getting close to full parity with what is available in VTK C++ and therefore we can create viewers that display scenes equivalent to what you can produce with ParaView or VTK.
 
-<div style="width: 100%; height: 50vh; border-radius: 12px; overflow: hidden; margin: 1rem 0;">
+The code snippet available below show you how you can embed a static 3D scene inside a web page.
+
+<<< ../../public/demo/viewer-basic.html
+
+The `createViewer` method give you the opportunity to fill a DOM element using a selector and the path of the data to load. Additionally, you can provide the path to the WASM library to load unless it is imported as a script. Finally, you can configure your running by setting the rendering backend and execution mode.
+
+Below is the result of the code above.
+
+<div style="width: 100%; height: 25vh; border-radius: 12px; overflow: hidden; margin: 1rem 0;">
 <iframe src="/vtk-wasm/demo/viewer-basic.html" style="width: 100%; height: 100%; border: none;">
 </iframe>
 </div>
-
-<<< ../../public/demo/viewer-basic.html

examples/trame/picking/pick.py

@@ -34,6 +34,7 @@ def apply_settings(property):
 class Pick(TrameApp):
     def __init__(self, server=None):
         super().__init__(server)
+        self._picking_prending = False
         self._setup_vtk()
         self._build_ui()
 
@@ -100,8 +101,7 @@ def _build_ui(self):
                     "wasm_listeners",
                     {
                         wasm_interactor_id: {
-                            # Use "MouseMoveEvent" for more flashy interaction
-                            "LeftButtonPressEvent": {
+                            "LeftButtonPressEvent": {  # LeftButtonPressEvent, MouseMoveEvent
                                 "clicked_pos": {
                                     "x": (wasm_interactor_id, "EventPosition", 0),
                                     "y": (wasm_interactor_id, "EventPosition", 1),
@@ -120,17 +120,23 @@ def on_click(self, clicked_pos, **_):
         if clicked_pos is None:
             return
 
-        asynchronous.create_task(self._pick_actor(**clicked_pos))
+        if not self._picking_prending:
+            asynchronous.create_task(self._pick_actor(**clicked_pos))
 
     # endregion trameChange
 
     # region py2wasmCall
     async def _pick_actor(self, x, y):
+        if self._picking_prending:
+            return
+
+        self._picking_prending = True
         # Trigger a pick on client
         picked_worked = await self.ctx.wasm_view.invoke(
             self.picker, "Pick", (x, y, 0), self.renderer
         )
         if not picked_worked:
+            self._picking_prending = False
             return
 
         # Restore previous state
@@ -152,18 +158,21 @@ async def _pick_actor(self, x, y):
 
         # Render
         self.ctx.wasm_view.update()
+        self._picking_prending = False
 
         # endregion py2wasmCall
 
 
 def main():
+    # region export
     import sys
 
     app = Pick()
     if "--export" in sys.argv:
         app.ctx.wasm_view.save("porsche.wazex")
 
     app.server.start()
+    # endregion export
 
 
 if __name__ == "__main__":

examples/trame/widget/clip.py

@@ -182,13 +182,15 @@ def on_plane_widget(self, plane_widget, **_):
 
 
 def main():
+    # region export
     import sys
 
     app = Clip()
     if "--export" in sys.argv:
         app.ctx.wasm_view.save("star-fighter.wazex")
 
     app.server.start()
+    # endregion export
 
 
 if __name__ == "__main__":