fix examples

docs/examples/01_trimesh.md

@@ -28,14 +28,15 @@ with open(assets_folder / test_file, "rb") as f:
     data = f.read()
     text = trimesh.util.decode_text(data)
 
-app = Vuer(static_root=assets_folder, port=8013)
+app = Vuer(static_root=assets_folder)
 
 print(f"Loaded mesh with {mesh.vertices.shape} vertices and {mesh.faces.shape} faces")
 
 
 # use `start=True` to start the app immediately
 @app.spawn(start=True)
 async def main(session):
+
     session @ Set(
         DefaultScene(
             SceneBackground(),
@@ -50,7 +51,6 @@ async def main(session):
                 text=text,
                 position=[1, 0, 1],
                 scale=0.3,
-                materialType="depth",
             ),
             TriMesh(
                 key="trimesh",

docs/examples/01_trimesh.py

@@ -4,6 +4,7 @@
 
 MAKE_DOCS = os.getenv("MAKE_DOCS", None)
 
+
 doc @ """
 # Trimesh
 
@@ -35,14 +36,15 @@
         data = f.read()
         text = trimesh.util.decode_text(data)
 
-    app = Vuer(static_root=assets_folder, port=8013)
+    app = Vuer(static_root=assets_folder)
 
     print(f"Loaded mesh with {mesh.vertices.shape} vertices and {mesh.faces.shape} faces")
 
 
     # use `start=True` to start the app immediately
     @app.spawn(start=True)
     async def main(session):
+
         session @ Set(
             DefaultScene(
                 SceneBackground(),
@@ -57,7 +59,6 @@ async def main(session):
                     text=text,
                     position=[1, 0, 1],
                     scale=0.3,
-                    materialType="depth",
                 ),
                 TriMesh(
                     key="trimesh",

docs/examples/02_pointcloud.md

@@ -1,3 +1,4 @@
+
 # Showing Point Clouds Programmatically and Fast💨
 
 This example shows you two ways to load a point cloud. In the first example, you serve the point cloud as an `ply` file, and have the webclient read directly from your file system. This approach, however can be a bit slow, and won't work with point cloud data that are updated at real time. In the second example, you load the point cloud into python and then send the parsed vertices and the color information via the `PointCloud` component.
@@ -32,7 +33,7 @@ from vuer.schemas import DefaultScene, Ply, PointCloud
 assets_folder = Path(__file__).parent / "../../../assets"
 test_file = "static_3d/porsche.ply"
 
-# trimesh has issue loading large pointclouds.
+# trimesh has issue loading large point clouds.
 pcd = o3d.io.read_point_cloud(str(assets_folder / test_file))
 
 app = Vuer(static_root=assets_folder)

docs/examples/02_pointcloud_pcd.md

@@ -7,6 +7,7 @@ You should expect to see a scene that looks like the following:
 ![pointcloud](figures/pointcloud_pcd.png)
 
 ```python
+import os
 from asyncio import sleep
 
 from vuer import Vuer, VuerSession

docs/examples/02_pointcloud_pcd.py

@@ -16,6 +16,7 @@
 ![pointcloud](figures/pointcloud_pcd.png)
 """
 with doc, doc.skip if MAKE_DOCS else nullcontext():
+    import os
     from asyncio import sleep
 
     from vuer import Vuer, VuerSession

docs/examples/04_imperative_api.md

@@ -17,6 +17,7 @@ app = Vuer(
         reconnect=True,
         grid=False,
         backgroundColor="black",
+
     ),
 )
 
@@ -30,7 +31,7 @@ async def show_heatmap(sess: VuerSession):
         position=[0, 0, 0.1],
         rotation=[0, 0, 0],
         materialType="phong",
-        meterial=dict(color="green"),
+        material=dict(color="green"),
         outlines=dict(angle=0, thickness=0.005, color="white"),
     )
 

docs/examples/04_imperative_api.py

@@ -23,6 +23,7 @@
             reconnect=True,
             grid=False,
             backgroundColor="black",
+
         ),
     )
 

docs/examples/05_collecting_render.md

@@ -78,7 +78,7 @@ async def show_heatmap(proxy):
         position=[0, 0, 0.1],
         rotation=[0, 0, 0],
         materialType="depth",
-        meterial=dict(color="green"),
+        material=dict(color="green"),
         outlines=dict(angle=0, thickness=0.005, color="white"),
     )
 
