Populate example gallery

.github/pull_request_template.md

@@ -1,56 +1,56 @@
-<!--
-👋 Hello, and thank you for starting this contribution!
-📖 Make sure you've read our CONTRIBUTING.md guide before submitting your pull request.
-❗️ Please follow the template below to help other contributors review your work.
--->
-
-### Context
-<!--
-Explain why this change is needed. Please include relevant links supporting this change, such as:
-- fix #ISSUE_NUMBER (from issue tracker)
-- discourse post thread, or any other existing references
-- screenshot of the issue
-- console log of error, callstack
--->
-
-### Results
-<!--
-Describe or illustrate the effects of your contribution. Please include:
-- comparisons of the behavior before vs after
-- screenshots of new or changed visualizations if applicable
--->
-
-### Changes
-<!--
-Please describe what is changing. Include:
-- APIs added, deleted, deprecated, or changed
-- Classes and methods added, deleted, deprecated, or changed
-- A summary of usage if this is a new feature or change to an API. Adequate documentation and TS definitions should also be added/updated.
--->
-- [ ] Documentation and TypeScript definitions were updated to match those changes
-
-### PR and Code Checklist
-<!--
-NOTE: We will not merge if the following steps have not been completed!
--->
-- [ ] [semantic-release](https://github.com/semantic-release/semantic-release) commit messages
-- [ ] Run `npm run reformat` to have correctly formatted code
-
-### Testing
-<!--
-Please describe how this can be tested by reviewers. Be specific about anything not tested and the reasons why.
-Tests should complete without errors. See CONTRIBUTING.md
--->
-- [ ] This change adds or fixes unit tests <!-- Tests should be added for new functionality -->
-- [ ] Tested environment:
-  - **vtk.js**: <!-- ex: 14.0.0 (favor latest master) -->
-  - **OS**: <!-- ex: Windows 10, iOS 13.6 -->
-  - **Browser**: <!-- ex: Chrome 89.0.4389.128 -->
-
-<!--
-Edit and uncomment the section below if relevant
-
-### Funding
-This contribution is funded by [Example](https://example.com).
-
- -->
+<!--
+👋 Hello, and thank you for starting this contribution!
+📖 Make sure you've read our [CONTRIBUTING.md](https://github.com/Kitware/vtk-js/blob/master/CONTRIBUTING.md) guide before submitting your pull request.
+❗️ Please follow the template below to help other contributors review your work.
+-->
+
+### Context
+<!--
+Explain why this change is needed. Please include relevant links supporting this change, such as:
+- fix #ISSUE_NUMBER (from issue tracker)
+- discourse post thread, or any other existing references
+- screenshot of the issue
+- console log of error, callstack
+-->
+
+### Results
+<!--
+Describe or illustrate the effects of your contribution. Please include:
+- comparisons of the behavior before vs after
+- screenshots of new or changed visualizations if applicable
+-->
+
+### Changes
+<!--
+Please describe what is changing. Include:
+- APIs added, deleted, deprecated, or changed
+- Classes and methods added, deleted, deprecated, or changed
+- A summary of usage if this is a new feature or change to an API. Adequate documentation and TS definitions should also be added/updated.
+-->
+- [ ] Documentation and TypeScript definitions were updated to match those changes
+
+### PR and Code Checklist
+<!--
+NOTE: We will not merge if the following steps have not been completed!
+-->
+- [ ] [semantic-release](https://github.com/semantic-release/semantic-release) commit messages
+- [ ] Run `npm run reformat` to have correctly formatted code
+
+### Testing
+<!--
+Please describe how this can be tested by reviewers. Be specific about anything not tested and the reasons why.
+Tests should complete without errors. See CONTRIBUTING.md
+-->
+- [ ] This change adds or fixes unit tests <!-- Tests should be added for new functionality -->
+- [ ] Tested environment:
+  - **vtk.js**: <!-- ex: 14.0.0 (favor latest master) -->
+  - **OS**: <!-- ex: Windows 10, iOS 13.6 -->
+  - **Browser**: <!-- ex: Chrome 89.0.4389.128 -->
+
+<!--
+Edit and uncomment the section below if relevant
+
+### Funding
+This contribution is funded by [Example](https://example.com).
+
+ -->

Documentation/content/examples/index.md

@@ -36,21 +36,15 @@ This will allow you to see the some live code running in your browser. Just pick
 
 <div class="gallery">
 
-[![PDBReader Example][PDBReader]](./PDBReader.html "PDBReader Example")
-[![ElevationReader Example][ElevationReader]](./ElevationReader.html)
 [![VolumeContour Example][VolumeContour]](./VolumeContour.html)
 [![MultiSliceImageMapper Example][MultiSliceImageMapper]](./MultiSliceImageMapper.html)
 [![PiecewiseGaussianWidget Example][PiecewiseGaussianWidget]](./PiecewiseGaussianWidget.html)
-[![ZipHttpReader Example][ZipHttpReader]](./ZipHttpReader.html)
 
 </div>
 
-[ElevationReader]: ../docs/gallery/ElevationReader.jpg
 [MultiSliceImageMapper]: ../docs/gallery/MultiSliceImageMapper.jpg
-[PDBReader]: ../docs/gallery/PDBReader.jpg
 [PiecewiseGaussianWidget]: ../docs/gallery/PiecewiseGaussianWidget.jpg
 [VolumeContour]: ../docs/gallery/VolumeContour.jpg
-[ZipHttpReader]: ../docs/gallery/ZipHttpReader.jpg
 
 ## Applications
 
@@ -100,33 +94,41 @@ This will allow you to see the some live code running in your browser. Just pick
 
 <div class="gallery">
 
-[![DracoReader Example][DracoReader]](./DracoReader.html "Draco reader(drc)")
-[![PLYReader Example][PLYReader]](./PLYReader.html "PLY reader(ply)")
-[![PLYWriter Example][PLYWriter]](./PLYWriter.html "PLY writer(ply)")
-[![STLReader Example][STLReader]](./STLReader.html "STL reader(stl)")
-[![STLWriter Example][STLWriter]](./STLWriter.html "STL writer(stl)")
-[![PolyDataReader Example][PolyDataReader]](./PolyDataReader.html "VTK legacy reader(VTK)")
-[![ElevationReader Example][ElevationReader]](./ElevationReader.html "Elevation reader(CSV, JPG)")
+[![DracoReader Example][DracoReaderWithIcon]](./DracoReader.html "Draco reader(drc)")
+[![PLYReader Example][PLYReaderWithIcon]](./PLYReader.html "PLY reader(ply)")
+[![PLYWriter Example][PLYWriterWithIcon]](./PLYWriter.html "PLY writer(ply)")
+[![STLReader Example][STLReaderWithIcon]](./STLReader.html "STL reader(stl)")
+[![STLWriter Example][STLWriterWithIcon]](./STLWriter.html "STL writer(stl)")
+[![PolyDataReader Example][PolyDataReaderWithIcon]](./PolyDataReader.html "VTK legacy reader(VTK)")
+[![ElevationReader Example][ElevationReaderWithIcon]](./ElevationReader.html "Elevation reader(CSV, JPG)")
 [![OBJReader Example][OBJReaderWithIcon]](./OBJReader.html "OBJ reader(OBJ, MTL, JPG)")
 [![PDBReader Example][PDBReaderWithIcon]](./PDBReader.html "PDB reader(OBJ, MTL, JPG)")
-[![XMLImageDataWriter Example][XMLImageDataWriter]](./XMLImageDataWriter.html "ImageData XML writer(VTI)")
-[![XMLPolyDataDataWriter Example][XMLPolyDataWriter]](./XMLPolyDataWriter.html "PolyData XML writer(VTP)")
+[![XMLImageDataWriter Example][XMLImageDataWriterWithIcon]](./XMLImageDataWriter.html "ImageData XML writer(VTI)")
+[![XMLPolyDataDataWriter Example][XMLPolyDataWriterWithIcon]](./XMLPolyDataWriter.html "PolyData XML writer(VTP)")
 [![ZipHttpReader Example][ZipHttpReaderWithIcon]](./ZipHttpReader.html "ZIP http reader(ZIP)")
+[![HttpDataSetReader Example][HttpDataSetReaderWithIcon]](./HttpDataSetReader.html "Import a VTK dataset")
+[![HttpDataSetSeriesReader Example][HttpDataSetSeriesReaderWithIcon]](./HttpDataSetSeriesReader.html "Import a VTK dataset with time support.")
+[![HttpSceneLoader Example][HttpSceneLoaderWithIcon]](./HttpSceneLoader.html "Import a VTK scene (data + representation)")
+[![OfflineLocalView Example][OfflineLocalViewWithIcon]](./OfflineLocalView.html "Load a serialized scene (VTKSZ)")
 
 </div>
 
-[DracoReader]: ../docs/gallery/DracoReaderWithIcon.jpg
-[PLYReader]: ../docs/gallery/PLYReaderWithIcon.jpg
-[PLYWriter]: ../docs/gallery/PLYWriterWithIcon.jpg
-[STLReader]: ../docs/gallery/STLReaderWithIcon.jpg
-[STLWriter]: ../docs/gallery/STLWriterWithIcon.jpg
-[PolyDataReader]: ../docs/gallery/VTKReaderWithIcon.jpg
-[ElevationReader]: ../docs/gallery/ElevationReaderWithIcon.jpg
+[DracoReaderWithIcon]: ../docs/gallery/DracoReaderWithIcon.jpg
+[PLYReaderWithIcon]: ../docs/gallery/PLYReaderWithIcon.jpg
+[PLYWriterWithIcon]: ../docs/gallery/PLYWriterWithIcon.jpg
+[STLReaderWithIcon]: ../docs/gallery/STLReaderWithIcon.jpg
+[STLWriterWithIcon]: ../docs/gallery/STLWriterWithIcon.jpg
+[PolyDataReaderWithIcon]: ../docs/gallery/VTKReaderWithIcon.jpg
+[ElevationReaderWithIcon]: ../docs/gallery/ElevationReaderWithIcon.jpg
 [OBJReaderWithIcon]: ../docs/gallery/OBJReaderWithIcon.jpg
 [PDBReaderWithIcon]: ../docs/gallery/PDBReaderWithIcon.jpg
-[XMLImageDataWriter]: ../docs/gallery/XMLImageDataWriterWithIcon.jpg
-[XMLPolyDataWriter]: ../docs/gallery/XMLPolyDataWriterWithIcon.jpg
+[XMLImageDataWriterWithIcon]: ../docs/gallery/XMLImageDataWriterWithIcon.jpg
+[XMLPolyDataWriterWithIcon]: ../docs/gallery/XMLPolyDataWriterWithIcon.jpg
 [ZipHttpReaderWithIcon]: ../docs/gallery/ZipHttpReaderWithIcon.jpg
+[HttpDataSetReaderWithIcon]: ../docs/gallery/HttpDataSetReaderWithIcon.jpg
+[HttpDataSetSeriesReaderWithIcon]: ../docs/gallery/HttpDataSetSeriesReaderWithIcon.gif
+[HttpSceneLoaderWithIcon]: ../docs/gallery/HttpSceneLoaderWithIcon.jpg
+[OfflineLocalViewWithIcon]: ../docs/gallery/OfflineLocalViewWithIcon.jpg
 
 ## Rendering
 
@@ -142,7 +144,6 @@ This will allow you to see the some live code running in your browser. Just pick
 [![VolumeMapper Example][VolumeMapper]](./VolumeMapper.html "3D volume ray cast mapper witch volumetric scattering")
 [![SurfaceLICMapper Example][SurfaceLICMapper]](./SurfaceLICMapper.html "Surface Line Integral Convolution (LIC) mapper")
 
-
 </div>
 
 [Glyph3DMapper]: ../docs/gallery/Glyph3DMapper.jpg
@@ -163,6 +164,8 @@ This will allow you to see the some live code running in your browser. Just pick
 [![PointPicker Example][PointPicker]](./PointPicker.html "CPU point picker/selector")
 [![HardwareSelector Example][HardwareSelector]](./HardwareSelector.html "GPU point/cell picker/selector with properties")
 
+</div>
+
 [CellPicker]: ../docs/gallery/CellPicker.jpg
 [PointPicker]: ../docs/gallery/PointPicker.jpg
 [HardwareSelector]: ../docs/gallery/HardwareSelector.jpg
@@ -194,7 +197,20 @@ This will allow you to see the some live code running in your browser. Just pick
 [LineWidget]: ../docs/gallery/LineWidget.png
 [PaintWidget]: ../docs/gallery/PaintWidget.gif
 [PolyLineWidget]: ../docs/gallery/PolyLineWidget.png
-[ResliceCursorWidget]: ../docs/gallery/ResliceCursorWidget.jpg
+[ResliceCursorWidget]: ../docs/gallery/ResliceCursorWidget.gif
 [ShapeWidget]: ../docs/gallery/ShapeWidget.png
 [SphereWidget]: ../docs/gallery/SphereWidget.jpg
-[SplineWidget]: ../docs/gallery/SplineWidget.gif
+[SplineWidget]: ../docs/gallery/SplineWidget.gif
+
+## Connectivity
+
+<div class="gallery">
+
+[![RemoteView Example][RemoteViewWithLogos]](./RemoteView.html "Connect a VTK or ParaView Python backend server via WebSockets")
+[![ImageStream Example][ImageStreamWithLogos]](./ImageStream.html "Stream a ParaView Python backend server via WebSockets under a VTK.js rendering")
+
+
+</div>
+
+[RemoteViewWithLogos]: ../docs/gallery/RemoteViewWithLogos.jpg
+[ImageStreamWithLogos]: ../docs/gallery/ImageStreamWithLogos.jpg

Examples/Applications/OfflineLocalView/index.md

@@ -0,0 +1,10 @@
+# Offline Local View
+
+It uses a static export of the dynamic synchronizable view of vtk.js which get used within trame for its local view.
+
+This is notably use by [trame](https://trame.kitware.com/) and [PyVista](https://docs.pyvista.org/)
+
+You can download PyVista example files:
+* [Maps and Terrains](https://docs.pyvista.org/version/stable/_images/examples/00-load/images/sphx_glr_terrain_mesh.vtksz)
+* [Finite Element Analysis](https://docs.pyvista.org/version/stable/_images/plot_directive/index-3_00_00.vtksz) 
+* [Point Cloud](https://docs.pyvista.org/version/stable/_images/plot_directive/index-4_00_00.vtksz)

Examples/Geometry/CubeAxes/index.js

@@ -6,26 +6,18 @@ import '@kitware/vtk.js/Rendering/Profiles/Geometry';
 import vtkActor from '@kitware/vtk.js/Rendering/Core/Actor';
 import vtkCubeAxesActor from '@kitware/vtk.js/Rendering/Core/CubeAxesActor';
 import vtkConeSource from '@kitware/vtk.js/Filters/Sources/ConeSource';
-import vtkInteractorStyleTrackballCamera from '@kitware/vtk.js/Interaction/Style/InteractorStyleTrackballCamera';
 import vtkMapper from '@kitware/vtk.js/Rendering/Core/Mapper';
-import vtkRenderWindow from '@kitware/vtk.js/Rendering/Core/RenderWindow';
-import vtkRenderWindowInteractor from '@kitware/vtk.js/Rendering/Core/RenderWindowInteractor';
-import vtkRenderer from '@kitware/vtk.js/Rendering/Core/Renderer';
-import vtkURLExtract from '@kitware/vtk.js/Common/Core/URLExtract';
-
-import '@kitware/vtk.js/Rendering/OpenGL/RenderWindow';
-import '@kitware/vtk.js/Rendering/WebGPU/RenderWindow';
-
-// Process arguments from URL
-const userParams = vtkURLExtract.extractURLParameters();
+import vtkFullScreenRenderWindow from '@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow';
 
 // ----------------------------------------------------------------------------
 // Standard rendering code setup
 // ----------------------------------------------------------------------------
 
-const renderWindow = vtkRenderWindow.newInstance();
-const renderer = vtkRenderer.newInstance({ background: [0.2, 0.3, 0.4] });
-renderWindow.addRenderer(renderer);
+const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({
+  background: [0.2, 0.3, 0.4],
+});
+const renderer = fullScreenRenderer.getRenderer();
+const renderWindow = fullScreenRenderer.getRenderWindow();
 
 // ----------------------------------------------------------------------------
 // Simple pipeline ConeSource --> Mapper --> Actor
@@ -44,51 +36,14 @@ actor.setMapper(mapper);
 // ----------------------------------------------------------------------------
 
 renderer.addActor(actor);
-renderer.resetCamera();
 
 const cubeAxes = vtkCubeAxesActor.newInstance();
 cubeAxes.setCamera(renderer.getActiveCamera());
 cubeAxes.setDataBounds(actor.getBounds());
 renderer.addActor(cubeAxes);
 
-// ----------------------------------------------------------------------------
-// Use OpenGL as the backend to view the all this
-// ----------------------------------------------------------------------------
-
-const apiSpecificRenderWindow = renderWindow.newAPISpecificView(
-  userParams.viewAPI
-);
-renderWindow.addView(apiSpecificRenderWindow);
-
-// ----------------------------------------------------------------------------
-// Create a div section to put this into
-// ----------------------------------------------------------------------------
-
-const container = document.createElement('div');
-document.querySelector('body').appendChild(container);
-apiSpecificRenderWindow.setContainer(container);
-
-// ----------------------------------------------------------------------------
-// Capture size of the container and set it to the renderWindow
-// ----------------------------------------------------------------------------
-
-const { width, height } = container.getBoundingClientRect();
-apiSpecificRenderWindow.setSize(width, height);
-
-// ----------------------------------------------------------------------------
-// Setup an interactor to handle mouse events
-// ----------------------------------------------------------------------------
-
-const interactor = vtkRenderWindowInteractor.newInstance();
-interactor.setView(apiSpecificRenderWindow);
-interactor.initialize();
-interactor.bindEvents(container);
-
-// ----------------------------------------------------------------------------
-// Setup interactor style to use
-// ----------------------------------------------------------------------------
-
-interactor.setInteractorStyle(vtkInteractorStyleTrackballCamera.newInstance());
+renderer.resetCamera();
+renderWindow.render();
 
 // make the cubeAxes global visibility in case you want to try changing
 // some values