@@ -88,7 +88,7 @@ async def show_heatmap(proxy):
         position=[0, 0, -0.01],
         rotation=[0, 0, 0],
         materialType="depth",
-        meterial=dict(color="green", side=2),
+        material=dict(color="green", side=2),
     )
 
     (

docs/examples/05_collecting_render.py

@@ -1,7 +1,7 @@
 import os
 from contextlib import nullcontext
 
-MAKE_DOCS = os.getenv("MAKE_DOCS", True)
+MAKE_DOCS = os.getenv("MAKE_DOCS", None)
 
 from cmx import doc
 

docs/examples/05_collecting_render_procedural.md

@@ -30,7 +30,7 @@ async def show_heatmap(sess: VuerSession):
             position=[0, 0, 0],
             rotation=[0, 0, 0],
             materialType="depth",
-            meterial=dict(color="green", side=2),
+            material=dict(color="green", side=2),
         ),
         Sphere(
             key="sphere",

docs/examples/05_pointcloud_animation.md

@@ -23,7 +23,6 @@ app = Vuer()
 infill = np.load("assets/suzanne_infill_good_traj.npy")
 surface_infill = np.load("assets/suzanne_surface_fill_only.npy")
 
-
 @app.spawn
 async def main(proxy):
     proxy @ Set(
@@ -37,7 +36,6 @@ async def main(proxy):
     while True:
         await asyncio.sleep(1.0)
 
-
 async def frame_handle(e: ClientEvent, _):
     print("frame handle")
 

docs/examples/05_pointcloud_animation_upsert.md

@@ -1,14 +1,15 @@
 
 # Point Cloud Animation (Upsert)
 
+
 ```python
 import asyncio
 from pathlib import Path
 
 import numpy as np
 import open3d as o3d
 
-from vuer import Vuer
+from vuer import Vuer, VuerSession
 from vuer.events import Set, ClientEvent
 from vuer.schemas import DefaultScene, TriMesh, PointCloud, TimelineControls
 
@@ -21,22 +22,20 @@ app = Vuer()
 infill = np.load("assets/suzanne_infill_good_traj.npy")
 surface_infill = np.load("assets/suzanne_surface_fill_only.npy")
 
-
 @app.spawn
 async def main(proxy):
     proxy.set @ DefaultScene()
 
     while True:
         await asyncio.sleep(1.0)
 
-
-async def frame_handle(e: ClientEvent, _):
+async def frame_handle(e: ClientEvent, proxy: VuerSession):
     print("frame handle")
 
     step = e.value["step"]
     step = step % len(infill)
 
-    app.upsert @ [
+    proxy.upsert(
         TimelineControls(end=len(infill), step=step, speed=1.0, paused=False, key="timeline"),
         PointCloud(key="infill", vertices=infill[step], position=[0, 0, 0], color="red"),
         PointCloud(
@@ -45,6 +44,6 @@ async def frame_handle(e: ClientEvent, _):
             position=[0.8, 0, 0],
             color="green",
         ),
-    ]
+    )
     print("updated the scene")
 ```

docs/examples/06_depth_texture.md

@@ -14,7 +14,6 @@ from vuer.schemas import Scene, Box, Sphere, group, SceneBackground
 
 app = Vuer()
 
-
 @app.spawn(start=True)
 async def show_heatmap(proxy):
     scene = Scene(

docs/examples/06_depth_texture.py

@@ -1,5 +1,9 @@
+import os
+from contextlib import nullcontext
 from cmx import doc
 
+MAKE_DOCS = os.getenv("MAKE_DOCS", None)
+
 doc @ """
 # Depth Texture
 
@@ -8,7 +12,7 @@
 I have implemented range depth in the deformable image plane. I will add metric depth soon. Please consider adding a GitHub issueto upvote this feature, or contribute via a PR.
 """
 
-with doc, doc.skip:
+with doc, doc.skip if MAKE_DOCS else nullcontext():
     from asyncio import sleep
 
     from vuer import Vuer

docs/examples/07_background_image.md

@@ -15,7 +15,13 @@ from vuer import Vuer
 from vuer.events import ClientEvent
 from vuer.schemas import Scene, SceneBackground
 
-reader = iio.get_reader("../../../assets/movies/disney.webm")
+assets_folder = Path(__file__).parent / "../../../assets"
+
+disney_file = "movies/disney.webm"
+
+reader_file = assets_folder / disney_file
+
+reader = iio.get_reader(reader_file)
 
 app = Vuer()
 
@@ -45,6 +51,7 @@ async def show_heatmap(session):
                 interpolate=True,
             ),
             to="bgChildren",
+
         )
         # 'jpeg' encoding should give you about 30fps with a 16ms wait in-between.
         await sleep(0.016)

docs/examples/07_background_image.py

@@ -1,4 +1,10 @@
+from pathlib import Path
 from cmx import doc
+import os
+from contextlib import nullcontext
+
+MAKE_DOCS = os.getenv("MAKE_DOCS", None)
+
 
 doc @ """
 # Background Image
@@ -8,7 +14,7 @@
 GANs.
 """
 
-with doc, doc.skip:
+with doc, doc.skip if MAKE_DOCS else nullcontext():
     from asyncio import sleep
 
     import imageio as iio
@@ -18,7 +24,13 @@
     from vuer.events import ClientEvent
     from vuer.schemas import Scene, SceneBackground
 
-    reader = iio.get_reader("../../../assets/movies/disney.webm")
+    assets_folder = Path(__file__).parent / "../../../assets"
+
+    disney_file = "movies/disney.webm"
+
+    reader_file = assets_folder / disney_file
+
+    reader = iio.get_reader(reader_file)
 
     app = Vuer()
 
@@ -48,6 +60,9 @@ async def show_heatmap(session):
                     interpolate=True,
                 ),
                 to="bgChildren",
+
             )
             # 'jpeg' encoding should give you about 30fps with a 16ms wait in-between.
             await sleep(0.016)
+
+doc.flush()

docs/examples/07b_vr_hud.py

@@ -1,4 +1,8 @@
 from cmx import doc
+from contextlib import nullcontext
+import os
+
+MAKE_DOCS = os.getenv("MAKE_DOCS", None)
 
 doc @ """
 # Background Image
@@ -11,7 +15,7 @@
 ![heads up display (HUD) in VR](figures/07b_vr_hud.png)
 """
 
-with doc, doc.skip:
+with doc, doc.skip if MAKE_DOCS else nullcontext():
     from asyncio import sleep
 
     import imageio as iio

docs/examples/08_experimental_depth_image.md

@@ -28,15 +28,13 @@ app = Vuer(
     static_root=assets_folder,
 )
 
-
 def get_buffer(file_path):
     with open(file_path, "rb") as f:
         file_buffer = f.read()
 
     return file_buffer
 
-
-@app.spawn
+@app.spawn(start=True)
 async def show_heatmap(proxy):
     rgb = get_buffer(assets_folder / "images/cubic_rgb.jpg")
     depth = get_buffer(assets_folder / "images/cubic_depth.jpg")
@@ -58,7 +56,6 @@ async def show_heatmap(proxy):
     while True:
         await sleep(10.0)
 
-
 async def on_camera(event: ClientEvent, send_fn):
     assert event == "CAMERA_MOVE", "the event type should be correct"
     print("camera event", event.etype, event.value)

docs/examples/08_experimental_depth_image.py

@@ -1,5 +1,11 @@
 from cmx import doc
 
+import os
+
+from contextlib import nullcontext
+
+MAKE_DOCS = os.getenv("MAKE_DOCS", None)
+
 doc @ """
 # RGB-D Visualization
 
@@ -11,7 +17,7 @@
 ```
 And this should download a pair of RGB and depth image.
 """
-with doc, doc.skip:
+with doc, doc.skip if MAKE_DOCS else nullcontext():
     from asyncio import sleep
     from pathlib import Path
 
@@ -36,7 +42,7 @@ def get_buffer(file_path):
 
         return file_buffer
 
-    @app.spawn
+    @app.spawn(start=True)
     async def show_heatmap(proxy):
         rgb = get_buffer(assets_folder / "images/cubic_rgb.jpg")
         depth = get_buffer(assets_folder / "images/cubic_depth.jpg")

docs/examples/11_coordinates_markers.md

@@ -20,13 +20,12 @@ N = 1000
 
 markers = [
     CoordsMarker(
-        position=[i % n, (i // n) % n, (i // n ** 2) % n],
+        position=[i % n, (i // n) % n, (i // n**2) % n],
         scale=0.25,
     )
     for i in range(N)
 ]
 
-
 @app.spawn(start=True)
 async def main(proxy: VuerSession):
     proxy.set @ DefaultScene(*markers)