From b7f04e82f1972a2b4cc5c2340c423e8ec3e0e0bc Mon Sep 17 00:00:00 2001
From: thera2002 <thera2002@users.noreply.github.com>
Date: Sat, 2 Nov 2024 10:51:00 +0000
Subject: [PATCH] deploy: 671335e56a17b4aa77d193a88b89487c69dfdce3

---
 Annotation.js.html                        |   2 +-
 AudioPlayer.html                          |   2 +-
 AudioPlayer.js.html                       |   2 +-
 BoundingBox.html                          |   2 +-
 BoundingBox.js.html                       |   2 +-
 Cache.html                                |   2 +-
 Cache.js.html                             |   2 +-
 Camera.html                               |   2 +-
 Camera.js.html                            |   2 +-
 Canvas.html                               |   2 +-
 Canvas.js.html                            |   2 +-
 Color.html                                |   2 +-
 Colormap.html                             |   2 +-
 Colormap.js.html                          |   2 +-
 ColormapLegend.html                       |   2 +-
 Controller.html                           |   2 +-
 Controller.js.html                        |   2 +-
 Controller2D.html                         |   2 +-
 Controller2D.js.html                      |   2 +-
 ControllerFocusContext.html               |   2 +-
 ControllerFocusContext.js.html            |   2 +-
 ControllerLens.html                       |   2 +-
 ControllerLens.js.html                    |   2 +-
 ControllerPanZoom.html                    |   2 +-
 ControllerPanZoom.js.html                 |   2 +-
 CoordinateSystem.html                     |   2 +-
 CoordinateSystem.js.html                  |   2 +-
 Draggable.html                            |   2 +-
 Draggable.js.html                         |   2 +-
 EditorSvgAnnotation.html                  |   2 +-
 EditorSvgAnnotation.js.html               |   2 +-
 FocusContext.html                         |   2 +-
 FocusContext.js.html                      |   2 +-
 Layer.html                                |   2 +-
 Layer.js.html                             |   2 +-
 LayerAnnotation.html                      |   2 +-
 LayerAnnotation.js.html                   |   2 +-
 LayerAnnotationImage.html                 |   2 +-
 LayerAnnotationImage.js.html              |   2 +-
 LayerBRDF.html                            |   2 +-
 LayerBRDF.js.html                         |   2 +-
 LayerCombiner.html                        |   2 +-
 LayerCombiner.js.html                     |   2 +-
 LayerDstretch.html                        |   2 +-
 LayerDstretch.js.html                     |   2 +-
 LayerImage.html                           |   2 +-
 LayerImage.js.html                        |   2 +-
 LayerLens.html                            |   2 +-
 LayerLens.js.html                         |   2 +-
 LayerMaskedImage.html                     |   2 +-
 LayerMaskedImage.js.html                  |   2 +-
 LayerNeuralRTI.html                       |   2 +-
 LayerNeuralRTI.js.html                    |   2 +-
 LayerRTI.html                             |   2 +-
 LayerRTI.js.html                          |   2 +-
 LayerSvgAnnotation.html                   |   2 +-
 LayerSvgAnnotation.js.html                |   2 +-
 Layout.html                               |   2 +-
 Layout.js.html                            |   2 +-
 LayoutTileImages.html                     |   2 +-
 LayoutTileImages.js.html                  |   2 +-
 LayoutTiles.html                          |   2 +-
 LayoutTiles.js.html                       |   2 +-
 LensDashboard.html                        |   2 +-
 LensDashboard.js.html                     |   2 +-
 LensDashboardNavigator.html               |   2 +-
 LensDashboardNavigator.js.html            |   2 +-
 LensDashboardNavigatorRadial.html         |   2 +-
 LensDashboardNavigatorRadial.js.html      |   2 +-
 LightSphereController.html                |   2 +-
 LightSphereController.js.html             |   4 +-
 PointerManager.js.html                    |   2 +-
 Raster.html                               |   2 +-
 Raster.js.html                            |   2 +-
 Shader.html                               |   2 +-
 Shader.js.html                            |   2 +-
 ShaderBRDF.html                           |   2 +-
 ShaderBRDF.js.html                        |   2 +-
 ShaderCombiner.html                       |   2 +-
 ShaderCombiner.js.html                    |   2 +-
 ShaderFilter.js.html                      |   2 +-
 ShaderNeural.html                         |   2 +-
 ShaderNeural.js.html                      |   2 +-
 ShaderRTI.html                            |   2 +-
 ShaderRTI.js.html                         |   2 +-
 Signals.js.html                           |   2 +-
 Simplify.js.html                          |   2 +-
 Skin.html                                 |   2 +-
 Skin.js.html                              |   2 +-
 TextToSpeechPlayer.html                   |   2 +-
 TextToSpeechPlayer.js.html                |   2 +-
 Tile.js.html                              |   2 +-
 Transform.html                            |   2 +-
 Transform.js.html                         |   2 +-
 UIBasic.html                              |   2 +-
 UIBasic.js.html                           |   2 +-
 UIDialog.html                             |   2 +-
 Viewer.html                               |   2 +-
 Viewer.js.html                            |   2 +-
 classes.list.html                         |   2 +-
 global.html                               |   2 +-
 global.html#Annotation                    |   2 +-
 index.html                                | 102 +---------------------
 module-PointerManager-PointerManager.html |   2 +-
 module-PointerManager.html                |   2 +-
 modules.list.html                         |   2 +-
 namespaces.list.html                      |   2 +-
 quicksearch.html                          |   2 +-
 tutorial-getting-started.html             |   2 +-
 tutorials.list.html                       |   2 +-
 110 files changed, 111 insertions(+), 211 deletions(-)

diff --git a/Annotation.js.html b/Annotation.js.html
index 20eb3081..2b744345 100644
--- a/Annotation.js.html
+++ b/Annotation.js.html
@@ -334,7 +334,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/AudioPlayer.html b/AudioPlayer.html
index f0aacec1..764c09a2 100644
--- a/AudioPlayer.html
+++ b/AudioPlayer.html
@@ -1307,7 +1307,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/AudioPlayer.js.html b/AudioPlayer.js.html
index f66c9bb5..c6a3d026 100644
--- a/AudioPlayer.js.html
+++ b/AudioPlayer.js.html
@@ -350,7 +350,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/BoundingBox.html b/BoundingBox.html
index 4f115bdf..3de73d8d 100644
--- a/BoundingBox.html
+++ b/BoundingBox.html
@@ -2442,7 +2442,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/BoundingBox.js.html b/BoundingBox.js.html
index c3489aa4..0e70c8e0 100644
--- a/BoundingBox.js.html
+++ b/BoundingBox.js.html
@@ -347,7 +347,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/Cache.html b/Cache.html
index 0254823a..52bb54b5 100644
--- a/Cache.html
+++ b/Cache.html
@@ -479,7 +479,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/Cache.js.html b/Cache.js.html
index fe08b434..baab6108 100644
--- a/Cache.js.html
+++ b/Cache.js.html
@@ -360,7 +360,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/Camera.html b/Camera.html
index 6e338b21..dac986b1 100644
--- a/Camera.html
+++ b/Camera.html
@@ -3379,7 +3379,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/Camera.js.html b/Camera.js.html
index c3ff2648..2b84ea65 100644
--- a/Camera.js.html
+++ b/Camera.js.html
@@ -501,7 +501,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/Canvas.html b/Canvas.html
index 590d9065..66e86e38 100644
--- a/Canvas.html
+++ b/Canvas.html
@@ -1736,7 +1736,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/Canvas.js.html b/Canvas.js.html
index bdb9b1b7..ec60094a 100644
--- a/Canvas.js.html
+++ b/Canvas.js.html
@@ -485,7 +485,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/Color.html b/Color.html
index 4b07f2d8..de212bad 100644
--- a/Color.html
+++ b/Color.html
@@ -1047,7 +1047,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/Colormap.html b/Colormap.html
index 53d8c31e..d334517f 100644
--- a/Colormap.html
+++ b/Colormap.html
@@ -1127,7 +1127,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/Colormap.js.html b/Colormap.js.html
index e9860d66..1836a00d 100644
--- a/Colormap.js.html
+++ b/Colormap.js.html
@@ -712,7 +712,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/ColormapLegend.html b/ColormapLegend.html
index 21668aa0..8f803048 100644
--- a/ColormapLegend.html
+++ b/ColormapLegend.html
@@ -606,7 +606,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/Controller.html b/Controller.html
index 1f2be680..165626bf 100644
--- a/Controller.html
+++ b/Controller.html
@@ -2140,7 +2140,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/Controller.js.html b/Controller.js.html
index a1c8d478..74b6efc5 100644
--- a/Controller.js.html
+++ b/Controller.js.html
@@ -336,7 +336,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/Controller2D.html b/Controller2D.html
index 94dd0295..e63b8b81 100644
--- a/Controller2D.html
+++ b/Controller2D.html
@@ -2557,7 +2557,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/Controller2D.js.html b/Controller2D.js.html
index 87f75f3a..0cfdf922 100644
--- a/Controller2D.js.html
+++ b/Controller2D.js.html
@@ -348,7 +348,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/ControllerFocusContext.html b/ControllerFocusContext.html
index 2fcc794e..32a95903 100644
--- a/ControllerFocusContext.html
+++ b/ControllerFocusContext.html
@@ -2583,7 +2583,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/ControllerFocusContext.js.html b/ControllerFocusContext.js.html
index a38599d6..af51b6c9 100644
--- a/ControllerFocusContext.js.html
+++ b/ControllerFocusContext.js.html
@@ -595,7 +595,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/ControllerLens.html b/ControllerLens.html
index cab286f0..2260d2ef 100644
--- a/ControllerLens.html
+++ b/ControllerLens.html
@@ -3446,7 +3446,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/ControllerLens.js.html b/ControllerLens.js.html
index d596ac57..7f92522b 100644
--- a/ControllerLens.js.html
+++ b/ControllerLens.js.html
@@ -459,7 +459,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/ControllerPanZoom.html b/ControllerPanZoom.html
index b71c7b47..dc615af9 100644
--- a/ControllerPanZoom.html
+++ b/ControllerPanZoom.html
@@ -974,7 +974,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/ControllerPanZoom.js.html b/ControllerPanZoom.js.html
index 7f50f91d..36d5e706 100644
--- a/ControllerPanZoom.js.html
+++ b/ControllerPanZoom.js.html
@@ -362,7 +362,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/CoordinateSystem.html b/CoordinateSystem.html
index 135ab797..6c5f6fc9 100644
--- a/CoordinateSystem.html
+++ b/CoordinateSystem.html
@@ -5341,7 +5341,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/CoordinateSystem.js.html b/CoordinateSystem.js.html
index 7e411ca7..73283f3a 100644
--- a/CoordinateSystem.js.html
+++ b/CoordinateSystem.js.html
@@ -555,7 +555,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/Draggable.html b/Draggable.html
index 7b4ff2c8..74ea7ae8 100644
--- a/Draggable.html
+++ b/Draggable.html
@@ -922,7 +922,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/Draggable.js.html b/Draggable.js.html
index 48ccffc9..5bb5ca33 100644
--- a/Draggable.js.html
+++ b/Draggable.js.html
@@ -309,7 +309,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/EditorSvgAnnotation.html b/EditorSvgAnnotation.html
index 79b722e4..ac6dec08 100644
--- a/EditorSvgAnnotation.html
+++ b/EditorSvgAnnotation.html
@@ -1406,7 +1406,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/EditorSvgAnnotation.js.html b/EditorSvgAnnotation.js.html
index 01494e1d..7dab4a17 100644
--- a/EditorSvgAnnotation.js.html
+++ b/EditorSvgAnnotation.js.html
@@ -1273,7 +1273,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/FocusContext.html b/FocusContext.html
index fd8c90a3..8b86e8b1 100644
--- a/FocusContext.html
+++ b/FocusContext.html
@@ -1102,7 +1102,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/FocusContext.js.html b/FocusContext.js.html
index bbfe0714..b289d25f 100644
--- a/FocusContext.js.html
+++ b/FocusContext.js.html
@@ -483,7 +483,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/Layer.html b/Layer.html
index 825eaaa3..600fb1d9 100644
--- a/Layer.html
+++ b/Layer.html
@@ -4561,7 +4561,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/Layer.js.html b/Layer.js.html
index ae94e95d..382d8f0b 100644
--- a/Layer.js.html
+++ b/Layer.js.html
@@ -1106,7 +1106,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/LayerAnnotation.html b/LayerAnnotation.html
index e0b00bc5..df13ca00 100644
--- a/LayerAnnotation.html
+++ b/LayerAnnotation.html
@@ -4543,7 +4543,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/LayerAnnotation.js.html b/LayerAnnotation.js.html
index b8053b9b..0a9763f6 100644
--- a/LayerAnnotation.js.html
+++ b/LayerAnnotation.js.html
@@ -414,7 +414,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/LayerAnnotationImage.html b/LayerAnnotationImage.html
index 9c515c31..0130fbff 100644
--- a/LayerAnnotationImage.html
+++ b/LayerAnnotationImage.html
@@ -4911,7 +4911,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/LayerAnnotationImage.js.html b/LayerAnnotationImage.js.html
index dca8d11d..2969534f 100644
--- a/LayerAnnotationImage.js.html
+++ b/LayerAnnotationImage.js.html
@@ -352,7 +352,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/LayerBRDF.html b/LayerBRDF.html
index 838ffa9b..56f46376 100644
--- a/LayerBRDF.html
+++ b/LayerBRDF.html
@@ -4576,7 +4576,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/LayerBRDF.js.html b/LayerBRDF.js.html
index ad1eeceb..682c644a 100644
--- a/LayerBRDF.js.html
+++ b/LayerBRDF.js.html
@@ -387,7 +387,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/LayerCombiner.html b/LayerCombiner.html
index 964c9da1..cb1f9998 100644
--- a/LayerCombiner.html
+++ b/LayerCombiner.html
@@ -3876,7 +3876,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/LayerCombiner.js.html b/LayerCombiner.js.html
index 205adf19..e940d983 100644
--- a/LayerCombiner.js.html
+++ b/LayerCombiner.js.html
@@ -409,7 +409,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/LayerDstretch.html b/LayerDstretch.html
index 3e35096e..4dc0d28f 100644
--- a/LayerDstretch.html
+++ b/LayerDstretch.html
@@ -4299,7 +4299,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/LayerDstretch.js.html b/LayerDstretch.js.html
index ead269dd..814e3349 100644
--- a/LayerDstretch.js.html
+++ b/LayerDstretch.js.html
@@ -359,7 +359,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/LayerImage.html b/LayerImage.html
index 66f49d4c..cebd29a5 100644
--- a/LayerImage.html
+++ b/LayerImage.html
@@ -4134,7 +4134,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/LayerImage.js.html b/LayerImage.js.html
index 4e826862..95855e9b 100644
--- a/LayerImage.js.html
+++ b/LayerImage.js.html
@@ -262,7 +262,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/LayerLens.html b/LayerLens.html
index 965e56f4..3b92e90a 100644
--- a/LayerLens.html
+++ b/LayerLens.html
@@ -5430,7 +5430,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/LayerLens.js.html b/LayerLens.js.html
index 73e8cfd5..a1e45202 100644
--- a/LayerLens.js.html
+++ b/LayerLens.js.html
@@ -567,7 +567,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/LayerMaskedImage.html b/LayerMaskedImage.html
index 8cf75f4b..56a5e447 100644
--- a/LayerMaskedImage.html
+++ b/LayerMaskedImage.html
@@ -4136,7 +4136,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/LayerMaskedImage.js.html b/LayerMaskedImage.js.html
index 9f0afade..da1eda1a 100644
--- a/LayerMaskedImage.js.html
+++ b/LayerMaskedImage.js.html
@@ -345,7 +345,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/LayerNeuralRTI.html b/LayerNeuralRTI.html
index f9af2a5e..f1a59d4c 100644
--- a/LayerNeuralRTI.html
+++ b/LayerNeuralRTI.html
@@ -4145,7 +4145,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/LayerNeuralRTI.js.html b/LayerNeuralRTI.js.html
index 78473181..c96cb50a 100644
--- a/LayerNeuralRTI.js.html
+++ b/LayerNeuralRTI.js.html
@@ -597,7 +597,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/LayerRTI.html b/LayerRTI.html
index 71e69f43..feae0cc5 100644
--- a/LayerRTI.html
+++ b/LayerRTI.html
@@ -4210,7 +4210,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/LayerRTI.js.html b/LayerRTI.js.html
index c4c02a6e..f8463c7f 100644
--- a/LayerRTI.js.html
+++ b/LayerRTI.js.html
@@ -376,7 +376,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/LayerSvgAnnotation.html b/LayerSvgAnnotation.html
index 7c988d41..912a9baf 100644
--- a/LayerSvgAnnotation.html
+++ b/LayerSvgAnnotation.html
@@ -4785,7 +4785,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/LayerSvgAnnotation.js.html b/LayerSvgAnnotation.js.html
index 243186af..d928bf2a 100644
--- a/LayerSvgAnnotation.js.html
+++ b/LayerSvgAnnotation.js.html
@@ -478,7 +478,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/Layout.html b/Layout.html
index a6a7e7f9..6bdaeade 100644
--- a/Layout.html
+++ b/Layout.html
@@ -2535,7 +2535,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/Layout.js.html b/Layout.js.html
index 13168630..06112610 100644
--- a/Layout.js.html
+++ b/Layout.js.html
@@ -453,7 +453,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/LayoutTileImages.html b/LayoutTileImages.html
index 7ff6c439..5d7fa806 100644
--- a/LayoutTileImages.html
+++ b/LayoutTileImages.html
@@ -3461,7 +3461,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/LayoutTileImages.js.html b/LayoutTileImages.js.html
index 4b59369f..328cde75 100644
--- a/LayoutTileImages.js.html
+++ b/LayoutTileImages.js.html
@@ -523,7 +523,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/LayoutTiles.html b/LayoutTiles.html
index 90fb0cc9..b5957e28 100644
--- a/LayoutTiles.html
+++ b/LayoutTiles.html
@@ -3520,7 +3520,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/LayoutTiles.js.html b/LayoutTiles.js.html
index 3f2b7b0b..5cfc93e8 100644
--- a/LayoutTiles.js.html
+++ b/LayoutTiles.js.html
@@ -937,7 +937,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/LensDashboard.html b/LensDashboard.html
index c50e26fa..a64d64bf 100644
--- a/LensDashboard.html
+++ b/LensDashboard.html
@@ -1514,7 +1514,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/LensDashboard.js.html b/LensDashboard.js.html
index d25cb96a..ff60baee 100644
--- a/LensDashboard.js.html
+++ b/LensDashboard.js.html
@@ -555,7 +555,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/LensDashboardNavigator.html b/LensDashboardNavigator.html
index c2f08147..7872c950 100644
--- a/LensDashboardNavigator.html
+++ b/LensDashboardNavigator.html
@@ -2575,7 +2575,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/LensDashboardNavigator.js.html b/LensDashboardNavigator.js.html
index 094b7cb0..837238bb 100644
--- a/LensDashboardNavigator.js.html
+++ b/LensDashboardNavigator.js.html
@@ -797,7 +797,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/LensDashboardNavigatorRadial.html b/LensDashboardNavigatorRadial.html
index f99441b9..bd5862d2 100644
--- a/LensDashboardNavigatorRadial.html
+++ b/LensDashboardNavigatorRadial.html
@@ -2484,7 +2484,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/LensDashboardNavigatorRadial.js.html b/LensDashboardNavigatorRadial.js.html
index a4248c86..4e25cc98 100644
--- a/LensDashboardNavigatorRadial.js.html
+++ b/LensDashboardNavigatorRadial.js.html
@@ -905,7 +905,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/LightSphereController.html b/LightSphereController.html
index 656834a4..879df17d 100644
--- a/LightSphereController.html
+++ b/LightSphereController.html
@@ -1112,7 +1112,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/LightSphereController.js.html b/LightSphereController.js.html
index 7abab4ea..a97bd581 100644
--- a/LightSphereController.js.html
+++ b/LightSphereController.js.html
@@ -124,7 +124,7 @@ <h1 class="page-title">Source: LightSphereController.js</h1>
 <section>
     <article>
         <pre
-            class="sunlight-highlight-javascript linenums">/**
+            class="sunlight-highlight-javascript linenums">/*
  * @fileoverview
  * LightSphereController module provides a spherical interface for controlling light direction.
  * It creates a circular canvas-based UI element that allows users to interactively adjust
@@ -408,7 +408,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/PointerManager.js.html b/PointerManager.js.html
index 6f7e0b26..1236af05 100644
--- a/PointerManager.js.html
+++ b/PointerManager.js.html
@@ -937,7 +937,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/Raster.html b/Raster.html
index 1da18970..4e458917 100644
--- a/Raster.html
+++ b/Raster.html
@@ -635,7 +635,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:26+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/Raster.js.html b/Raster.js.html
index 2835a478..bb3d867d 100644
--- a/Raster.js.html
+++ b/Raster.js.html
@@ -297,7 +297,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/Shader.html b/Shader.html
index b087af3a..9c11e8fe 100644
--- a/Shader.html
+++ b/Shader.html
@@ -1324,7 +1324,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:26+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/Shader.js.html b/Shader.js.html
index e1d118cb..ca7562a3 100644
--- a/Shader.js.html
+++ b/Shader.js.html
@@ -520,7 +520,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/ShaderBRDF.html b/ShaderBRDF.html
index 6a96057a..8a93f46a 100644
--- a/ShaderBRDF.html
+++ b/ShaderBRDF.html
@@ -335,7 +335,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:26+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/ShaderBRDF.js.html b/ShaderBRDF.js.html
index 146607ec..cf8c12e3 100644
--- a/ShaderBRDF.js.html
+++ b/ShaderBRDF.js.html
@@ -364,7 +364,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/ShaderCombiner.html b/ShaderCombiner.html
index 3ee85df7..2a5f2f97 100644
--- a/ShaderCombiner.html
+++ b/ShaderCombiner.html
@@ -361,7 +361,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:26+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/ShaderCombiner.js.html b/ShaderCombiner.js.html
index 556e1833..14cc9f0a 100644
--- a/ShaderCombiner.js.html
+++ b/ShaderCombiner.js.html
@@ -243,7 +243,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/ShaderFilter.js.html b/ShaderFilter.js.html
index 4d9f4d58..2b8ae74f 100644
--- a/ShaderFilter.js.html
+++ b/ShaderFilter.js.html
@@ -323,7 +323,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/ShaderNeural.html b/ShaderNeural.html
index cab21f44..6cdb789c 100644
--- a/ShaderNeural.html
+++ b/ShaderNeural.html
@@ -286,7 +286,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:26+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/ShaderNeural.js.html b/ShaderNeural.js.html
index ffc33078..30e16a1e 100644
--- a/ShaderNeural.js.html
+++ b/ShaderNeural.js.html
@@ -377,7 +377,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/ShaderRTI.html b/ShaderRTI.html
index cb83a988..4be35837 100644
--- a/ShaderRTI.html
+++ b/ShaderRTI.html
@@ -344,7 +344,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:26+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/ShaderRTI.js.html b/ShaderRTI.js.html
index 826a80ca..1b39931d 100644
--- a/ShaderRTI.js.html
+++ b/ShaderRTI.js.html
@@ -780,7 +780,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/Signals.js.html b/Signals.js.html
index 7c45f1a3..7566cd11 100644
--- a/Signals.js.html
+++ b/Signals.js.html
@@ -203,7 +203,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/Simplify.js.html b/Simplify.js.html
index c14d137a..3c58bd2c 100644
--- a/Simplify.js.html
+++ b/Simplify.js.html
@@ -364,7 +364,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/Skin.html b/Skin.html
index d9451ec0..c7414a2c 100644
--- a/Skin.html
+++ b/Skin.html
@@ -871,7 +871,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:26+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/Skin.js.html b/Skin.js.html
index f0f98423..b7d82476 100644
--- a/Skin.js.html
+++ b/Skin.js.html
@@ -242,7 +242,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/TextToSpeechPlayer.html b/TextToSpeechPlayer.html
index 2adb6e8f..03f1019b 100644
--- a/TextToSpeechPlayer.html
+++ b/TextToSpeechPlayer.html
@@ -1305,7 +1305,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:26+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/TextToSpeechPlayer.js.html b/TextToSpeechPlayer.js.html
index c94f0c32..e16b0edb 100644
--- a/TextToSpeechPlayer.js.html
+++ b/TextToSpeechPlayer.js.html
@@ -462,7 +462,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/Tile.js.html b/Tile.js.html
index a5b5f011..badd0dcf 100644
--- a/Tile.js.html
+++ b/Tile.js.html
@@ -211,7 +211,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/Transform.html b/Transform.html
index 92fda2f4..cad9796d 100644
--- a/Transform.html
+++ b/Transform.html
@@ -2674,7 +2674,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:26+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/Transform.js.html b/Transform.js.html
index 90cc8967..dbd0d84f 100644
--- a/Transform.js.html
+++ b/Transform.js.html
@@ -427,7 +427,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/UIBasic.html b/UIBasic.html
index 502a937b..1a064857 100644
--- a/UIBasic.html
+++ b/UIBasic.html
@@ -1114,7 +1114,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:26+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/UIBasic.js.html b/UIBasic.js.html
index ec5c1376..6611b542 100644
--- a/UIBasic.js.html
+++ b/UIBasic.js.html
@@ -970,7 +970,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/UIDialog.html b/UIDialog.html
index 164760bc..d5864432 100644
--- a/UIDialog.html
+++ b/UIDialog.html
@@ -1125,7 +1125,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:26+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/Viewer.html b/Viewer.html
index f28070bf..bebe4e37 100644
--- a/Viewer.html
+++ b/Viewer.html
@@ -1026,7 +1026,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:26+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/Viewer.js.html b/Viewer.js.html
index 59e4b3e2..6687c8f0 100644
--- a/Viewer.js.html
+++ b/Viewer.js.html
@@ -348,7 +348,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/classes.list.html b/classes.list.html
index 6c325aea..0db9c259 100644
--- a/classes.list.html
+++ b/classes.list.html
@@ -4379,7 +4379,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/global.html b/global.html
index 95bca738..43b3d7d1 100644
--- a/global.html
+++ b/global.html
@@ -10073,7 +10073,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/global.html#Annotation b/global.html#Annotation
index 63bd3911..e69585c0 100644
--- a/global.html#Annotation
+++ b/global.html#Annotation
@@ -1467,7 +1467,7 @@ id, type, body (with code, class, and description), and target selector informat
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/index.html b/index.html
index c220b478..3616b572 100644
--- a/index.html
+++ b/index.html
@@ -668,106 +668,6 @@ <h2>
     
 
     
-</article>
-
-</section>
-
-
-
-
-	<h1 class="page-title">Index</h1>
-<section>
-
-<header>
-    
-        <h2>
-        LightSphereController.js
-        </h2>
-        
-    
-</header>
-
-
-<article>
-    <div class="container-overview">
-    
-        
-            <div class="description"><p>LightSphereController module provides a spherical interface for controlling light direction.
-It creates a circular canvas-based UI element that allows users to interactively adjust
-lighting direction through pointer interactions.</p></div>
-        
-
-        
-<dl class="details">
-    
-
-	
-
-	
-
-	
-
-    
-
-    
-
-    
-
-    
-
-	
-
-	
-
-	
-
-	
-
-	
-
-
-
-	
-	<dt class="tag-source method-doc-label method-doc-details-label">Source:</dt>
-	<dd class="tag-source">
-		<ul class="dummy">
-			<li>
-				<a href="LightSphereController.js.html">LightSphereController.js</a>,
-				 <a href="LightSphereController.js.html#sunlight-1-line-1">line 1</a>
-			</li>
-		</ul>
-	</dd>
-	
-
-	
-
-	
-
-	
-</dl>
-
-
-        
-    
-    </div>
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
 </article>
 
 </section>
@@ -814,7 +714,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/module-PointerManager-PointerManager.html b/module-PointerManager-PointerManager.html
index df21e593..60901ce6 100644
--- a/module-PointerManager-PointerManager.html
+++ b/module-PointerManager-PointerManager.html
@@ -2213,7 +2213,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/module-PointerManager.html b/module-PointerManager.html
index 0932a088..ae1adae1 100644
--- a/module-PointerManager.html
+++ b/module-PointerManager.html
@@ -271,7 +271,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/modules.list.html b/modules.list.html
index 0626c803..743f9233 100644
--- a/modules.list.html
+++ b/modules.list.html
@@ -4379,7 +4379,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/namespaces.list.html b/namespaces.list.html
index c24a7d7a..dd907927 100644
--- a/namespaces.list.html
+++ b/namespaces.list.html
@@ -4379,7 +4379,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/quicksearch.html b/quicksearch.html
index 141ac198..7d470626 100644
--- a/quicksearch.html
+++ b/quicksearch.html
@@ -7,7 +7,7 @@
     <script src="scripts/fulltext-search.js"></script>
 
     <script type="text/x-docstrap-searchdb">
-    {"Cache.js.html":{"id":"Cache.js.html","title":"Source: Cache.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: Cache.js /** * Implements a singleton cache system for efficient tile management and retrieval in layers. * Handles tile loading, prefetching, and memory management with rate limiting capabilities. * @private */ class _Cache { /** * Creates a new Cache instance. * @param {Object} [options] - Configuration options for the cache * @param {number} [options.capacity=536870912] - Total cache capacity in bytes (default: 512MB) * @param {number} [options.maxRequest=6] - Maximum concurrent HTTP requests * @param {number} [options.maxRequestsRate=0] - Maximum requests per second (0 for unlimited) * @param {number} [options.maxPrefetch=8388608] - Maximum prefetch size in bytes (default: 8MB) */ constructor(options) { Object.assign(this, { capacity: 512 * (1 &lt;&lt; 20), //256 MB total capacity available size: 0, //amount of GPU ram used maxRequest: 6, //max number of concurrent HTTP requests requested: 0, maxRequestsRate: 0, //max number of requests per second, 0 means no rate. requestRateTimeout: null, //calls update when a new slot is available due to request rate. lastRequestTimestamp: performance.now(), //holdls last requests timestamps. maxPrefetch: 8 * (1 &lt;&lt; 20), //max amount of prefetched tiles. prefetched: 0 //amount of currently prefetched GPU ram. }); Object.assign(this, options); this.layers = []; //map on layer. } /** * Registers a layer's tiles as candidates for downloading and initiates the update process. * @param {Layer} layer - The layer whose tiles should be considered for caching */ setCandidates(layer) { if (!this.layers.includes(layer)) this.layers.push(layer); setTimeout(() =&gt; { this.update(); }, 0); //ensure all the queues are set before updating. } /** * Checks if the cache is currently rate limited based on request count and timing. * @private * @returns {boolean} True if rate limited, false otherwise */ rateLimited() { if (this.requested &gt; this.maxRequest) return true; if (this.maxRequestsRate == 0) return false; let now = performance.now(); let period = 1000 / this.maxRequestsRate; let diff = now - this.lastRequestTimestamp; if (diff &gt; period) return false; if (!this.requestRateTimeout) { this.requestRateTimeout = setTimeout(() =&gt; { this.requestRateTimeout = null; this.update(); }, period - diff + 10); } return true; } /** * Updates the cache state by processing the download queue while respecting capacity and rate limits. * @private */ update() { if (this.rateLimited()) return; let best = this.findBestCandidate(); if (!best) return; while (this.size &gt; this.capacity) { //we need to make room. let worst = this.findWorstTile(); if (!worst) { console.log(\"BIG problem in the cache\"); break; } if (worst.tile.time &lt; best.tile.time) this.dropTile(worst.layer, worst.tile) else return; } console.assert(best != best.layer.queue[0]); best.layer.queue.shift(); this.lastRequestTimestamp = performance.now(); this.loadTile(best.layer, best.tile); } /** * Identifies the highest priority tile that should be downloaded next. * @private * @returns {Object|null} Object containing the best candidate layer and tile, or null if none found */ findBestCandidate() { let best = null; for (let layer of this.layers) { while (layer.queue.length &gt; 0 &amp;&amp; layer.tiles.has(layer.queue[0].index)) { layer.queue.shift(); } if (!layer.queue.length) continue; let tile = layer.queue[0]; if (!best || tile.time &gt; best.tile.time + 1.0 || //old requests ignored tile.priority &gt; best.tile.priority) best = { layer, tile } } return best; } /** * Identifies the lowest priority tile that should be removed from cache if space is needed. * @private * @returns {Object|null} Object containing the worst candidate layer and tile, or null if none found */ findWorstTile() { let worst = null; for (let layer of this.layers) { for (let tile of layer.tiles.values()) { //TODO might be some are present when switching shaders. if (tile.missing != 0) continue; if (!worst || tile.time &lt; worst.tile.time || (tile.time == worst.tile.time &amp;&amp; tile.priority &lt; worst.tile.priority)) { worst = { layer, tile }; } } } return worst; } /** * Initiates the loading of a tile for a specific layer. * @private * @param {Layer} layer - The layer the tile belongs to * @param {Object} tile - The tile to be loaded */ loadTile(layer, tile) { this.requested++; (async () =&gt; { layer.loadTile(tile, (size) =&gt; { this.size += size; this.requested--; this.update(); }); })(); } /** * Removes a tile from the cache and updates the cache size. * @private * @param {Layer} layer - The layer the tile belongs to * @param {Object} tile - The tile to be removed */ dropTile(layer, tile) { this.size -= tile.size; layer.dropTile(tile); } /** * Removes all tiles associated with a specific layer from the cache. * @param {Layer} layer - The layer whose tiles should be flushed */ flushLayer(layer) { if (!this.layers.includes(layer)) return; for (let tile of layer.tiles.values()) this.dropTile(layer, tile); } } /** * Singleton cache instance for managing tile loading and caching across layers. * Provides efficient tile retrieval and memory management with configurable capacity * and request rate limiting. * * @namespace * @property {number} capacity - Total cache capacity in bytes (default: 512MB) * @property {number} size - Current amount of GPU RAM used * @property {number} maxRequest - Maximum concurrent HTTP requests (default: 6) * @property {number} requested - Current number of active requests * @property {number} maxRequestsRate - Maximum requests per second (0 for unlimited) * @property {number} maxPrefetch - Maximum size of prefetched tiles in bytes * @property {number} prefetched - Current amount of prefetched GPU RAM * @property {Layer[]} layers - Array of layers being managed by the cache */ const Cache = new _Cache; export { Cache } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"Annotation.js.html":{"id":"Annotation.js.html","title":"Source: Annotation.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: Annotation.js import { BoundingBox } from './BoundingBox.js' /** * Represents an annotation that can be drawn as an overlay on a canvas. * An annotation is a decoration (text, graphics element, glyph) that provides * additional information for interpreting underlying drawings. * Each annotation has a unique identifier and can contain various properties * such as description, category, drawing style, labels, etc. */ class Annotation { /** * Creates a new Annotation instance. * @param {Object} [options] - Configuration options for the annotation. * @param {string} [options.id] - Unique identifier for the annotation. If not provided, a UUID will be generated. * @param {string} [options.code] - A code identifier for the annotation. * @param {string} [options.label=''] - Display label for the annotation. * @param {string} [options.description] - HTML text containing a comprehensive description. * @param {string} [options.class] - Category or classification of the annotation. * @param {string} [options.target] - Target element or area this annotation refers to. * @param {string} [options.svg] - SVG content for the annotation. * @param {Object} [options.image] - Image data associated with the annotation. * @param {Object} [options.region] - Region coordinates {x, y, w, h} for the annotation. * @param {Object} [options.data={}] - Additional custom data for the annotation. * @param {Object} [options.style] - Style configuration for rendering. * @param {BoundingBox} [options.bbox] - Bounding box of the annotation. * @param {boolean} [options.visible=true] - Visibility state of the annotation. * @param {Object} [options.state] - State variables for the annotation. * @param {boolean} [options.ready=false] - Indicates if SVG conversion is complete. * @param {boolean} [options.needsUpdate=true] - Indicates if annotation needs updating. * @param {boolean} [options.editing=false] - Indicates if annotation is being edited. */ constructor(options) { Object.assign( this, { id: Annotation.UUID(), code: null, label: null, description: null, class: null, target: null, svg: null, image: null, region: null, data: {}, style: null, bbox: null, visible: true, state: null, ready: false, //already: converted to svg needsUpdate: true, editing: false, }, options); //TODO label as null is problematic, sort this issue. if (!this.label) this.label = ''; this.elements = []; //assign options is not recursive!!! } /** * Generates a UUID (Universally Unique Identifier) for annotation instances. * @returns {string} A newly generated UUID. * @private */ static UUID() { return 'axxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r &amp; 0x3 | 0x8); return v.toString(16); }); } /** * Calculates and returns the bounding box of the annotation based on its elements or region. * The coordinates are always relative to the top-left corner of the canvas. * @returns {BoundingBox} The calculated bounding box of the annotation. * If the annotation has no elements and no region, returns an empty bounding box. * If the annotation has a region but no elements, returns a bounding box based on the region. * If the annotation has elements, calculates the bounding box that encompasses all elements. */ getBBoxFromElements() { let box = null; if (!this.elements.length) { if (this.region == null) { box = new BoundingBox(); } else { const r = this.region; box = new BoundingBox({ xLow: r.x, yLow: r.y, xHigh: r.x + r.w, yHigh: r.y + r.h }); } } else { let { x, y, width, height } = this.elements[0].getBBox(); for (let shape of this.elements) { const { sx, sy, swidth, sheight } = shape.getBBox(); x = Math.min(x, sx); y = Math.min(x, sy); width = Math.max(width + x, sx + swidth) - x; height = Math.max(height + y, sy + sheight) - y; } box = new BoundingBox({ xLow: x, yLow: y, xHigh: x + width, yHigh: y + width }); } return box; } ///////////////////////////////// /** * Creates an Annotation instance from a JSON-LD format string. * @param {Object} entry - The JSON-LD object representing an annotation. * @returns {Annotation} A new Annotation instance. * @throws {Error} If the entry is not a valid JSON-LD annotation or contains unsupported selectors. */ static fromJsonLd(entry) { if (entry.type != 'Annotation') throw \"Not a jsonld annotation.\"; let options = { id: entry.id }; let rename = { 'identifying': 'code', 'identifying': 'label', 'describing': 'description', 'classifying': 'class' }; for (let item of entry.body) { let field = rename[item.purpose]; if (field) options[field] = item.value; } let selector = entry.target &amp;&amp; entry.target.selector; if (selector) { switch (selector.type) { case 'SvgSelector': options.svg = selector.value; options.elements = []; break; default: throw \"Unsupported selector: \" + selector.type; } } return new Annotation(options); } /** * Converts the annotation to a JSON-LD format object. * @returns {Object} A JSON-LD representation of the annotation including context, * id, type, body (with code, class, and description), and target selector information. */ toJsonLd() { let body = []; if (this.code !== null) body.push({ type: 'TextualBody', value: this.code, purpose: 'indentifying' }); if (this.class !== null) body.push({ type: 'TextualBody', value: this.class, purpose: 'classifying' }); if (this.description !== null) body.push({ type: 'TextualBody', value: this.description, purpose: 'describing' }); let obj = { \"@context\": \"http://www.w3.org/ns/anno.jsonld\", id: this.id, type: \"Annotation\", body: body, target: { selector: {} } } if (this.target) target.selector.source = this.target; if (this.element) { var s = new XMLSerializer(); obj.target.selector.type = 'SvgSelector'; obj.target.selector.value = s.serializeToString(this.element); } } } export { Annotation } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"EditorSvgAnnotation.js.html":{"id":"EditorSvgAnnotation.js.html","title":"Source: EditorSvgAnnotation.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: EditorSvgAnnotation.js import { Skin } from './Skin.js'; import { Util } from './Util.js'; import { simplify, smooth, smoothToPath } from './Simplify.js' import { LayerSvgAnnotation } from './LayerSvgAnnotation.js' import { CoordinateSystem } from './CoordinateSystem.js' /** * @typedef {Object} Annotation * @property {string} id - Unique identifier * @property {string} label - Annotation title * @property {string} description - Detailed description * @property {string} class - Class name for styling/categorization * @property {number} publish - Publication status (0 or 1) * @property {Object} data - Custom data object * @property {Array&lt;SVGElement&gt;} elements - SVG elements composing the annotation * @property {Object} [state] - Camera and viewer state */ /** * @callback crudCallback * @param {Annotation} annotation - The annotation being operated on * @returns {boolean} Success status of the operation * @description Callback for create/update/delete operations on annotations */ /** * @callback customStateCallback * @param {Annotation} annotation - The annotation being modified * @description Callback to customize state information saved with annotations */ /** * @callback customDataCallback * @param {Annotation} annotation - The annotation being modified * @description Callback to customize the annotation data object */ /** * @callback selectedCallback * @param {Annotation} annotation - The selected annotation * @description Callback executed when an annotation is selected in the UI */ /** * EditorSvgAnnotation enables creation and editing of SVG annotations in OpenLIME. * It provides tools for drawing various shapes and managing annotations through a user interface. * * Features: * - Drawing tools: point, pin, line, box, circle * - Annotation editing and management * - Custom state and data storage * - Integration with annotation databases through callbacks * - Undo/redo functionality * - SVG export capabilities * * @example * ```javascript * // Create annotation layer * const anno = new OpenLIME.Layer(options); * viewer.addLayer('annotations', anno); * * // Initialize editor * const editor = new OpenLIME.EditorSvgAnnotation(viewer, anno, { * classes: { * 'default': { stroke: '#000', label: 'Default' }, * 'highlight': { stroke: '#ff0', label: 'Highlight' } * } * }); * * // Setup callbacks * editor.createCallback = (anno) =&gt; { * console.log(\"Created:\", anno); * return saveToDatabase(anno); * }; * ``` */ class EditorSvgAnnotation { /** * Creates an EditorSvgAnnotation instance * @param {Viewer} viewer - The OpenLIME viewer instance * @param {LayerSvgAnnotation} layer - The annotation layer to edit * @param {Object} [options] - Configuration options * @param {Object.&lt;string, {stroke: string, label: string}&gt;} options.classes - Annotation classes with colors and labels * @param {crudCallback} [options.createCallback] - Called when creating annotations * @param {crudCallback} [options.updateCallback] - Called when updating annotations * @param {crudCallback} [options.deleteCallback] - Called when deleting annotations * @param {boolean} [options.enableState=false] - Whether to save viewer state with annotations * @param {customStateCallback} [options.customState] - Customize saved state data * @param {customDataCallback} [options.customData] - Customize annotation data * @param {selectedCallback} [options.selectedCallback] - Called when annotation is selected * @param {Object} [options.tools] - Custom tool configurations * @param {number} [options.priority=20000] - Event handling priority */ constructor(viewer, layer, options) { this.layer = layer; Object.assign(this, { viewer: viewer, panning: false, tool: null, //doing nothing, could: ['line', 'polygon', 'point', 'box', 'circle'] startPoint: null, //starting point for box and circle currentLine: [], annotation: null, priority: 20000, classes: { '': { stroke: '#000', label: '' }, 'class1': { stroke: '#770', label: '' }, 'class2': { stroke: '#707', label: '' }, 'class3': { stroke: '#777', label: '' }, 'class4': { stroke: '#070', label: '' }, 'class5': { stroke: '#007', label: '' }, 'class6': { stroke: '#077', label: '' }, }, tools: { point: { img: '&lt;svg width=24 height=24&gt;&lt;circle cx=12 cy=12 r=3 fill=\"red\" stroke=\"gray\"/&gt;&lt;/svg&gt;', tooltip: 'New point', tool: Point, }, pin: { template: (x, y) =&gt; { return `&lt;svg xmlns='http://www.w3.org/2000/svg' x='${x}' y='${y}' width='4%' height='4%' class='pin' viewBox='0 0 18 18'&gt;&lt;path d='M 0,0 C 0,0 4,0 8,0 12,0 16,4 16,8 16,12 12,16 8,16 4,16 0,12 0,8 0,4 0,0 0,0 Z'/&gt;&lt;text class='pin-text' x='7' y='8'&gt;${this.annotation.idx}&lt;/text&gt;&lt;/svg&gt;`; }, //pin di alcazar 1. url a svg 2. txt (stringa con svg) 3. funzione(x,y) ritorna svg 4. dom (da skin). tooltip: 'New pin', tool: Pin }, pen: { img: '&lt;svg width=24 height=24&gt;&lt;circle cx=12 cy=12 r=3 fill=\"red\" stroke=\"gray\"/&gt;&lt;/svg&gt;', tooltip: 'New polyline', tool: Pen, }, line: { img: `&lt;svg width=24 height=24&gt; &lt;path d=\"m 4.7,4.5 c 0.5,4.8 0.8,8.5 3.1,11 2.4,2.6 4.2,-4.8 6.3,-5 2.7,-0.3 5.1,9.3 5.1,9.3\" stroke-width=\"3\" fill=\"none\" stroke=\"grey\"/&gt; &lt;path d=\"m 4.7,4.5 c 0.5,4.8 0.8,8.5 3.1,11 2.4,2.6 4.2,-4.8 6.3,-5 2.7,-0.3 5.1,9.3 5.1,9.3\" stroke-width=\"1\" fill=\"none\" stroke=\"red\"/&gt;&lt;/svg&gt;`, tooltip: 'New line', tool: Line, }, erase: { img: '', tooltip: 'Erase lines', tool: Erase, }, box: { img: '&lt;svg width=24 height=24&gt;&lt;rect x=5 y=5 width=14 height=14 fill=\"red\" stroke=\"gray\"/&gt;&lt;/svg&gt;', tooltip: 'New box', tool: Box, }, circle: { img: '&lt;svg width=24 height=24&gt;&lt;circle cx=12 cy=12 r=7 fill=\"red\" stroke=\"gray\"/&gt;&lt;/svg&gt;', tooltip: 'New circle', tool: Circle, }, /* colorpick: { img: '', tooltip: 'Pick a color', tool: Colorpick, } */ }, annotation: null, //not null only when editWidget is shown. enableState: false, customState: null, customData: null, editWidget: null, selectedCallback: null, createCallback: null, //callbacks for backend updateCallback: null, deleteCallback: null }, options); layer.style += Object.entries(this.classes).map((g) =&gt; { console.assert(g[1].hasOwnProperty('stroke'), \"Classes needs a stroke property\"); return `[data-class=${g[0]}] { stroke:${g[1].stroke}; }`; }).join('\\n'); //at the moment is not really possible to unregister the events registered here. viewer.pointerManager.onEvent(this); document.addEventListener('keyup', (e) =&gt; this.keyUp(e), false); layer.addEvent('selected', (anno) =&gt; { if (!anno || anno == this.annotation) return; if (this.selectedCallback) this.selectedCallback(anno); this.showEditWidget(anno); }); layer.annotationsEntry = () =&gt; { let entry = { html: `&lt;div class=\"openlime-tools\"&gt;&lt;/div&gt;`, list: [], //will be filled later. classes: 'openlime-annotations', status: () =&gt; 'active', oncreate: () =&gt; { if (Array.isArray(layer.annotations)) layer.createAnnotationsList(); let tools = { 'add': { action: () =&gt; { this.createAnnotation(); }, title: \"New annotation\" }, 'edit': { action: () =&gt; { this.toggleEditWidget(); }, title: \"Edit annotations\" }, 'export': { action: () =&gt; { this.exportAnnotations(); }, title: \"Export annotations\" }, 'trash': { action: () =&gt; { this.deleteSelected(); }, title: \"Delete selected annotations\" }, }; (async () =&gt; { for (const [label, tool] of Object.entries(tools)) { let icon = await Skin.appendIcon(entry.element.firstChild, '.openlime-' + label); // TODO pass entry.element.firstChild as parameter in onCreate icon.setAttribute('title', tool.title); icon.addEventListener('click', tool.action); } })(); } } layer.annotationsListEntry = entry; return entry; } } /** * Creates a new annotation * @returns {void} */ createAnnotation() { let anno = this.layer.newAnnotation(); if (this.customData) this.customData(anno); if (this.enableState) this.setAnnotationCurrentState(anno); anno.idx = this.layer.annotations.length; anno.publish = 1; anno.label = anno.description = anno.class = ''; let post = { id: anno.id, idx: anno.idx, label: anno.label, description: anno.description, 'class': anno.class, svg: null, publish: anno.publish, data: anno.data }; if (this.enableState) post = { ...post, state: anno.state }; if (this.createCallback) { let result = this.createCallback(post); if (!result) alert(\"Failed to create annotation!\"); } this.layer.setSelected(anno); } /** @ignore */ toggleEditWidget() { if (this.annotation) return this.hideEditWidget(); let id = this.layer.selected.values().next().value; if (!id) return; let anno = this.layer.getAnnotationById(id); this.showEditWidget(anno); } /** @ignore */ updateEditWidget() { let anno = this.annotation; let edit = this.editWidget; if (!anno.class) anno.class = ''; edit.querySelector('[name=label]').value = anno.label || ''; edit.querySelector('[name=description]').value = anno.description || ''; edit.querySelector('[name=idx]').value = anno.idx || ''; Object.entries(anno.data).map(k =&gt; { edit.querySelector(`[name=data-data-${k[0]}]`).value = k[1] || ''; }); edit.querySelector('[name=classes]').value = anno.class; edit.querySelector('[name=publish]').checked = anno.publish == 1; edit.classList.remove('hidden'); let button = edit.querySelector('.openlime-select-button'); button.textContent = this.classes[anno.class].label; button.style.background = this.classes[anno.class].stroke; } /** * Shows the annotation editor widget * @param {Annotation} annotation - Annotation to edit * @private */ showEditWidget(anno) { this.annotation = anno; this.setTool(null); this.setActiveTool(); this.layer.annotationsListEntry.element.querySelector('.openlime-edit').classList.add('active'); (async () =&gt; { await this.createEditWidget(); this.updateEditWidget(); })(); } /** @ignore */ hideEditWidget() { this.annotation = null; this.setTool(null); this.editWidget.classList.add('hidden'); this.layer.annotationsListEntry.element.querySelector('.openlime-edit').classList.remove('active'); } //TODO this should actually be in the html. /** @ignore */ async createEditWidget() { if (this.editWidget) return; let html = ` &lt;div class=\"openlime-annotation-edit\"&gt; &lt;label for=\"label\"&gt;Title:&lt;/label&gt; &lt;input name=\"label\" type=\"text\"&gt;&lt;br&gt; &lt;label for=\"description\"&gt;Description:&lt;/label&gt;&lt;br&gt; &lt;textarea name=\"description\" cols=\"30\" rows=\"5\"&gt;&lt;/textarea&gt;&lt;br&gt; &lt;span&gt;Class:&lt;/span&gt; &lt;div class=\"openlime-select\"&gt; &lt;input type=\"hidden\" name=\"classes\" value=\"\"/&gt; &lt;div class=\"openlime-select-button\"&gt;&lt;/div&gt; &lt;ul class=\"openlime-select-menu\"&gt; ${Object.entries(this.classes).map((c) =&gt; `&lt;li data-class=\"${c[0]}\" style=\"background:${c[1].stroke};\"&gt;${c[1].label}&lt;/li&gt;`).join('\\n')} &lt;/ul&gt; &lt;/div&gt; &lt;label for=\"idx\"&gt;Index:&lt;/label&gt; &lt;input name=\"idx\" type=\"text\"&gt;&lt;br&gt; ${Object.entries(this.annotation.data).map(k =&gt; { let label = k[0]; let str = `&lt;label for=\"data-data-${k[0]}\"&gt;${label}:&lt;/label&gt; &lt;input name=\"data-data-${k[0]}\" type=\"text\"&gt;&lt;br&gt;` return str; }).join('\\n')} &lt;br&gt; &lt;span&gt;&lt;button class=\"openlime-state\"&gt;SAVE&lt;/button&gt;&lt;/span&gt; &lt;span&gt;&lt;input type=\"checkbox\" name=\"publish\" value=\"\"&gt; Publish&lt;/span&gt;&lt;br&gt; &lt;div class=\"openlime-annotation-edit-tools\"&gt;&lt;/div&gt; &lt;/div&gt;`; let template = document.createElement('template'); template.innerHTML = html.trim(); let edit = template.content.firstChild; let select = edit.querySelector('.openlime-select'); let button = edit.querySelector('.openlime-select-button'); let ul = edit.querySelector('ul'); let options = edit.querySelectorAll('li'); let input = edit.querySelector('[name=classes]'); let state = edit.querySelector('.openlime-state'); state.addEventListener('click', (e) =&gt; { if (this.enableState) this.setAnnotationCurrentState(this.annotation); this.saveCurrent(); this.saveAnnotation(); }); button.addEventListener('click', (e) =&gt; { e.stopPropagation(); for (let o of options) o.classList.remove('selected'); select.classList.toggle('active'); }); ul.addEventListener('click', (e) =&gt; { e.stopPropagation(); input.value = e.srcElement.getAttribute('data-class'); input.dispatchEvent(new Event('change')); button.style.background = this.classes[input.value].stroke; button.textContent = e.srcElement.textContent; select.classList.toggle('active'); }); document.addEventListener('click', (e) =&gt; { select.classList.remove('active'); }); document.querySelector('.openlime-layers-menu').appendChild(edit); let tools = edit.querySelector('.openlime-annotation-edit-tools'); let pin = await Skin.appendIcon(tools, '.openlime-pin'); pin.addEventListener('click', (e) =&gt; { this.setTool('pin'); this.setActiveTool(pin); }); let draw = await Skin.appendIcon(tools, '.openlime-draw'); draw.addEventListener('click', (e) =&gt; { this.setTool('line'); this.setActiveTool(draw); }); // let pen = await Skin.appendIcon(tools, '.openlime-pen'); // pen.addEventListener('click', (e) =&gt; { this.setTool('pen'); setActive(pen); }); let erase = await Skin.appendIcon(tools, '.openlime-erase'); erase.addEventListener('click', (e) =&gt; { this.setTool('erase'); this.setActiveTool(erase); }); let undo = await Skin.appendIcon(tools, '.openlime-undo'); undo.addEventListener('click', (e) =&gt; { this.undo(); }); let redo = await Skin.appendIcon(tools, '.openlime-redo'); redo.addEventListener('click', (e) =&gt; { this.redo(); }); /* let colorpick = await Skin.appendIcon(tools, '.openlime-colorpick'); undo.addEventListener('click', (e) =&gt; { this.pickColor(); }); */ let label = edit.querySelector('[name=label]'); label.addEventListener('blur', (e) =&gt; { if (this.annotation.label != label.value) this.saveCurrent(); this.saveAnnotation(); }); let descr = edit.querySelector('[name=description]'); descr.addEventListener('blur', (e) =&gt; { if (this.annotation.description != descr.value) this.saveCurrent(); this.saveAnnotation(); }); let idx = edit.querySelector('[name=idx]'); idx.addEventListener('blur', (e) =&gt; { if (this.annotation.idx != idx.value) { const svgPinIdx = this.annotation.elements[0]; if (svgPinIdx) { const txt = svgPinIdx.querySelector(\".pin-text\"); if (txt) { txt.textContent = idx.value; } } this.saveCurrent(); } this.saveAnnotation(); }); Object.entries(this.annotation.data).map(k =&gt; { let dataElm = edit.querySelector(`[name=data-data-${k[0]}]`); dataElm.addEventListener('blur', (e) =&gt; { if (this.annotation.data[k[0]] != dataElm.value) this.saveCurrent(); this.saveAnnotation(); }); }); let classes = edit.querySelector('[name=classes]'); classes.addEventListener('change', (e) =&gt; { if (this.annotation.class != classes.value) this.saveCurrent(); this.saveAnnotation(); }); let publish = edit.querySelector('[name=publish]'); publish.addEventListener('change', (e) =&gt; { if (this.annotation.publish != publish.value) this.saveCurrent(); this.saveAnnotation(); }); edit.classList.add('hidden'); this.editWidget = edit; } /** @ignore */ setAnnotationCurrentState(anno) { anno.state = window.structuredClone(this.viewer.canvas.getState()); // Callback to add light/lens params or other data if (this.customState) this.customState(anno); } /** * Saves annotation changes and triggers update callback * @private */ saveAnnotation() { let edit = this.editWidget; let anno = this.annotation; anno.label = edit.querySelector('[name=label]').value || ''; anno.description = edit.querySelector('[name=description]').value || ''; anno.idx = edit.querySelector('[name=idx]').value || '0'; Object.entries(anno.data).map(k =&gt; { anno.data[k[0]] = edit.querySelector(`[name=data-data-${k[0]}]`).value || ''; }); anno.publish = edit.querySelector('[name=publish]').checked ? 1 : 0; let select = edit.querySelector('[name=classes]'); anno.class = select.value || ''; let button = edit.querySelector('.openlime-select-button'); button.style.background = this.classes[anno.class].stroke; for (let e of this.annotation.elements) e.setAttribute('data-class', anno.class); let post = { id: anno.id, idx: anno.idx, label: anno.label, description: anno.description, class: anno.class, publish: anno.publish, data: anno.data }; if (this.enableState) post = { ...post, state: anno.state }; // if (anno.light) post = { ...post, light: anno.light }; FIXME // if (anno.lens) post = { ...post, lens: anno.lens }; //anno.bbox = anno.getBBoxFromElements(); let serializer = new XMLSerializer(); post.svg = `&lt;svg xmlns=\"http://www.w3.org/2000/svg\"&gt; ${anno.elements.map((s) =&gt; { s.classList.remove('selected'); return serializer.serializeToString(s) }).join(\"\\n\")} &lt;/svg&gt;`; if (this.updateCallback) { let result = this.updateCallback(post); if (!result) { alert(\"Failed to update annotation\"); return; } } //for (let c of element.children) // a.elements.push(c); //update the entry let template = document.createElement('template'); template.innerHTML = this.layer.createAnnotationEntry(anno); let entry = template.content.firstChild; //TODO find a better way to locate the entry! this.layer.annotationsListEntry.element.parentElement.querySelector(`[data-annotation=\"${anno.id}\"]`).replaceWith(entry); this.layer.setSelected(anno); } /** * Deletes the selected annotation * @returns {void} */ deleteSelected() { let id = this.layer.selected.values().next().value; if (id) this.deleteAnnotation(id); } /** @ignore */ deleteAnnotation(id) { let anno = this.layer.getAnnotationById(id); if (this.deleteCallback) { if (!confirm(`Deleting annotation ${anno.label}, are you sure?`)) return; let result = this.deleteCallback(anno); if (!result) { alert(\"Failed to delete this annotation.\"); return; } } //remove svg elements from the canvas this.layer.svgGroup.querySelectorAll(`[data-annotation=\"${anno.id}\"]`).forEach(e =&gt; e.remove()); //remove entry from the list let list = this.layer.annotationsListEntry.element.parentElement.querySelector('.openlime-list'); list.querySelectorAll(`[data-annotation=\"${anno.id}\"]`).forEach(e =&gt; e.remove()); this.layer.annotations = this.layer.annotations.filter(a =&gt; a !== anno); this.layer.clearSelected(); this.hideEditWidget(); } /** * Exports all annotations as SVG * @returns {void} */ exportAnnotations() { let svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); const bBox = this.layer.boundingBox(); svgElement.setAttribute('viewBox', `0 0 ${bBox.xHigh - bBox.xLow} ${bBox.yHigh - bBox.yLow}`); let style = Util.createSVGElement('style'); style.textContent = this.layer.style; svgElement.appendChild(style); let serializer = new XMLSerializer(); //let svg = `&lt;svg xmlns=\"http://www.w3.org/2000/svg\"&gt; for (let anno of this.layer.annotations) { for (let e of anno.elements) { if (e.tagName == 'path') { //Inkscape nitpicks on the commas in svg path. let d = e.getAttribute('d'); e.setAttribute('d', d.replaceAll(',', ' ')); } svgElement.appendChild(e.cloneNode()); } } let svg = serializer.serializeToString(svgElement); /*(${this.layer.annotations.map(anno =&gt; { return `&lt;group id=\"${anno.id}\" title=\"${anno.label}\" data-description=\"${anno.description}\"&gt; ${anno.elements.map((s) =&gt; { s.classList.remove('selected'); return serializer.serializeToString(s) }).join(\"\\n\")} &lt;/group&gt;`; })} &lt;/svg&gt;`; */ ///console.log(svg); var e = document.createElement('a'); e.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(svg)); e.setAttribute('download', 'annotations.svg'); e.style.display = 'none'; document.body.appendChild(e); e.click(); document.body.removeChild(e); } /** @ignore */ setActiveTool(e) { if (!this.editWidget) return; let tools = this.editWidget.querySelector('.openlime-annotation-edit-tools'); tools.querySelectorAll('svg').forEach(a =&gt; a.classList.remove('active')); if (e) e.classList.add('active'); } /** * Sets the active drawing tool * @param {string} tool - Tool name ('point', 'pin', 'line', 'box', 'circle', 'erase', or null) * @private */ setTool(tool) { this.tool = tool; if (this.factory &amp;&amp; this.factory.quit) this.factory.quit(); if (tool) { if (!tool in this.tools) throw \"Unknown editor tool: \" + tool; this.factory = new this.tools[tool].tool(this.tools[tool]); this.factory.annotation = this.annotation; this.factory.layer = this.layer; } document.querySelector('.openlime-overlay').classList.toggle('erase', tool == 'erase'); document.querySelector('.openlime-overlay').classList.toggle('crosshair', tool &amp;&amp; tool != 'erase'); } // UNDO STUFF /** * Performs an undo operation * @returns {void} */ undo() { let anno = this.annotation; //current annotation. if (!anno) return; if (this.factory &amp;&amp; this.factory.undo &amp;&amp; this.factory.undo()) { anno.needsUpdate = true; this.viewer.redraw(); return; } if (anno.history &amp;&amp; anno.history.length) { //FIXME TODO history will be more complicated if it has to manage multiple tools. anno.future.push(this.annoToData(anno)); let data = anno.history.pop(); this.dataToAnno(data, anno); anno.needsUpdate = true; this.viewer.redraw(); this.updateEditWidget(); } } /** * Performs a redo operation * @returns {void} */ redo() { let anno = this.annotation; //current annotation. if (!anno) return; if (this.factory &amp;&amp; this.factory.redo &amp;&amp; this.factory.redo()) { anno.needsUpdate = true; this.viewer.redraw(); return; } if (anno.future &amp;&amp; anno.future.length) { anno.history.push(this.annoToData(anno)); let data = anno.future.pop(); this.dataToAnno(data, anno); anno.needsUpdate = true; this.viewer.redraw(); this.updateEditWidget(); } } /** * Saves current annotation state to history * @private */ saveCurrent() { let anno = this.annotation; //current annotation. if (!anno.history) anno.history = []; anno.history.push(this.annoToData(anno)); anno.future = []; } /** @ignore */ annoToData(anno) { let data = {}; for (let i of ['id', 'label', 'description', 'class', 'publish', 'data']) data[i] = `${anno[i] || ''}`; data.elements = anno.elements.map(e =&gt; { let n = e.cloneNode(); n.points = e.points; return n; }); return data; } /** @ignore */ dataToAnno(data, anno) { for (let i of ['id', 'label', 'description', 'class', 'publish', 'data']) anno[i] = `${data[i]}`; anno.elements = data.elements.map(e =&gt; { let n = e.cloneNode(); n.points = e.points; return n; }); } // TOOLS STUFF /** @ignore */ keyUp(e) { if (e.defaultPrevented) return; switch (e.key) { case 'Escape': if (this.tool) { this.setActiveTool(); this.setTool(null); e.preventDefault(); } break; case 'Delete': this.deleteSelected(); break; case 'Backspace': break; case 'z': if (e.ctrlKey) this.undo(); break; case 'Z': if (e.ctrlKey) this.redo(); break; } } /** @ignore */ panStart(e) { if (e.buttons != 1 || e.ctrlKey || e.altKey || e.shiftKey || e.metaKey) return; if (!['line', 'erase', 'box', 'circle'].includes(this.tool)) return; this.panning = true; e.preventDefault(); this.saveCurrent(); const pos = this.mapToSvg(e); let shape = this.factory.create(pos, e); this.annotation.needsUpdate = true; this.viewer.redraw(); } /** @ignore */ panMove(e) { if (!this.panning) return false; const pos = this.mapToSvg(e); this.factory.adjust(pos, e); } /** @ignore */ panEnd(e) { if (!this.panning) return false; this.panning = false; const pos = this.mapToSvg(e); let changed = this.factory.finish(pos, e); if (!changed) //nothing changed no need to keep current situation in history. this.annotation.history.pop(); else this.saveAnnotation(); this.annotation.needsUpdate = true; this.viewer.redraw(); } /** @ignore */ fingerHover(e) { if (this.tool != 'line') return; e.preventDefault(); const pos = this.mapToSvg(e); let changed = this.factory.hover(pos, e); this.annotation.needsUpdate = true; this.viewer.redraw(); } /** @ignore */ fingerSingleTap(e) { if (!['point', 'pin', 'line', 'erase'].includes(this.tool)) return; e.preventDefault(); this.saveCurrent(); const pos = this.mapToSvg(e); let changed = this.factory.tap(pos, e) if (!changed) //nothing changed no need to keep current situation in history. this.annotation.history.pop(); else this.saveAnnotation(); this.annotation.needsUpdate = true; this.viewer.redraw(); } /** @ignore */ fingerDoubleTap(e) { if (!['line'].includes(this.tool)) return; e.preventDefault(); this.saveCurrent(); const pos = this.mapToSvg(e); let changed = this.factory.doubleTap(pos, e) if (!changed) //nothing changed no need to keep current situation in history. this.annotation.history.pop(); else this.saveAnnotation(); this.annotation.needsUpdate = true; this.viewer.redraw(); } /** * Converts viewer coordinates to SVG coordinates * @param {PointerEvent} event - Pointer event * @returns {Object} Position in SVG coordinates with pixel size information * @private */ mapToSvg(e) { const p = { x: e.offsetX, y: e.offsetY }; const layerT = this.layer.transform; const useGL = false; const layerbb = this.layer.boundingBox(); const layerSize = { w: layerbb.width(), h: layerbb.height() }; //compute also size of an image pixel on screen and store in pixelSize. let pos = CoordinateSystem.fromCanvasHtmlToImage(p, this.viewer.camera, layerT, layerSize, useGL); p.x += 1; let pos1 = CoordinateSystem.fromCanvasHtmlToImage(p, this.viewer.camera, layerT, layerSize, useGL); pos.pixelSize = Math.abs(pos1.x - pos.x); return pos; } } /** @ignore */ class Point { tap(pos) { let point = Util.createSVGElement('circle', { cx: pos.x, cy: pos.y, r: 10, class: 'point' }); this.annotation.elements.push(point); return true; } } /** @ignore */ class Pin { constructor(options) { Object.assign(this, options); } tap(pos) { const str = this.template(pos.x, pos.y); let parser = new DOMParser(); let point = parser.parseFromString(str, \"image/svg+xml\").documentElement; // this.annotation.elements.push(point); this.annotation.elements[0] = point; return true; } } /** @ignore */ class Pen { constructor() { //TODO Use this.path.points as in line, instead. this.points = []; } create(pos) { this.points.push(pos); if (this.points.length == 1) { saveCurrent this.path = Util.createSVGElement('path', { d: `M${pos.x} ${pos.y}`, class: 'line' }); return this.path; } let p = this.path.getAttribute('d'); this.path.setAttribute('d', p + ` L${pos.x} ${pos.y}`); this.path.points = this.points; } undo() { if (!this.points.length) return; this.points.pop(); let d = this.points.map((p, i) =&gt; `${i == 0 ? 'M' : 'L'}${p.x} ${p.y}`).join(' '); this.path.setAttribute('d', d); if (this.points.length &lt; 2) { this.points = []; this.annotation.elements = this.annotation.elements.filter((e) =&gt; e != this.path); } } } /** @ignore */ class Box { constructor() { this.origin = null; this.box = null; } create(pos) { this.origin = pos; this.box = Util.createSVGElement('rect', { x: pos.x, y: pos.y, width: 0, height: 0, class: 'rect' }); return this.box; } adjust(pos) { let p = this.origin; this.box.setAttribute('x', Math.min(p.x, pos.x)); this.box.setAttribute('width', Math.abs(pos.x - p.x)); this.box.setAttribute('y', Math.min(p.y, pos.y)); this.box.setAttribute('height', Math.abs(pos.y - p.y)); } finish(pos) { return this.box; } } /** @ignore */ class Circle { constructor() { this.origin = null; this.circle = null; } create(pos) { this.origin = pos; this.circle = Util.createSVGElement('circle', { cx: pos.x, cy: pos.y, r: 0, class: 'circle' }); return this.circle; } adjust(pos) { let p = this.origin; let r = Math.hypot(pos.x - p.x, pos.y - p.y); this.circle.setAttribute('r', r); } finish() { return this.circle; } } /** @ignore */ class Line { constructor() { this.history = [] } create(pos) { /*if(this.segment) { this.layer.svgGroup.removeChild(this.segment); this.segment = null; }*/ for (let e of this.annotation.elements) { if (!e.points || e.points.length &lt; 2) continue; if (Line.distance(e.points[0], pos) / pos.pixelSize &lt; 5) { e.points.reverse(); this.path = e; this.path.setAttribute('d', Line.svgPath(e.points)); //reverse points! this.history = [this.path.points.length]; return; } if (Line.distanceToLast(e.points, pos) &lt; 5) { this.path = e; this.adjust(pos); this.history = [this.path.points.length]; return; } } this.path = Util.createSVGElement('path', { d: `M${pos.x} ${pos.y}`, class: 'line' }); this.path.points = [pos]; this.history = [this.path.points.length]; this.annotation.elements.push(this.path); } tap(pos) { if (!this.path) { this.create(pos); return false; } else { if (this.adjust(pos)) this.history = [this.path.points.length - 1]; return true; } } doubleTap(pos) { if (!this.path) return false; if (this.adjust(pos)) { this.history = [this.path.points.length - 1]; this.path = null; } return false; } hover(pos, event) { return; if (!this.path) return false; let s = this.path.points[this.path.points.length - 1]; if (!this.segment) { this.segment = Util.createSVGElement('path', { class: 'line' }); this.layer.svgGroup.appendChild(this.segment); } pos.x = pos.x - s.x; pos.y = pos.y - s.y; let len = Math.sqrt(pos.x * pos.x + pos.y * pos.y); if (len &gt; 30) { pos.x *= 30 / len; pos.y *= 30 / len; } this.segment.setAttribute('d', `M${s.x} ${s.y} l${pos.x} ${pos.y}`); return true; } quit() { return; if (this.segment) { this.layer.svgGroup.removeChild(this.segment); this.segment = null; } } adjust(pos) { let gap = Line.distanceToLast(this.path.points, pos); if (gap / pos.pixelSize &lt; 4) return false; this.path.points.push(pos); let d = this.path.getAttribute('d'); this.path.setAttribute('d', Line.svgPath(this.path.points));//d + `L${pos.x} ${pos.y}`); return true; } finish() { this.path.setAttribute('d', Line.svgPath(this.path.points)); return true; //some changes where made! } undo() { if (!this.path || !this.history.length) return false; this.path.points = this.path.points.slice(0, this.history.pop()); this.path.setAttribute('d', Line.svgPath(this.path.points)); return true; } redo() { return false; } //TODO: smooth should be STABLE, if possible. static svgPath(points) { //return points.map((p, i) =&gt; `${(i == 0? \"M\" : \"L\")}${p.x} ${p.y}`).join(' '); let tolerance = 1.5 * points[0].pixelSize; let tmp = simplify(points, tolerance); let smoothed = smooth(tmp, 90, true); return smoothToPath(smoothed); } static distanceToLast(line, point) { let last = line[line.length - 1]; return Line.distance(last, point); } static distance(a, b) { let dx = a.x - b.x; let dy = a.y - b.y; return Math.sqrt(dx * dx + dy * dy); } } /** @ignore */ class Erase { create(pos, event) { this.erased = false; this.erase(pos, event); } adjust(pos, event) { this.erase(pos, event); } finish(pos, event) { return this.erase(pos, event); } //true if some points where removed. tap(pos, event) { return this.erase(pos, event); } erase(pos, event) { for (let e of this.annotation.elements) { if (e == event.originSrc) { e.points = []; this.erased = true; continue; } let points = e.points; if (!points || !points.length) continue; if (Line.distanceToLast(points, pos) &lt; 10) this.erased = true, points.pop(); else if (Line.distance(points[0], pos) &lt; 10) this.erased = true, points.shift(); else continue; if (points.length &lt;= 2) { e.points = []; e.setAttribute('d', ''); this.annotation.needsUpdate = true; this.erased = true; continue; } e.setAttribute('d', Line.svgPath(points)); } this.annotation.elements = this.annotation.elements.filter(e =&gt; { return !e.points || e.points.length &gt; 2; }); return this.erased; } } export { EditorSvgAnnotation } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"LayerSvgAnnotation.js.html":{"id":"LayerSvgAnnotation.js.html","title":"Source: LayerSvgAnnotation.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: LayerSvgAnnotation.js import { Util } from './Util' import { Layer } from './Layer' import { Annotation } from './Annotation' import { LayerAnnotation } from './LayerAnnotation' import { CoordinateSystem } from './CoordinateSystem'; /** * @typedef {Object} AnnotationClass * @property {string} stroke - CSS color for SVG elements (lines, text, outlines) * @property {string} label - Display name for the class */ /** * @typedef {Object.&lt;string, AnnotationClass&gt;} AnnotationClasses * @description Map of class names to their visual properties */ /** * @typedef {Object} LayerSvgAnnotationOptions * @property {AnnotationClasses} classes - Annotation class definitions with styles * @property {Function} [onClick] - Callback for annotation click events (param: selected annotation) * @property {boolean} [shadow=true] - Whether to use Shadow DOM for SVG elements * @property {HTMLElement} [overlayElement] - Container for SVG overlay * @property {string} [style] - Additional CSS styles for annotations * @property {Function} [annotationUpdate] - Custom update function for annotations * @extends LayerAnnotationOptions */ /** * LayerSvgAnnotation provides SVG-based annotation capabilities in OpenLIME. * It renders SVG elements directly on the canvas overlay, outside the WebGL context, * enabling rich vector graphics annotations with interactive features. * * Features: * - SVG-based vector annotations * - Custom styling per annotation class * - Interactive selection * - Shadow DOM isolation * - Dynamic SVG transformation * - Event handling * - Custom update callbacks * * Technical Details: * - Uses SVG overlay for rendering * - Handles coordinate system transformations * - Manages DOM element lifecycle * - Supports custom class styling * - Implements visibility management * - Provides selection mechanisms * * @extends LayerAnnotation * * @example * ```javascript * // Create SVG annotation layer with custom classes * const annotationLayer = new OpenLIME.Layer({ * type: 'svg_annotations', * classes: { * 'highlight': { stroke: '#ff0', label: 'Highlight' }, * 'comment': { stroke: '#0f0', label: 'Comment' } * }, * onClick: (annotation) =&gt; { * console.log('Clicked:', annotation.label); * }, * shadow: true * }); * * // Add to viewer * viewer.addLayer('annotations', annotationLayer); * ``` */ class LayerSvgAnnotation extends LayerAnnotation { /** * Creates a new LayerSvgAnnotation instance * @param {LayerSvgAnnotationOptions} [options] - Configuration options */ constructor(options) { options = Object.assign({ overlayElement: null, //reference to canvas overlayElement. TODO: check if really needed. shadow: true, //svg attached as shadow node (so style apply only the svg layer) svgElement: null, //the svg layer svgGroup: null, onClick: null, //callback function classes: { '': { stroke: '#000', label: '' }, }, annotationUpdate: null }, options); super(options); for (const [key, value] of Object.entries(this.classes)) { this.style += `[data-class=${key}] { ` + Object.entries(value).map(g =&gt; `${g[0]}: ${g[1]};`).join('\\n') + '}'; } this.style += `.openlime-svgoverlay { position:absolute; top:0px; left:0px;}`; //this.createOverlaySVGElement(); //this.setLayout(this.layout); } /** * Creates the SVG overlay element and initializes the shadow DOM if enabled * @private */ createOverlaySVGElement() { this.svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); this.svgElement.classList.add('openlime-svgoverlay'); this.svgGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); this.svgElement.append(this.svgGroup); // Check if the shadow root already exists before attaching let root = this.overlayElement; if (this.shadow) { if (!this.overlayElement.shadowRoot) { root = this.overlayElement.attachShadow({ mode: \"open\" }); } else { root = this.overlayElement.shadowRoot; // Use existing shadow root } } if (this.style) { const style = document.createElement('style'); style.textContent = this.style; root.append(style); } root.appendChild(this.svgElement); } /* unused for the moment!!! async loadSVG(url) { var response = await fetch(url); if (!response.ok) { this.status = \"Failed loading \" + this.url + \": \" + response.statusText; return; } let text = await response.text(); let parser = new DOMParser(); this.svgXML = parser.parseFromString(text, \"image/svg+xml\").documentElement; throw \"if viewbox is set in svgURL should it overwrite options.viewbox or viceversa?\" } */ /** * Sets visibility of the annotation layer * Updates both SVG display and underlying layer visibility * @param {boolean} visible - Whether layer should be visible * @override */ setVisible(visible) { if (this.svgElement) this.svgElement.style.display = visible ? 'block' : 'none'; super.setVisible(visible); } /** * Clears all annotation selections */ clearSelected() { if (!this.svgElement) this.createOverlaySVGElement(); // return; this.svgGroup.querySelectorAll('[data-annotation]').forEach((e) =&gt; e.classList.remove('selected')); super.clearSelected(); } /** * Sets selection state of an annotation * @param {Annotation} anno - The annotation to select/deselect * @param {boolean} [on=true] - Whether to select (true) or deselect (false) */ setSelected(anno, on = true) { for (let a of this.svgElement.querySelectorAll(`[data-annotation=\"${anno.id}\"]`)) a.classList.toggle('selected', on); super.setSelected(anno, on); } /** * Creates a new SVG annotation * @param {Annotation} [annotation] - Optional existing annotation to use * @returns {Annotation} The created annotation * @private */ newAnnotation(annotation) { let svg = Util.createSVGElement('svg'); if (!annotation) annotation = new Annotation({ element: svg, selector_type: 'SvgSelector' }); return super.newAnnotation(annotation) } /** * Renders the SVG annotations * Updates SVG viewBox and transformation to match current view * @param {Transform} transform - Current view transform * @param {Object} viewport - Current viewport * @returns {boolean} Whether render completed successfully * @override */ draw(transform, viewport) { if (!this.svgElement) return true; this.svgElement.setAttribute('viewBox', `${-viewport.w / 2} ${-viewport.h / 2} ${viewport.w} ${viewport.h}`); const svgTransform = this.getSvgGroupTransform(transform); this.svgGroup.setAttribute(\"transform\", svgTransform); return true; } /** * Calculates SVG group transform string * @param {Transform} transform - Current view transform * @param {boolean} [inverse=false] - Whether to return inverse transform * @returns {string} SVG transform attribute value */ getSvgGroupTransform(transform, inverse = false) { let t = this.transform.compose(transform); let c = this.boundingBox().corner(0); // FIXME CHECK IT: Convert from GL to SVG, but without any scaling. It just needs to reflect around 0, t = CoordinateSystem.reflectY(t); return inverse ? `translate(${-c.x} ${-c.y}) scale(${1 / t.z} ${1 / t.z}) rotate(${t.a} 0 0) translate(${-t.x} ${-t.y})` : `translate(${t.x} ${t.y}) rotate(${-t.a} 0 0) scale(${t.z} ${t.z}) translate(${c.x} ${c.y})`; } /** * Prepares annotations for rendering * Handles SVG element creation and updates * @param {Transform} transform - Current view transform * @private */ prefetch(transform) { if (!this.svgElement) this.createOverlaySVGElement(); if (!this.visible) return; if (this.status != 'ready') return; if (typeof (this.annotations) == \"string\") return; //FIXME Is it right? Should we use this.status? const bBox = this.boundingBox(); //this.svgElement.setAttribute('viewBox', `${bBox.xLow} ${bBox.yLow} ${bBox.xHigh - bBox.xLow} ${bBox.yHigh - bBox.yLow}`); //find which annotations needs to be added to the ccanvas, some //indexing whould be used, for the moment we just iterate all of them. for (let anno of this.annotations) { //TODO check for class visibility and bbox culling (or maybe should go to prefetch?) if (!anno.ready &amp;&amp; typeof anno.svg == 'string') { let parser = new DOMParser(); let element = parser.parseFromString(anno.svg, \"image/svg+xml\").documentElement; anno.elements = [...element.children] anno.ready = true; /* } else if(this.svgXML) { a.svgElement = this.svgXML.querySelector(`#${a.id}`); if(!a.svgElement) throw Error(`Could not find element with id: ${id} in svg`); } */ } if (this.annotationUpdate) this.annotationUpdate(anno, transform); if (!anno.needsUpdate) continue; anno.needsUpdate = false; for (let e of this.svgGroup.querySelectorAll(`[data-annotation=\"${anno.id}\"]`)) e.remove(); if (!anno.visible) continue; //second time will be 0 elements, but we need to //store somewhere knowledge of which items in the scene and which still not. for (let child of anno.elements) { let c = child; //.cloneNode(true); c.setAttribute('data-annotation', anno.id); c.setAttribute('data-class', anno.class); //c.setAttribute('data-layer', this.id); c.classList.add('openlime-annotation'); if (this.selected.has(anno.id)) c.classList.add('selected'); this.svgGroup.appendChild(c); c.onpointerdown = (e) =&gt; { if (e.button == 0) { e.preventDefault(); e.stopPropagation(); if (this.onClick &amp;&amp; this.onClick(anno)) return; if (this.selected.has(anno.id)) return; this.clearSelected(); this.setSelected(anno, true); } } } } } } /** * Register this layer type with the Layer factory * @type {Function} * @private */ Layer.prototype.types['svg_annotations'] = (options) =&gt; { return new LayerSvgAnnotation(options); } export { LayerSvgAnnotation } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"Transform.js.html":{"id":"Transform.js.html","title":"Source: Transform.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: Transform.js import { BoundingBox } from \"./BoundingBox\"; /** * A [x, y] point. * @typedef APoint * @property {number} p.0 The x-coordinate. * @property {number} p.1 The y-coordinate. */ /** * A {x, y} point. * @typedef {Object} Point * @property {number} x The x-coordinate. * @property {number} y The y-coordinate. */ /** * The class **Transform** implements a 2D affine map to convert coordinates between two systems. * The map is internally represented by four values: * * `x` the x-component of the translation vector * * `y` the y-component of the translation vector * * `a` the rotation angle around the z-axis (in degrees) * * `z` the scale factor * * A transformation between a point P to P' is defined by * ``` * P' = z*rot(a)*P + t * ``` * where `z` is the scale factor, `a` is the rotation angle, and `t(x,y)` is the translation vector. * * The class implements a set of geometric transformations useful to position the camera, create animations, etc... */ class Transform { //FIXME Add translation to P? /** * Instantiates a Transform object. * @param {Object} [options] An object literal with Transform parameters. * @param {number} options.x=0 The x-component of the translation vector. * @param {number} options.y=0 The y-component of the translation vector. * @param {number} options.a=0 The rotation angle (in degrees). * @param {number} options.z=1 The scale factor. * @param {time} options.t=0 The current time. */ constructor(options) { Object.assign(this, { x:0, y:0, z:1, a:0, t:0 }); if(!this.t) this.t = performance.now(); if(typeof(options) == 'object') Object.assign(this, options); } /** * Gets a copy of `this` Transform. * @returns {Transform} The copy of the Transform. */ copy() { let transform = new Transform(); Object.assign(transform, this); return transform; } /** * Applies `this` Transform to a point P(x,y) to get P'(x',y'). * @param {number} x x-coordinate of the point P. * @param {number} y y-coordinate of the point P. * @returns {{x, y}} The point P'. */ apply(x, y) { //TODO! ROTATE let r = Transform.rotate(x, y, this.a); return { x: r.x*this.z + this.x, y: r.y*this.z + this.y } } /** * Computes the inverse of `this` Transform. * @returns {Transform} The inverse Transform. */ inverse() { let r = Transform.rotate(this.x/this.z, this.y/this.z, -this.a); return new Transform({x:-r.x, y:-r.y, z:1/this.z, a:-this.a, t:this.t}); } /** * Maps an angle `a` to range from 0 to 360 degrees. * @param {number} a The angle (in degrees). * @returns {number} The normalized angle. */ static normalizeAngle(a) { while(a &gt; 360) a -= 360; while(a &lt; 0) a += 360; return a; } /** * Computes the rotation of a point P(x,y) by an angle `a` around the z-axis to get P'(x',y'). * @param {*} x x-coordinate of the point P. * @param {*} y y-coordinate of the point P. * @param {*} a The rotation angle (in degrees) * @returns {{x,y}} The point P'. */ static rotate(x, y, a) { a = Math.PI*(a/180); let ex = Math.cos(a)*x - Math.sin(a)*y; let ey = Math.sin(a)*x + Math.cos(a)*y; return {x:ex, y:ey}; } // first get applied this (a) then transform (b). /** * Composes (multiplies) `this` Transform with an other `transform`. * @param {Transform} transform * @returns {Transform} The result of the composition. */ compose(transform) { let a = this.copy(); let b = transform; a.z *= b.z; a.a += b.a; var r = Transform.rotate(a.x, a.y, b.a); a.x = r.x*b.z + b.x; a.y = r.y*b.z + b.y; return a; } /** * Applyes `this` Transform to a bounding box. * @param {BoundingBox} lbox * @returns {BoundingBox} The result. */ transformBox(lbox) { let box = new BoundingBox(); for(let i = 0; i &lt; 4; i++) { let c = lbox.corner(i); let p = this.apply(c.x, c.y); box.mergePoint(p); } return box; } /** * Gets the bounding box (in image coordinate space) of the vieport. The viewport y-axis points up. * The image and screen transform has y pointing down. * @param {Viewport} viewport * @returns {BoundingBox} The bounding box. */ getInverseBox(viewport) { let inverse = this.inverse(); let corners = [ {x:viewport.x, y:viewport.y}, {x:viewport.x + viewport.dx, y:viewport.y}, {x:viewport.x, y:viewport.y + viewport.dy}, {x:viewport.x + viewport.dx, y:viewport.y + viewport.dy} ]; let box = new BoundingBox(); for(let corner of corners) { let p = inverse.apply(corner.x -viewport.w/2, -corner.y + viewport.h/2); box.mergePoint(p); } return box; } /** * The type Easing defines the function that regulates the movement of the camera * @typedef {('linear'|'ease-out'|'ease-in-out')} Transform#Easing */ /** * Computes the interpolated transform at time `time` between `source` and `target` * @param {Transform} source The source transform. * @param {Transform} target The target transform. * @param {time} time The time at which to compute the interpolation. * @param {Transform#Easing} easing The easing function. * @returns {Transform} The interpolated transform. */ static interpolate(source, target, time, easing) { //FIXME STATIC console.assert(!isNaN(source.x)); console.assert(!isNaN(target.x)); const pos = new Transform(); let dt = (target.t - source.t); if (time &lt; source.t) { Object.assign(pos, source); } else if (time &gt; target.t || dt &lt; 0.001) { Object.assign(pos, target); } else { let tt = (time - source.t) / dt; switch (easing) { case 'ease-out': tt = 1 - Math.pow(1 - tt, 2); break; case 'ease-in-out': tt = tt &lt; 0.5 ? 2 * tt * tt : 1 - Math.pow(-2 * tt + 2, 2) / 2; break; } let st = 1 - tt; for (let i of ['x', 'y', 'z', 'a']) pos[i] = (st * source[i] + tt * target[i]); } pos.t = time; return pos; } /** * Combines `this` Transform with the viewport to get the WebGL projection matrix. * @param {Viewport} viewport The viewport. * @returns {number[]} The result. */ projectionMatrix(viewport) { let z = this.z; // In coords with 0 in lower left corner map x0 to -1, and x0+v.w to 1 // In coords with 0 at screen center and x0 at 0, map -v.w/2 -&gt; -1, v.w/2 -&gt; 1 // With x0 != 0: x0 -&gt; x0-v.w/2 -&gt; -1, and x0+dx -&gt; x0+v.dx-v.w/2 -&gt; 1 // Where dx is viewport width, while w is window width //0, 0 &lt;-&gt; viewport.x + viewport.dx/2 (if x, y = let zx = 2/viewport.dx; let zy = 2/viewport.dy; let dx = zx * this.x + (2/viewport.dx)*(viewport.w/2-viewport.x)-1; let dy = zy * this.y + (2/viewport.dy)*(viewport.h/2-viewport.y)-1; let a = Math.PI *this.a/180; let matrix = [ Math.cos(a)*zx*z, Math.sin(a)*zy*z, 0, 0, -Math.sin(a)*zx*z, Math.cos(a)*zy*z, 0, 0, 0, 0, 1, 0, dx, dy, 0, 1]; return matrix; } /** * Transforms the point `p` from scene (0 at image center) to [0,wh] . * @param {Viewport} viewport The viewport. * @param {APoint} p The point in scene (0,0 at image center) * @returns {APoint} The point in range [0..w-1,0..h-1] */ sceneToViewportCoords(viewport, p) { //FIXME Point is an array, but in other places it is an Object... return [p[0] * this.z + this.x - viewport.x + viewport.w/2, p[1] * this.z - this.y + viewport.y + viewport.h/2 ]; } /** * Transforms the point `p` from [0,wh] to scene (0 at image center). * * @param {Viewport} viewport The viewport. * @param {APoint} p The point in range [0..w-1,0..h-1] * @returns {APoint} The point in scene (0,0 at image center) */ viewportToSceneCoords(viewport, p) { return [(p[0] + viewport.x - viewport.w/2 - this.x) / this.z, (p[1] - viewport.y - viewport.h/2 + this.y) / this.z]; } print(str=\"\", precision=0) { const p = precision; console.log(str + \" x:\" + this.x.toFixed(p) + \", y:\" + this.y.toFixed(p) + \", z:\" + this.z.toFixed(p) + \", a:\" + this.a.toFixed(p) + \", t:\" + this.t.toFixed(p)); } } export { Transform } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"AudioPlayer.js.html":{"id":"AudioPlayer.js.html","title":"Source: AudioPlayer.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: AudioPlayer.js import { addSignals } from './Signals.js' /** * Class representing an audio player with playback control capabilities. * Supports playing, pausing, resuming, and stopping audio files with volume control * and playback speed adjustment. */ class AudioPlayer { /** * Creates an instance of AudioPlayer. * Initializes the player with default settings and sets up signal handling for the 'ended' event. */ constructor() { this.audio = null; this.isPlaying = false; this.isPaused = false; this.isMuted = false; this.previousVolume = 1.0; this.playStartTime = null; this.playDuration = 0; addSignals(AudioPlayer, 'ended'); } /** * Plays an audio file with optional playback speed adjustment. * If audio is paused, it will resume playback instead of starting a new file. * * @param {string} audioFile - The path or URL to the audio file. * @param {number} [speed=1.0] - Playback speed multiplier (1.0 is normal speed). * @returns {Promise&lt;void&gt;} Resolves when the audio playback completes. */ async play(audioFile, speed = 1.0) { if (!this.isPlaying &amp;&amp; !this.isPaused) { this.audio = new Audio(audioFile); this.audio.playbackRate = speed; this.audio.volume = this.previousVolume; this.isPlaying = true; this.isPaused = false; this.playStartTime = Date.now(); this.playDuration = 0; this.onEndedListener = () =&gt; { this.isPlaying = false; this.updatePlayDuration(); this.emit('ended'); // Remove the listener this.audio.removeEventListener('ended', this.onEndedListener); this.onEndedListener = null; }; this.audio.addEventListener('ended', this.onEndedListener); await this.audio.play(); return new Promise((resolve) =&gt; { this.audio.onended = () =&gt; { this.isPlaying = false; resolve(); }; }); } else if (this.isPaused) { await this.continue(); } } /** * Pauses the currently playing audio. * Updates play duration when pausing. */ pause() { if (!this.isPaused &amp;&amp; this.audio) { this.audio.pause(); this.isPaused = true; this.updatePlayDuration(); } } /** * Resumes playback of a paused audio file. * * @returns {Promise&lt;void&gt;} Resolves when the resumed audio playback completes. */ async continue() { if (this.isPaused &amp;&amp; this.audio) { this.isPaused = false; this.playStartTime = Date.now(); await this.audio.play(); return new Promise((resolve) =&gt; { this.audio.onended = () =&gt; { this.isPlaying = false; resolve(); }; }); } else { console.log(\"No paused audio to continue.\"); } } /** * Stops the current audio playback and resets all player states. * Removes event listeners and updates final play duration. */ stop() { if (this.audio) { this.audio.pause(); this.audio.currentTime = 0; if (this.onEndedListener) { this.audio.removeEventListener('ended', this.onEndedListener); this.onEndedListener = null; } this.isPlaying = false; this.isPaused = false; this.isMuted = false; this.updatePlayDuration(); } } /** * Updates the total play duration based on the current session. * Called internally when playback is paused, stopped, or ends. * @private */ updatePlayDuration() { if (this.playStartTime) { const now = Date.now(); this.playDuration += now - this.playStartTime; this.playStartTime = null; } } /** * Returns the total play duration in milliseconds. * * @returns {number} Total play duration in milliseconds. */ getPlayDuration() { return this.playDuration; } /** * Sets the audio volume level. * * @param {number} volume - Volume level between 0.0 and 1.0. */ setVolume(volume) { if (this.audio) { if (volume &gt;= 0 &amp;&amp; volume &lt;= 1) { this.audio.volume = volume; this.previousVolume = volume; } else { console.log(\"Volume must be between 0.0 and 1.0\"); } } else { console.log(\"No audio loaded.\"); } } /** * Creates a delay in the execution flow. * * @param {number} ms - Number of milliseconds to wait. * @returns {Promise&lt;void&gt;} Resolves after the specified delay. */ async silence(ms) { return new Promise((resolve) =&gt; setTimeout(resolve, ms)); } /** * Toggles the mute state of the audio player. * Stores the previous volume level when muting and restores it when unmuting. */ toggleMute() { if (this.audio) { if (this.isMuted) { this.audio.volume = this.previousVolume; this.isMuted = false; } else { this.previousVolume = this.audio.volume; this.audio.volume = 0; this.isMuted = true; } } else { console.log(\"No audio loaded.\"); } } } export { AudioPlayer } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"Simplify.js.html":{"id":"Simplify.js.html","title":"Source: Simplify.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: Simplify.js /* FROM: https://stackoverflow.com/questions/40650306/how-to-draw-a-smooth-continuous-line-with-mouse-using-html-canvas-and-javascript */ /** * A [x, y, xc, yc] point. * @typedef BezierPoint * @property {number} p.0 The x-coordinate. * @property {number} p.1 The y-coordinate. * @property {number} p.2 The x-coordinate of the control point. * @property {number} p.3 The y-coordinate of the control point. */ /** * Simplifies a polyline via the Douglas-Peucker algorithm. * @param {Array&lt;Point&gt;} points A polyline. * @param {*} tolerance The tolerance is the maximum distance between the original polyline and the simplified polyline. * It has the same metric as the point coordinates. * @returns {Array&lt;Point&gt;} The simplified polyline. */ function simplify(points, tolerance) { let tolerance2 = Math.pow(tolerance, 2); var simplify1 = function(start, end) { // recursize simplifies points from start to end var index, i, xx , yy, dx, dy, ddx, ddy, t, dist, dist1; let p1 = points[start]; let p2 = points[end]; xx = p1.x; yy = p1.y; ddx = p2.x - xx; ddy = p2.y - yy; dist1 = ddx * ddx + ddy * ddy; let maxDist = tolerance2; for (var i = start + 1; i &lt; end; i++) { let p = points[i]; if (ddx !== 0 || ddy !== 0) { t = ((p.x - xx) * ddx + (p.y - yy) * ddy) / dist1; if (t &gt; 1) { dx = p.x - p2.x; dy = p.y - p2.y; } else if (t &gt; 0) { dx = p.x - (xx + ddx * t); dy = p.y - (yy + ddy * t); } else { dx = p.x - xx; dy = p.y - yy; } } else{ dx = p.x - xx; dy = p.y - yy; } dist = dx * dx + dy * dy if (dist &gt; maxDist) { index = i; maxDist = dist; } } if (maxDist &gt; tolerance2) { if (index - start &gt; 1){ simplify1(start, index); } newLine.push(points[index]); if (end - index &gt; 1){ simplify1(index, end); } } } var end = points.length - 1; var newLine = [points[0]]; simplify1(0, end); newLine.push(points[end]); return newLine; } /** * Uses Bezier Curve to smooth a polyline * @param {Array&lt;Point&gt;} points A polyline. * @param {number} cornerThres The angular threshold (in degrees). Two segments are smoothed if their angle is less then the threshold. * @param {bool} match Whether the smoothed curve should traverse the original points or approximate them. * @returns {Array&lt;BezierPoint&gt;} The smoothed polyline. */ function smooth(points, cornerThres, match) { cornerThres *= 3.1415/180; let newPoints = []; // array for new points if(points.length &lt;= 2) return points.map((p) =&gt; [p.x, p.y]); let nx1, ny1, nx2, ny2, dist1, dist2; function dot(x, y, xx, yy) { // get do product // dist1,dist2,nx1,nx2,ny1,ny2 are the length and normals and used outside function // normalise both vectors dist1 = Math.sqrt(x * x + y * y); // get length if (dist1 &gt; 0) { // normalise nx1 = x / dist1 ; ny1 = y / dist1 ; } else { nx1 = 1; // need to have something so this will do as good as anything ny1 = 0; } dist2 = Math.sqrt(xx * xx + yy * yy); if (dist2 &gt; 0) { nx2 = xx / dist2; ny2 = yy / dist2; } else { nx2 = 1; ny2 = 0; } return Math.acos(nx1 * nx2 + ny1 * ny2 ); // dot product } let p1 = points[0]; let endP = points[points.length-1]; let i = 0; // start from second poitn if line not closed let closed = false; let len = Math.hypot(p1.x- endP.x, p1.y-endP.y); if(len &lt; Math.SQRT2){ // end points are the same. Join them in coordinate space endP = p1; i = 0; // start from first point if line closed p1 = points[points.length-2]; closed = true; } newPoints.push([points[i].x,points[i].y]) for(; i &lt; points.length-1; i++){ let p2 = points[i]; let p3 = points[i + 1]; let angle = Math.abs(dot(p2.x - p1.x, p2.y - p1.y, p3.x - p2.x, p3.y - p2.y)); if(dist1 !== 0){ // dist1 and dist2 come from dot function if( angle &lt; cornerThres){ // bend it if angle between lines is small if(match){ dist1 = Math.min(dist1,dist2); dist2 = dist1; } // use the two normalized vectors along the lines to create the tangent vector let x = (nx1 + nx2) / 2; let y = (ny1 + ny2) / 2; len = Math.sqrt(x * x + y * y); // normalise the tangent if(len === 0){ newPoints.push([p2.x,p2.y]); } else { x /= len; y /= len; if(newPoints.length &gt; 0){ var np = newPoints[newPoints.length-1]; np.push(p2.x-x*dist1*0.25); np.push(p2.y-y*dist1*0.25); } newPoints.push([ // create the new point with the new bezier control points. p2.x, p2.y, p2.x+x*dist2*0.25, p2.y+y*dist2*0.25 ]); } } else { newPoints.push([p2.x,p2.y]); } } p1 = p2; } if(closed){ // if closed then copy first point to last. p1 = []; for(i = 0; i &lt; newPoints[0].length; i++){ p1.push(newPoints[0][i]); } newPoints.push(p1); }else{ newPoints.push([points[points.length-1].x,points[points.length-1].y]); } return newPoints; } /** * Converts a smoothed polyline into an SVG path. * @param {Array&lt;BezierPoint&gt;} smoothed The smoothed polyline. * @returns {Array&lt;String&gt;} The SVG path. */ function smoothToPath(smoothed) { let p = smoothed[0]; let d = [`M${p[0].toFixed(1)} ${p[1].toFixed(1)}`]; let p1; for(let i = 0; i &lt; smoothed.length-1; i++) { p = smoothed[i]; p1 = smoothed[i+1]; if(p.length == 2) d.push(`l${(p1[0]-p[0]).toFixed(1)} ${(p1[1]-p[1]).toFixed(1)}`) else if(p.length == 4) d.push(`q${(p[2]-p[0]).toFixed(1)} ${(p[3]-p[1]).toFixed(1)} ${(p1[0]-p[0]).toFixed(1)} ${(p1[1]-p[1]).toFixed(1)}`) else d.push(`c${(p[2]-p[0]).toFixed(1)} ${(p[3]-p[1]).toFixed(1)} ${(p[4]-p[0]).toFixed(1)} ${(p[5]-p[1]).toFixed(1)} ${(p1[0]-p[0]).toFixed(1)} ${(p1[1]-p[1]).toFixed(1)}`); } return d.join(' '); } export { simplify, smooth, smoothToPath } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"BoundingBox.js.html":{"id":"BoundingBox.js.html","title":"Source: BoundingBox.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: BoundingBox.js /** * Represents an axis-aligned rectangular bounding box that can be wrapped tightly around geometric elements. * The box is defined by two opposite vertices (low and high corners) and provides a comprehensive set of * utility methods for manipulating and analyzing bounding boxes. */ class BoundingBox { /** * Creates a new BoundingBox instance. * @param {Object} [options] - Configuration options for the bounding box * @param {number} [options.xLow=1e20] - X coordinate of the lower corner * @param {number} [options.yLow=1e20] - Y coordinate of the lower corner * @param {number} [options.xHigh=-1e20] - X coordinate of the upper corner * @param {number} [options.yHigh=-1e20] - Y coordinate of the upper corner */ constructor(options) { Object.assign(this, { xLow: 1e20, yLow: 1e20, xHigh: -1e20, yHigh: -1e20 }); Object.assign(this, options); } /** * Initializes the bounding box from an array of coordinates. * @param {number[]} x - Array containing coordinates in order [xLow, yLow, xHigh, yHigh] */ fromArray(x) { this.xLow = x[0]; this.yLow = x[1]; this.xHigh = x[2]; this.yHigh = x[3]; } /** * Resets the bounding box to an empty state by setting coordinates to extreme values. */ toEmpty() { this.xLow = 1e20; this.yLow = 1e20; this.xHigh = -1e20; this.yHigh = -1e20; } /** * Checks if the bounding box is empty (has no valid area). * A box is considered empty if its low corner coordinates are greater than its high corner coordinates. * @returns {boolean} True if the box is empty, false otherwise */ isEmpty() { return this.xLow &gt; this.xHigh || this.yLow &gt; this.yHigh; } /** * Converts the bounding box coordinates to an array. * @returns {number[]} Array of coordinates in order [xLow, yLow, xHigh, yHigh] */ toArray() { return [this.xLow, this.yLow, this.xHigh, this.yHigh]; } /** * Creates a space-separated string representation of the bounding box coordinates. * @returns {string} String in format \"xLow yLow xHigh yHigh\" */ toString() { return this.xLow.toString() + \" \" + this.yLow.toString() + \" \" + this.xHigh.toString() + \" \" + this.yHigh.toString(); } /** * Enlarges this bounding box to include another bounding box. * If this box is empty, it will adopt the dimensions of the input box. * If the input box is null, no changes are made. * @param {BoundingBox|null} box - The bounding box to merge with this one */ mergeBox(box) { if (box == null) return; if (this.isEmpty()) Object.assign(this, box); else { this.xLow = Math.min(this.xLow, box.xLow); this.yLow = Math.min(this.yLow, box.yLow); this.xHigh = Math.max(this.xHigh, box.xHigh); this.yHigh = Math.max(this.yHigh, box.yHigh); } } /** * Enlarges this bounding box to include a point. * @param {{x: number, y: number}} p - The point to include in the bounding box */ mergePoint(p) { this.xLow = Math.min(this.xLow, p.x); this.yLow = Math.min(this.yLow, p.y); this.xHigh = Math.max(this.xHigh, p.x); this.yHigh = Math.max(this.yHigh, p.y); } /** * Moves the bounding box by the specified displacement. * @param {number} dx - Displacement along the x-axis * @param {number} dy - Displacement along the y-axis */ shift(dx, dy) { this.xLow += dx; this.yLow += dy; this.xHigh += dx; this.yHigh += dy; } /** * Quantizes the bounding box coordinates by dividing by a specified value and rounding down. * This creates a grid-aligned bounding box. * @param {number} side - The value to divide coordinates by */ quantize(side) { this.xLow = Math.floor(this.xLow / side); this.yLow = Math.floor(this.yLow / side); this.xHigh = Math.floor((this.xHigh - 1) / side) + 1; this.yHigh = Math.floor((this.yHigh - 1) / side) + 1; } /** * Calculates the width of the bounding box. * @returns {number} The difference between xHigh and xLow */ width() { return this.xHigh - this.xLow; } /** * Calculates the height of the bounding box. * @returns {number} The difference between yHigh and yLow */ height() { return this.yHigh - this.yLow; } /** * Calculates the center point of the bounding box. * @returns {{x: number, y: number}} The coordinates of the center point */ center() { return { x: (this.xLow + this.xHigh) / 2, y: (this.yLow + this.yHigh) / 2 }; } /** * Gets the coordinates of a specific corner of the bounding box. * @param {number} i - Corner index (0: bottom-left, 1: bottom-right, 2: top-left, 3: top-right) * @returns {{x: number, y: number}} The coordinates of the specified corner */ corner(i) { // To avoid the switch let v = this.toArray(); return { x: v[0 + (i &amp; 0x1) &lt;&lt; 1], y: v[1 + (i &amp; 0x2)] }; } /** * Checks if this bounding box intersects with another bounding box. * @param {BoundingBox} box - The other bounding box to check intersection with * @returns {boolean} True if the boxes intersect, false otherwise */ intersects(box) { return xLow &lt;= box.xHigh &amp;&amp; xHigh &gt;= box.xLow &amp;&amp; yLow &lt;= box.yHigh &amp;&amp; yHigh &gt;= box.yLow; } /** * Prints the bounding box coordinates to the console in a formatted string. * Output format: \"BOX=xLow, yLow, xHigh, yHigh\" with values rounded to 2 decimal places */ print() { console.log(\"BOX=\" + this.xLow.toFixed(2) + \", \" + this.yLow.toFixed(2) + \", \" + this.xHigh.toFixed(2) + \", \" + this.yHigh.toFixed(2)) } } export { BoundingBox } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"Camera.js.html":{"id":"Camera.js.html","title":"Source: Camera.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: Camera.js import { Transform } from './Transform.js' import { BoundingBox } from './BoundingBox.js' import { addSignals } from './Signals.js' /** * Defines a rectangular viewing region inside a canvas area. * @typedef {Object} Viewport * @property {number} x - X-coordinate of the lower-left corner * @property {number} y - Y-coordinate of the lower-left corner * @property {number} dx - Width of the viewport * @property {number} dy - Height of the viewport * @property {number} w - Total canvas width * @property {number} h - Total canvas height */ /** * Camera class that manages viewport parameters and camera transformations. * Acts as a container for parameters needed to define the viewport and camera position, * supporting smooth animations between positions using source and target transforms. * * The camera maintains two Transform objects: * - source: represents current position * - target: represents destination position * * Animation between positions is handled automatically by the OpenLIME system * unless manually interrupted by user input. */ class Camera { /** * Creates a new Camera instance. * @param {Object} [options] - Configuration options * @param {boolean} [options.bounded=true] - Whether to limit camera translation to scene boundaries * @param {number} [options.maxFixedZoom=2] - Maximum allowed pixel size * @param {number} [options.minScreenFraction=1] - Minimum portion of screen to show when zoomed in * @param {Transform} [options.target] - Initial target transform * @fires Camera#update */ constructor(options) { Object.assign(this, { viewport: null, bounded: true, minScreenFraction: 1, maxFixedZoom: 2, maxZoom: 2, minZoom: 1, boundingBox: new BoundingBox, }); Object.assign(this, options); this.target = new Transform(this.target); this.source = this.target.copy(); this.easing = 'linear'; } /** * Creates a deep copy of the camera instance. * @returns {Camera} A new Camera instance with copied properties */ copy() { let camera = new Camera(); Object.assign(camera, this); return camera; } /** * Updates the viewport while maintaining the camera position as close as possible to the previous one. * @param {Viewport} view - The new viewport in CSS coordinates */ setViewport(view) { if (this.viewport) { let rz = Math.sqrt((view.w / this.viewport.w) * (view.h / this.viewport.h)); this.viewport = view; const { x, y, z, a } = this.target; this.setPosition(0, x, y, z * rz, a); } else { this.viewport = view; } } /** * Returns the current viewport in device coordinates (accounting for device pixel ratio). * @returns {Viewport} The current viewport scaled for device pixels */ glViewport() { let d = window.devicePixelRatio; let viewport = {}; for (let i in this.viewport) viewport[i] = this.viewport[i] * d; return viewport; } /** * Converts canvas coordinates to scene coordinates using the specified transform. * @param {number} x - X coordinate relative to canvas * @param {number} y - Y coordinate relative to canvas * @param {Transform} transform - Transform to use for conversion * @returns {{x: number, y: number}} Coordinates in scene space relative to viewport center */ mapToScene(x, y, transform) { //compute coords relative to the center of the viewport. x -= this.viewport.w / 2; y -= this.viewport.h / 2; x -= transform.x; y -= transform.y; x /= transform.z; y /= transform.z; let r = Transform.rotate(x, y, -transform.a); return { x: r.x, y: r.y }; } /** * Converts scene coordinates to canvas coordinates using the specified transform. * @param {number} x - X coordinate in scene space * @param {number} y - Y coordinate in scene space * @param {Transform} transform - Transform to use for conversion * @returns {{x: number, y: number}} Coordinates in canvas space */ sceneToCanvas(x, y, transform) { let r = Transform.rotate(x, y, transform.a); x = r.x * transform.z + transform.x - this.viewport.x + this.viewport.w / 2; y = r.y * transform.z - transform.y + this.viewport.y + this.viewport.h / 2; return { x: x, y: y }; } /** * Sets the camera target parameters for a new position. * @param {number} dt - Animation duration in milliseconds * @param {number} x - X component of translation * @param {number} y - Y component of translation * @param {number} z - Zoom factor * @param {number} a - Rotation angle in degrees * @param {string} [easing] - Easing function name for animation * @fires Camera#update */ setPosition(dt, x, y, z, a, easing) { /** * The event is fired when the camera target is changed. * @event Camera#update */ // Discard events due to cursor outside window //if (Math.abs(x) &gt; 64000 || Math.abs(y) &gt; 64000) return; this.easing = easing || this.easing; if (this.bounded) { const sw = this.viewport.dx; const sh = this.viewport.dy; // let xform = new Transform({ x: x, y: y, z: z, a: a, t: 0 }); let tbox = xform.transformBox(this.boundingBox); const bw = tbox.width(); const bh = tbox.height(); // Screen space offset between image boundary and screen boundary // Do not let transform offet go beyond this limit. // if (scaled-image-size &lt; screen) it remains fully contained // else the scaled-image boundary closest to the screen cannot enter the screen. const dx = Math.abs(bw - sw) / 2;// + this.boundingBox.center().x- tbox.center().x; x = Math.min(Math.max(-dx, x), dx); const dy = Math.abs(bh - sh) / 2;// + this.boundingBox.center().y - tbox.center().y; y = Math.min(Math.max(-dy, y), dy); } let now = performance.now(); this.source = this.getCurrentTransform(now); //the angle needs to be interpolated in the shortest direction. //target it is kept between 0 and +360, source is kept relative. a = Transform.normalizeAngle(a); this.source.a = Transform.normalizeAngle(this.source.a); if (a - this.source.a &gt; 180) this.source.a += 360; if (this.source.a - a &gt; 180) this.source.a -= 360; Object.assign(this.target, { x: x, y: y, z: z, a: a, t: now + dt }); console.assert(!isNaN(this.target.x)); this.emit('update'); } /** * Pans the camera by a specified amount in canvas coordinates. * @param {number} dt - Animation duration in milliseconds * @param {number} dx - Horizontal displacement * @param {number} dy - Vertical displacement */ pan(dt, dx, dy) { let now = performance.now(); let m = this.getCurrentTransform(now); m.x += dx; m.y += dy; this.setPosition(dt, m.x, m.y, m.z, m.a); } /** * Zooms the camera to a specific point in canvas coordinates. * @param {number} dt - Animation duration in milliseconds * @param {number} z - Target zoom level * @param {number} [x=0] - X coordinate to zoom towards * @param {number} [y=0] - Y coordinate to zoom towards */ zoom(dt, z, x, y) { if (!x) x = 0; if (!y) y = 0; let now = performance.now(); let m = this.getCurrentTransform(now); if (this.bounded) { z = Math.min(Math.max(z, this.minZoom), this.maxZoom); } //x, an y should be the center of the zoom. m.x += (m.x + x) * (m.z - z) / m.z; m.y += (m.y + y) * (m.z - z) / m.z; this.setPosition(dt, m.x, m.y, z, m.a); } /** * Rotates the camera around its z-axis. * @param {number} dt - Animation duration in milliseconds * @param {number} a - Rotation angle in degrees */ rotate(dt, a) { let now = performance.now(); let m = this.getCurrentTransform(now); this.setPosition(dt, m.x, m.y, m.z, this.target.a + a); } /** * Applies a relative zoom change at a specific point. * @param {number} dt - Animation duration in milliseconds * @param {number} dz - Relative zoom change factor * @param {number} [x=0] - X coordinate to zoom around * @param {number} [y=0] - Y coordinate to zoom around */ deltaZoom(dt, dz, x = 0, y = 0) { let now = performance.now(); let m = this.getCurrentTransform(now); //rapid firing wheel event need to compound. //but the x, y in input are relative to the current transform. dz *= this.target.z / m.z; if (this.bounded) { if (m.z * dz &lt; this.minZoom) dz = this.minZoom / m.z; if (m.z * dz &gt; this.maxZoom) dz = this.maxZoom / m.z; } //transform is x*z + dx = X , there x is positrion in scene, X on screen //we want x*z*dz + dx1 = X (stay put, we need to find dx1. let r = Transform.rotate(x, y, m.a); m.x += r.x * m.z * (1 - dz); m.y += r.y * m.z * (1 - dz); this.setPosition(dt, m.x, m.y, m.z * dz, m.a); } /** * Gets the camera transform at a specific time. * @param {number} time - Current time in milliseconds (from performance.now()) * @returns {Transform} The interpolated transform at the specified time */ getCurrentTransform(time) { if (time &gt; this.target.t) this.easing = 'linear'; return Transform.interpolate(this.source, this.target, time, this.easing); } /** * Gets the camera transform at a specific time in device coordinates. * @param {number} time - Current time in milliseconds (from performance.now()) * @returns {Transform} The interpolated transform scaled for device pixels */ getGlCurrentTransform(time) { const pos = this.getCurrentTransform(time); pos.x *= window.devicePixelRatio; pos.y *= window.devicePixelRatio; pos.z *= window.devicePixelRatio; return pos; } /** * Adjusts the camera to frame a specified bounding box. * @param {BoundingBox} box - The box to frame in canvas coordinates * @param {number} [dt=0] - Animation duration in milliseconds */ fit(box, dt) { if (box.isEmpty()) return; if (!dt) dt = 0; //find if we align the topbottom borders or the leftright border. let w = this.viewport.dx; let h = this.viewport.dy; let bw = box.width(); let bh = box.height(); let c = box.center(); let z = Math.min(w / bw, h / bh); this.setPosition(dt, -c.x * z, -c.y * z, z, 0); } /** * Resets the camera to show the entire scene. * @param {number} dt - Animation duration in milliseconds */ fitCameraBox(dt) { this.fit(this.boundingBox, dt); } /** * Updates the camera's boundary constraints and zoom limits. * @private * @param {BoundingBox} box - New bounding box for constraints * @param {number} minScale - Minimum scale factor */ updateBounds(box, minScale) { this.boundingBox = box; const w = this.viewport.dx; const h = this.viewport.dy; let bw = this.boundingBox.width(); let bh = this.boundingBox.height(); this.minZoom = Math.min(w / bw, h / bh) * this.minScreenFraction; this.maxZoom = minScale &gt; 0 ? this.maxFixedZoom / minScale : this.maxFixedZoom; this.maxZoom = Math.max(this.minZoom, this.maxZoom); } } addSignals(Camera, 'update'); export { Camera } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"Shader.js.html":{"id":"Shader.js.html","title":"Source: Shader.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: Shader.js import { addSignals } from './Signals.js' import { Util } from './Util.js' /** * A reference to a 2D texture. * @typedef {Object} Shader#Sampler * @property {number} id A sampler unique identifier. * @property {string} name The sampler name (the texture reference name in the shader program). * @property {string} label used for menu * @property {array} samplers array of rasters {id:, type: } color, normals, etc. * *samplers*: array of rasters {id:, type: } color, normals, etc. * bind: false will not used in preparegl * load: false will not be loaded from raster * both options are used in neural where the coefficients are loaded, but used by tf * @property {array} uniforms: * type = &lt;vec4|vec3|vec2|float|int&gt;, * needsUpdate controls when updated in gl, * size is unused, * value is and array or a float, * we also want to support interpolation: source (value is the target), start, end are the timing (same as camera interpolation) */ /** * The `Shader` class allows shader programs to be linked and used. * This class supports shader programs written in the OpenGL/ES Shading Language (GLSL/ES) with 2.0 amd 3.0 specifications. * * The `Shader` class keeps the programmer away from the details of compiling and linking vertex and fragment shaders. * The following example creates a fragment shader program using the supplied source code. Once compiled and linked, * the shader program is activated in the current WebGLContext. * ``` * const shader = new OpenLIME.Shader({ * 'label': 'Rgb', * 'samplers': [{ id: 0, name: 'kd' }] * }); * // The fragment shader script * shader.fragShaderSrc = function (gl) { * let gl2 = !(gl instanceof WebGLRenderingContext); * let str = `${gl2 ? '#version 300 es' : ''} * precision highp float; * precision highp int; * * uniform sampler2D kd; * uniform float u_colorFactor; * ... * * return str; * }; * // Declares a uniform. * shader.uniforms = { * u_colorFactor: { type: 'float', needsUpdate: true, size: 1, value: 0.0 }, * }; * // Adds the shader to the Layer and set it as the current one. * this.shaders['bw'] = shader; * this.setShader('bw'); * ``` */ class Shader { /** * Instantiates a Shader class. An object literal with Shader `options` can be specified. * @param {Object} [options] An object literal describing the shader content. * @param {Array&lt;Shader#Sampler&gt;} options.samplers An array of pointers to 2D textures. * @param {Array&lt;string&gt;} options.modes An optional array of labels that identify different shader behaviors. */ constructor(options) { Object.assign(this, { version: 100, //check for webglversion. debug: false, samplers: [], uniforms: {}, label: null, program: null, //webgl program modes: [], mode: null, // The current mode needsUpdate: true, tileSize: [0, 0] }); addSignals(Shader, 'update'); Object.assign(this, options); this.filters = []; } clearFilters() { this.filters = []; this.needsUpdate = true; this.emit('update'); } addFilter(f) { f.shader = this; this.filters.push(f); this.needsUpdate = true; f.needsUpdate = true; this.emit('update'); } removeFilter(name) { this.filters = this.filters.filter((v) =&gt; { return v.name != name; }); this.needsUpdate = true; this.emit('update'); } /** * Sets the current mode of the shader * @param {string} mode The mode identifier */ setMode(mode) { if (this.modes.indexOf(mode) == -1) throw Error(\"Unknown mode: \" + mode); this.mode = mode; this.needsUpdate = true; } /** @ignore */ restoreWebGL(gl) { this.createProgram(gl); } setTileSize(sz) { this.tileSize = sz; this.needsUpdate = true; } /** * Sets the value of a uniform variable. * @param {string} name The name of the uniform variable. * @param {*} value The value to assign. */ setUniform(name, value) { /** * The event is fired when a uniform shader variable is changed. * @event Camera#update */ let u = this.getUniform(name); if (!u) throw new Error(`Unknown '${name}'. It is not a registered uniform.`); if ((typeof (value) == \"number\" || typeof (value) == \"boolean\") &amp;&amp; u.value == value) return; if (Array.isArray(value) &amp;&amp; Array.isArray(u.value) &amp;&amp; value.length == u.value.length) { let equal = true; for (let i = 0; i &lt; value.length; i++) if (value[i] != u.value[i]) { equal = false; break; } if (equal) return; } u.value = value; u.needsUpdate = true; this.emit('update'); } completeFragShaderSrc(gl) { let gl2 = !(gl instanceof WebGLRenderingContext); let src = `${gl2 ? '#version 300 es' : ''}\\n`; src += `precision highp float;\\n`; src += `precision highp int;\\n`; src += `const vec2 tileSize = vec2(${this.tileSize[0]}.0, ${this.tileSize[1]}.0);\\n`; src += this.fragShaderSrc() + '\\n'; for (let f of this.filters) { src += ` // Filter: ${f.name}\\n`; src += f.fragModeSrc() + '\\n'; src += f.fragSamplerSrc() + '\\n'; src += f.fragUniformSrc() + '\\n'; src += f.fragDataSrc() + '\\n\\n'; } src += ` ${gl2 ? 'out' : ''} vec4 color; void main() { color = data(); `; for (let f of this.filters) { src += `color=${f.functionName()}(color);\\n` } src += `${gl2 ? '' : 'gl_FragColor = color;'} }`; return src; } /** @ignore */ createProgram(gl) { let vert = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vert, this.vertShaderSrc(gl)); gl.compileShader(vert); let compiled = gl.getShaderParameter(vert, gl.COMPILE_STATUS); if (!compiled) { Util.printSrcCode(this.vertShaderSrc(gl)) console.log(gl.getShaderInfoLog(vert)); throw Error(\"Failed vertex shader compilation: see console log and ask for support.\"); } else if (this.debug) { Util.printSrcCode(this.vertShaderSrc(gl)) } let frag = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(frag, this.completeFragShaderSrc(gl)); gl.compileShader(frag); if (this.program) gl.deleteProgram(this.program); let program = gl.createProgram(); gl.getShaderParameter(frag, gl.COMPILE_STATUS); compiled = gl.getShaderParameter(frag, gl.COMPILE_STATUS); if (!compiled) { Util.printSrcCode(this.completeFragShaderSrc(gl)); console.log(gl.getShaderInfoLog(frag)); throw Error(\"Failed fragment shader compilation: see console log and ask for support.\"); } else if (this.debug) { Util.printSrcCode(this.completeFragShaderSrc(gl)); } gl.attachShader(program, vert); gl.attachShader(program, frag); gl.linkProgram(program); if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { var info = gl.getProgramInfoLog(program); throw new Error('Could not compile WebGL program. \\n\\n' + info); } //sampler units; for (let sampler of this.samplers) sampler.location = gl.getUniformLocation(program, sampler.name); // filter samplers for (let f of this.filters) for (let sampler of f.samplers) sampler.location = gl.getUniformLocation(program, sampler.name); this.coordattrib = gl.getAttribLocation(program, \"a_position\"); gl.vertexAttribPointer(this.coordattrib, 3, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(this.coordattrib); this.texattrib = gl.getAttribLocation(program, \"a_texcoord\"); gl.vertexAttribPointer(this.texattrib, 2, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(this.texattrib); this.matrixlocation = gl.getUniformLocation(program, \"u_matrix\"); this.program = program; this.needsUpdate = false; for (let uniform of Object.values(this.allUniforms())) { uniform.location = null; uniform.needsUpdate = true; } for (let f of this.filters) f.prepare(gl); } getUniform(name) { let u = this.uniforms[name]; if (u) return u; for (let f of this.filters) { u = f.uniforms[name]; if (u) return u; } return u; } allUniforms() { const result = this.uniforms; for (let f of this.filters) { Object.assign(result, f.uniforms); } return result; } /** @ignore */ updateUniforms(gl) { for (const [name, uniform] of Object.entries(this.allUniforms())) { if (!uniform.location) uniform.location = gl.getUniformLocation(this.program, name); if (!uniform.location) //uniform not used in program continue; if (uniform.needsUpdate) { let value = uniform.value; switch (uniform.type) { case 'vec4' : gl.uniform4fv(uniform.location, value); break; case 'vec3' : gl.uniform3fv(uniform.location, value); break; case 'vec2' : gl.uniform2fv(uniform.location, value); break; case 'float': gl.uniform1f(uniform.location, value); break; case 'int' : gl.uniform1i(uniform.location, value); break; case 'bool' : gl.uniform1i(uniform.location, value); break; case 'mat3' : gl.uniformMatrix3fv(uniform.location, false, value); break; case 'mat4' : gl.uniformMatrix4fv(uniform.location, false, value); break; default: throw Error('Unknown uniform type: ' + u.type); } uniform.needsUpdate = false; } } } /** * Gets the vertex shader script. By default it only applies the view matrix and passes the texture coordinates to the fragment shader. * @param {*} gl Thegl context. * @returns {string} The vertex shader script. */ vertShaderSrc(gl) { let gl2 = !(gl instanceof WebGLRenderingContext); return `${gl2 ? '#version 300 es' : ''} precision highp float; precision highp int; uniform mat4 u_matrix; ${gl2 ? 'in' : 'attribute'} vec4 a_position; ${gl2 ? 'in' : 'attribute'} vec2 a_texcoord; ${gl2 ? 'out' : 'varying'} vec2 v_texcoord; void main() { gl_Position = u_matrix * a_position; v_texcoord = a_texcoord; } `; } /** * Gets the fragment shader script. This is a virtual function and MUST be redefined in derived classes. * @param {*} gl Thegl context. * @returns {string} The vertex shader script. */ fragShaderSrc(gl) { let gl2 = !(gl instanceof WebGLRenderingContext); let str = ` uniform sampler2D kd; ${gl2? 'in' : 'varying'} vec2 v_texcoord; vec4 data() { return texture${gl2?'':'2D'}(kd, v_texcoord); } `; return str; } } export { Shader } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"Canvas.js.html":{"id":"Canvas.js.html","title":"Source: Canvas.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: Canvas.js import { Util } from './Util' import { Camera } from './Camera' import { Layer } from './Layer' import { Cache } from './Cache' import { addSignals } from './Signals' //// HELPERS window.structuredClone = typeof (structuredClone) == \"function\" ? structuredClone : function (value) { return JSON.parse(JSON.stringify(value)); }; /** * Canvas class that manages WebGL context, layers, and scene rendering. * Handles layer management, WebGL context creation/restoration, and render timing. */ class Canvas { /** * Creates a new Canvas instance with WebGL context and overlay support. * @param {HTMLCanvasElement|string} canvas - Canvas DOM element or selector * @param {HTMLElement|string} overlay - Overlay DOM element or selector for decorations (annotations, glyphs) * @param {Camera} camera - Scene camera instance * @param {Object} [options] - Configuration options * @param {Object} [options.layers] - Layer configurations mapping layer IDs to Layer instances * @param {boolean} [options.preserveDrawingBuffer=false] - Whether to preserve WebGL buffers until manually cleared * @param {number} [options.targetfps=30] - Target frames per second for rendering * @fires Canvas#update * @fires Canvas#updateSize * @fires Canvas#ready */ constructor(canvas, overlay, camera, options) { Object.assign(this, { canvasElement: null, preserveDrawingBuffer: false, gl: null, overlayElement: null, camera: camera, layers: {}, targetfps: 30, fps: 0, timing: [16], //records last 30 frames time from request to next draw, rolling, primed to avoid /0 timingLength: 5, //max number of timings. overBudget: 0, //fraction of frames that took too long to render. signals: { 'update': [], 'updateSize': [], 'ready': [] } }); Object.assign(this, options); this.init(canvas, overlay); for (let id in this.layers) this.addLayer(id, new Layer(this.layers[id])); this.camera.addEvent('update', () =&gt; this.emit('update')); } /** * Records render timing information and updates FPS statistics. * @param {number} elapsed - Time elapsed since last frame in milliseconds * @private */ addRenderTiming(elapsed) { this.timing.push(elapsed); while (this.timing.length &gt; this.timingLength) this.timing.shift(); this.overBudget = this.timing.filter(t =&gt; t &gt; 1000 / this.targetfps).length / this.timingLength; this.fps = 1000 / (this.timing.reduce((sum, a) =&gt; sum + a, 0) / this.timing.length); } /** * Initializes WebGL context and sets up event listeners. * @param {HTMLCanvasElement|string} canvas - Canvas element or selector * @param {HTMLElement|string} overlay - Overlay element or selector * @throws {Error} If canvas or overlay elements cannot be found or initialized * @private */ init(canvas, overlay) { if (!canvas) throw \"Missing element parameter\" if (typeof (canvas) == 'string') { canvas = document.querySelector(canvas); if (!canvas) throw \"Could not find dom element.\"; } if (!overlay) throw \"Missing element parameter\" if (typeof (overlay) == 'string') { overlay = document.querySelector(overlay); if (!overlay) throw \"Could not find dom element.\"; } if (!canvas.tagName) throw \"Element is not a DOM element\" if (canvas.tagName != \"CANVAS\") throw \"Element is not a canvas element\"; this.canvasElement = canvas; this.overlayElement = overlay; /* test context loss */ /* canvas = WebGLDebugUtils.makeLostContextSimulatingCanvas(canvas); canvas.loseContextInNCalls(1000); */ let glopt = { antialias: false, depth: false, preserveDrawingBuffer: this.preserveDrawingBuffer }; this.gl = this.gl || canvas.getContext(\"webgl2\", glopt) || canvas.getContext(\"webgl\", glopt) || canvas.getContext(\"experimental-webgl\", glopt); if (!this.gl) throw \"Could not create a WebGL context\"; canvas.addEventListener(\"webglcontextlost\", (event) =&gt; { console.log(\"Context lost.\"); event.preventDefault(); }, false); canvas.addEventListener(\"webglcontextrestored\", () =&gt; { this.restoreWebGL(); }, false); document.addEventListener(\"visibilitychange\", (event) =&gt; { if (this.gl.isContextLost()) { this.restoreWebGL(); } }); } /** * Updates the state of the canvas and its components. * @param {Object} state - State object containing updates * @param {Object} [state.camera] - Camera state updates * @param {Object} [state.layers] - Layer state updates * @param {number} dt - Animation duration in milliseconds * @param {string} [easing='linear'] - Easing function for animations */ setState(state, dt, easing = 'linear') { if ('camera' in state) { const m = state.camera; this.camera.setPosition(dt, m.x, m.y, m.z, m.a, easing); } if ('layers' in state) for (const [k, layerState] of Object.entries(state.layers)) if (k in this.layers) { const layer = this.layers[k]; layer.setState(layerState, dt, easing); } } /** * Retrieves current state of the canvas and its components. * @param {Object} [stateMask=null] - Optional mask to filter returned state properties * @returns {Object} Current state object */ getState(stateMask = null) { let state = {}; if (!stateMask || stateMask.camera) { let now = performance.now(); let m = this.camera.getCurrentTransform(now); state.camera = { 'x': m.x, 'y': m.y, 'z': m.z, 'a': m.a }; } state.layers = {}; for (let layer of Object.values(this.layers)) { const layerMask = window.structuredClone(stateMask); if (stateMask &amp;&amp; stateMask.layers) Object.assign(layerMask, stateMask.layers[layer.id]); state.layers[layer.id] = layer.getState(layerMask); } return state; } /** * Restores WebGL context after loss. * Reinitializes shaders and textures for all layers. * @private */ restoreWebGL() { let glopt = { antialias: false, depth: false, preserveDrawingBuffer: this.preserveDrawingBuffer }; this.gl = this.gl || this.canvasElement.getContext(\"webgl2\", glopt) || this.canvasElement.getContext(\"webgl\", glopt) || this.canvasElement.getContext(\"experimental-webgl\", glopt); for (let layer of Object.values(this.layers)) { layer.gl = this.gl; layer.clear(); if (layer.shader) layer.shader.restoreWebGL(this.gl); } this.prefetch(); this.emit('update'); } /** * Adds a layer to the canvas. * @param {string} id - Unique identifier for the layer * @param {Layer} layer - Layer instance to add * @fires Canvas#update * @fires Canvas#ready * @throws {Error} If layer ID already exists */ addLayer(id, layer) { console.assert(!(id in this.layers), \"Duplicated layer id\"); layer.id = id; layer.addEvent('ready', () =&gt; { if (Object.values(this.layers).every(l =&gt; l.status == 'ready')) this.emit('ready'); this.prefetch(); }); layer.addEvent('update', () =&gt; { this.emit('update'); }); layer.addEvent('updateSize', () =&gt; { this.updateSize(); }); layer.gl = this.gl; layer.canvas = this; layer.overlayElement = this.overlayElement; this.layers[id] = layer; this.prefetch(); } /** * Removes a layer from the canvas. * @param {Layer} layer - Layer instance to remove * @example * const layer = new Layer(options); * canvas.addLayer('map', layer); * // ... later ... * canvas.removeLayer(layer); */ removeLayer(layer) { layer.clear(); //order is important. delete this.layers[layer.id]; delete Cache.layers[layer]; this.prefetch(); } /** * Updates canvas size and camera bounds based on layers. * @fires Canvas#updateSize * @private */ updateSize() { const discardHidden = false; let sceneBBox = Layer.computeLayersBBox(this.layers, discardHidden); let minScale = Layer.computeLayersMinScale(this.layers, discardHidden); if (sceneBBox != null &amp;&amp; this.camera.viewport) this.camera.updateBounds(sceneBBox, minScale); this.emit('updateSize'); } /** * Renders a frame at the specified time. * @param {number} time - Current time in milliseconds * @returns {boolean} True if all animations are complete * @private */ draw(time) { let gl = this.gl; let view = this.camera.glViewport(); gl.viewport(view.x, view.y, view.dx, view.dy); var b = [0, 0, 0, 0]; gl.clearColor(b[0], b[1], b[2], b[3], b[4]); gl.clear(gl.COLOR_BUFFER_BIT); gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA); gl.enable(gl.BLEND); //TODO: getCurren shoudl redurn {position, done} let pos = this.camera.getGlCurrentTransform(time); //todo we could actually prefetch toward the future a little bit this.prefetch(pos); //pos layers using zindex. let ordered = Object.values(this.layers).sort((a, b) =&gt; a.zindex - b.zindex); //NOTICE: camera(pos) must be relative to the WHOLE canvas let done = true; for (let layer of ordered) { if (layer.visible) done = layer.draw(pos, view) &amp;&amp; done; } //TODO not really an elegant solution to tell if we have reached the target, the check should be in getCurrentTransform. return done &amp;&amp; pos.t &gt;= this.camera.target.t; } /** * Schedules tile downloads based on current view. * @param {Object} [transform] - Optional transform override, defaults to current camera transform * @private */ prefetch(transform) { if (!transform) transform = this.camera.getGlCurrentTransform(performance.now()); for (let id in this.layers) { let layer = this.layers[id]; //console.log(layer); //console.log(layer.layout.status); if (layer.visible &amp;&amp; layer.status == 'ready') { layer.prefetch(transform, this.camera.glViewport()); } } } } /** * Fired when canvas content is updated (layer changes, camera moves). * @event Canvas#update */ /** * Fired when canvas or layout size changes. * @event Canvas#updateSize */ /** * Fired when all layers are initialized and ready to display. * @event Canvas#ready */ addSignals(Canvas, 'update', 'updateSize', 'ready'); export { Canvas } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"Colormap.js.html":{"id":"Colormap.js.html","title":"Source: Colormap.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: Colormap.js /** * Represents a cubic spline interpolation for smooth color transitions. * @private */ class Spline { /** * Creates a new Spline instance. * @param {number[]} xs - X coordinates array * @param {number[]} ys - Y coordinates array */ constructor(xs, ys) { this.xs = xs; this.ys = ys; this.ks = this.getNaturalKs(new Float64Array(this.xs.length)); } getNaturalKs(ks) { const n = this.xs.length - 1; const A = Spline.zerosMat(n + 1, n + 2); for (let i = 1; i &lt; n; i++ // rows ) { A[i][i - 1] = 1 / (this.xs[i] - this.xs[i - 1]); A[i][i] = 2 * (1 / (this.xs[i] - this.xs[i - 1]) + 1 / (this.xs[i + 1] - this.xs[i])); A[i][i + 1] = 1 / (this.xs[i + 1] - this.xs[i]); A[i][n + 1] = 3 * ((this.ys[i] - this.ys[i - 1]) / ((this.xs[i] - this.xs[i - 1]) * (this.xs[i] - this.xs[i - 1])) + (this.ys[i + 1] - this.ys[i]) / ((this.xs[i + 1] - this.xs[i]) * (this.xs[i + 1] - this.xs[i]))); } A[0][0] = 2 / (this.xs[1] - this.xs[0]); A[0][1] = 1 / (this.xs[1] - this.xs[0]); A[0][n + 1] = (3 * (this.ys[1] - this.ys[0])) / ((this.xs[1] - this.xs[0]) * (this.xs[1] - this.xs[0])); A[n][n - 1] = 1 / (this.xs[n] - this.xs[n - 1]); A[n][n] = 2 / (this.xs[n] - this.xs[n - 1]); A[n][n + 1] = (3 * (this.ys[n] - this.ys[n - 1])) / ((this.xs[n] - this.xs[n - 1]) * (this.xs[n] - this.xs[n - 1])); return Spline.solve(A, ks); } /** * Finds index of the point before the target value using binary search. * Inspired by https://stackoverflow.com/a/40850313/4417327 * @param {number} target - Value to search for * @returns {number} Index of the point before target * @private */ getIndexBefore(target) { let low = 0; let high = this.xs.length; let mid = 0; while (low &lt; high) { mid = Math.floor((low + high) / 2); if (this.xs[mid] &lt; target &amp;&amp; mid !== low) { low = mid; } else if (this.xs[mid] &gt;= target &amp;&amp; mid !== high) { high = mid; } else { high = low; } } if (low === this.xs.length - 1) { return this.xs.length - 1; } return low + 1; } /** * Calculates interpolated value at given point. * @param {number} x - Point to interpolate at * @returns {number} Interpolated value */ at(x) { let i = this.getIndexBefore(x); const t = (x - this.xs[i - 1]) / (this.xs[i] - this.xs[i - 1]); const a = this.ks[i - 1] * (this.xs[i] - this.xs[i - 1]) - (this.ys[i] - this.ys[i - 1]); const b = -this.ks[i] * (this.xs[i] - this.xs[i - 1]) + (this.ys[i] - this.ys[i - 1]); const q = (1 - t) * this.ys[i - 1] + t * this.ys[i] + t * (1 - t) * (a * (1 - t) + b * t); return q; } // Utilities static solve(A, ks) { const m = A.length; let h = 0; let k = 0; while (h &lt; m &amp;&amp; k &lt;= m) { let i_max = 0; let max = -Infinity; for (let i = h; i &lt; m; i++) { const v = Math.abs(A[i][k]); if (v &gt; max) { i_max = i; max = v; } } if (A[i_max][k] === 0) { k++; } else { Spline.swapRows(A, h, i_max); for (let i = h + 1; i &lt; m; i++) { const f = A[i][k] / A[h][k]; A[i][k] = 0; for (let j = k + 1; j &lt;= m; j++) A[i][j] -= A[h][j] * f; } h++; k++; } } for (let i = m - 1; i &gt;= 0; i-- // rows = columns ) { var v = 0; if (A[i][i]) { v = A[i][m] / A[i][i]; } ks[i] = v; for (let j = i - 1; j &gt;= 0; j-- // rows ) { A[j][m] -= A[j][i] * v; A[j][i] = 0; } } return ks; } static zerosMat(r, c) { const A = []; for (let i = 0; i &lt; r; i++) A.push(new Float64Array(c)); return A; } static swapRows(m, k, l) { let p = m[k]; m[k] = m[l]; m[l] = p; } } /** * Represents a color in RGBA format with values normalized between 0 and 1. */ class Color { /** * Creates a new Color instance. * @param {number|string} r - Red component [0.0, 1.0] or color string ('#RGB', '#RGBA', '#RRGGBB', '#RRGGBBAA', 'rgb()', 'rgba()') * @param {number} [g] - Green component [0.0, 1.0] * @param {number} [b] - Blue component [0.0, 1.0] * @param {number} [a] - Alpha component [0.0, 1.0] * @throws {Error} If string value is not a valid color format */ constructor(r, g = undefined, b = undefined, a = undefined) { if (typeof (r) == 'string') { if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(r)) { let c = r.substring(1).split(''); if (c.length == 3) { c = [c[0], c[0], c[1], c[1], c[2], c[2]]; } c = '0x' + c.join('') + 'FF'; r = Color.normalizedRGBA(c &gt;&gt; 24); g = Color.normalizedRGBA(c &gt;&gt; 16); b = Color.normalizedRGBA(c &gt;&gt; 8); a = Color.normalizedRGBA(c); } else if (/^#([A-Fa-f0-9]{4}){1,2}$/.test(r)) { let c = r.substring(1).split(''); c = '0x' + c.join(''); r = Color.normalizedRGBA(c &gt;&gt; 24); g = Color.normalizedRGBA(c &gt;&gt; 16); b = Color.normalizedRGBA(c &gt;&gt; 8); a = Color.normalizedRGBA(c); } else if (/^rgb\\(/.test(r)) { let c = r.split(\"(\")[1].split(\")\")[0]; c = c.split(','); r = Color.clamp(c[0] / 255); g = Color.clamp(c[1] / 255); b = Color.clamp(c[2] / 255); a = 1.0; } else if (/^rgba\\(/.test(r)) { let c = r.split(\"(\")[1].split(\")\")[0]; c = c.split(','); r = Color.clamp(c[0] / 255); g = Color.clamp(c[1] / 255); b = Color.clamp(c[2] / 255); a = Color.clamp(c[3] / 255); } else { throw Error(\"Value is not a color\"); } } this.r = r; this.g = g; this.b = b; this.a = a; } static clamp = (num, min = 0.0, max = 1.0) =&gt; Math.min(Math.max(num, min), max); static hex(c) { var hex = c.toString(16).toUpperCase(); return hex.length == 1 ? \"0\" + hex : hex; } static normalizedRGBA(c) { return Color.clamp((c &amp; 255) / 255); } static rgbToHex(r, g, b) { const rgb = b | (g &lt;&lt; 8) | (r &lt;&lt; 16); return '#' + ((0x1000000 | rgb).toString(16).substring(1)).toUpperCase(); } static rgbToHexa(r, g, b, a) { return '#' + Color.hex(r) + Color.hex(g) + Color.hex(b) + Color.hex(a); } /** * Gets color components as an array. * @returns {number[]} Array of [r, g, b, a] values */ value() { return [this.r, this.g, this.b, this.a]; } /** * Converts color to RGB values [0, 255]. * @returns {number[]} Array of [r, g, b] values */ toRGB() { const rgb = [this.r * 255, this.g * 255, this.b * 255]; rgb.forEach((e, idx, arr) =&gt; { arr[idx] = Color.clamp(Math.round(e), 0, 255); }); return rgb; } /** * Converts color to hexadecimal string. * @returns {string} Color in '#RRGGBB' format */ toHex() { const rgb = this.toRGB(); return Color.rgbToHex(rgb[0], rgb[1], rgb[2]); } /** * Converts color to hexadecimal string with alpha. * @returns {string} Color in '#RRGGBBAA' format */ toHexa() { const rgba = this.toRGBA(); return Color.rgbToHexa(rgba[0], rgba[1], rgba[2], rgba[3]); } /** * Converts color to RGBA values [0-255]. * @returns {number[]} Array of [r, g, b, a] values */ toRGBA() { const rgba = [this.r * 255, this.g * 255, this.b * 255, this.a * 255]; rgba.forEach((e, idx, arr) =&gt; { arr[idx] = Color.clamp(Math.round(e), 0, 255); }); return rgba; } } /** * Creates a colormap for mapping numerical values to colors. * Supports linear, spline, and bar interpolation between colors. */ class Colormap { /** * Creates a new Colormap instance. * @param {Color[]} [colors=[black, white]] - Array of colors to interpolate between * @param {Object} [options] - Configuration options * @param {number[]} [options.domain=[0,1]] - Domain range for mapping * @param {Color} [options.lowColor] - Color for values below domain (defaults to first color) * @param {Color} [options.highColor] - Color for values above domain (defaults to last color) * @param {string} [options.description=''] - Description of the colormap * @param {('linear'|'spline'|'bar')} [options.type='linear'] - Interpolation type * @throws {Error} If colors/domain format is invalid */ constructor(colors = [new Color(0, 0, 0, 1), new Color(1, 1, 1, 1)], options = '') { options = Object.assign({ domain: [0.0, 1.0], lowColor: null, highColor: null, description: '', type: 'linear' }, options); Object.assign(this, options); const nval = colors.length; if (!this.lowColor) this.lowColor = colors[0]; if (!this.highColor) this.highColor = colors[nval - 1]; const nd = this.domain.length; if (nval &lt; 2 &amp;&amp; nd != 2 &amp;&amp; this.nval != nd &amp;&amp; this.domain[nd - 1] &lt;= this.domain[0]) { throw Error(\"Colormap colors/domain bad format\"); } const delta = (this.domain[nd - 1] - this.domain[0]) / (nval - 1); this.xarr = []; this.rarr = []; this.garr = []; this.barr = []; this.aarr = []; for (let i = 0; i &lt; nval; i++) { if (nd == 2) this.xarr.push(this.domain[0] + i * delta); else this.xarr.push(this.domain[i]); this.rarr.push(colors[i].r); this.garr.push(colors[i].g); this.barr.push(colors[i].b); this.aarr.push(colors[i].a); } this.rspline = new Spline(this.xarr, this.rarr); this.gspline = new Spline(this.xarr, this.garr); this.bspline = new Spline(this.xarr, this.barr); this.aspline = new Spline(this.xarr, this.aarr); } static clamp = (num, min, max) =&gt; Math.min(Math.max(num, min), max); /** * Gets the domain range of the colormap. * @returns {number[]} Array containing [min, max] of domain */ rangeDomain() { return [this.domain[0], this.domain[this.domain.length - 1]]; } /** * Gets color for a value using bar interpolation. * @param {number} x - Value to get color for * @returns {Color} Corresponding color * @private */ bar(x) { if (x &lt; this.xarr[0]) return this.lowColor; if (x &gt; this.xarr[this.xarr.length - 1]) return this.highColor; const c = new Color(this.rarr[0], this.garr[0], this.barr[0], this.aarr[0]); for (let i = 0; i &lt; this.xarr.length - 1; i++) { if (x &gt; this.xarr[i] &amp;&amp; x &lt;= this.xarr[i + 1]) { c.r = this.rarr[i]; c.g = this.garr[i]; c.b = this.barr[i]; c.a = this.aarr[i]; } } return c; } /** * Gets color for a value using linear interpolation. * @param {number} x - Value to get color for * @returns {Color} Corresponding color * @private */ linear(x) { if (x &lt; this.xarr[0]) return this.lowColor; if (x &gt; this.xarr[this.xarr.length - 1]) return this.highColor; const c = new Color(this.rarr[0], this.garr[0], this.barr[0], this.aarr[0]); for (let i = 0; i &lt; this.xarr.length - 1; i++) { if (x &gt; this.xarr[i] &amp;&amp; x &lt;= this.xarr[i + 1]) { c.r = (this.rarr[i + 1] - this.rarr[i]) * (x - this.xarr[i]) / (this.xarr[i + 1] - this.xarr[i]) + this.rarr[i]; c.g = (this.garr[i + 1] - this.garr[i]) * (x - this.xarr[i]) / (this.xarr[i + 1] - this.xarr[i]) + this.garr[i]; c.b = (this.barr[i + 1] - this.barr[i]) * (x - this.xarr[i]) / (this.xarr[i + 1] - this.xarr[i]) + this.barr[i]; c.a = (this.aarr[i + 1] - this.aarr[i]) * (x - this.xarr[i]) / (this.xarr[i + 1] - this.xarr[i]) + this.aarr[i]; } } return c; } /** * Gets color for a value using spline interpolation. * @param {number} x - Value to get color for * @returns {Color} Corresponding color * @private */ spline(x) { if (x &lt; this.xarr[0]) return this.lowColor; if (x &gt; this.xarr[this.xarr.length - 1]) return this.highColor; return new Color(this.rspline.at(x), this.gspline.at(x), this.bspline.at(x), this.aspline.at(x)); } /** * Gets color for a value using configured interpolation type. * @param {number} x - Value to get color for * @returns {Color} Corresponding color * @throws {Error} If interpolation type is invalid */ at(x) { let result = null; switch (this.type) { case 'linear': result = this.linear(x); break; case 'spline': result = this.spline(x); break; case 'bar': result = this.bar(x); break; default: throw Error(\"Interpolant type not exist\"); break; } return result; } /** * Samples the colormap into a buffer. * @param {number} maxSteps - Number of samples to generate * @returns {{min: number, max: number, buffer: Uint8Array}} Sample data and buffer */ sample(maxSteps) { let min = this.xarr[0]; let max = this.xarr[this.xarr.length - 1]; //if (this.domain.length == 2) maxSteps = this.xarr.length; let buffer = new Uint8Array(maxSteps * 4); let delta = (max - min) / maxSteps; for (let i = 0; i &lt; maxSteps; i++) { let c = this.at(min + i * delta).toRGBA(); buffer[i * 4 + 0] = c[0]; buffer[i * 4 + 1] = c[1]; buffer[i * 4 + 2] = c[2]; buffer[i * 4 + 3] = c[3]; } return { min, max, buffer }; } } /** * Creates a visual legend for a colormap. */ class ColormapLegend { /** * Creates a new ColormapLegend instance. * @param {Object} viewer - Viewer instance to attach legend to * @param {Colormap} colorscale - Colormap to create legend for * @param {Object} [options] - Configuration options * @param {number} [options.nticks=6] - Number of ticks/divisions in legend * @param {number} [options.legendWidth=25] - Width of legend as percentage * @param {string} [options.textColor='#fff'] - Color of text labels * @param {string} [options.class='openlime-legend'] - CSS class for legend container */ constructor(viewer, colorscale, options) { options = Object.assign({ nticks: 6, legendWidth: 25, textColor: '#fff', class: 'openlime-legend' }, options); Object.assign(this, options); this.viewer = viewer; this.colorscale = colorscale; this.container = document.querySelector(`.${this.class}`); if (!this.container) { this.container = document.createElement('div'); this.container.classList.add(this.class); } this.scale = document.createElement('div'); this.scale.style = `display: flex; border-radius: 20px; height: 22px; color: ${this.textColor}; font-weight: bold; overflow: hidden; margin: 0px 2px 4px 0px; background-color: #7c7c7c; font-family: Arial,Helvetica,sans-serif; font-size:12px; border: 1px solid #000;`; this.container.appendChild(this.scale); this.viewer.containerElement.appendChild(this.container); const domain = colorscale.rangeDomain(); const legend = document.createElement('div'); legend.style = `display: flex; align-items: center; justify-content: center; background: ${colorscale.linear(domain[0]).toHex()}; width: ${this.legendWidth}%; margin: 0`; legend.textContent = colorscale.description; this.scale.appendChild(legend); if (this.colorscale.type == 'linear') this.legendLinear(); if (this.colorscale.type == 'bar') this.legendBar(); } /** * Creates legend for linear interpolation. * @private */ legendLinear() { const domain = this.colorscale.rangeDomain(); const delta = (domain[1] - domain[0]) / this.nticks; const deltaWidth = (100 - this.legendWidth) / this.nticks; let vl = domain[0]; for (let i = 0; i &lt; this.nticks; i++) { let v = domain[0] + delta * i; let vr = i &lt; (this.nticks - 1) ? domain[0] + delta * (i + 0.5) : v; const c = this.colorscale.at(v); const cl = this.colorscale.at(vl); const cr = this.colorscale.at(vr); const value = document.createElement('div'); const bkg = `background: linear-gradient(to right, ${cl.toHex()}, ${c.toHex()}, ${cr.toHex()})` value.style = `display: flex; align-items: center; justify-content: center; ${bkg}; width: ${deltaWidth}%; margin: 0`; value.textContent = v.toFixed(1); this.scale.appendChild(value); vl = vr; } } /** * Creates legend for bar interpolation. * @private */ legendBar() { const deltaWidth = (100 - this.legendWidth) / this.colorscale.domain.length; for (let i = 0; i &lt; this.colorscale.xarr.length; i++) { const c = new Color(this.colorscale.rarr[i], this.colorscale.garr[i], this.colorscale.barr[i], this.colorscale.aarr[i]); const v = this.colorscale.xarr[i]; const value = document.createElement('div'); const bkg = `background: ${c.toHex()}`; value.style = `display: flex; align-items: center; justify-content: center; ${bkg}; width: ${deltaWidth}%; margin: 0`; value.textContent = v.toFixed(1); this.scale.appendChild(value); } } } export { Color, Colormap, ColormapLegend } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"Controller.js.html":{"id":"Controller.js.html","title":"Source: Controller.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: Controller.js /** * Base class that handles user interaction via device events (mouse/touch events). * Provides an abstract user interface to define interaction actions such as panning, pinching, tapping, etc... * The actions are implemented by pre-defined callback functions: * * `panStart(e)` intercepts the initial pan event (movement of the mouse after pressing a mouse button or moving a finger). * The event is captured calling `e.preventDefault()`. * * `panMove(e)` receives and handles the pan event. * * `panEnd(e)` intercepts the final pan event (the user releases the left mouse button or removes his finger from the screen). * * `pinchStart(e1, e2)` intercepts the initial pinch event (a continuous gesture that tracks the positions between the first two fingers that touch the screen). * The event is captured calling `e1.preventDefault()`. * * `pinchMove(e1,e2)` receives and handles the pinch event. * * `pinchEnd(e1,e2)` intercepts the final pinch event (the user removes one of their two fingers from the screen). * * `mouseWheel(e)` receives and handles the mouse wheel event (the user rotates the mouse wheel button). * * `fingerSingleTap(e)` receives and handles the single-tap event (the user presses a mouse button quickly or touches the screen shortly with a finger). * * `fingerDoubleTap(e)` receives and handles the double-tap event (the user quickly presses a mouse button twice or shortly touches the screen with a finger twice). * * `e.preventDefault()` will capture the event and wont be propagated to other controllers. * * This class only describes user interactions by implementing actions or callbacks. A **Controller** works in concert with a **PointerManager** object * that emits events and links them to actions. * * @abstract * @example * // Create a pan-zoom controller and associate it with the viewer's pointer manager * const panzoom = new OpenLIME.ControllerPanZoom(viewer.camera, { * priority: -1000, * activeModifiers: [0, 1] * }); * viewer.pointerManager.onEvent(panzoom); */ class Controller { /** * Creates a new Controller instance. * @param {Object} [options] - Configuration options * @param {boolean} [options.active=true] - Whether the controller is initially active * @param {boolean} [options.debug=false] - Enable debug logging * @param {number} [options.panDelay=50] - Inertial value for panning movements in milliseconds * @param {number} [options.zoomDelay=200] - Delay for smoothing zoom events in milliseconds * @param {number} [options.priority=0] - Controllers with higher priority are invoked first * @param {number[]} [options.activeModifiers=[0]] - Array of modifier states that activate this controller */ constructor(options) { Object.assign(this, { active: true, debug: false, panDelay: 50, zoomDelay: 200, priority: 0, activeModifiers: [0] }); Object.assign(this, options); } /** * Gets the modifier state from an event. * @param {Event} e - The event to check * @returns {number} Modifier state bitmask where: * - 0 = No modifiers * - 1 = Ctrl key * - 2 = Shift key * - 4 = Alt key * Multiple modifiers combine their values (e.g., Ctrl+Shift = 3) */ modifierState(e) { let state = 0; if (e.ctrlKey) state += 1; if (e.shiftKey) state += 2; if (e.altKey) state += 4; return state; } /** * Captures all events, preventing them from reaching other controllers. * @private */ captureEvents() { this.capture = true; } /** * Releases event capture, allowing events to reach other controllers. * @private */ releaseEvents() { this.capture = false; } /** * Handles the start of a pan gesture. * @virtual * @param {Event} e - The pan start event * @description Called when user starts panning (mouse down or finger touch). * Call e.preventDefault() to capture the event. */ panStart(e) { } /** * Handles pan movement. * @virtual * @param {Event} e - The pan move event * @description Called continuously during panning. */ panMove(e) { } /** * Handles the end of a pan gesture. * @virtual * @param {Event} e - The pan end event * @description Called when panning ends (mouse up or finger lift). */ panEnd(e) { } /** * Handles the start of a pinch gesture. * @virtual * @param {Event} e1 - First finger event * @param {Event} e2 - Second finger event * @description Called when user starts a two-finger pinch. * Call e1.preventDefault() to capture the event. */ pinchStart(e1, e2) { } /** * Handles pinch movement. * @virtual * @param {Event} e1 - First finger event * @param {Event} e2 - Second finger event * @description Called continuously during pinching. */ pinchMove(e1, e2) { } /** * Handles the end of a pinch gesture. * @virtual * @param {Event} e1 - First finger event * @param {Event} e2 - Second finger event * @description Called when pinch ends (finger lift). */ pinchEnd(e1, e2) { } /** * Handles mouse wheel events. * @virtual * @param {WheelEvent} e - The wheel event * @description Called when user rotates mouse wheel. */ mouseWheel(e) { } /** * Handles single tap/click events. * @virtual * @param {Event} e - The tap event * @description Called for quick mouse press or short finger touch. */ fingerSingleTap(e) { } /** * Handles double tap/click events. * @virtual * @param {Event} e - The double tap event * @description Called for quick double mouse press or double finger touch. */ fingerDoubleTap(e) { } } export { Controller } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"Controller2D.js.html":{"id":"Controller2D.js.html","title":"Source: Controller2D.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: Controller2D.js import { BoundingBox } from './BoundingBox.js'; import { Controller } from './Controller.js' /** * Callback for position updates. * @callback updatePosition * @param {number} x - X coordinate in the range [-1, 1] * @param {number} y - Y coordinate in the range [-1, 1] */ /** * Clamps a value between a minimum and maximum. * @param {number} value - Value to clamp * @param {number} min - Minimum allowed value * @param {number} max - Maximum allowed value * @returns {number} Clamped value * @private */ function clamp(value, min, max) { return Math.max(min, Math.min(max, value)); } /** * Controller for handling 2D position updates based on pan and tap events. * Extends the base Controller to track a 2D position (x, y) of the device pointer. * * Supports two coordinate systems: * - Absolute: Coordinates mapped to [-1, 1] with origin at bottom-left of canvas * - Relative: Coordinates based on distance from initial pan position, scaled by speed * * @extends Controller */ class Controller2D extends Controller { /** * Creates a new Controller2D instance. * @param {updatePosition} callback - Function called when position is updated * @param {Object} [options] - Configuration options * @param {boolean} [options.relative=false] - Whether to use relative coordinate system * @param {number} [options.speed=2.0] - Scaling factor for relative coordinates * @param {BoundingBox} [options.box] - Bounding box for coordinate constraints * @param {updatePosition} [options.onPanStart] - Callback for pan start event * @param {updatePosition} [options.onPanEnd] - Callback for pan end event * @param {boolean} [options.active=true] - Whether the controller is active * @param {number[]} [options.activeModifiers=[0]] - Array of active modifier states */ constructor(callback, options) { super(options); Object.assign(this, { relative: false, speed: 2.0, start_x: 0, start_y: 0, current_x: 0, current_y: 0, onPanStart: null, onPanEnd: null }, options); //By default the controller is active only with no modifiers. //you can select which subsets of the modifiers are active. this.callback = callback; if (!this.box) { //FIXME What is that? Is it used? this.box = new BoundingBox({ xLow: -0.99, yLow: -0.99, xHigh: 0.99, yHigh: 0.99 }); } this.panning = false; } /** * Updates the stored position for relative coordinate system. * This is a convenience method typically used within callbacks. * @param {number} x - New X coordinate in range [-1, 1] * @param {number} y - New Y coordinate in range [-1, 1] */ setPosition(x, y) { this.current_x = x; this.current_y = y; this.callback(x, y); } /** * Maps canvas pixel coordinates to normalized coordinates [-1, 1]. * @param {MouseEvent|TouchEvent} e - Mouse or touch event * @returns {number[]} Array containing [x, y] in normalized coordinates * @private */ project(e) { let rect = e.target.getBoundingClientRect(); let x = 2 * e.offsetX / rect.width - 1; let y = 2 * (1 - e.offsetY / rect.height) - 1; return [x, y] } /** * Converts event coordinates to the appropriate coordinate system (absolute or relative). * @param {MouseEvent|TouchEvent} e - Mouse or touch event * @returns {number[]} Array containing [x, y] in the chosen coordinate system * @private */ rangeCoords(e) { let [x, y] = this.project(e); if (this.relative) { x = clamp(this.speed * (x - this.start_x) + this.current_x, -1, 1); y = clamp(this.speed * (y - this.start_y) + this.current_y, -1, 1); } return [x, y]; } /** * Handles start of pan gesture. * @param {MouseEvent|TouchEvent} e - Pan start event * @override */ panStart(e) { if (!this.active || !this.activeModifiers.includes(this.modifierState(e))) return; if (this.relative) { let [x, y] = this.project(e); this.start_x = x; this.start_y = y; } if (this.onPanStart) this.onPanStart(...this.rangeCoords(e)); this.callback(...this.rangeCoords(e)); this.panning = true; e.preventDefault(); } /** * Handles pan movement. * @param {MouseEvent|TouchEvent} e - Pan move event * @returns {boolean} False if not currently panning * @override */ panMove(e) { if (!this.panning) return false; this.callback(...this.rangeCoords(e)); } /** * Handles end of pan gesture. * @param {MouseEvent|TouchEvent} e - Pan end event * @returns {boolean} False if not currently panning * @override */ panEnd(e) { if (!this.panning) return false; this.panning = false; if (this.relative) { let [x, y] = this.project(e); this.current_x = clamp(this.speed * (x - this.start_x) + this.current_x, -1, 1); this.current_y = clamp(this.speed * (y - this.start_y) + this.current_y, -1, 1); } if (this.onPanEnd) this.onPanEnd(...this.rangeCoords(e)); } /** * Handles single tap/click events. * Only processes events in absolute coordinate mode. * @param {MouseEvent|TouchEvent} e - Tap event * @override */ fingerSingleTap(e) { if (!this.active || !this.activeModifiers.includes(this.modifierState(e))) return; if (this.relative) return; this.callback(...this.rangeCoords(e)); e.preventDefault(); } } export { Controller2D } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"ControllerFocusContext.js.html":{"id":"ControllerFocusContext.js.html","title":"Source: ControllerFocusContext.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: ControllerFocusContext.js import { ControllerLens } from './ControllerLens.js' import { CoordinateSystem } from './CoordinateSystem.js'; import { FocusContext } from './FocusContext.js'; /** * Controller for handling Focus+Context visualization interactions. * Manages lens-based focus region and context region interactions including * panning, zooming, and lens radius adjustments. * @extends ControllerLens */ class ControllerFocusContext extends ControllerLens { /** * Helper method to trigger updates. * @param {Object} param - Object containing update method * @private */ static callUpdate(param) { param.update(); } /** * Creates a new ControllerFocusContext instance. * @param {Object} options - Configuration options * @param {number} [options.updateTimeInterval=50] - Time interval for position updates in ms * @param {number} [options.updateDelay=100] - Delay for position updates in ms * @param {number} [options.zoomDelay=150] - Delay for zoom animations in ms * @param {number} [options.zoomAmount=1.5] - Scale factor for zoom operations * @param {number} [options.priority=-100] - Controller priority * @param {boolean} [options.enableDirectContextControl=true] - Enable direct manipulation of context region * @param {Layer} options.lensLayer - Layer to use for lens visualization * @param {Camera} options.camera - Camera instance to control * @param {Canvas} options.canvas - Canvas instance to monitor * @throws {Error} If required options (lensLayer, camera, canvas) are missing */ constructor(options) { super(options); Object.assign(this, { updateTimeInterval: 50, updateDelay: 100, zoomDelay: 150, zoomAmount: 1.5, priority: -100, enableDirectContextControl: true }, options); if (!options.lensLayer) { console.log(\"ControllerFocusContext lensLayer option required\"); throw \"ControllerFocusContext lensLayer option required\"; } if (!options.camera) { console.log(\"ControllerFocusContext camera option required\"); throw \"ControllerFocusContext camera option required\"; } if (!options.canvas) { console.log(\"ControllerFocusContext canvas option required\"); throw \"ControllerFocusContext canvas option required\"; } let callback = () =&gt; { const discardHidden = true; const bbox = this.camera.boundingBox; this.maxDatasetSize = Math.max(bbox.width(), bbox.height()); this.minDatasetSize = Math.min(bbox.width(), bbox.height()); this.setDatasetDimensions(bbox.width(), bbox.height()); }; this.canvas.addEvent('updateSize', callback); this.imageSize = { w: 1, h: 1 }; this.FocusContextEnabled = true; this.centerToClickOffset = { x: 0, y: 0 }; this.previousClickPos = { x: 0, y: 0 }; this.currentClickPos = { x: 0, y: 0 }; this.insideLens = { inside: false, border: false }; this.panning = false; this.zooming = false; this.panningCamera = false; // Handle only camera panning this.startPos = { x: 0, y: 0 }; this.initialTransform = this.camera.getCurrentTransform(performance.now()); // Handle pinchZoom this.initialPinchDistance = 1; this.initialPinchRadius = 1; this.initialPinchPos = { x: 0, y: 0 }; } /** * Handles start of pan operation. * @param {PointerEvent} e - Pan start event * @override */ panStart(e) { if (!this.active) return; const p = this.getScenePosition(e); this.panning = false; this.insideLens = this.isInsideLens(p); const startPos = this.getPixelPosition(e); if (this.lensLayer.visible &amp;&amp; this.insideLens.inside) { const lc = CoordinateSystem.fromSceneToViewport(this.getFocus().position, this.camera, this.useGL); this.centerToClickOffset = { x: startPos.x - lc.x, y: startPos.y - lc.y }; this.currentClickPos = { x: startPos.x, y: startPos.y }; this.panning = true; } else { if (this.enableDirectContextControl) { this.startPos = startPos; this.initialTransform = this.camera.getCurrentTransform(performance.now()); this.camera.target = this.initialTransform.copy(); //stop animation. this.panningCamera = true; } } e.preventDefault(); // Activate a timeout to call update() in order to update position also when mouse is clicked but steady // Stop the time out on panEnd this.timeOut = setInterval(this.update.bind(this), 50); } /** * Handles pan movement. * @param {PointerEvent} e - Pan move event * @override */ panMove(e) { if (Math.abs(e.offsetX) &gt; 64000 || Math.abs(e.offsetY) &gt; 64000) return; this.currentClickPos = this.getPixelPosition(e); if (this.panning) { // Update is performed within update() function } else if (this.panningCamera) { let m = this.initialTransform; let dx = (this.currentClickPos.x - this.startPos.x); let dy = (this.currentClickPos.y - this.startPos.y); this.camera.setPosition(this.updateDelay, m.x + dx, m.y + dy, m.z, m.a); } } /** * Handles start of pinch operation. * @param {PointerEvent} e1 - First finger event * @param {PointerEvent} e2 - Second finger event * @override */ pinchStart(e1, e2) { if (!this.active) return; const p0 = this.getScenePosition(e1); const p1 = this.getScenePosition(e2); const p = { x: (p0.x + p1.x) * 0.5, y: (p0.y + p1.y) * 0.5 }; this.initialPinchPos = { x: (e1.offsetX + e2.offsetX) * 0.5, y: (e1.offsetY + e2.offsetY) * 0.5 }; this.insideLens = this.isInsideLens(p); this.zooming = true; this.initialPinchDistance = this.distance(e1, e2); this.initialPinchRadius = this.lensLayer.getRadius(); e1.preventDefault(); } /** * Handles pinch movement. * @param {PointerEvent} e1 - First finger event * @param {PointerEvent} e2 - Second finger event * @override */ pinchMove(e1, e2) { if (this.zooming) { const d = this.distance(e1, e2); const scale = d / (this.initialPinchDistance + 0.00001); if (this.lensLayer.visible &amp;&amp; this.insideLens.inside) { const newRadius = scale * this.initialPinchRadius; const currentRadius = this.lensLayer.getRadius(); const dz = newRadius / currentRadius; // Zoom around initial pinch pos, and not current center to avoid unwanted drifts this.updateRadiusAndScale(dz); //this.initialPinchDistance = d; } else { if (this.enableDirectContextControl) { this.updateScale(this.initialPinchPos.x, this.initialPinchPos.y, scale); this.initialPinchDistance = d; } } } } /** * Handles end of pinch operation. * @param {PointerEvent} e - End event * @param {number} x - X coordinate * @param {number} y - Y coordinate * @param {number} scale - Final scale value * @override */ pinchEnd(e, x, y, scale) { this.zooming = false; } /** * Starts zoom operation when clicking on lens border. * @param {PointerEvent} pe - Pointer event */ zoomStart(pe) { if (this.lensLayer.visible) { super.zoomStart(pe); // Ask to call zoomUpdate at regular interval during zoommovement this.timeOut = setInterval(this.zoomUpdate.bind(this), 50); } } /** * Handles zoom movement when dragging lens border. * @param {PointerEvent} pe - Pointer event */ zoomMove(pe) { if (this.zooming) { this.oldCursorPos = pe; let t = this.camera.getCurrentTransform(performance.now()); // let p = t.viewportToSceneCoords(this.camera.viewport, pe); const p = this.getScenePosition(pe); const lens = this.getFocus(); const c = lens.position; let v = { x: p.x - c.x, y: p.y - c.y }; let d = Math.sqrt(v.x * v.x + v.y * v.y); //Set as new radius |Click-LensCenter|(now) - |Click-LensCenter|(start) const radiusRange = FocusContext.getRadiusRangeCanvas(this.camera.viewport); const newRadius = Math.max(radiusRange.min / t.z, d - this.deltaR); const dz = newRadius / lens.radius; this.updateRadiusAndScale(dz); } } /** * Updates zoom during continuous operation. * @private */ zoomUpdate() { // Give continuity to zoom scale also when user is steady. // If lens border is able to reach user pointer zoom stops. // If this is not possible due to camera scale update, // zoom will continue with a speed proportional to the radius/cursor distance if (this.zooming) { const p = this.getScenePosition(this.oldCursorPos); const lens = this.getFocus(); const c = lens.position; let v = { x: p.x - c.x, y: p.y - c.y }; let d = Math.sqrt(v.x * v.x + v.y * v.y); //Set as new radius |Click-LensCenter|(now) - |Click-LensCenter|(start) const radiusRange = FocusContext.getRadiusRangeCanvas(this.camera.viewport); let t = this.camera.getCurrentTransform(performance.now()); const newRadius = Math.max(radiusRange.min / t.z, d - this.deltaR); const dz = newRadius / lens.radius; this.updateRadiusAndScale(dz); } } /** * Handles end of zoom operation. */ zoomEnd() { if (this.lensLayer.visible) { super.zoomEnd(); // Stop calling zoomUpdate clearTimeout(this.timeOut); } } /** * Handles mouse wheel events to simulate a pinch event. * @param {WheelEvent} e - Wheel event * @override */ mouseWheel(e) { const p = this.getScenePosition(e); this.insideLens = this.isInsideLens(p); const dz = e.deltaY &gt; 0 ? this.zoomAmount : 1 / this.zoomAmount; if (this.lensLayer.visible &amp;&amp; this.insideLens.inside) { this.updateRadiusAndScale(dz); } else { if (this.enableDirectContextControl) { // Invert scale when updating scale instead of lens radius, to obtain the same zoom direction const p = this.getPixelPosition(e); this.updateScale(p.x, p.y, 1 / dz); } } e.preventDefault(); } /** * Updates lens radius and adjusts camera to maintain Focus+Context condition. * @param {number} dz - Scale factor for radius adjustment */ updateRadiusAndScale(dz) { let focus = this.getFocus(); const now = performance.now(); let context = this.camera.getCurrentTransform(now); // Subdivide zoom between focus and context FocusContext.scale(this.camera, focus, context, dz); // Bring focus within context constraints FocusContext.adaptContextPosition(this.camera.viewport, focus, context); // Set new focus and context in camera and lens this.camera.setPosition(this.zoomDelay, context.x, context.y, context.z, context.a); this.lensLayer.setRadius(focus.radius, this.zoomDelay); } /** * Updates camera scale around a specific point. * @param {number} x - X coordinate of zoom center * @param {number} y - Y coordinate of zoom center * @param {number} dz - Scale factor * @private */ updateScale(x, y, dz) { const now = performance.now(); let context = this.camera.getCurrentTransform(now); const pos = this.camera.mapToScene(x, y, context); const maxDeltaZoom = this.camera.maxZoom / context.z; const minDeltaZoom = this.camera.minZoom / context.z; dz = Math.min(maxDeltaZoom, Math.max(minDeltaZoom, dz)); // Zoom around cursor position this.camera.deltaZoom(this.updateDelay, dz, pos.x, pos.y); } /** * Handles end of pan operation. * @override */ panEnd() { if (this.panning) { clearTimeout(this.timeOut); } this.panning = false; this.panningCamera = false; this.zooming = false; } /** * Updates lens and camera positions based on current interaction. * @private */ update() { if (this.panning) { let context = this.camera.getCurrentTransform(performance.now()); let lensDeltaPosition = this.lastInteractionDelta(); lensDeltaPosition.x /= context.z; lensDeltaPosition.y /= context.z; let focus = this.getFocus(); if (this.FocusContextEnabled) { FocusContext.pan(this.camera.viewport, focus, context, lensDeltaPosition, this.imageSize); this.camera.setPosition(this.updateDelay, context.x, context.y, context.z, context.a); } else { focus.position.x += lensDeltaPosition.x; focus.position.y += lensDeltaPosition.y; } this.lensLayer.setCenter(focus.position.x, focus.position.y, this.updateDelay); this.previousClickPos = [this.currentClickPos.x, this.currentClickPos.y]; } } /** * Calculates movement delta since last interaction. * @returns {{x: number, y: number}} Position delta * @private */ lastInteractionDelta() { let result = { x: 0, y: 0 }; // Compute delta with respect to previous position if (this.panning &amp;&amp; this.insideLens.inside) { // For lens pan Compute delta wrt previous lens position const lc = CoordinateSystem.fromSceneToViewport(this.getFocus().position, this.camera, this.useGL); result = { x: this.currentClickPos.x - lc.x - this.centerToClickOffset.x, y: this.currentClickPos.y - lc.y - this.centerToClickOffset.y }; } else { // For camera pan Compute delta wrt previous click position result = { x: this.currentClickPos.x - this.previousClickPos.x, y: this.currentClickPos.y - this.previousClickPos.y }; } return result; } /** * Sets the dimensions of the dataset (image) being visualized. * @param {number} width - Dataset width * @param {number} height - Dataset height * @private */ setDatasetDimensions(width, height) { this.imageSize = { w: width, h: height }; } /** * Initializes lens position and size. */ initLens() { const t = this.camera.getCurrentTransform(performance.now()); const imageRadius = 100 / t.z; this.lensLayer.setRadius(imageRadius); this.lensLayer.setCenter(this.imageSize.w * 0.5, this.imageSize.h * 0.5); } } export { ControllerFocusContext } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"ControllerLens.js.html":{"id":"ControllerLens.js.html","title":"Source: ControllerLens.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: ControllerLens.js import { Controller } from './Controller.js' import { CoordinateSystem } from './CoordinateSystem.js' import { FocusContext } from './FocusContext.js'; /** * Controller for handling lens-based interactions. * Manages user interactions with a lens overlay including panning, zooming, * and lens radius adjustments through mouse/touch events. * @extends Controller */ class ControllerLens extends Controller { /** * Creates a new ControllerLens instance. * @param {Object} options - Configuration options * @param {Object} options.lensLayer - Layer used for lens visualization * @param {Camera} options.camera - Camera instance to control * @param {boolean} [options.useGL=false] - Whether to use WebGL coordinates * @param {boolean} [options.active=true] - Whether the controller is initially active * @throws {Error} If required options (lensLayer, camera) are missing */ constructor(options) { super(options); if (!options.lensLayer) { console.log(\"ControllerLens lensLayer option required\"); throw \"ControllerLens lensLayer option required\"; } if (!options.camera) { console.log(\"ControllerLens camera option required\"); throw \"ControllerLens camera option required\"; } this.panning = false; this.zooming = false; this.initialDistance = 0; this.startPos = { x: 0, y: 0 }; this.oldCursorPos = { x: 0, y: 0 }; this.useGL = false; } /** * Handles start of pan operation. * @param {PointerEvent} e - Pan start event * @override */ panStart(e) { if (!this.active) return; const p = this.getScenePosition(e); this.panning = false; const hit = this.isInsideLens(p); if (this.lensLayer.visible &amp;&amp; hit.inside) { // if (hit.border) { // this.zooming = true; // const p = this.getPixelPosition(e); // this.zoomStart(p); // } else { // this.panning = true; // } this.panning = true; this.startPos = p; e.preventDefault(); } } /** * Handles pan movement. * @param {PointerEvent} e - Pan move event * @override */ panMove(e) { // Discard events due to cursor outside window const p = this.getPixelPosition(e); if (Math.abs(e.offsetX) &gt; 64000 || Math.abs(e.offsetY) &gt; 64000) return; if (this.panning) { const p = this.getScenePosition(e); const dx = p.x - this.startPos.x; const dy = p.y - this.startPos.y; const c = this.lensLayer.getTargetCenter(); this.lensLayer.setCenter(c.x + dx, c.y + dy); this.startPos = p; e.preventDefault(); } } /** * Handles end of pan operation. * @param {PointerEvent} e - Pan end event * @override */ panEnd(e) { this.panning = false; this.zooming = false; } /** * Handles start of pinch operation. * @param {PointerEvent} e1 - First finger event * @param {PointerEvent} e2 - Second finger event * @override */ pinchStart(e1, e2) { if (!this.active) return; const p0 = this.getScenePosition(e1); const p1 = this.getScenePosition(e2); const pc = { x: (p0.x + p1.x) * 0.5, y: (p0.y + p1.y) * 0.5 }; if (this.lensLayer.visible &amp;&amp; this.isInsideLens(pc).inside) { this.zooming = true; this.initialDistance = this.distance(e1, e2); this.initialRadius = this.lensLayer.getRadius(); this.startPos = pc; e1.preventDefault(); } } /** * Handles pinch movement. * @param {PointerEvent} e1 - First finger event * @param {PointerEvent} e2 - Second finger event * @override */ pinchMove(e1, e2) { if (!this.zooming) return; const d = this.distance(e1, e2); const scale = d / (this.initialDistance + 0.00001); const newRadius = scale * this.initialRadius; this.lensLayer.setRadius(newRadius); } /** * Handles end of pinch operation. * @param {PointerEvent} e - End event * @param {number} x - X coordinate * @param {number} y - Y coordinate * @param {number} scale - Final scale value * @override */ pinchEnd(e, x, y, scale) { this.zooming = false; } /** * Handles mouse wheel events. * @param {WheelEvent} e - Wheel event * @returns {boolean} True if event was handled * @override */ mouseWheel(e) { const p = this.getScenePosition(e); let result = false; if (this.lensLayer.visible &amp;&amp; this.isInsideLens(p).inside) { const delta = e.deltaY &gt; 0 ? 1 : -1; const factor = delta &gt; 0 ? 1.2 : 1 / 1.2; const r = this.lensLayer.getRadius(); this.lensLayer.setRadius(r * factor); this.startPos = p; result = true; e.preventDefault(); } return result; } /** * Initiates zoom operation when clicking on lens border. * @param {Object} pe - Pixel position in canvas coordinates * @param {number} pe.offsetX - X offset from canvas left * @param {number} pe.offsetY - Y offset from canvas top */ zoomStart(pe) { if (!this.lensLayer.visible) return; this.zooming = true; this.oldCursorPos = pe; // Used by derived class const p = this.getScenePosition(pe); const lens = this.getFocus(); const r = lens.radius; const c = lens.position; let v = { x: p.x - c.x, y: p.y - c.y }; let d = Math.sqrt(v.x * v.x + v.y * v.y); // Difference between radius and |Click-LensCenter| will be used by zoomMove this.deltaR = d - r; } /** * Updates zoom when dragging lens border. * @param {Object} pe - Pixel position in canvas coordinates * @param {number} pe.offsetX - X offset from canvas left * @param {number} pe.offsetY - Y offset from canvas top */ zoomMove(pe) { if (this.zooming) { const p = this.getScenePosition(pe); const lens = this.getFocus(); const c = lens.position; let v = { x: p.x - c.x, y: p.y - c.y }; let d = Math.sqrt(v.x * v.x + v.y * v.y); // Set as new radius |Click-LensCenter|(now) - |Click-LensCenter|(start) const scale = this.camera.getCurrentTransform(performance.now()).z; const radiusRange = FocusContext.getRadiusRangeCanvas(this.camera.viewport); const newRadius = Math.max(radiusRange.min / scale, d - this.deltaR); this.lensLayer.setRadius(newRadius, this.zoomDelay); } } /** * Ends zoom operation. */ zoomEnd() { this.zooming = false; } /** * Gets current focus state. * @returns {{position: {x: number, y: number}, radius: number}} Focus state object */ getFocus() { const p = this.lensLayer.getCurrentCenter(); const r = this.lensLayer.getRadius(); return { position: p, radius: r } } /** * Checks if a point is inside the lens. * @param {Object} p - Point to check in scene coordinates * @param {number} p.x - X coordinate * @param {number} p.y - Y coordinate * @returns {{inside: boolean, border: boolean}} Whether point is inside lens and/or on border */ isInsideLens(p) { const c = this.lensLayer.getCurrentCenter(); const dx = p.x - c.x; const dy = p.y - c.y; const d = Math.sqrt(dx * dx + dy * dy); const r = this.lensLayer.getRadius(); const inside = d &lt; r; const t = this.camera.getCurrentTransform(performance.now()); const b = this.lensLayer.getBorderWidth() / t.z; const border = inside &amp;&amp; d &gt; r - b; //console.log(\"IsInside \" + d.toFixed(0) + \" r \" + r.toFixed(0) + \", b \" + b.toFixed(0) + \" IN \" + inside + \" B \" + border); return { inside: inside, border: border }; } /** * Converts position from canvas HTML coordinates to viewport coordinates. * @param {PointerEvent} e - event * @returns {{x: number, y: number}} Position in viewport coordinates (origin at bottom-left, y up) */ getPixelPosition(e) { const p = { x: e.offsetX, y: e.offsetY }; return CoordinateSystem.fromCanvasHtmlToViewport(p, this.camera, this.useGL); } /** * Converts position from canvas HTML coordinates to scene coordinates. * @param {PointerEvent} e - event * @returns {{x: number, y: number}} Position in scene coordinates (origin at center, y up) */ getScenePosition(e) { const p = { x: e.offsetX, y: e.offsetY }; return CoordinateSystem.fromCanvasHtmlToScene(p, this.camera, this.useGL); } /** * Calculates distance between two points. * @param {PointerEvent} e1 - event * @param {PointerEvent} e2 - event * @returns {number} Distance between points * @private */ distance(e1, e2) { return Math.sqrt(Math.pow(e1.x - e2.x, 2) + Math.pow(e1.y - e2.y, 2)); } } export { ControllerLens } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"ControllerPanZoom.js.html":{"id":"ControllerPanZoom.js.html","title":"Source: ControllerPanZoom.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: ControllerPanZoom.js import { Controller } from './Controller.js' import { CoordinateSystem } from './CoordinateSystem.js'; import { addSignals } from './Signals.js' /** * ControllerPanZoom handles pan, zoom, and interaction events in a canvas element to manipulate camera parameters. * It supports multiple interaction methods including: * - Mouse drag for panning * - Mouse wheel for zooming * - Touch gestures (pinch to zoom) * - Double tap to zoom * * The controller maintains state for ongoing pan and zoom operations and can be configured * to use different coordinate systems (HTML or GL) for calculations. * * @extends Controller * @fires ControllerPanZoom#nowheel - Emitted when a wheel event is received but ctrl key is required and not pressed */ class ControllerPanZoom extends Controller { /** * Creates a new ControllerPanZoom instance. * @param {Camera} camera - The camera object to control * @param {Object} [options] - Configuration options * @param {number} [options.zoomAmount=1.2] - The zoom multiplier for wheel/double-tap events * @param {boolean} [options.controlZoom=false] - If true, requires Ctrl key to be pressed for zoom operations * @param {boolean} [options.useGLcoords=false] - If true, uses WebGL coordinate system instead of HTML * @param {number} [options.panDelay] - Delay for pan animations * @param {number} [options.zoomDelay] - Delay for zoom animations */ constructor(camera, options) { super(options); this.camera = camera; this.zoomAmount = 1.2; //for wheel or double tap event this.controlZoom = false; //require control+wheel to zoom this.panning = false; //true if in the middle of a pan this.initialTransform = null; this.startMouse = null; this.zooming = false; //true if in the middle of a pinch this.initialDistance = 0.0; this.useGLcoords = false; if (options) Object.assign(this, options); } /** * Handles the start of a pan operation * @private * @param {PointerEvent} e - The pointer event that initiated the pan */ panStart(e) { if (!this.active || this.panning || !this.activeModifiers.includes(this.modifierState(e))) return; this.panning = true; this.startMouse = CoordinateSystem.fromCanvasHtmlToViewport({ x: e.offsetX, y: e.offsetY }, this.camera, this.useGLcoords); let now = performance.now(); this.initialTransform = this.camera.getCurrentTransform(now); this.camera.target = this.initialTransform.copy(); //stop animation. e.preventDefault(); } /** * Updates camera position during a pan operation * @private * @param {PointerEvent} e - The pointer event with new coordinates */ panMove(e) { if (!this.panning) return; let m = this.initialTransform; const p = CoordinateSystem.fromCanvasHtmlToViewport({ x: e.offsetX, y: e.offsetY }, this.camera, this.useGLcoords); let dx = (p.x - this.startMouse.x); let dy = (p.y - this.startMouse.y); this.camera.setPosition(this.panDelay, m.x + dx, m.y + dy, m.z, m.a); } /** * Ends the current pan operation * @private * @param {PointerEvent} e - The pointer event that ended the pan */ panEnd(e) { this.panning = false; } /** * Calculates the Euclidean distance between two points * @private * @param {Object} e1 - First point with x, y coordinates * @param {Object} e2 - Second point with x, y coordinates * @returns {number} The distance between the points */ distance(e1, e2) { return Math.sqrt(Math.pow(e1.x - e2.x, 2) + Math.pow(e1.y - e2.y, 2)); } /** * Initializes a pinch zoom operation * @private * @param {TouchEvent} e1 - First touch point * @param {TouchEvent} e2 - Second touch point */ pinchStart(e1, e2) { this.zooming = true; this.initialDistance = Math.max(30, this.distance(e1, e2)); e1.preventDefault(); //e2.preventDefault(); //TODO this is optional? } /** * Updates zoom level during a pinch operation * @private * @param {TouchEvent} e1 - First touch point * @param {TouchEvent} e2 - Second touch point */ pinchMove(e1, e2) { if (!this.zooming) return; let rect1 = e1.target.getBoundingClientRect(); let offsetX1 = e1.clientX - rect1.left; let offsetY1 = e1.clientY - rect1.top; let rect2 = e2.target.getBoundingClientRect(); let offsetX2 = e2.clientX - rect2.left; let offsetY2 = e2.clientY - rect2.top; const scale = this.distance(e1, e2); // FIXME CHECK ON TOUCH SCREEN //const pos = this.camera.mapToScene((offsetX1 + offsetX2)/2, (offsetY1 + offsetY2)/2, this.camera.getCurrentTransform(performance.now())); const pos = CoordinateSystem.fromCanvasHtmlToScene({ x: (offsetX1 + offsetX2) / 2, y: (offsetY1 + offsetY2) / 2 }, this.camera, this.useGLcoords); const dz = scale / this.initialDistance; this.camera.deltaZoom(this.zoomDelay, dz, pos.x, pos.y); this.initialDistance = scale; e1.preventDefault(); } /** * Ends the current pinch zoom operation * @private * @param {TouchEvent} e - The touch event that ended the pinch * @param {number} x - The x coordinate of the pinch center * @param {number} y - The y coordinate of the pinch center * @param {number} scale - The final scale factor */ pinchEnd(e, x, y, scale) { this.zooming = false; e.preventDefault(); } /** * Handles mouse wheel events for zooming * @private * @param {WheelEvent} e - The wheel event * @fires ControllerPanZoom#nowheel */ mouseWheel(e) { if (this.controlZoom &amp;&amp; !e.ctrlKey) { this.emit('nowheel'); return; } let delta = -e.deltaY / 53; //const pos = this.camera.mapToScene(e.offsetX, e.offsetY, this.camera.getCurrentTransform(performance.now())); const pos = CoordinateSystem.fromCanvasHtmlToScene({ x: e.offsetX, y: e.offsetY }, this.camera, this.useGLcoords); const dz = Math.pow(this.zoomAmount, delta); this.camera.deltaZoom(this.zoomDelay, dz, pos.x, pos.y); e.preventDefault(); } /** * Handles double tap events for zooming * @private * @param {PointerEvent} e - The pointer event representing the double tap */ fingerDoubleTap(e) { } fingerDoubleTap(e) { if (!this.active || !this.activeModifiers.includes(this.modifierState(e))) return; //const pos = this.camera.mapToScene(e.offsetX, e.offsetY, this.camera.getCurrentTransform(performance.now())); const pos = CoordinateSystem.fromCanvasHtmlToScene({ x: e.offsetX, y: e.offsetY }, this.camera, this.useGLcoords); const dz = this.zoomAmount; this.camera.deltaZoom(this.zoomDelay, dz, pos.x, pos.y); } } addSignals(ControllerPanZoom, 'nowheel'); export { ControllerPanZoom } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"CoordinateSystem.js.html":{"id":"CoordinateSystem.js.html","title":"Source: CoordinateSystem.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: CoordinateSystem.js import { BoundingBox } from './BoundingBox.js'; import { Transform } from './Transform.js' /** * Contain functions to pass between different coordinate system. * Here described the coordinate system in sequence * - CanvasHTML: Html coordinates: 0,0 left,top to width height at bottom right (y Down) * - CanvasContext: Same as Html, but scaled by devicePixelRatio (y Down) (required for WebGL, not for SVG) * - Viewport: 0,0 left,bottom to (width,height) at top right (y Up) * - Center: 0,0 at viewport center (y Up) * - Scene: 0,0 at dataset center (y Up). The dataset is placed here through the camera transform * - Layer: 0,0 at Layer center (y Up). Layer is placed over the dataset by the layer transform * - Image: 0,0 at left,top (y Down) * - Layout: 0,0 at left,top (y Down). Depends on layout */ class CoordinateSystem { /** * Transform point from Viewport to CanvasHTML * @param {*} p point in Viewport: 0,0 at left,bottom * @param {Camera} camera Camera which contains viewport information * @param {bool} useGL True to work with WebGL, false for SVG. When true, it uses devPixelRatio scale * @returns point in CanvasHtml: 0,0 left,top */ static fromViewportToCanvasHtml(p, camera, useGL) { const viewport = this.getViewport(camera, useGL); let result = this.invertY(p, viewport); return useGL ? this.scale(result, 1/window.devicePixelRatio) : result; } /** * Transform point from CanvasHTML to GLViewport * @param {*} p point in CanvasHtml: 0,0 left,top y Down * @param {Camera} camera Camera * @param {bool} useGL True to work with WebGL, false for SVG. When true, it uses devPixelRatio scale * @returns point in GLViewport: 0,0 left,bottom, scaled by devicePixelRatio */ static fromCanvasHtmlToViewport(p, camera, useGL) { let result = useGL ? this.scale(p, window.devicePixelRatio) : p; const viewport = this.getViewport(camera, useGL); return this.invertY(result, viewport); } /** * Transform a point from Viewport to Layer coordinates * @param {*} p point {x,y} in Viewport (0,0 left,bottom, y Up) * @param {Camera} camera camera * @param {Transform} layerT layer transform * @param {bool} useGL True to work with WebGL, false for SVG. When true, it uses devPixelRatio scale * @returns point in Layer coordinates (0, 0 at layer center, y Up) */ static fromViewportToLayer(p, camera, layerT, useGL) { // M = InvLayerT * InvCameraT * Tr(-Vw/2, -Vh/2) const cameraT = this.getCurrentTransform(camera, useGL); const invCameraT = cameraT.inverse(); const invLayerT = layerT.inverse(); const v2c = this.getFromViewportToCenterTransform(camera, useGL); const M = v2c.compose(invCameraT.compose(invLayerT)); // First apply v2c, then invCamera, then invLayer return M.apply(p.x, p.y); } /** * Transform a point from Layer to Viewport coordinates * @param {*} p point {x,y} Layer (0,0 at Layer center y Up) * @param {Camera} camera * @param {Transform} layerT layer transform * @param {bool} useGL True to work with WebGL, false for SVG. When true, it uses devPixelRatio scale * @returns point in viewport coordinates (0,0 at left,bottom y Up) */ static fromLayerToViewport(p, camera, layerT, useGL) { const M = this.getFromLayerToViewportTransform(camera, layerT, useGL); return M.apply(p.x, p.y); } /** * Transform a point from Layer to Center * @param {*} p point {x,y} in Layer coordinates (0,0 at Layer center) * @param {Camera} camera camera * @param {Transform} layerT layer transform * @returns point in Center (0, 0 at glViewport center) coordinates. */ static fromLayerToCenter(p, camera, layerT, useGL) { // M = cameraT * layerT const cameraT = this.getCurrentTransform(camera, useGL); const M = layerT.compose(cameraT); return M.apply(p.x, p.y); } ////////////// CHECKED UP TO HERE //////////////////// /** * Transform a point from Layer to Image coordinates * @param {*} p point {x, y} Layer coordinates (0,0 at Layer center) * @param {*} layerSize {w, h} Size in pixel of the Layer * @returns Point in Image coordinates (0,0 at left,top, y Down) */ static fromLayerToImage(p, layerSize) { // InvertY * Tr(Lw/2, Lh/2) let result = {x: p.x + layerSize.w/2, y: p.y + layerSize.h/2}; return this.invertY(result, layerSize); } /** * Transform a point from CanvasHtml to Scene * @param {*} p point {x, y} in CanvasHtml (0,0 left,top, y Down) * @param {Camera} camera camera * @param {bool} useGL True to work with WebGL, false for SVG. When true, it uses devPixelRatio scale * @returns Point in Scene coordinates (0,0 at scene center, y Up) */ static fromCanvasHtmlToScene(p, camera, useGL) { // invCameraT * Tr(-Vw/2, -Vh/2) * InvertY * [Scale(devPixRatio)] let result = this.fromCanvasHtmlToViewport(p, camera, useGL); const v2c = this.getFromViewportToCenterTransform(camera, useGL); const invCameraT = this.getCurrentTransform(camera, useGL).inverse(); const M = v2c.compose(invCameraT); return M.apply(result.x, result.y); } /** * Transform a point from Scene to CanvasHtml * @param {*} p point {x, y} Scene coordinates (0,0 at scene center, y Up) * @param {Camera} camera camera * @param {bool} useGL True to work with WebGL, false for SVG. When true, it uses devPixelRatio scale * @returns Point in CanvasHtml (0,0 left,top, y Down) */ static fromSceneToCanvasHtml(p, camera, useGL) { // invCameraT * Tr(-Vw/2, -Vh/2) * InvertY * [Scale(devPixRatio)] let result = this.fromSceneToViewport(p, camera, useGL) return this.fromViewportToCanvasHtml(result, camera, useGL); } /** * Transform a point from Scene to Viewport * @param {*} p point {x, y} Scene coordinates (0,0 at scene center, y Up) * @param {Camera} camera camera * @param {bool} useGL True to work with WebGL, false for SVG. When true, it uses devPixelRatio scale * @returns Point in Viewport (0,0 left,bottom, y Up) */ static fromSceneToViewport(p, camera, useGL) { // FromCenterToViewport * CamT const c2v = this.getFromViewportToCenterTransform(camera, useGL).inverse(); const CameraT = this.getCurrentTransform(camera, useGL); const M = CameraT.compose(c2v); return M.apply(p.x, p.y); } /** * Transform a point from Scene to Viewport, using given transform and viewport * @param {*} p point {x, y} Scene coordinates (0,0 at scene center, y Up) * @param {Transform} cameraT camera transform * @param {*} viewport viewport {x,y,dx,dy,w,h} * @returns Point in Viewport (0,0 left,bottom, y Up) */ static fromSceneToViewportNoCamera(p, cameraT, viewport) { // invCameraT * Tr(-Vw/2, -Vh/2) * InvertY * [Scale(devPixRatio)] const c2v = this.getFromViewportToCenterTransformNoCamera(viewport).inverse(); const M = cameraT.compose(c2v); return M.apply(p.x, p.y); } /** * Transform a point from Viewport to Scene. * @param {*} p point {x, y} Viewport coordinates (0,0 at left,bottom, y Up) * @param {Camera} camera camera * @param {bool} useGL True to work with WebGL, false for SVG. When true, it uses devPixelRatio scale * @returns Point in Viewport (0,0 at scene center, y Up) */ static fromViewportToScene(p, camera, useGL) { // invCamT * FromViewportToCenter const v2c = this.getFromViewportToCenterTransform(camera, useGL); const invCameraT = this.getCurrentTransform(camera, useGL).inverse(); const M = v2c.compose(invCameraT); return M.apply(p.x, p.y); } /** * Transform a point from Viewport to Scene, using given transform and viewport * @param {*} p point {x, y} Viewport coordinates (0,0 at left,bottom, y Up) * @param {Transform} cameraT camera transform * @param {*} viewport viewport {x,y,dx,dy,w,h} * @returns Point in Viewport (0,0 at scene center, y Up) */ static fromViewportToSceneNoCamera(p, cameraT, viewport) { // invCamT * FromViewportToCenter const v2c = this.getFromViewportToCenterTransformNoCamera(viewport); const invCameraT = cameraT.inverse(); const M = v2c.compose(invCameraT); return M.apply(p.x, p.y); } /** * Transform a point from CanvasHtml to Image * @param {*} p point {x, y} in CanvasHtml (0,0 left,top, y Down) * @param {Camera} camera camera * @param {Transform} layerT layer transform * @param {*} layerSize {w, h} Size in pixel of the Layer * @param {bool} applyGLScale if true apply devPixelRatio scale. Keep it false when working with SVG * @returns Point in Image space (0,0 left,top of the image, y Down) */ static fromCanvasHtmlToImage(p, camera, layerT, layerSize, useGL) { // Translate(Lw/2, Lh/2) * InvLayerT * InvCameraT * Translate(-Vw/2, -Vh/2) * invertY * [Scale(devicePixelRatio)] // in other words... fromLayerToImage * invLayerT * fromCanvasHtmlToScene let result = this.fromCanvasHtmlToScene(p, camera, useGL); const invLayerT = layerT.inverse(); result = invLayerT.apply(result.x, result.y); result = this.fromLayerToImage(result, layerSize); return result; } /** * Transform a box from Viewport to Image coordinates * @param {BoundingBox} box in Viewport coordinates (0,0 at left,bottom, y Up) * @param {Transform} cameraT camera Transform * @param {*} viewport {x,y,dx,dy,w,h} * @param {Transform} layerT layer transform * @param {*} layerSize {w,h} layer pixel size * @returns box in Image coordinates (0,0 left,top, y Dowm) */ static fromViewportBoxToImageBox(box, cameraT, viewport, layerT, layerSize) { // InvertYonImage * T(Lw/2, Lh/2) * InvL * InvCam * T(-Vw/2,-Vh/2) let V2C = new Transform({x:-viewport.w/2, y:-viewport.h/2}); let C2S = cameraT.inverse(); let S2L = layerT.inverse(); let L2I = new Transform({x:layerSize.w/2, y:layerSize.h/2}); let M = V2C.compose(C2S.compose(S2L.compose(L2I))); let resultBox = new BoundingBox(); for(let i = 0; i &lt; 4; ++i) { let p = box.corner(i); p = M.apply(p.x, p.y); p = CoordinateSystem.invertY(p, layerSize); resultBox.mergePoint(p); } return resultBox; } /** * Transform a box from Layer to Scene * @param {BoundingBox} box box in Layer coordinates (0,0 at layer center) * @param {Transform} layerT layer transform * @returns box in Scene coordinates (0,0 at scene center) */ static fromLayerBoxToSceneBox(box, layerT) { return layerT.transformBox(box); } /** * Transform a box from Scene to Layer * @param {BoundingBox} box box in Layer coordinates (0,0 at layer center) * @param {Transform} layerT layer transform * @returns box in Scene coordinates (0,0 at scene center) */ static fromSceneBoxToLayerBox(box, layerT) { return layerT.inverse().transformBox(box); } /** * Transform a box from Layer to Viewport coordinates * @param {BoundingBox} box box in Layer coordinates (0,0 at Layer center y Up) * @param {Camera} camera * @param {Transform} layerT layer transform * @param {bool} useGL True to work with WebGL, false for SVG. When true, it uses devPixelRatio scale * @returns Box in Viewport coordinates (0,0 at left, bottom y Up) */ static fromLayerBoxToViewportBox(box, camera, layerT, useGL) { const M = this.getFromLayerToViewportTransform(camera, layerT, useGL); return M.transformBox(box); } /** * Transform a box from Layer to Viewport coordinates * @param {BoundingBox} box box in Layer coordinates (0,0 at Layer center y Up) * @param {Camera} camera * @param {Transform} layerT layer transform * @param {bool} useGL True to work with WebGL, false for SVG. When true, it uses devPixelRatio scale * @returns Box in Viewport coordinates (0,0 at left, bottom y Up) */ static fromViewportBoxToLayerBox(box, camera, layerT, useGL) { const M = this.getFromLayerToViewportTransform(camera, layerT, useGL).inverse(); return M.transformBox(box); } /** * Get a transform to go from viewport 0,0 at left, bottom y Up, to Center 0,0 at viewport center * @param {Camera} camera camera * @param {bool} useGL True to work with WebGL, false for SVG. When true, it uses devPixelRatio scale * @returns transform from Viewport to Center */ static getFromViewportToCenterTransform(camera, useGL) { const viewport = this.getViewport(camera, useGL); return this.getFromViewportToCenterTransformNoCamera(viewport); } /** * Get a transform to go from viewport 0,0 at left, bottom y Up, to Center 0,0 at viewport center * from explicit viewport param. (Not using camera parameter here) * @param {*} viewport viewport * @returns transform from Viewport to Center */ static getFromViewportToCenterTransformNoCamera(viewport) { return new Transform({x:viewport.x-viewport.w/2, y:viewport.y-viewport.h/2, z:1, a:0, t:0}); } /** * Return transform with y reflected wrt origin (y=-y) * @param {Transform} t * @returns {Transform} transform, with y reflected (around 0) */ static reflectY(t) { return new Transform({x:t.x, y:-t.y, z:t.z, a:t.a, t:t.t}); } /** * Get a transform to go from Layer (0,0 at Layer center y Up) to Viewport (0,0 at left,bottom y Up) * @param {Camera} camera * @param {Transform} layerT layer transform * @param {bool} useGL True to work with WebGL, false for SVG. When true, it uses devPixelRatio scale * @returns transform from Layer to Viewport */ static getFromLayerToViewportTransform(camera, layerT, useGL) { // M = Center2Viewport * CameraT * LayerT const cameraT = this.getCurrentTransform(camera, useGL); const c2v = this.getFromViewportToCenterTransform(camera, useGL).inverse(); const M = layerT.compose(cameraT.compose(c2v)); return M; } /** * Get a transform to go from Layer (0,0 at Layer center y Up) to Viewport (0,0 at left,bottom y Up) * @param {Transform} CameraT camera transform * @param {viewport} viewport {x,y,dx,dy,w,h} viewport * @param {Transform} layerT layer transform * @returns transform from Layer to Viewport */ static getFromLayerToViewportTransformNoCamera(cameraT, viewport, layerT) { // M = Center2Viewport * CameraT * LayerT const c2v = this.getFromViewportToCenterTransformNoCamera(viewport).inverse(); const M = layerT.compose(cameraT.compose(c2v)); return M; } /** * Scale x applying f scale factor * @param {*} p Point to be scaled * @param {Number} f Scale factor * @returns Point in CanvasContext (Scaled by devicePixelRation) */ static scale(p, f) { return { x:p.x * f, y:p.y * f}; } /** * Invert y with respect to viewport.h * @param {*} p Point to be transformed * @param {*} viewport current viewport * @returns Point with y inverted with respect to viewport.h */ static invertY(p, viewport) { return {x:p.x, y:viewport.h - p.y}; } /** * Return the camera viewport: scaled by devicePixelRatio if useGL is true. * @param {bool} useGL True to work with WebGL, false for SVG. When true viewport scaled by devPixelRatio * @returns Viewport */ static getViewport(camera, useGL) { return useGL ? camera.glViewport() : camera.viewport; } static getCurrentTransform(camera, useGL) { let cameraT = useGL ? camera.getGlCurrentTransform(performance.now()) : camera.getCurrentTransform(performance.now()); return cameraT; } } export { CoordinateSystem } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"Draggable.js.html":{"id":"Draggable.js.html","title":"Source: Draggable.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: Draggable.js /** * The Draggable class enables an element to be dragged and moved around within its parent element. * It creates a draggable container with a handle that can be used to initiate the dragging action. * The draggable element is positioned absolutely within its parent container and can be customized * through various options. * * The class requires either a top or bottom position and either a left or right position to be * specified through the options parameter. These determine the initial position of the draggable * element within its parent container. The default positioning is bottom=20 and right=20. * * Features: * - Flexible positioning using top/bottom and left/right coordinates * - Customizable handle size and appearance * - Automatic position updates on window resize * - Touch-enabled dragging support * - Configurable spacing between handle and content * * @class */ class Draggable { /** * Creates a new Draggable instance. * * @param {HTMLElement} element - The element to be made draggable * @param {HTMLElement|string} parent - The parent element where the draggable container will be appended. * Can be either an HTMLElement or a CSS selector string * @param {Object} [options] - Configuration options for the draggable element * @param {number} [options.top] - The initial top position in pixels. Mutually exclusive with bottom * @param {number} [options.bottom=20] - The initial bottom position in pixels. Mutually exclusive with top * @param {number} [options.left] - The initial left position in pixels. Mutually exclusive with right * @param {number} [options.right=20] - The initial right position in pixels. Mutually exclusive with left * @param {number} [options.handleSize=10] - The size of the drag handle in pixels * @param {number} [options.handleGap=5] - The gap between the handle and the draggable content in pixels * @param {number} [options.zindex=200] - The z-index of the draggable container * @param {string} [options.handleColor='#f0f0f0b3'] - The background color of the handle (supports rgba) */ constructor(element, parent, options) { options = Object.assign({ top: null, bottom: 20, left: null, right: 20, handleSize: 10, handleGap: 5, zindex: 200, handleColor: '#f0f0f0b3' // rgba(240, 240, 240, 0.7) }, options); Object.assign(this, options); this.element = element; this.parent = parent; if (typeof (this.parent) == 'string') this.parent = document.querySelector(this.parent); if (this.left) this.right = null; if (this.top) this.bottom = null; // Disable context menu if (!('setCtxMenu' in window)) { window.addEventListener(\"contextmenu\", e =&gt; e.preventDefault()); window.setCtxMenu = true; } this.container = document.createElement('div'); this.container.classList.add('openlime-draggable'); this.container.style = `display: flex; gap:${this.handleGap}px; position: absolute; z-index: ${this.zindex}; touch-action: none; visibility: visible;`; this.handle = document.createElement('div'); this.handle.style = `border-radius: 4px; background-color: ${this.handleColor}; padding: 0; width: ${this.handleSize}px; height: ${this.handleSize}px; z-index: 205;`; this.container.appendChild(this.handle); this.parent.appendChild(this.container); this.dragEvents(); this.element.style.position = 'unset'; this.appendChild(this.element); addEventListener(\"resize\", (event) =&gt; { this.updatePos(); }); } /** * Appends an HTML element to the draggable container and updates its position. * @param {HTMLElement} element - The element to append to the draggable container */ appendChild(e) { this.container.appendChild(e); this.updatePos(); } /** * Updates the position of the draggable container based on its current options and parent dimensions. * This method is called automatically on window resize and when elements are appended. * @private */ updatePos() { const w = this.container.offsetWidth; const h = this.container.offsetHeight; let t = 0; let l = 0; if (this.top) t = this.top; if (this.bottom) t = this.parent.offsetHeight - this.bottom - h; if (this.left) l = this.left; if (this.right) l = this.parent.offsetWidth - this.right - w; this.container.style.top = `${t}px`; this.container.style.left = `${l}px`; } /** * Sets up the drag event listeners for the handle. * Manages pointer events for drag start, drag, and drag end operations. * @private */ dragEvents() { let offsetX, offsetY; const self = this; this.handle.addEventListener(\"pointerdown\", dragStart); document.addEventListener(\"pointerup\", dragEnd); function dragStart(e) { e.preventDefault(); self.container.style.opacity = 0.6; offsetX = e.clientX - self.container.offsetLeft; offsetY = e.clientY - self.container.offsetTop; document.addEventListener(\"pointermove\", drag); } function drag(e) { e.preventDefault(); self.container.style.opacity = 0.6; self.container.style.left = e.clientX - offsetX + \"px\"; self.container.style.top = e.clientY - offsetY + \"px\"; } function dragEnd() { self.container.style.opacity = 1.0; document.removeEventListener(\"pointermove\", drag); } } } export { Draggable } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"FocusContext.js.html":{"id":"FocusContext.js.html","title":"Source: FocusContext.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: FocusContext.js import { Transform } from \"./Transform\"; import { CoordinateSystem } from \"./CoordinateSystem\"; /** * @typedef {Object} Viewport * @property {number} x - Viewport x position * @property {number} y - Viewport y position * @property {number} dx - Viewport horizontal offset * @property {number} dy - Viewport vertical offset * @property {number} w - Viewport width * @property {number} h - Viewport height */ /** * @typedef {Object} Focus * @property {Object} position - Lens center position in dataset coordinates * @property {number} position.x - X coordinate * @property {number} position.y - Y coordinate * @property {number} radius - Lens radius in dataset units */ /** * FocusContext manages the focus+context visualization technique for lens-based interaction. * It handles the distribution of user interactions between lens movement (focus) and camera * movement (context) to maintain optimal viewing conditions. * * Key responsibilities: * - Maintains proper spacing between lens and viewport boundaries * - Distributes pan and zoom operations between lens and camera * - Ensures lens stays within valid viewport bounds * - Adapts camera transform to accommodate lens position * - Manages lens radius constraints */ class FocusContext { /** * Distributes a pan operation between lens movement and camera transform to maintain focus+context * @param {Viewport} viewport - The current viewport * @param {Focus} focus - The lens object to be updated * @param {Transform} context - The camera transform to be updated * @param {Object} delta - Pan amount in dataset pixels * @param {number} delta.x - Horizontal pan amount * @param {number} delta.y - Vertical pan amount * @param {Object} imageSize - Dataset dimensions * @param {number} imageSize.w - Dataset width * @param {number} imageSize.h - Dataset height */ static pan(viewport, focus, context, delta, imageSize) { let txy = this.getAmountOfFocusContext(viewport, focus, context, delta); // When t is 1: already in focus&amp;context, move only the lens. // When t is 0.5: border situation, move both focus &amp; context to keep the lens steady on screen. // In this case the context should be moved of deltaFocus*scale to achieve steadyness. // Thus interpolate deltaContext between 0 and deltaFocus*s (with t ranging from 1 to 0.5) const deltaFocus = { x: delta.x * txy.x, y: delta.y * txy.y }; const deltaContext = { x: -deltaFocus.x * context.z * 2 * (1 - txy.x), y: -deltaFocus.y * context.z * 2 * (1 - txy.y) }; context.x += deltaContext.x; context.y += deltaContext.y; focus.position.x += deltaFocus.x; focus.position.y += deltaFocus.y; // Clamp lens position on dataset boundaries if (Math.abs(focus.position.x) &gt; imageSize.w / 2) { focus.position.x = imageSize.w / 2 * Math.sign(focus.position.x); } if (Math.abs(focus.position.y) &gt; imageSize.h / 2) { focus.position.y = imageSize.h / 2 * Math.sign(focus.position.y); } } /** * Distributes a scale operation between lens radius and camera zoom to maintain focus+context * @param {Camera} camera - The camera object containing viewport and zoom constraints * @param {Focus} focus - The lens object to be updated * @param {Transform} context - The camera transform to be updated * @param {number} dz - Scale factor to be applied (multiplier) */ static scale(camera, focus, context, dz) { const viewport = camera.viewport; const radiusRange = this.getRadiusRangeCanvas(viewport); const r = focus.radius * context.z; // Distribute lens scale between radius scale and context scale // When radius is going outside radius boundary, scale of the inverse amounts radius and zoom scale | screen size constant // When radius is changing from boundary condition to a valid one change only radius and no change to zoom scale. // From 0.5 to boundary condition, zoomScale vary is interpolated between 1 and 1/dz. const t = Math.max(0, Math.min(1, (r - radiusRange.min) / (radiusRange.max - radiusRange.min))); let zoomScaleAmount = 1; if (dz &gt; 1 &amp;&amp; t &gt; 0.5) { const t1 = (t - 0.5) * 2; zoomScaleAmount = 1 * (1 - t1) + t1 / dz; } else if (dz &lt; 1 &amp;&amp; t &lt; 0.5) { const t1 = 2 * t; zoomScaleAmount = (1 - t1) / dz + t1 * 1; } let radiusScaleAmount = dz; const newR = r * radiusScaleAmount; // Clamp radius if (newR &lt; radiusRange.min) { radiusScaleAmount = radiusRange.min / r; } else if (newR &gt; radiusRange.max) { radiusScaleAmount = radiusRange.max / r; } // Clamp scale if (context.z * zoomScaleAmount &lt; camera.minZoom) { zoomScaleAmount = camera.minZoom / context.z; } else if (context.z * zoomScaleAmount &gt; camera.maxZoom) { zoomScaleAmount = camera.maxZoom / context.z; } // Scale around lens center context.x += focus.position.x * context.z * (1 - zoomScaleAmount); context.y += focus.position.y * context.z * (1 - zoomScaleAmount); context.z = context.z * zoomScaleAmount; focus.radius *= radiusScaleAmount; } /** * Adjusts the camera transform to ensure focus+context conditions are met for a given lens * @param {Viewport} viewport - The current viewport * @param {Focus} focus - The lens object * @param {Transform} context - The camera transform to be updated * @param {number} desiredScale - Target scale for the camera transform */ static adaptContext(viewport, focus, context, desiredScale) { // Get current projected annotation center position //const pOld = context.sceneToViewportCoords(viewport, focus.position); const useGL = true; const pOld = CoordinateSystem.fromSceneToViewportNoCamera(focus.position, context, viewport, useGL); context.z = desiredScale; FocusContext.adaptContextScale(viewport, focus, context); // After scale, restore projected annotation position, in order to avoid // moving the annotation center outside the boundaries //const pNew = context.sceneToViewportCoords(viewport, focus.position); const pNew = CoordinateSystem.fromSceneToViewportNoCamera(focus.position, context, viewport, useGL); const delta = [pNew.x - pOld.x, pNew.y - pOld.y]; context.x -= delta.x; context.y += delta.y; // Force annotation inside the viewport FocusContext.adaptContextPosition(viewport, focus, context); } /** * Adjusts camera scale to ensure projected lens fits within viewport bounds * @param {Viewport} viewport - The current viewport * @param {Focus} focus - The lens object * @param {Transform} context - The camera transform to be updated * @private */ static adaptContextScale(viewport, focus, context) { const oldZ = context.z; const radiusRange = this.getRadiusRangeCanvas(viewport); const focusRadiusCanvas = focus.radius * context.z; let zoomScaleAmount = 1; if (focusRadiusCanvas &lt; radiusRange.min) { context.z = radiusRange.min / focus.radius; // zoomScaleAmount = (radiusRange.min / focus.radius) / context.z; } else if (focusRadiusCanvas &gt; radiusRange.max) { context.z = radiusRange.max / focus.radius; // zoomScaleAmount = (radiusRange.max / focus.radius) / context.z; } } /** * Adjusts camera position to maintain proper focus+context conditions * @param {Viewport} viewport - The current viewport * @param {Focus} focus - The lens object * @param {Transform} context - The camera transform to be updated * @private */ static adaptContextPosition(viewport, focus, context) { const delta = this.getCanvasBorder(focus, context); let box = this.getShrinkedBox(viewport, delta); const useGL = true; const screenP = CoordinateSystem.fromSceneToViewportNoCamera(focus.position, context, viewport, useGL); const deltaMinX = Math.max(0, (box.xLow - screenP.x)); const deltaMaxX = Math.min(0, (box.xHigh - screenP.x)); context.x += deltaMinX != 0 ? deltaMinX : deltaMaxX; const deltaMinY = Math.max(0, (box.yLow - screenP.y)); const deltaMaxY = Math.min(0, (box.yHigh - screenP.y)); context.y += deltaMinY != 0 ? deltaMinY : deltaMaxY; } /** * Calculates focus+context distribution factors for pan operations * @param {Viewport} viewport - The current viewport * @param {Focus} focus - The lens object * @param {Transform} context - The current camera transform * @param {Object} panDir - Pan direction vector * @param {number} panDir.x - Horizontal direction (-1 to 1) * @param {number} panDir.y - Vertical direction (-1 to 1) * @returns {Object} Distribution factors for x and y directions (0.5 to 1) * @private */ static getAmountOfFocusContext(viewport, focus, context, panDir) { // Returns a value t which is used to distribute pan between focus and context. // Return a value among 0.5 and 1. 1 is full focus and context, // 0.5 is borderline focus and context. const delta = this.getCanvasBorder(focus, context); const box = this.getShrinkedBox(viewport, delta); // const p = context.sceneToViewportCoords(viewport, focus.position); const useGL = true; const p = CoordinateSystem.fromSceneToViewportNoCamera(focus.position, context, viewport, useGL); const halfCanvasW = viewport.w / 2 - delta; const halfCanvasH = viewport.h / 2 - delta; let xDistance = (panDir.x &gt; 0 ? Math.max(0, Math.min(halfCanvasW, box.xHigh - p.x)) / (halfCanvasW) : Math.max(0, Math.min(halfCanvasW, p.x - box.xLow)) / ( /** * Distributes a pan operation between lens movement and camera transform to maintain focus+context * @param {Viewport} viewport - The current viewport * @param {Focus} focus - The lens object to be updated * @param {Transform} context - The camera transform to be updated * @param {Object} delta - Pan amount in dataset pixels * @param {number} delta.x - Horizontal pan amount * @param {number} delta.y - Vertical pan amount * @param {Object} imageSize - Dataset dimensions * @param {number} imageSize.w - Dataset width * @param {number} imageSize.h - Dataset height */halfCanvasW)); xDistance = this.smoothstep(xDistance, 0, 0.75); let yDistance = (panDir.y &gt; 0 ? Math.max(0, Math.min(halfCanvasH, box.yHigh - p.y)) / (halfCanvasH) : Math.max(0, Math.min(halfCanvasH, p.y - box.yLow)) / (halfCanvasH)); yDistance = this.smoothstep(yDistance, 0, 0.75); // Use d/2+05, because when d = 0.5 camera movement = lens movement // with the effect of the lens not moving from its canvas position. const txy = { x: xDistance / 2 + 0.5, y: yDistance / 2 + 0.5 }; return txy; } /** * Calculates minimum required distance between lens center and viewport boundary * @param {Focus} focus - The lens object * @param {Transform} context - The camera transform * @returns {number} Minimum distance in canvas pixels * @private */ static getCanvasBorder(focus, context) { // Return the min distance in canvas pixel of the lens center from the boundary. const radiusFactorFromBoundary = 1.5; return context.z * focus.radius * radiusFactorFromBoundary; // Distance Lens Center Canvas Border } /** * Creates a viewport box shrunk by specified padding * @param {Viewport} viewport - The current viewport * @param {number} delta - Padding amount in pixels * @returns {Object} Box with xLow, yLow, xHigh, yHigh coordinates * @private */ static getShrinkedBox(viewport, delta) { // Return the viewport box in canvas pixels, shrinked of delta pixels on the min,max corners const box = { xLow: delta, yLow: delta, xHigh: viewport.w - delta, yHigh: viewport.h - delta }; return box; } /** * Calculates acceptable lens radius range for current viewport * @param {Viewport} viewport - The current viewport * @returns {Object} Range object with min and max radius values in pixels * @private */ static getRadiusRangeCanvas(viewport) { // Returns the acceptable lens radius range in pixel for a certain viewport const maxMinRadiusRatio = 3; const minRadius = Math.min(viewport.w, viewport.h) * 0.1; const maxRadius = minRadius * maxMinRadiusRatio; return { min: minRadius, max: maxRadius }; } /** * Implements smoothstep interpolation between two values * @param {number} x - Input value * @param {number} x0 - Lower bound * @param {number} x1 - Upper bound * @returns {number} Smoothly interpolated value between 0 and 1 * @private */ static smoothstep(x, x0, x1) { // Return the smoothstep interpolation at x, between x0 and x1. if (x &lt; x0) { return 0; } else if (x &gt; x1) { return 1; } else { const t = (x - x0) / (x1 - x0); return t * t * (-2 * t + 3); } } } export { FocusContext } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"Layer.js.html":{"id":"Layer.js.html","title":"Source: Layer.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: Layer.js import { Transform } from './Transform.js' import { Layout } from './Layout.js' import { Cache } from './Cache.js' import { BoundingBox } from './BoundingBox.js' import { addSignals } from './Signals.js' /** * @typedef {Object} LayerOptions * @property {string|Layout} [layout='image'] - Layout/format of input raster images * @property {string} [type] - Identifier for specific derived layer class * @property {string} [id] - Unique layer identifier * @property {string} [label] - Display label for UI (defaults to id) * @property {Transform} [transform] - Transform from layer to canvas coordinates * @property {boolean} [visible=true] - Whether layer should be rendered * @property {number} [zindex=0] - Stack order for rendering (higher = on top) * @property {boolean} [overlay=false] - Whether layer renders in overlay mode * @property {number} [prefetchBorder=1] - Tile prefetch threshold in tile units * @property {number} [mipmapBias=0.4] - Texture resolution selection bias (0=highest, 1=lowest) * @property {Object.&lt;string, Shader&gt;} [shaders] - Map of available shaders * @property {Controller[]} [controllers] - Array of active UI controllers * @property {Layer} [sourceLayer] - Layer to share tiles with * @property {number} [pixelSize=0.0] - Physical size of a pixel in mm */ /** * Layer is the core class for rendering content in OpenLIME. * It manages raster data display, tile loading, and shader-based rendering. * * Features: * - Tile-based rendering with level-of-detail * - Shader-based visualization effects * - Automatic tile prefetching and caching * - Coordinate system transformations * - Animation and interpolation of shader parameters * - Support for multiple visualization modes * - Integration with layout systems for different data formats * * Layers can be used directly or serve as a base class for specialized layer types. * The class uses a registration system where derived classes register themselves, * allowing instantiation through the 'type' option. * * @fires Layer#ready - Fired when layer is initialized * @fires Layer#update - Fired when redraw is needed * @fires Layer#loaded - Fired when all tiles are loaded * @fires Layer#updateSize - Fired when layer size changes * * @example * ```javascript * // Create a basic image layer * const layer = new OpenLIME.Layer({ * layout: 'deepzoom', * type: 'image', * url: 'path/to/image.dzi', * label: 'Main Image' * }); * * // Add to viewer * viewer.addLayer('main', layer); * * // Listen for events * layer.addEvent('ready', () =&gt; { * console.log('Layer initialized'); * }); * ``` */ class Layer { /** * Creates a Layer. Additionally, an object literal with Layer `options` can be specified. * Signals are triggered when: * ready: the size and layout of the layer is known * update: some new tile is available, or some visualization parameters has changed * loaded: is fired when all the images needed have been downloaded * @param {Object} [options] * @param {(string|Layout)} options.layout='image' The layout (the format of the input raster images). * @param {string} options.type A string identifier to select the specific derived layer class to instantiate. * @param {string} options.id The layer unique identifier. * @param {string} options.label A string with a more comprehensive definition of the layer. If it exists, it is used in the UI layer menu, otherwise the `id` value is taken. * @param {Transform} options.transform The relative coords from layer to canvas. * @param {bool} options.visible=true Whether to render the layer. * @param {number} options.zindex Stack ordering value for the rendering of layers (higher zindex on top). * @param {bool} options.overlay=false Whether the layer must be rendered in overlay mode. * @param {number} options.prefetchBorder=1 The threshold (in tile units) around the current camera position for which to prefetch tiles. * @param {number} options.mipmapBias=0.2 Determine which texture is used when scale is not a power of 2. 0: use always the highest resulution, 1 the lowest, 0.5 switch halfway. * @param {Object} options.shaders A map (shadersId, shader) of the shaders usable for the layer rendering. See @link {Shader}. * @param {Controller[]} options.controllers An array of UI device controllers active on the layer. * @param {Layer} options.sourceLayer The layer from which to take the tiles (in order to avoid tile duplication). */ constructor(options) { //create from derived class if type specified if (options.type) { let type = options.type; delete options.type; if (type in this.types) { return this.types[type](options); } throw \"Layer type: \" + type + \" module has not been loaded\"; } this.init(options); } /** @ignore */ init(options) { Object.assign(this, { transform: new Transform(), viewport: null, debug: false, visible: true, zindex: 0, overlay: false, //in the GUI it won't affect the visibility of the other layers rasters: [], layers: [], controls: {}, controllers: [], shaders: {}, layout: 'image', shader: null, //current shader. gl: null, width: 0, height: 0, prefetchBorder: 1, mipmapBias: 0.4, pixelSize: 0.0, //signals: { update: [], ready: [], updateSize: [] }, //update callbacks for a redraw, ready once layout is known. //internal stuff, should not be passed as options. tiles: new Map(), //keep references to each texture (and status) indexed by level, x and y. //each tile is tex: [.. one for raster ..], missing: 3 missing tex before tile is ready. //only raster used by the shader will be loade. queue: [], //queue of tiles to be loaded. requested: new Map, //tiles requested. }); Object.assign(this, options); if (this.sourceLayer) this.tiles = this.sourceLayer.tiles; //FIXME avoid tiles duplication this.transform = new Transform(this.transform); if (typeof (this.layout) == 'string') { let size = { width: this.width, height: this.height }; if (this.server) size.server = this.server; this.setLayout(new Layout(null, this.layout, size)); } else { this.setLayout(this.layout); } } /** * Sets the layer's viewport * @param {Object} view - Viewport specification * @param {number} view.x - X position * @param {number} view.y - Y position * @param {number} view.dx - Width * @param {number} view.dy - Height * @fires Layer#update */ setViewport(view) { this.viewport = view; this.emit('update'); } /** * Adds a filter to the current shader * @param {Object} filter - Filter specification * @throws {Error} If no shader is set */ addShaderFilter(f) { if (!this.shader) throw \"Shader not implemented\"; this.shader.addFilter(f); } /** * Removes a filter from the current shader * @param {Object} name - Filter name * @throws {Error} If no shader is set */ removeShaderFilter(name) { if (!this.shader) throw \"Shader not implemented\"; this.shader.removeFilter(name); } /** * Removes all filters from the current shader * @param {Object} name - Filter name * @throws {Error} If no shader is set */ clearShaderFilters() { if (!this.shader) throw \"Shader not implemented\"; this.shader.clearFilters(); } /** * Sets the layer state with optional animation * @param {Object} state - State object with controls and mode * @param {number} [dt] - Animation duration in ms * @param {string} [easing='linear'] - Easing function ('linear'|'ease-out'|'ease-in-out') */ setState(state, dt, easing = 'linear') { if ('controls' in state) for (const [key, v] of Object.entries(state.controls)) { this.setControl(key, v, dt, easing); } if ('mode' in state &amp;&amp; state.mode) { this.setMode(state.mode); } } /** * Gets the current layer state * @param {Object} [stateMask] - Optional mask to filter returned state properties * @returns {Object} Current state object */ getState(stateMask = null) { const state = {}; state.controls = {}; for (const [key, v] of Object.entries(this.controls)) { if (!stateMask || ('controls' in stateMask &amp;&amp; key in stateMask.controls)) state.controls[key] = v.current.value; } if (!stateMask || 'mode' in stateMask) if (this.getMode()) state.mode = this.getMode(); return state; } /** @ignore */ setLayout(layout) { /** * The event is fired when a layer is initialized. * @event Layer#ready */ /** * The event is fired if a redraw is needed. * @event Layer#update */ this.layout = layout; let callback = () =&gt; { this.status = 'ready'; this.setupTiles(); //setup expect status to be ready! this.emit('ready'); this.emit('update'); }; if (layout.status == 'ready') //layout already initialized. callback(); else layout.addEvent('ready', callback); // Set signal to acknowledge change of bbox when it is known. Let this signal go up to canvas this.layout.addEvent('updateSize', () =&gt; { if (this.shader) this.shader.setTileSize(this.layout.getTileSize()); this.emit('updateSize'); }); } /** * Sets the layer's transform * @param {Transform} tx - New transform * @fires Layer#updateSize */ setTransform(tx) { //FIXME this.transform = tx; this.emit('updateSize'); } /** * Sets the active shader * @param {string} id - Shader identifier from registered shaders * @throws {Error} If shader ID is not found * @fires Layer#update */ setShader(id) { if (!id in this.shaders) throw \"Unknown shader: \" + id; this.shader = this.shaders[id]; this.setupTiles(); this.shader.addEvent('update', () =&gt; { this.emit('update'); }); } /** * Gets the current shader visualization mode * @returns {string|null} Current mode or null if no shader */ getMode() { if (this.shader) return this.shader.mode; return null; } /** * Gets available shader modes * @returns {string[]} Array of available modes */ getModes() { if (this.shader) return this.shader.modes; return []; } /** * Sets shader visualization mode * @param {string} mode - Mode to set * @fires Layer#update */ setMode(mode) { this.shader.setMode(mode); this.emit('update'); } /** * Sets layer visibility * @param {boolean} visible - Whether layer should be visible * @fires Layer#update */ setVisible(visible) { this.visible = visible; this.previouslyNeeded = null; this.emit('update'); } /** * Sets layer rendering order * @param {number} zindex - Stack order value * @fires Layer#update */ setZindex(zindex) { this.zindex = zindex; this.emit('update'); } /** * Computes minimum scale across layers * @param {Object.&lt;string, Layer&gt;} layers - Map of layers * @param {boolean} discardHidden - Whether to ignore hidden layers * @returns {number} Minimum scale value * @static */ static computeLayersMinScale(layers, discardHidden) { if (layers == undefined || layers == null) { console.log(\"ASKING SCALE INFO ON NO LAYERS\"); return 1; } let layersScale = 1; for (let layer of Object.values(layers)) { if (!discardHidden || layer.visible) { let s = layer.scale(); layersScale = Math.min(layersScale, s); } } return layersScale; } /** * Gets layer scale * @returns {number} Current scale value */ scale() { // FIXME: this do not consider children layers return this.transform.z; } /** * Gets pixel size in millimeters * @returns {number} Size of one pixel in mm */ pixelSizePerMM() { return this.pixelSize * this.transform.z; } /** * Gets layer bounding box in scene coordinates * @returns {BoundingBox} Bounding box */ boundingBox() { // FIXME: this do not consider children layers // Take layout bbox let result = this.layout.boundingBox(); // Apply layer transform to bbox if (this.transform != null &amp;&amp; this.transform != undefined) { result = this.transform.transformBox(result); } return result; } /** * Computes combined bounding box of multiple layers * @param {Object.&lt;string, Layer&gt;} layers - Map of layers * @param {boolean} discardHidden - Whether to ignore hidden layers * @returns {BoundingBox} Combined bounding box * @static */ static computeLayersBBox(layers, discardHidden) { if (layers == undefined || layers == null) { console.log(\"ASKING BBOX INFO ON NO LAYERS\"); let emptyBox = new BoundingBox(); return emptyBox; } let layersBbox = new BoundingBox(); for (let layer of Object.values(layers)) { if ((!discardHidden || layer.visible) &amp;&amp; layer.layout.width) { const bbox = layer.boundingBox(); layersBbox.mergeBox(bbox); } } return layersBbox; } /** * Gets the shader parameter control corresponding to `name` * @param {*} name The name of the control. * return {*} The control */ getControl(name) { let control = this.controls[name] ? this.controls[name] : null; if (control) { let now = performance.now(); this.interpolateControl(control, now); } return control; } /** * Adds a shader parameter control * @param {string} name - Control identifier * @param {*} value - Initial value * @throws {Error} If control already exists */ addControl(name, value) { if (this.controls[name]) throw new Error(`Control \"$name\" already exist!`); let now = performance.now(); this.controls[name] = { 'source': { 'value': value, 't': now }, 'target': { 'value': value, 't': now }, 'current': { 'value': value, 't': now }, 'easing': 'linear' }; } /** * Sets a shader control value with optional animation * @param {string} name - Control identifier * @param {*} value - New value * @param {number} [dt] - Animation duration in ms * @param {string} [easing='linear'] - Easing function * @fires Layer#update */ setControl(name, value, dt, easing = 'linear') { //When are created? let now = performance.now(); let control = this.controls[name]; this.interpolateControl(control, now); control.source.value = [...control.current.value]; control.source.t = now; control.target.value = [...value]; control.target.t = now + dt; control.easing = easing; this.emit('update'); } /** * Updates control interpolation * @returns {boolean} Whether all interpolations are complete */ interpolateControls() { let now = performance.now(); let done = true; for (let control of Object.values(this.controls)) done = this.interpolateControl(control, now) &amp;&amp; done; return done; } /** @ignore */ interpolateControl(control, time) { let source = control.source; let target = control.target; let current = control.current; current.t = time; if (time &lt; source.t) { current.value = [...source.value]; return false; } if (time &gt; target.t - 0.0001) { let done = current.value.every((e, i) =&gt; e === target.value[i]); current.value = [...target.value]; return done; } let dt = (target.t - source.t); let tt = (time - source.t) / dt; switch (control.easing) { case 'ease-out': tt = 1 - Math.pow(1 - tt, 2); break; case 'ease-in-out': tt = tt &lt; 0.5 ? 2 * tt * tt : 1 - Math.pow(-2 * tt + 2, 2) / 2; break; } let st = 1 - tt; current.value = []; for (let i = 0; i &lt; source.value.length; i++) current.value[i] = (st * source.value[i] + tt * target.value[i]); return false; } ///////////// /// CACHE HANDLING &amp; RENDERING /** @ignore */ dropTile(tile) { for (let i = 0; i &lt; tile.tex.length; i++) { if (tile.tex[i]) { this.gl.deleteTexture(tile.tex[i]); } } this.tiles.delete(tile.index); } /** * Clears layer resources and resets state * @private */ clear() { this.ibuffer = this.vbuffer = null; Cache.flushLayer(this); this.tiles = new Map(); //TODO We need to drop these tile textures before clearing Map this.setupTiles(); this.queue = []; this.previouslyNeeded = false; } /* * Renders the layer */ /** @ignore */ draw(transform, viewport) { //exception for layout image where we still do not know the image size //how linear or srgb should be specified here. // gl.pixelStorei(gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, gl.NONE); if (this.status != 'ready')// || this.tiles.size == 0) return true; if (!this.shader) throw \"Shader not specified!\"; let done = this.interpolateControls(); let parent_viewport = viewport; if (this.viewport) { viewport = this.viewport; this.gl.viewport(viewport.x, viewport.y, viewport.dx, viewport.dy); } this.prepareWebGL(); // find which quads to draw and in case request for them let available = this.layout.available(viewport, transform, this.transform, 0, this.mipmapBias, this.tiles); transform = this.transform.compose(transform); let matrix = transform.projectionMatrix(viewport); this.gl.uniformMatrix4fv(this.shader.matrixlocation, this.gl.FALSE, matrix); this.updateAllTileBuffers(available); // bind filter textures let iSampler = this.shader.samplers.length; for (const f of this.shader.filters) { for (let i = 0; i &lt; f.samplers.length; i++) { this.gl.uniform1i(f.samplers[i].location, iSampler); this.gl.activeTexture(this.gl.TEXTURE0 + iSampler); this.gl.bindTexture(this.gl.TEXTURE_2D, f.samplers[i].tex); iSampler++; } } let i = 0; for (let tile of Object.values(available)) { // if(tile.complete) this.drawTile(tile, i); ++i; } if (this.vieport) this.gl.viewport(parent_viewport.x, parent_viewport.y, parent_viewport.dx, parent_viewport.dy); return done; } /** @ignore */ drawTile(tile, index) { //let tiledata = this.tiles.get(tile.index); if (tile.missing != 0) throw \"Attempt to draw tile still missing textures\" //coords and texture buffers updated once for all tiles from main draw() call //bind textures let gl = this.gl; for (var i = 0; i &lt; this.shader.samplers.length; i++) { let id = this.shader.samplers[i].id; gl.uniform1i(this.shader.samplers[i].location, i); gl.activeTexture(gl.TEXTURE0 + i); gl.bindTexture(gl.TEXTURE_2D, tile.tex[id]); } // for (var i = 0; i &lt; this.shader.samplers.length; i++) { // let id = this.shader.samplers[i].id; // gl.uniform1i(this.shader.samplers[i].location, i); // gl.activeTexture(gl.TEXTURE0 + i); // gl.bindTexture(gl.TEXTURE_2D, tile.tex[id]); // } // FIXME - TO BE REMOVED? const byteOffset = this.getTileByteOffset(index); gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, byteOffset); } getTileByteOffset(index) { return index * 6 * 2; } /* given the full pyramid of needed tiles for a certain bounding box, * starts from the preferred levels and goes up in the hierarchy if a tile is missing. * complete is true if all of the 'brothers' in the hierarchy are loaded, * drawing incomplete tiles enhance the resolution early at the cost of some overdrawing and problems with opacity. */ /** @ignore */ /*toRender(needed) { let torender = {}; //array of minlevel, actual level, x, y (referred to minlevel) let brothers = {}; let minlevel = needed.level; let box = needed.pyramid[minlevel]; for (let y = box.yLow; y &lt; box.yHigh; y++) { for (let x = box.xLow; x &lt; box.xHigh; x++) { let level = minlevel; while (level &gt;= 0) { let d = minlevel - level; let index = this.layout.index(level, x &gt;&gt; d, y &gt;&gt; d); if (this.tiles.has(index) &amp;&amp; this.tiles.get(index).missing == 0) { torender[index] = this.tiles.get(index); //{ index: index, level: level, x: x &gt;&gt; d, y: y &gt;&gt; d, complete: true }; break; } else { let sx = (x &gt;&gt; (d + 1)) &lt;&lt; 1; let sy = (y &gt;&gt; (d + 1)) &lt;&lt; 1; brothers[this.layout.index(level, sx, sy)] = 1; brothers[this.layout.index(level, sx + 1, sy)] = 1; brothers[this.layout.index(level, sx + 1, sy + 1)] = 1; brothers[this.layout.index(level, sx, sy + 1)] = 1; } level--; } } } for (let index in brothers) { if (index in torender) torender[index].complete = false; } return torender; }*/ /** @ignore */ // Update tile vertex and texture coords. // Currently called by derived classes updateTileBuffers(coords, tcoords) { let gl = this.gl; //TODO to reduce the number of calls (probably not needed) we can join buffers, and just make one call per draw! (except the bufferData, which is per node) gl.bindBuffer(gl.ARRAY_BUFFER, this.vbuffer); gl.bufferData(gl.ARRAY_BUFFER, coords, gl.STATIC_DRAW); //FIXME this is not needed every time. gl.vertexAttribPointer(this.shader.coordattrib, 3, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(this.shader.coordattrib); gl.bindBuffer(gl.ARRAY_BUFFER, this.tbuffer); gl.bufferData(gl.ARRAY_BUFFER, tcoords, gl.STATIC_DRAW); gl.vertexAttribPointer(this.shader.texattrib, 2, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(this.shader.texattrib); } /** @ignore */ // Update tile vertex and texture coords of all the tiles in a single VBO updateAllTileBuffers(tiles) { let gl = this.gl; //use this.tiles instead. let N = Object.values(tiles).length; if (N == 0) return; const szV = 12; const szT = 8; const szI = 6; const iBuffer = new Uint16Array(szI * N); const vBuffer = new Float32Array(szV * N); const tBuffer = new Float32Array(szT * N); let i = 0; for (let tile of Object.values(tiles)) { let c = this.layout.tileCoords(tile); vBuffer.set(c.coords, i * szV); tBuffer.set(c.tcoords, i * szT); const off = i * 4; tile.indexBufferByteOffset = 2 * i * szI; iBuffer.set([off + 3, off + 2, off + 1, off + 3, off + 1, off + 0], i * szI); ++i; } gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.ibuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, iBuffer, gl.STATIC_DRAW); gl.bindBuffer(gl.ARRAY_BUFFER, this.vbuffer); gl.bufferData(gl.ARRAY_BUFFER, vBuffer, gl.STATIC_DRAW); gl.vertexAttribPointer(this.shader.coordattrib, 3, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(this.shader.coordattrib); gl.bindBuffer(gl.ARRAY_BUFFER, this.tbuffer); gl.bufferData(gl.ARRAY_BUFFER, tBuffer, gl.STATIC_DRAW); gl.vertexAttribPointer(this.shader.texattrib, 2, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(this.shader.texattrib); } /* * If layout is ready and shader is assigned, creates or update tiles to keep track of what is missing. */ /** @ignore */ setupTiles() { if (!this.shader || !this.layout || this.layout.status != 'ready') return; for (let tile of this.tiles) { tile.missing = this.shader.samplers.length; for (let sampler of this.shader.samplers) { if (tile.tex[sampler.id]) tile.missing--; } } } /** @ignore */ prepareWebGL() { let gl = this.gl; if (!this.ibuffer) { //this part might go into another function. this.ibuffer = gl.createBuffer(); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.ibuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array([3, 2, 1, 3, 1, 0]), gl.STATIC_DRAW); this.vbuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, this.vbuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0, 0, 0, 0, 1, 0, 1, 1, 0, 1, 0, 0]), gl.STATIC_DRAW); this.tbuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, this.tbuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0, 0, 0, 1, 1, 1, 1, 0]), gl.STATIC_DRAW); } if (this.shader.needsUpdate) { this.shader.debug = this.debug; this.shader.createProgram(gl); } gl.useProgram(this.shader.program); this.shader.updateUniforms(gl); } /** @ignore */ sameNeeded(a, b) { if (a.level != b.level) return false; for (let p of ['xLow', 'xHigh', 'yLow', 'yHigh']) if (a.pyramid[a.level][p] != b.pyramid[a.level][p]) return false; return true; } /** * Initiates tile prefetching based on viewport * @param {Transform} transform - Current view transform * @param {Object} viewport - Current viewport * @private */ prefetch(transform, viewport) { if (this.viewport) viewport = this.viewport; if (this.layers.length != 0) { //combine layers for (let layer of this.layers) layer.prefetch(transform, viewport); } if (this.rasters.length == 0) return; if (this.status != 'ready') return; if (typeof (this.layout) != 'object') throw \"AH!\"; /*let needed = this.layout.needed(viewport, transform, this.prefetchBorder, this.mipmapBias, this.tiles); this.queue = []; let now = performance.now(); let missing = this.shader.samplers.length; for(let tile of needed) { if(tile.missing === null) tile.missing = missing; if (tile.missing != 0 &amp;&amp; !this.requested[index]) tmp.push(tile); } */ this.queue = this.layout.needed(viewport, transform, this.transform, this.prefetchBorder, this.mipmapBias, this.tiles); /* let needed = this.layout.neededBox(viewport, transform, this.prefetchBorder, this.mipmapBias); if (this.previouslyNeeded &amp;&amp; this.sameNeeded(this.previouslyNeeded, needed)) return; this.previouslyNeeded = needed; this.queue = []; let now = performance.now(); //look for needed nodes and prefetched nodes (on the pos destination let missing = this.shader.samplers.length; for (let level = 0; level &lt;= needed.level; level++) { let box = needed.pyramid[level]; let tmp = []; for (let y = box.yLow; y &lt; box.yHigh; y++) { for (let x = box.xLow; x &lt; box.xHigh; x++) { let index = this.layout.index(level, x, y); let tile = this.tiles.get(index) || { index, x, y, missing, tex: [], level }; tile.time = now; tile.priority = needed.level - level; if (tile.missing != 0 &amp;&amp; !this.requested[index]) tmp.push(tile); } } let c = box.center(); //sort tiles by distance to the center TODO: check it's correct! tmp.sort(function (a, b) { return Math.abs(a.x - c[0]) + Math.abs(a.y - c[1]) - Math.abs(b.x - c[0]) - Math.abs(b.y - c[1]); }); this.queue = this.queue.concat(tmp); }*/ Cache.setCandidates(this); } /** * Loads a specific tile * @param {Object} tile - Tile specification * @param {Function} callback - Completion callback * @returns {Promise&lt;void&gt;} * @private */ async loadTile(tile, callback) { if (this.tiles.has(tile.index)) throw \"AAARRGGHHH double tile!\"; if (this.requested.has(tile.index)) { console.log(\"Warning: double request!\"); callback(\"Double tile request\"); return; } this.tiles.set(tile.index, tile); this.requested.set(tile.index, true); if (this.layout.type == 'itarzoom') { tile.url = this.layout.getTileURL(null, tile); let options = {}; if (tile.end) options.headers = { range: `bytes=${tile.start}-${tile.end}`, 'Accept-Encoding': 'indentity' } var response = await fetch(tile.url, options); if (!response.ok) { callback(\"Failed loading \" + tile.url + \": \" + response.statusText); return; } let blob = await response.blob(); let i = 0; for (let sampler of this.shader.samplers) { let raster = this.rasters[sampler.id]; let imgblob = blob.slice(tile.offsets[i], tile.offsets[i + 1]); const img = await raster.blobToImage(imgblob, this.gl); let tex = raster.loadTexture(this.gl, img); let size = img.width * img.height * 3; tile.size += size; tile.tex[sampler.id] = tex; tile.w = img.width; tile.h = img.height; i++; } tile.missing = 0; this.emit('update'); this.requested.delete(tile.index); if (callback) callback(tile.size); return; } tile.missing = this.shader.samplers.length; for (let sampler of this.shader.samplers) { let raster = this.rasters[sampler.id]; tile.url = this.layout.getTileURL(sampler.id, tile); const [tex, size] = await raster.loadImage(tile, this.gl); // TODO Parallelize request and url must be a parameter (implement request ques per url) if (this.layout.type == \"image\") { this.layout.width = raster.width; this.layout.height = raster.height; this.layout.emit('updateSize'); } tile.size += size; tile.tex[sampler.id] = tex; tile.missing--; if (tile.missing &lt;= 0) { this.emit('update'); this.requested.delete(tile.index); if (this.requested.size == 0) this.emit('loaded'); if (callback) callback(size); } } } } Layer.prototype.types = {} addSignals(Layer, 'ready', 'update', 'loaded', 'updateSize'); export { Layer } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"LayerAnnotation.js.html":{"id":"LayerAnnotation.js.html","title":"Source: LayerAnnotation.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: LayerAnnotation.js import { Annotation } from './Annotation.js'; import { Layer } from './Layer.js' import { addSignals } from './Signals.js'; /** * @typedef {Object} LayerAnnotationOptions * @property {string} [style] - CSS styles for annotation rendering * @property {string|Annotation[]} [annotations=[]] - URL of JSON annotation data or array of annotations * @property {boolean} [overlay=true] - Whether annotations render as overlay * @property {Set&lt;string&gt;} [selected=new Set()] - Set of selected annotation IDs * @property {Object} [annotationsListEntry=null] - UI entry for annotations list * @extends LayerOptions */ /** * LayerAnnotation provides functionality for displaying and managing annotations overlaid on other layers. * It supports both local and remote annotation data, selection management, and UI integration. * * Features: * - Display of text, graphics, and glyph annotations * - Remote annotation loading via JSON/HTTP * - Selection management * - Visibility toggling per annotation * - UI integration with annotation list * - Annotation event handling * * The layer automatically handles: * - Annotation data loading and parsing * - UI synchronization * - Visibility states * - Selection states * - Event propagation * * @extends Layer * @fires LayerAnnotation#selected - Fired when annotation selection changes, with selected annotation as parameter * @fires LayerAnnotation#loaded - Fired when annotations are loaded * @fires Layer#update - Inherited from Layer, fired when redraw needed * @fires Layer#ready - Inherited from Layer, fired when layer is ready * * @example * ```javascript * // Create annotation layer from remote JSON * const annoLayer = new OpenLIME.LayerAnnotation({ * annotations: 'https://example.com/annotations.json', * style: '.annotation { color: red; }', * overlay: true * }); * * // Listen for selection changes * annoLayer.addEvent('selected', (annotation) =&gt; { * console.log('Selected annotation:', annotation.label); * }); * * // Add to viewer * viewer.addLayer('annotations', annoLayer); * ``` */ class LayerAnnotation extends Layer { //FIXME CustomData Object template {name: { label: defaultValue: type:number,enum,string,boolean min: max: enum:[] }} /** * Instantiates a LayerAnnotation object. * @param {Object} [options] An object literal with options that inherits from {@link Layer}. * @param {string} options.style Properties to style annotations. * @param {(string|Array)} options.annotations The URL of the annotation data (JSON file or HTTP GET Request to an annotation server) or an array of annotations. */ constructor(options) { options = Object.assign({ // geometry: null, //unused, might want to store here the quads/shapes for opengl rendering style: null, //straightforward for svg annotations, to be defined or opengl rendering annotations: [], selected: new Set, overlay: true, annotationsListEntry: null, //TODO: horrible name for the interface list of annotations }, options); super(options); if (typeof (this.annotations) == \"string\") { //assumes it is an URL (async () =&gt; { await this.loadAnnotations(this.annotations); })(); } } /** * Loads annotations from a URL * @param {string} url - URL to fetch annotations from (JSON format) * @fires LayerAnnotation#loaded * @fires Layer#update * @fires Layer#ready * @private * @async */ async loadAnnotations(url) { const headers = new Headers(); headers.append('pragma', 'no-cache'); headers.append('cache-control', 'no-cache'); var response = await fetch(url, { method: 'GET', headers: headers, }); if (!response.ok) { this.status = \"Failed loading \" + this.url + \": \" + response.statusText; return; } this.annotations = await response.json(); if (this.annotations.status == 'error') { alert(\"Failed to load annotations: \" + this.annotations.msg); return; } //this.annotations = this.annotations.map(a =&gt; '@context' in a ? Annotation.fromJsonLd(a): a); this.annotations = this.annotations.map(a =&gt; new Annotation(a)); for (let a of this.annotations) if (a.publish != 1) a.visible = false; //this.annotations.sort((a, b) =&gt; a.label.localeCompare(b.label)); if (this.annotationsListEntry) this.createAnnotationsList(); this.emit('update'); this.status = 'ready'; this.emit('ready'); this.emit('loaded'); } /** * Creates a new annotation and adds it to the layer * @param {Annotation} [annotation] - Optional pre-configured annotation * @returns {Annotation} The newly created annotation * @private */ newAnnotation(annotation) { if (!annotation) annotation = new Annotation(); this.annotations.push(annotation); let html = this.createAnnotationEntry(annotation); let template = document.createElement('template'); template.innerHTML = html.trim(); let list = this.annotationsListEntry.element.parentElement.querySelector('.openlime-list'); list.appendChild(template.content.firstChild); this.clearSelected(); //this.setSelected(annotation); return annotation; } /** * Creates the UI entry for the annotations list * @returns {Object} Configuration object for annotations list UI * @private */ annotationsEntry() { return this.annotationsListEntry = { html: '', list: [], //will be filled later. classes: 'openlime-annotations', status: () =&gt; 'active', oncreate: () =&gt; { if (Array.isArray(this.annotations)) this.createAnnotationsList(); } } } /** * Creates the complete annotations list UI * @private */ createAnnotationsList() { let html = ''; for (let a of this.annotations) { html += this.createAnnotationEntry(a); } let list = this.annotationsListEntry.element.parentElement.querySelector('.openlime-list'); list.innerHTML = html; list.addEventListener('click', (e) =&gt; { let svg = e.srcElement.closest('svg'); if (svg) { let entry = svg.closest('[data-annotation]') entry.classList.toggle('hidden'); let id = entry.getAttribute('data-annotation'); let anno = this.getAnnotationById(id); anno.visible = !anno.visible; anno.needsUpdate = true; this.emit('update'); } let id = e.srcElement.getAttribute('data-annotation'); if (id) { this.clearSelected(); let anno = this.getAnnotationById(id); this.setSelected(anno, true); } }); } /** * Creates a single annotation entry for the UI * @param {Annotation} annotation - The annotation to create an entry for * @returns {string} HTML string for the annotation entry * @private */ createAnnotationEntry(a) { return `&lt;a href=\"#\" data-annotation=\"${a.id}\" class=\"openlime-entry ${a.visible == 0 ? 'hidden' : ''}\"&gt;${a.label || ''} &lt;svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"openlime-eye\"&gt;&lt;path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"&gt;&lt;/path&gt;&lt;circle cx=\"12\" cy=\"12\" r=\"3\"&gt;&lt;/circle&gt;&lt;/svg&gt; &lt;svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"openlime-eye-off\"&gt;&lt;path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24\"&gt;&lt;/path&gt;&lt;line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\"&gt;&lt;/line&gt;&lt;/svg&gt; &lt;/a&gt;`; } /** * Retrieves an annotation by its ID * @param {string} id - Annotation identifier * @returns {Annotation|null} The found annotation or null if not found */ getAnnotationById(id) { for (const anno of this.annotations) if (anno.id == id) return anno; return null; } /** * Clears all annotation selections * @private */ clearSelected() { this.annotationsListEntry.element.parentElement.querySelectorAll(`[data-annotation]`).forEach((e) =&gt; e.classList.remove('selected')); this.selected.clear(); } /** * Sets the selection state of an annotation * @param {Annotation} anno - The annotation to select/deselect * @param {boolean} [on=true] - Whether to select (true) or deselect (false) * @fires LayerAnnotation#selected */ setSelected(anno, on = true) { this.annotationsListEntry.element.parentElement.querySelector(`[data-annotation=\"${anno.id}\"]`).classList.toggle('selected', on); if (on) this.selected.add(anno.id); else this.selected.delete(anno.id); this.emit('selected', anno); } } addSignals(LayerAnnotation, 'selected', 'loaded'); export { LayerAnnotation } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"LayerAnnotationImage.js.html":{"id":"LayerAnnotationImage.js.html","title":"Source: LayerAnnotationImage.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: LayerAnnotationImage.js import { LayerAnnotation } from './LayerAnnotation.js' import { Layer } from './Layer.js' import { Raster } from './Raster.js' import { Shader } from './Shader.js' import { LayoutTileImages } from './LayoutTileImages.js'; /** * @typedef {Object} LayerAnnotationImageOptions * @property {string} [url] - URL to the annotations JSON file * @property {string} [path] - Base path for annotation image files * @property {string} [format='vec4'] - Raster format for image data * @extends LayerAnnotationOptions */ /** * LayerAnnotationImage extends LayerAnnotation to provide support for image-based annotations. * Each annotation corresponds to a single tile in the layer, with customizable visibility * and shader-based rendering. * * Features: * - Image-based annotation rendering * - Per-annotation visibility control * - Custom shader support for image processing * - Automatic texture management * - WebGL/WebGL2 compatibility * - Multi-format raster support * * The class handles: * - Image loading and caching * - Texture creation and binding * - Shader setup and compilation * - Tile visibility management * - WebGL state management * * @extends LayerAnnotation * * @example * ```javascript * // Create image annotation layer * const imageAnnoLayer = new OpenLIME.LayerAnnotationImage({ * url: 'annotations.json', * path: './annotation-images/', * format: 'vec4' * }); * * // Configure visibility * imageAnnoLayer.setAllTilesVisible(true); * imageAnnoLayer.setTileVisible(0, false); // Hide first annotation * * // Add to viewer * viewer.addLayer('imageAnnotations', imageAnnoLayer); * ``` */ class LayerAnnotationImage extends LayerAnnotation { /** * Creates a new LayerAnnotationImage instance * @param {LayerAnnotationImageOptions} options - Configuration options * @throws {Error} If path is not specified (warns in console) */ constructor(options) { const url = options.url; if (options.path == null) { console.log(\"WARNING MISSING ANNOTATION PATH, SET TO ./annot/\"); } super(options); const rasterFormat = this.format != null ? this.format : 'vec4'; let initCallback = () =&gt; { // Set Annotation Urls path if (options.path) { this.layout.path = options.path; } else if (url != null) { // Extract path from annotation.json path this.layout.setPathFromUrl(path); } for (let a of this.annotations) { let raster = new Raster({ format: rasterFormat }); this.rasters.push(raster); } console.log(\"Set \" + this.annotations.length + \" annotations into layout\"); this.setupShader(rasterFormat); this.layout.setTileDescriptors(this.annotations); } this.addEvent('loaded', initCallback); } /** * Gets the number of annotations in the layer * @returns {number} Number of annotations */ length() { return this.annotations.length; } /** * Sets visibility for a specific annotation/tile * @param {number} index - Index of the annotation * @param {boolean} visible - Whether the annotation should be visible */ setTileVisible(index, visible) { this.layout.setTileVisible(index, visible); //this.annotations[index].needsUpdate = true; //this.emit('update'); } /** * Sets visibility for all annotations/tiles * @param {boolean} visible - Whether all annotations should be visible */ setAllTilesVisible(visible) { this.layout.setAllTilesVisible(visible); // for(let a of this.annotations) { // a.needsUpdate = true; // } //this.emit('update'); } /** * Renders a specific tile/annotation * @param {Object} tile - Tile object containing texture information * @param {number} index - Index of the tile * @throws {Error} If tile is missing textures * @private */ drawTile(tile, index) { if (tile.missing != 0) throw \"Attempt to draw tile still missing textures\" const idx = tile.index; //coords and texture buffers updated once for all tiles from main draw() call //bind texture of this tile only (each tile corresponds to an image) let gl = this.gl; let id = this.shader.samplers[idx].id; gl.uniform1i(this.shader.samplers[idx].location, idx); gl.activeTexture(gl.TEXTURE0 + idx); gl.bindTexture(gl.TEXTURE_2D, tile.tex[id]); const byteOffset = this.getTileByteOffset(index); gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, byteOffset); } /** * Configures the shader for rendering annotations * @param {string} rasterFormat - Format of the raster data ('vec4', etc) * @private */ setupShader(rasterFormat) { let samplers = []; let N = this.rasters.length; for (let i = 0; i &lt; N; ++i) { samplers.push({ id: i, name: 'kd', type: rasterFormat }); } let shader = new Shader({ 'label': 'Rgb', 'samplers': samplers //[{ id:0, name:'kd', type: rasterFormat }] }); shader.fragShaderSrc = function (gl) { let gl2 = !(gl instanceof WebGLRenderingContext); let str = ` uniform sampler2D kd; ${gl2 ? 'in' : 'varying'} vec2 v_texcoord; vec4 data() { return texture${gl2 ? '' : '2D'}(kd, v_texcoord); } `; return str; }; this.shaders = { 'standard': shader }; this.setShader('standard'); } } Layer.prototype.types['annotation_image'] = (options) =&gt; { return new LayerAnnotationImage(options); } export { LayerAnnotationImage } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"LayerBRDF.js.html":{"id":"LayerBRDF.js.html","title":"Source: LayerBRDF.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: LayerBRDF.js import { Layer } from './Layer.js' import { Raster } from './Raster.js' import { ShaderBRDF } from './ShaderBRDF.js' /** * @typedef {Object} LayerBRDFOptions * @property {Object} channels - Required channels for BRDF rendering * @property {string} channels.kd - URL to diffuse color map (required) * @property {string} channels.ks - URL to specular color map (optional) * @property {string} channels.normals - URL to normal map (required) * @property {string} channels.gloss - URL to glossiness/roughness map (optional) * @property {Object} [colorspaces] - Color space definitions for material properties * @property {('linear'|'srgb')} [colorspaces.kd='linear'] - Color space for diffuse map * @property {('linear'|'srgb')} [colorspaces.ks='linear'] - Color space for specular map * @property {number} [brightness=1.0] - Overall brightness adjustment * @property {number} [gamma=2.2] - Gamma correction value * @property {number[]} [alphaLimits=[0.01, 0.5]] - Range for glossiness/roughness * @property {number[]} [monochromeMaterial=[0.80, 0.79, 0.75]] - RGB color for monochrome rendering * @property {number} [kAmbient=0.1] - Ambient light coefficient * @extends LayerOptions */ /** * LayerBRDF implements real-time BRDF (Bidirectional Reflectance Distribution Function) rendering. * * The BRDF model describes how light reflects off a surface, taking into account: * - Diffuse reflection (rough, matte surfaces) * - Specular reflection (mirror-like reflections) * - Surface normals (microscopic surface orientation) * - Glossiness/roughness (surface micro-structure) * * Features: * - Real-time light direction control * - Multiple material channels support * - Customizable material properties * - Interactive lighting model * - Gamma correction * - Ambient light component * * Technical implementation: * - Uses normal mapping for surface detail * - Supports both linear and sRGB color spaces * - Implements spherical light projection * - Handles multi-channel textures * - GPU-accelerated rendering * * @extends Layer * * @example * ```javascript * // Create BRDF layer with all channels * const brdfLayer = new OpenLIME.LayerBRDF({ * channels: { * kd: 'diffuse.jpg', * ks: 'specular.jpg', * normals: 'normals.jpg', * gloss: 'gloss.jpg' * }, * colorspaces: { * kd: 'srgb', * ks: 'linear' * }, * brightness: 1.2, * gamma: 2.2 * }); * * // Update light direction * brdfLayer.setLight([0.5, 0.5], 500, 'ease-out'); * ``` */ class LayerBRDF extends Layer { /** * Creates a new LayerBRDF instance * @param {LayerBRDFOptions} options - Configuration options * @throws {Error} If required channels (kd, normals) are not provided * @throws {Error} If rasters option is not empty */ constructor(options) { options = Object.assign({ brightness: 1.0, gamma: 2.2, alphaLimits: [0.01, 0.5], monochromeMaterial: [0.80, 0.79, 0.75], kAmbient: 0.1 }, options); super(options); if (Object.keys(this.rasters).length != 0) throw \"Rasters options should be empty!\"; if (!this.channels) throw \"channels option is required\"; if (!this.channels.kd || !this.channels.normals) throw \"kd and normals channels are required\"; if (!this.colorspaces) { console.log(\"LayerBRDF: missing colorspaces: force both to linear\"); this.colorspaces['kd'] = 'linear'; this.colorspaces['ks'] = 'linear'; } let id = 0; let urls = []; let samplers = []; let brdfSamplersMap = { kd: { format: 'vec3', name: 'uTexKd' }, ks: { format: 'vec3', name: 'uTexKs' }, normals: { format: 'vec3', name: 'uTexNormals' }, gloss: { format: 'float', name: 'uTexGloss' } }; for (let c in this.channels) { this.rasters.push(new Raster({ format: brdfSamplersMap[c].format })); samplers.push({ 'id': id, 'name': brdfSamplersMap[c].name }); urls[id] = this.channels[c]; id++; } this.layout.setUrls(urls); this.addControl('light', [0, 0]); // This is a projection to the z=0 plane. let shader = new ShaderBRDF({ 'label': 'Rgb', 'samplers': samplers, 'colorspaces': this.colorspaces, 'brightness': this.brightness, 'gamma': this.gamma, 'alphaLimits': this.alphaLimits, 'monochromeMaterial': this.monochromeMaterial, 'kAmbient': this.kAmbient }); this.shaders['brdf'] = shader; this.setShader('brdf'); } /** * Projects a 2D point onto a sphere surface * Used for converting 2D mouse/touch input to 3D light direction * @param {number[]} p - 2D point [x, y] in range [-1, 1] * @returns {number[]} 3D normalized vector [x, y, z] on sphere surface * @static */ static projectToSphere(p) { let px = p[0]; let py = p[1]; let r2 = px * px + py * py; if (r2 &gt; 1.0) { let r = Math.sqrt(r2); px /= r; py /= r; r2 = 1.0; } let z = Math.sqrt(1 - r2); return [px, py, z]; } /** * Projects a 2D point onto a flattened sphere using SGI trackball algorithm. * This provides more intuitive light control by avoiding acceleration near edges. * Based on SIGGRAPH 1988 paper on SGI trackball implementation. * * @param {number[]} p - 2D point [x, y] in range [-1, 1] * @returns {number[]} 3D normalized vector [x, y, z] on flattened sphere * @static */ static projectToFlattenedSphere(p) { const R = 0.8; const R2 = R * R; const RR = R * Math.SQRT1_2; const RR2 = RR * RR; let px = Math.min(Math.max(p[0], -1.0), 1.0); let py = Math.min(Math.max(p[1], -1.0), 1.0); let z = 0.0; let d2 = px * px + py * py; if (d2 &lt; RR2) { // Inside sphere z = Math.sqrt(R2 - d2); } else { // On hyperbola z = RR2 / Math.sqrt(d2); } let r = Math.sqrt(d2 + z * z); return [px / r, py / r, z / r]; } /** * Sets the light direction with optional animation * @param {number[]} light - 2D vector [x, y] representing light direction * @param {number} [dt] - Animation duration in milliseconds * @param {string} [easing='linear'] - Animation easing function */ setLight(light, dt, easing = 'linear') { this.setControl('light', light, dt, easing); } /** * Updates light control interpolation and shader uniforms * @returns {boolean} Whether all interpolations are complete * @override * @private */ interpolateControls() { // FIXME Wrong normalization let done = super.interpolateControls(); // let light = LayerBRDF.projectToSphere(this.controls['light'].current.value); let light = LayerBRDF.projectToFlattenedSphere(this.controls['light'].current.value); this.shader.setLight([light[0], light[1], light[2], 0]); return done; } } /** * Register this layer type with the Layer factory * @type {Function} * @private */ Layer.prototype.types['brdf'] = (options) =&gt; { return new LayerBRDF(options); } export { LayerBRDF } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"LayerCombiner.js.html":{"id":"LayerCombiner.js.html","title":"Source: LayerCombiner.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: LayerCombiner.js import { Layer } from './Layer.js' /** * @typedef {Object} LayerCombinerOptions * @property {Layer[]} layers - Array of layers to be combined (required) * @property {Object.&lt;string, Shader&gt;} [shaders] - Map of available shaders * @property {string} [type='combiner'] - Must be 'combiner' when using Layer factory * @property {boolean} [visible=true] - Whether combined output is visible * @extends LayerOptions */ /** * LayerCombiner provides functionality to combine multiple layers using framebuffer operations * and custom shaders. It enables complex visual effects by compositing layers in real-time * using GPU-accelerated rendering. * * Features: * - Real-time layer composition * - Custom shader-based effects * - Framebuffer management * - Dynamic texture allocation * - Resolution-independent rendering * - GPU-accelerated compositing * * Use Cases: * - Layer blending and mixing * - Image comparison tools * - Lens effects (see {@link LayerLens}) * - Custom visual effects * - Multi-layer compositing * * Technical Details: * - Creates framebuffers for each input layer * - Manages WebGL textures and resources * - Supports dynamic viewport resizing * - Handles shader-based composition * - Maintains proper resource cleanup * * @extends Layer * * @example * ```javascript * // Create two base layers * const baseLayer = new OpenLIME.Layer({ * type: 'image', * url: 'base.jpg' * }); * * const overlayLayer = new OpenLIME.Layer({ * type: 'image', * url: 'overlay.jpg' * }); * * // Create combiner with custom shader * const combiner = new OpenLIME.Layer({ * type: 'combiner', * layers: [baseLayer, overlayLayer], * visible: true * }); * * // Set up blend shader * const shader = new OpenLIME.ShaderCombiner(); * shader.mode = 'blend'; * combiner.shaders = { 'standard': shader }; * combiner.setShader('standard'); * * // Add to viewer * viewer.addLayer('combined', combiner); * ``` */ class LayerCombiner extends Layer { /** * Creates a new LayerCombiner instance * @param {LayerCombinerOptions} options - Configuration options * @throws {Error} If rasters option is not empty (rasters should be defined in source layers) */ constructor(options) { super(options); if (Object.keys(this.rasters).length != 0) throw \"Rasters options should be empty!\"; /* let shader = new ShaderCombiner({ 'label': 'Combiner', 'samplers': [{ id:0, name:'source1', type:'vec3' }, { id:1, name:'source2', type:'vec3' }], }); this.shaders = {'standard': shader }; this.setShader('standard'); */ //todo if layers check for importjson this.textures = []; this.framebuffers = []; this.status = 'ready'; } /** * Renders the combined layers using framebuffer operations * Handles framebuffer creation, layer rendering, and final composition * @param {Transform} transform - Current view transform * @param {Object} viewport - Current viewport parameters * @param {number} viewport.x - Viewport X position * @param {number} viewport.y - Viewport Y position * @param {number} viewport.dx - Viewport width * @param {number} viewport.dy - Viewport height * @param {number} viewport.w - Total width * @param {number} viewport.h - Total height * @throws {Error} If shader is not specified * @private */ draw(transform, viewport) { for (let layer of this.layers) if (layer.status != 'ready') return; if (!this.shader) throw \"Shader not specified!\"; let w = viewport.dx; let h = viewport.dy; if (!this.framebuffers.length || this.layout.width != w || this.layout.height != h) { this.deleteFramebuffers(); this.layout.width = w; this.layout.height = h; this.createFramebuffers(); } let gl = this.gl; var b = [0, 0, 0, 0]; gl.clearColor(b[0], b[1], b[2], b[3]); //TODO optimize: render to texture ONLY if some parameters change! //provider di textures... max memory and reference counting. for (let i = 0; i &lt; this.layers.length; i++) { gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffers[i]); gl.clear(gl.COLOR_BUFFER_BIT); this.layers[i].draw(transform, { x: 0, y: 0, dx: w, dy: h, w: w, h: h }); gl.bindFramebuffer(gl.FRAMEBUFFER, null); } this.prepareWebGL(); for (let i = 0; i &lt; this.layers.length; i++) { gl.uniform1i(this.shader.samplers[i].location, i); gl.activeTexture(gl.TEXTURE0 + i); gl.bindTexture(gl.TEXTURE_2D, this.textures[i]); } this.updateTileBuffers( new Float32Array([-1, -1, 0, -1, 1, 0, 1, 1, 0, 1, -1, 0]), new Float32Array([0, 0, 0, 1, 1, 1, 1, 0])); gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0); } /** * Creates framebuffers and textures for layer composition * Initializes WebGL resources for each input layer * @private */ createFramebuffers() { let gl = this.gl; for (let i = 0; i &lt; this.layers.length; i++) { //TODO for thing like lens, we might want to create SMALLER textures for some layers. const texture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, texture); const level = 0; const internalFormat = gl.RGBA; const border = 0; const format = gl.RGBA; const type = gl.UNSIGNED_BYTE; gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, this.layout.width, this.layout.height, border, format, type, null); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); const framebuffer = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0); gl.bindFramebuffer(gl.FRAMEBUFFER, null); this.textures[i] = texture; this.framebuffers[i] = framebuffer; } } //TODO release textures and framebuffers /** * Cleans up framebuffer and texture resources * Should be called when resizing or destroying the layer * @private */ deleteFramebuffers() { } /** * Computes combined bounding box of all input layers * @returns {BoundingBox} Combined bounding box * @override * @private */ boundingBox() { // Combiner ask the combination of all its children boxes // keeping the hidden, because they could be hidden, but revealed by the combiner const discardHidden = false; let result = Layer.computeLayersBBox(this.layers, discardHidden); if (this.transform != null &amp;&amp; this.transform != undefined) { result = this.transform.transformBox(result); } return result; } /** * Computes minimum scale across all input layers * @returns {number} Combined scale factor * @override * @private */ scale() { //Combiner ask the scale of all its children //keeping the hidden, because they could be hidden, but revealed by the combiner const discardHidden = false; let scale = Layer.computeLayersMinScale(this.layers, discardHidden); scale *= this.transform.z; return scale; } } /** * Register this layer type with the Layer factory * @type {Function} * @private */ Layer.prototype.types['combiner'] = (options) =&gt; { return new LayerCombiner(options); } export { LayerCombiner } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"LayerDstretch.js.html":{"id":"LayerDstretch.js.html","title":"Source: LayerDstretch.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: LayerDstretch.js import { Layer } from './Layer.js'; import { LayerImage } from './LayerImage.js' import { ShaderDstretch } from './ShaderDstretch.js'; import { Raster } from './Raster.js'; /** * @typedef {Object} LayerDStretchOptions * @property {string} url - URL to the image to be processed (required) * @property {number[]} [eulerRotation=[0,0,0]] - Initial Euler rotation angles * @property {number} [worldRotation=0] - Global rotation offset for canvas/layer * @extends LayerImageOptions */ /** * LayerDStretch implements the DStretch (Decorrelation Stretch) algorithm for image enhancement. * This technique is particularly useful in archaeology and rock art documentation for revealing * faint pictographs and petroglyphs. * * DStretch works by: * 1. Converting RGB colors to a decorrelated color space * 2. Equalizing and stretching the color distributions * 3. Converting back to RGB for display * * Features: * - Real-time image enhancement * - Interactive control of enhancement parameters * - Automatic color statistics computation * - Support for large images through tiling * - GPU-accelerated processing * - Light direction control * * Technical Implementation: * - Uses Principal Component Analysis (PCA) for color decorrelation * - Supports custom transformation matrices * - Implements dynamic sampling for color statistics * - Handles WebGL texture management * - Supports progressive loading * * @extends LayerImage * * @example * ```javascript * // Create DStretch layer * const dstretchLayer = new OpenLIME.Layer({ * type: 'dstretch', * url: 'image.jpg', * visible: true * }); * * // Add to viewer * viewer.addLayer('enhanced', dstretchLayer); * * // Adjust enhancement parameters * dstretchLayer.setLight([0.5, 0.3], 500); // Animate to new enhancement * ``` */ class LayerDstretch extends LayerImage { /** * Creates a new LayerDStretch instance * @param {LayerDStretchOptions} options - Configuration options * @throws {Error} If url option is not provided */ constructor(options) { super(options); if (!this.url) throw \"Url option is required\"; this.shaders['dstretch'] = new ShaderDstretch(); this.setShader('dstretch'); this.eulerRotation = [0, 0, 0]; this.worldRotation = 0; //if the canvas or ethe layer rotate, light direction neeeds to be rotated too. if (this.url) this.loadJson(); this.addControl('light', [0, 0]); } /** * Sets the enhancement parameters through a light-like interface * @param {number[]} value - Two values controlling the enhancement transformation * @param {number} [dt] - Animation duration in milliseconds * @fires Layer#update */ setLight(value, dt) { this.setControl('light', value, dt); this.eulerRotation[0] = Math.PI * this.getControl('light').current.value[0];//this.controls['light'].current[0]; this.eulerRotation[1] = Math.PI * this.getControl('light').current.value[1];//this.controls['light'].current[1]; this.shader.updateRotationMatrix(this.eulerRotation); this.emit('update'); } /** * Loads DStretch configuration and image data * Attempts to load a .dstretch companion file with pre-computed statistics * Falls back to runtime sampling if companion file is not found * @private */ loadJson() { (async () =&gt; { let json try { let dstretchUrl = this.url.substring(0, this.url.lastIndexOf(\".\")) + \".dstretch\"; let response = await fetch(dstretchUrl); console.log(response.ok); json = await response.json(); } catch (error) { json = { transformation: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1], samples: [] }; this.rasters[0].loadTexture = this.loadAndSampleTexture.bind(this); } this.layout.setUrls([this.url]); this.shader.init(json); })(); } /** * Renders the enhanced image * @param {Transform} transform - Current view transform * @param {Object} viewport - Current viewport parameters * @returns {boolean} Whether the render completed successfully * @override * @private */ draw(transform, viewport) { this.shader.setMinMax(); return super.draw(transform, viewport); } /** * Loads texture and performs color sampling if needed * Samples the image in a grid pattern to compute color statistics * @param {WebGLRenderingContext} gl - WebGL context * @param {HTMLImageElement} img - Source image * @returns {WebGLTexture} Created texture * @private */ loadAndSampleTexture(gl, img) { this.rasters[0].width = img.width; this.rasters[0].height = img.height; let tex = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, tex); gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); //_MIPMAP_LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img); // Sample the texture // Temporarily print the texture on a canvas let canvas = document.createElement(\"canvas\"); let context = canvas.getContext(\"2d\"); canvas.setAttribute(\"width\", img.width); canvas.setAttribute(\"height\", img.height); context.drawImage(img, 0, 0, img.width, img.height); // Get the data and sample the texture let imageData = context.getImageData(0, 0, img.width, img.height).data; let samples = []; let rowSkip = Math.floor(img.height / 32); let colSkip = Math.floor(img.width / 32); console.log(rowSkip, colSkip); for (let i = 0; i &lt; imageData.length; i += 4) { let row = Math.floor((i / 4) / img.width); let col = Math.floor(i / 4) % img.width; if (row % rowSkip == 0 &amp;&amp; col % colSkip == 0) samples.push([imageData[i], imageData[i + 1], imageData[i + 2]]); } this.shader.samples = samples; this.shader.setMinMax(); return tex; } } /** * Register this layer type with the Layer factory * @type {Function} * @private */ Layer.prototype.types['dstretch'] = (options) =&gt; { return new LayerDstretch(options); } export { LayerDstretch } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"LayerImage.js.html":{"id":"LayerImage.js.html","title":"Source: LayerImage.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: LayerImage.js import { Layer } from './Layer.js' import { Raster } from './Raster.js' import { Shader } from './Shader.js' /** * @typedef {Object} LayerImageOptions * @property {string} url - URL of the image to display (required) * @property {string|Layout} [layout='image'] - Layout format for image display * @property {string} [format='vec4'] - Image data format for WebGL processing * @property {string} [type='image'] - Must be 'image' when using Layer factory * @extends LayerOptions */ /** * LayerImage provides fundamental image rendering capabilities in OpenLIME. * It serves as both a standalone layer for basic image display and a foundation * for more complex image-based layers. * * Features: * - Single image rendering * - WebGL-based display * - Automatic format handling * - Layout system integration * - Shader-based processing * * Technical Details: * - Uses WebGL textures for image data * - Supports various color formats (vec3, vec4) * - Integrates with OpenLIME layout system * - Manages raster data automatically * - Provides standard RGB shader by default * * @extends Layer * * @example * ```javascript * // Direct instantiation * const imageLayer = new OpenLIME.LayerImage({ * url: 'image.jpg', * layout: 'image', * format: 'vec4' * }); * viewer.addLayer('main', imageLayer); * * // Using Layer factory * const factoryLayer = new OpenLIME.Layer({ * type: 'image', * url: 'image.jpg', * layout: 'image' * }); * viewer.addLayer('factory', factoryLayer); * ``` */ class LayerImage extends Layer { /** * Creates a new LayerImage instance * @param {LayerImageOptions} options - Configuration options * @throws {Error} If rasters options is not empty (should be auto-configured) * @throws {Error} If no URL is provided and layout has no URLs */ constructor(options) { super(options); if (Object.keys(this.rasters).length != 0) throw \"Rasters options should be empty!\"; if (this.url) this.layout.setUrls([this.url]); else if (this.layout.urls.length == 0) throw \"Missing options.url parameter\"; const rasterFormat = this.format != null ? this.format : 'vec4'; let raster = new Raster({ format: rasterFormat }); //FIXME select format for GEO stuff this.rasters.push(raster); let shader = new Shader({ 'label': 'Rgb', 'samplers': [{ id: 0, name: 'kd', type: rasterFormat }] }); this.shaders = { 'standard': shader }; this.setShader('standard'); } } /** * Register this layer type with the Layer factory * @type {Function} * @private */ Layer.prototype.types['image'] = (options) =&gt; { return new LayerImage(options); } export { LayerImage } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"LayerLens.js.html":{"id":"LayerLens.js.html","title":"Source: LayerLens.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: LayerLens.js import { CoordinateSystem } from './CoordinateSystem.js'; import { Layer } from './Layer.js' import { LayerCombiner } from './LayerCombiner.js' import { ShaderLens } from './ShaderLens.js' /** * @typedef {Object} LayerLensOptions * @property {boolean} [overlay=true] - Whether the lens renders as an overlay * @property {number} [radius=100] - Initial lens radius in pixels * @property {number[]} [borderColor=[0.078, 0.078, 0.078, 1]] - RGBA border color * @property {number} [borderWidth=12] - Border width in pixels * @property {boolean} [borderEnable=false] - Whether to show lens border * @property {Object} [dashboard=null] - Dashboard UI component for lens control * @property {Camera} camera - Camera instance (required) * @extends LayerCombinerOptions */ /** * LayerLens implements a magnifying lens effect that can display content from one or two layers. * It provides an interactive lens that can be moved and resized, showing different layer content * inside and outside the lens area. * * Features: * - Interactive lens positioning and sizing * - Support for base and overlay layers * - Animated transitions * - Customizable border appearance * - Dashboard UI integration * - Optimized viewport rendering * * Technical Details: * - Uses framebuffer composition for layer blending * - Implements viewport optimization for performance * - Handles coordinate transformations between systems * - Supports animated parameter changes * - Manages WebGL resources efficiently * * @extends LayerCombiner * * @example * ```javascript * // Create lens with base layer * const lens = new OpenLIME.LayerLens({ * camera: viewer.camera, * radius: 150, * borderEnable: true, * borderColor: [0, 0, 0, 1] * }); * * // Set layers * lens.setBaseLayer(baseLayer); * lens.setOverlayLayer(overlayLayer); * * // Animate lens position * lens.setCenter(500, 500, 1000, 'ease-out'); * * // Add to viewer * viewer.addLayer('lens', lens); * ``` */ class LayerLens extends LayerCombiner { /** * Creates a new LayerLens instance * @param {LayerLensOptions} options - Configuration options * @throws {Error} If camera is not provided */ constructor(options) { options = Object.assign({ overlay: true, radius: 100, borderColor: [0.078, 0.078, 0.078, 1], borderWidth: 12, borderEnable: false, dashboard: null, }, options); super(options); if (!this.camera) { console.log(\"Missing camera\"); throw \"Missing Camera\" } // Shader lens currently handles up to 2 layers let shader = new ShaderLens(); if (this.layers.length == 2) shader.setOverlayLayerEnabled(true); //FIXME Is it a mode? Control? this.shaders['lens'] = shader; this.setShader('lens'); this.addControl('center', [0, 0]); this.addControl('radius', [this.radius, 0]); this.addControl('borderColor', this.borderColor); this.addControl('borderWidth', [this.borderWidth]); this.oldRadius = -9999; this.oldCenter = [-9999, -9999]; this.useGL = true; if (this.dashboard) this.dashboard.lensLayer = this; } /** * Sets layer visibility and updates dashboard if present * @param {boolean} visible - Whether layer should be visible * @override */ setVisible(visible) { if (this.dashboard) { if (visible) { this.dashboard.container.style.display = 'block'; } else { this.dashboard.container.style.display = 'none'; } } super.setVisible(visible); } /** * Removes the overlay layer, returning to single layer mode */ removeOverlayLayer() { this.layers.length = 1; this.shader.setOverlayLayerEnabled(false); } /** * Sets the base layer (shown outside lens) * @param {Layer} layer - Base layer instance * @fires Layer#update */ setBaseLayer(l) { this.layers[0] = l; this.emit('update'); } /** * Sets the overlay layer (shown inside lens) * @param {Layer} layer - Overlay layer instance */ setOverlayLayer(l) { this.layers[1] = l; this.layers[1].setVisible(true); this.shader.setOverlayLayerEnabled(true); this.regenerateFrameBuffers(); } /** * Sets the overlay layer (shown inside lens) * @param {Layer} layer - Overlay layer instance */ regenerateFrameBuffers() { // Regenerate frame buffers const w = this.layout.width; const h = this.layout.height; this.deleteFramebuffers(); this.layout.width = w; this.layout.height = h; this.createFramebuffers(); } /** * Sets lens radius with optional animation * @param {number} radius - New radius in pixels * @param {number} [delayms=100] - Animation duration * @param {string} [easing='linear'] - Animation easing function */ setRadius(r, delayms = 100, easing = 'linear') { this.setControl('radius', [r, 0], delayms, easing); } /** * Gets current lens radius * @returns {number} Current radius in pixels */ getRadius() { return this.controls['radius'].current.value[0]; } /** * Sets lens center position with optional animation * @param {number} x - X coordinate in scene space * @param {number} y - Y coordinate in scene space * @param {number} [delayms=100] - Animation duration * @param {string} [easing='linear'] - Animation easing function */ setCenter(x, y, delayms = 100, easing = 'linear') { this.setControl('center', [x, y], delayms, easing); } /** * Gets current lens center position * @returns {{x: number, y: number}} Center position in scene coordinates */ getCurrentCenter() { const p = this.controls['center'].current.value; return { x: p[0], y: p[1] }; } /** * Gets target lens position for ongoing animation * @returns {{x: number, y: number}} Target position in scene coordinates */ getTargetCenter() { const p = this.controls['center'].target.value; return { x: p[0], y: p[1] }; } /** * Gets current border color * @returns {number[]} RGBA color array */ getBorderColor() { return this.controls['borderColor'].current.value; } /** * Gets current border width * @returns {number} Border width in pixels */ getBorderWidth() { return this.controls['borderWidth'].current.value[0]; } /** * Renders the lens effect * @param {Transform} transform - Current view transform * @param {Object} viewport - Current viewport * @returns {boolean} Whether all animations are complete * @override * @private */ draw(transform, viewport) { let done = this.interpolateControls(); // Update dashboard size &amp; pos if (this.dashboard) { const c = this.getCurrentCenter(); const r = this.getRadius(); this.dashboard.update(c.x, c.y, r); this.oldCenter = c; this.oldRadius = r; } // const vlens = this.getLensInViewportCoords(transform, viewport); // this.shader.setLensUniforms(vlens, [viewport.w, viewport.h], this.borderColor); // this.emit('draw'); // super.draw(transform, viewport); for (let layer of this.layers) if (layer.status != 'ready') return false; if (!this.shader) throw \"Shader not specified!\"; let gl = this.gl; // Draw on a restricted viewport around the lens, to lower down the number of required tiles let lensViewport = this.getLensViewport(transform, viewport); // If an overlay is present, merge its viewport with the lens one let overlayViewport = this.getOverlayLayerViewport(transform, viewport); if (overlayViewport != null) { lensViewport = this.joinViewports(lensViewport, overlayViewport); } gl.viewport(lensViewport.x, lensViewport.y, lensViewport.dx, lensViewport.dy); // Keep the framwbuffer to the window size in order to avoid changing at each scale event if (!this.framebuffers.length || this.layout.width != viewport.w || this.layout.height != viewport.h) { this.deleteFramebuffers(); this.layout.width = viewport.w; this.layout.height = viewport.h; this.createFramebuffers(); } var b = [0, 0, 0, 0]; gl.clearColor(b[0], b[1], b[2], b[3]); // Draw the layers only within the viewport enclosing the lens for (let i = 0; i &lt; this.layers.length; i++) { gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffers[i]); gl.clear(gl.COLOR_BUFFER_BIT); this.layers[i].draw(transform, lensViewport); gl.bindFramebuffer(gl.FRAMEBUFFER, null); } // Set in the lensShader the proper lens position wrt the window viewport const vl = this.getLensInViewportCoords(transform, viewport); this.shader.setLensUniforms(vl, [viewport.w, viewport.h], this.getBorderColor(), this.borderEnable); this.prepareWebGL(); // Bind all textures and combine them with the shaderLens for (let i = 0; i &lt; this.layers.length; i++) { gl.uniform1i(this.shader.samplers[i].location, i); gl.activeTexture(gl.TEXTURE0 + i); gl.bindTexture(gl.TEXTURE_2D, this.textures[i]); } // Get texture coords of the lensViewport with respect to the framebuffer sz const lx = lensViewport.x / lensViewport.w; const ly = lensViewport.y / lensViewport.h; const hx = (lensViewport.x + lensViewport.dx) / lensViewport.w; const hy = (lensViewport.y + lensViewport.dy) / lensViewport.h; this.updateTileBuffers( new Float32Array([-1, -1, 0, -1, 1, 0, 1, 1, 0, 1, -1, 0]), new Float32Array([lx, ly, lx, hy, hx, hy, hx, ly])); gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0); // Restore old viewport gl.viewport(viewport.x, viewport.x, viewport.dx, viewport.dy); return done; } /** * Calculates viewport region affected by lens * @param {Transform} transform - Current view transform * @param {Object} viewport - Current viewport * @returns {Object} Viewport specification for lens region * @private */ getLensViewport(transform, viewport) { const lensC = this.getCurrentCenter(); const l = CoordinateSystem.fromSceneToViewport(lensC, this.camera, this.useGL); const r = this.getRadius() * transform.z; return { x: Math.floor(l.x - r) - 1, y: Math.floor(l.y - r) - 1, dx: Math.ceil(2 * r) + 2, dy: Math.ceil(2 * r) + 2, w: viewport.w, h: viewport.h }; } /** * Calculates viewport region for overlay layer * @param {Transform} transform - Current view transform * @param {Object} viewport - Current viewport * @returns {Object|null} Viewport specification for overlay or null * @private */ getOverlayLayerViewport(transform, viewport) { let result = null; if (this.layers.length == 2) { // Get overlay projected viewport let bbox = this.layers[1].boundingBox(); const p0v = CoordinateSystem.fromSceneToViewport({ x: bbox.xLow, y: bbox.yLow }, this.camera, this.useGL); const p1v = CoordinateSystem.fromSceneToViewport({ x: bbox.xHigh, y: bbox.yHigh }, this.camera, this.useGL); // Intersect with window viewport const x0 = Math.min(Math.max(0, Math.floor(p0v.x)), viewport.w); const y0 = Math.min(Math.max(0, Math.floor(p0v.y)), viewport.h); const x1 = Math.min(Math.max(0, Math.ceil(p1v.x)), viewport.w); const y1 = Math.min(Math.max(0, Math.ceil(p1v.y)), viewport.h); const width = x1 - x0; const height = y1 - y0; result = { x: x0, y: y0, dx: width, dy: height, w: viewport.w, h: viewport.h }; } return result; } /** * Combines two viewport regions * @param {Object} v0 - First viewport * @param {Object} v1 - Second viewport * @returns {Object} Combined viewport encompassing both regions * @private */ joinViewports(v0, v1) { const xm = Math.min(v0.x, v1.x); const xM = Math.max(v0.x + v0.dx, v1.x + v1.dx); const ym = Math.min(v0.y, v1.y); const yM = Math.max(v0.y + v0.dy, v1.y + v1.dy); const width = xM - xm; const height = yM - ym; return { x: xm, y: ym, dx: width, dy: height, w: v0.w, h: v0.h }; } /** * Converts lens parameters to viewport coordinates * @param {Transform} transform - Current view transform * @param {Object} viewport - Current viewport * @returns {number[]} [centerX, centerY, radius, borderWidth] in viewport coordinates * @private */ getLensInViewportCoords(transform, viewport) { const lensC = this.getCurrentCenter(); const c = CoordinateSystem.fromSceneToViewport(lensC, this.camera, this.useGL); const r = this.getRadius(); return [c.x, c.y, r * transform.z, this.getBorderWidth()]; } } /** * Register this layer type with the Layer factory * @type {Function} * @private */ Layer.prototype.types['lens'] = (options) =&gt; { return new LayerLens(options); } export { LayerLens } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"LayerMaskedImage.js.html":{"id":"LayerMaskedImage.js.html","title":"Source: LayerMaskedImage.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: LayerMaskedImage.js import { Layer } from './Layer.js'; import { Raster } from './Raster.js' import { Shader } from './Shader.js' /** * @typedef {Object} LayerMaskedImageOptions * @property {string} url - URL of the masked image to display (required) * @property {string} [format='vec4'] - Image data format * @property {string} [type='maskedimage'] - Must be 'maskedimage' when using Layer factory * @extends LayerOptions */ /** * LayerMaskedImage provides specialized handling for masked scalar images with bilinear interpolation. * It implements custom texture sampling and masking operations through WebGL shaders. * * Features: * - Custom scalar image handling * - Bilinear interpolation with masking * - WebGL shader-based processing * - Support for both WebGL 1 and 2 * - Nearest-neighbor texture filtering * - Masked value visualization * * Technical Details: * - Uses LUMINANCE format for single-channel data * - Implements custom bilinear sampling in shader * - Handles mask values through alpha channel * - Supports value rescaling (255.0/254.0 scale with -1.0/254.0 bias) * - Uses custom texture parameters for proper sampling * * Shader Implementation: * - Performs bilinear interpolation in shader * - Handles masked values (0 = masked) * - Implements value rescaling * - Provides visualization of masked areas (in red) * - Uses texelFetch for precise sampling * * @extends Layer * * @example * ```javascript * // Create masked image layer * const maskedLayer = new OpenLIME.Layer({ * type: 'maskedimage', * url: 'masked-data.png', * format: 'vec4' * }); * * // Add to viewer * viewer.addLayer('masked', maskedLayer); * ``` */ class LayerMaskedImage extends Layer { /** * Creates a new LayerMaskedImage instance * @param {LayerMaskedImageOptions} options - Configuration options * @throws {Error} If rasters options is not empty * @throws {Error} If url is not provided and layout has no URLs */ constructor(options) { super(options); if (Object.keys(this.rasters).length != 0) throw \"Rasters options should be empty!\"; if (this.url) { this.layout.setUrls([this.url]); } else if (this.layout.urls.length == 0) throw \"Missing options.url parameter\"; const rasterFormat = this.format != null ? this.format : 'vec4'; let raster = new Raster({ format: rasterFormat }); //FIXME select format for GEO stuff this.rasters.push(raster); let shader = new Shader({ 'label': 'Rgb', 'samplers': [{ id: 0, name: 'kd', type: rasterFormat }] }); shader.fragShaderSrc = function (gl) { let gl2 = !(gl instanceof WebGLRenderingContext); let str = ` uniform sampler2D kd; ${gl2 ? 'in' : 'varying'} vec2 v_texcoord; vec2 bilinear_masked_scalar(sampler2D field, vec2 uv) { vec2 px = uv*tileSize; ivec2 iuv = ivec2(floor( px )); vec2 fuv = fract(px); int i0 = iuv.x; int j0 = iuv.y; int i1 = i0+1&gt;=int(tileSize.x) ? i0 : i0+1; int j1 = j0+1&gt;=int(tileSize.y) ? j0 : j0+1; float f00 = texelFetch(field, ivec2(i0, j0), 0).r; float f10 = texelFetch(field, ivec2(i1, j0), 0).r; float f01 = texelFetch(field, ivec2(i0, j1), 0).r; float f11 = texelFetch(field, ivec2(i1, j1), 0).r; // FIXME Compute weights of valid vec2 result_masked_scalar; result_masked_scalar.y = f00*f01*f10*f11; result_masked_scalar.y = result_masked_scalar.y &gt; 0.0 ? 1.0 : 0.0; const float scale = 255.0/254.0; const float bias = -1.0/254.0; result_masked_scalar.x = mix(mix(f00, f10, fuv.x), mix(f01, f11, fuv.x), fuv.y); result_masked_scalar.x = result_masked_scalar.y * (scale * result_masked_scalar.x + bias); return result_masked_scalar; } vec4 data() { vec2 masked_scalar = bilinear_masked_scalar(kd, v_texcoord); return masked_scalar.y &gt; 0.0 ? vec4(masked_scalar.x, masked_scalar.x, masked_scalar.x, masked_scalar.y) : vec4(1.0, 0.0, 0.0, masked_scalar.y); } `; return str; }; this.shaders = { 'scalarimage': shader }; this.setShader('scalarimage'); this.rasters[0].loadTexture = this.loadTexture.bind(this); //this.layout.setUrls([this.url]); } /** * Renders the masked image * @param {Transform} transform - Current view transform * @param {Object} viewport - Current viewport * @returns {boolean} Whether render completed successfully * @override * @private */ draw(transform, viewport) { return super.draw(transform, viewport); } /** * Custom texture loader for masked images * Sets up proper texture parameters for scalar data * * @param {WebGLRenderingContext|WebGL2RenderingContext} gl - WebGL context * @param {HTMLImageElement} img - Source image * @returns {WebGLTexture} Created texture * @private */ loadTexture(gl, img) { this.rasters[0].width = img.width; this.rasters[0].height = img.height; var tex = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, tex); gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); //_MIPMAP_LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); // gl.texImage2D(gl.TEXTURE_2D, 0, gl.R16UI, gl.R16UI, gl.UNSIGNED_SHORT, img); gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE, gl.LUMINANCE, gl.UNSIGNED_BYTE, img); return tex; } } /** * Register this layer type with the Layer factory * @type {Function} * @private */ Layer.prototype.types['maskedimage'] = (options) =&gt; { return new LayerMaskedImage(options); } export { LayerMaskedImage } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"LayerNeuralRTI.js.html":{"id":"LayerNeuralRTI.js.html","title":"Source: LayerNeuralRTI.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: LayerNeuralRTI.js import { Layer } from './Layer.js' import { Raster } from './Raster.js' import { Layout } from './Layout.js' import { Transform } from './Transform.js' import { Shader } from './Shader.js' import { ShaderNeural } from './ShaderNeural.js' /** * @typedef {Object} LayerNeuralRTIOptions * @property {string} url - URL to the Neural RTI configuration JSON * @property {Layout} layout - Layout system for image loading * @property {number} [convergenceSpeed=1.2] - Speed of quality convergence * @property {number} [maxTiles=40] - Maximum number of tiles to process * @property {string} [colorspace='rgb'] - Color space for processing * @extends LayerOptions */ /** * LayerNeuralRTI implements real-time Neural Reflectance Transformation Imaging. * This layer uses a neural network to perform real-time relighting of images, * offering improved quality and performance compared to traditional RTI approaches. * * Features: * - Neural network-based relighting * - Adaptive quality scaling * - Frame rate optimization * - Progressive refinement * - Multi-plane texture support * - WebGL acceleration * * Technical Details: * - Uses 3-layer neural network * - Supports multiple color spaces * - Implements adaptive tile processing * - Handles dynamic quality adjustment * - Manages frame buffer operations * - Coordinates light transformations * * Performance Optimizations: * - Dynamic resolution scaling * - FPS-based quality adjustment * - Progressive refinement system * - Tile caching * - Batch processing * * @extends Layer * * @example * ```javascript * // Create Neural RTI layer * const neuralRTI = new OpenLIME.Layer({ * type: 'neural', * url: 'config.json', * layout: 'deepzoom', * convergenceSpeed: 1.2, * maxTiles: 40 * }); * * // Add to viewer * viewer.addLayer('rti', neuralRTI); * * // Change light direction * neuralRTI.setLight([0.5, 0.3], 1000); * ``` */ class LayerNeuralRTI extends Layer { /** * Creates a new LayerNeuralRTI instance * @param {LayerNeuralRTIOptions} options - Configuration options */ constructor(options) { super(options || {}); this.currentRelightFraction = 1.0; //(min: 0, max 1) this.maxTiles = 40; this.relighted = false; this.convergenceSpeed = 1.2; this.addControl('light', [0, 0]); this.worldRotation = 0; //if the canvas or ethe layer rotate, light direction neeeds to be rotated too. let textureUrls = [ null, this.layout.imageUrl(this.url, 'plane_1'), this.layout.imageUrl(this.url, 'plane_2'), this.layout.imageUrl(this.url, 'plane_3'), ]; this.layout.setUrls(textureUrls); for (let url of textureUrls) { let raster = new Raster({ format: 'vec3' }); this.rasters.push(raster); } this.imageShader = new Shader({ 'label': 'Rgb', 'samplers': [{ id: 0, name: 'kd', type: 'vec3', load: false }] }); this.neuralShader = new ShaderNeural(); this.shaders = { 'standard': this.imageShader, 'neural': this.neuralShader }; this.setShader('neural'); this.neuralShader.setLight([0, 0]); (async () =&gt; { await this.loadNeural(this.url); })(); } /** * Sets light direction with optional animation * @param {number[]} light - Light direction vector [x, y] * @param {number} [dt] - Animation duration in milliseconds */ setLight(light, dt) { this.setControl('light', light, dt); } /** @ignore */ loadTile(tile, callback) { this.shader = this.neuralShader; super.loadTile(tile, callback); } /** * Loads neural network configuration and weights * @param {string} url - URL to configuration JSON * @private * @async */ async loadNeural(url) { await this.initialize(url); } /** * Initializes neural network parameters * @param {string} json_url - URL to configuration * @private * @async */ async initialize(json_url) { const info = await this.loadJSON(json_url); this.max = info.max.flat(1); this.min = info.min.flat(1); this.width = info.width; this.height = info.height; let parameters = {}; for (let i = 0; i &lt; 3; i++) { let key = 'layer' + (i + 1); parameters[key + '_weights'] = info.weights[i];//(await this.loadJSON(data_path + \"/parameters/\" + w + \"_weights.json\")).flat(1); parameters[key + '_biases'] = info.biases[i]; //(await this.loadJSON(data_path + \"/parameters/\" + w + \"_biases.json\")).flat(1); } for (const [name, value] of Object.entries(parameters)) this.neuralShader.setUniform(name, value); //this.neuralShader.updateUniforms(gl, this.neuralShader.program); this.neuralShader.setUniform('min', this.min); this.neuralShader.setUniform('max', this.max); // make the fragment shader flexible to different network configurations let n = info.samples; let c = info.planes + 2; while (n % 4 != 0) n++; while (c % 4 != 0) c++; this.neuralShader.setShaderInfo(info.samples, info.planes, n, c, info.colorspace); this.networkParameters = parameters; } /** @ignore */ setCoords() { let gl = this.gl; let coords = new Float32Array([-1, -1, -1, 1, 1, 1, 1, -1]); this.coords_buffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, this.coords_buffer); gl.bufferData(gl.ARRAY_BUFFER, coords, gl.STATIC_DRAW); let texCoords = new Float32Array([0, 0, 0, 1, 1, 1, 1, 0]); this.texCoords_buffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, this.texCoords_buffer); gl.bufferData(gl.ARRAY_BUFFER, texCoords, gl.STATIC_DRAW); } // little set of functions to get model, coeff and info /** @ignore */ async loadJSON(info_file) { const info_response = await fetch(info_file); const info = await info_response.json(); return info; } /* ************************************************************************** */ /** * Renders the Neural RTI visualization * Handles quality adaptation and progressive refinement * @param {Transform} transform - Current view transform * @param {Object} viewport - Current viewport * @returns {boolean} Whether render completed * @override * @private */ draw(transform, viewport) { //TODO this is duplicated code. move this check up if (this.status != 'ready') return true; this.worldRotation = transform.a + this.transform.a; if (this.networkParameters !== undefined) { let previousRelightFraction = this.relightFraction; //adjust maxTiles to presserve framerate only when we had a draw which included relighting (but not a refine operation!). if (this.relighted) { if (this.canvas.fps &gt; this.canvas.targetfps * 1.5) { this.currentRelightFraction = Math.min(1.0, this.currentRelightFraction * this.convergenceSpeed); //console.log('fps fast: ', this.canvas.fps, this.currentRelightFraction); } else if (this.canvas.fps &lt; this.canvas.targetfps * 0.75) { this.currentRelightFraction = Math.max(this.currentRelightFraction / this.convergenceSpeed, 1 / 128); this.convergenceSpeed = Math.max(1.05, Math.pow(this.convergenceSpeed, 0.9)); console.log('fps slow: ', this.canvas.fps, this.currentRelightFraction); } } //this.refine = true; //setup final refinement if (this.refineTimeout) clearTimeout(this.refineTimeout); if (this.currentRelightFraction &lt; 0.75 &amp;&amp; this.refine == false) this.refineTimeout = setTimeout(() =&gt; { this.emit('update'); this.refine = true; }, Math.max(400, 4000 / this.canvas.fps)); this.relightFraction = this.refine ? 1.0 : this.currentRelightFraction; this.relightFraction = Math.round(this.relightFraction * 8) / 8; let sizeChanged = this.relightFraction != previousRelightFraction; let w = Math.round((this.layout.tilesize || this.layout.width) * this.relightFraction); let h = Math.round((this.layout.tilesize || this.layout.height) * this.relightFraction); //console.log(\"Canvas fps: \", this.canvas.fps, \"relighted: \", this.relighted, \"Refine? \", this.refine, \" fraction: \", this.relightFraction, \" w: \", this.tileRelightWidth); this.refine = false; let available = this.layout.available(viewport, transform, this.transform, 0, this.mipmapBias, this.tiles); let tiles = Object.values(available); if (tiles.length == 0) return; if (sizeChanged) for (let tile of tiles) tile.neuralUpdated = false; this.relighted = false; this.totTiles = 0; this.totPixels = 0; for (let tile of tiles) { if (tile.neuralUpdated &amp;&amp; !sizeChanged) continue; if (!this.relighted) { this.relighted = true; //update fps next turn. this.preRelight([viewport.x, viewport.y, viewport.dx, viewport.dy], w, h, sizeChanged); } this.relightTile(tile, w, h, sizeChanged); this.totPixels += w * h; this.totTiles += 1; } if (this.relighted) this.postRelight(); this.relighted = this.relighted &amp;&amp; !this.refine; //udpate fps only if not refined. } this.shader = this.imageShader; let done = super.draw(transform, viewport); this.shader = this.neuralShader; return done; } /** * Prepares WebGL resources for relighting * @param {number[]} viewport - Viewport parameters * @param {number} w - Width for processing * @param {number} h - Height for processing * @private */ preRelight(viewport, w, h) { let gl = this.gl; if (!this.neuralShader.program) { this.neuralShader.createProgram(gl); gl.useProgram(this.neuralShader.program); for (var i = 0; i &lt; this.neuralShader.samplers.length; i++) gl.uniform1i(this.neuralShader.samplers[i].location, i); } else gl.useProgram(this.neuralShader.program); this.neuralShader.updateUniforms(gl); if (!this.coords_buffer) this.setCoords(); gl.bindBuffer(gl.ARRAY_BUFFER, this.coords_buffer); gl.vertexAttribPointer(this.neuralShader.position_location, 2, gl.FLOAT, false, 0, 0); gl.bindBuffer(gl.ARRAY_BUFFER, this.texCoords_buffer); gl.vertexAttribPointer(this.neuralShader.texcoord_location, 2, gl.FLOAT, false, 0, 0); gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA); gl.enable(gl.BLEND); if (!this.framebuffer) this.framebuffer = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer); //save previous viewport this.backupViewport = viewport; gl.viewport(0, 0, w, h); } /** * Finalizes the relighting pass and restores rendering state * * This method performs cleanup after relighting operations by: * 1. Unbinding the framebuffer to return to normal rendering * 2. Restoring the original viewport dimensions * * Technical details: * - Restores WebGL rendering state * - Returns framebuffer binding to default * - Resets viewport to original dimensions * - Must be called after all tiles have been processed * * @private * @see preRelight - Called at start of relighting process * @see relightTile - Called for each tile during relighting */ postRelight() { let gl = this.gl; gl.bindFramebuffer(gl.FRAMEBUFFER, null); //restore previous viewport let v = this.backupViewport; this.gl.viewport(v[0], v[1], v[2], v[3]); } /** * Processes individual tile using neural network * @param {Object} tile - Tile to process * @param {number} w - Processing width * @param {number} h - Processing height * @param {boolean} sizeChanged - Whether tile size changed * @private */ relightTile(tile, w, h, sizeChanged) { let gl = this.gl; let needsCreate = tile.tex[0] == null; if (needsCreate) { let tex = tile.tex[0] = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, tex); // set the filtering so we don't need mips gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); } if (sizeChanged || needsCreate) { gl.bindTexture(gl.TEXTURE_2D, tile.tex[0]); // define size and format of level 0 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, w, h, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); //gl.bindTexture(gl.TEXTURE_2D, null); } for (var i = 0; i &lt; this.neuralShader.samplers.length; i++) { let id = this.neuralShader.samplers[i].id; gl.activeTexture(gl.TEXTURE0 + i); gl.bindTexture(gl.TEXTURE_2D, tile.tex[id]); } gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tile.tex[0], 0); gl.drawArrays(gl.TRIANGLE_FAN, 0, 4); tile.neuralUpdated = true; } /** * Updates light direction and marks tiles for update * @returns {boolean} Whether updates are complete * @override * @private */ interpolateControls() { let done = super.interpolateControls(); if (done) return true; let light = this.controls['light'].current.value; let rotated = Transform.rotate(light[0], light[1], this.worldRotation * Math.PI); light = [rotated.x, rotated.y]; this.neuralShader.setLight(light); for (let [id, tile] of this.tiles) tile.neuralUpdated = false; return false; } } /** * Register this layer type with the Layer factory * @type {Function} * @private */ Layer.prototype.types['neural'] = (options) =&gt; { return new LayerNeuralRTI(options); } export { LayerNeuralRTI } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"LayerRTI.js.html":{"id":"LayerRTI.js.html","title":"Source: LayerRTI.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: LayerRTI.js import { Layer } from './Layer.js' import { Raster } from './Raster.js' import { ShaderRTI } from './ShaderRTI.js' import { Transform } from './Transform.js' /** * @typedef {Object} LayerRTIOptions * @property {string} url - URL to RTI info.json file (required) * @property {string} layout - Layout type: 'image', 'deepzoom', 'google', 'iiif', 'zoomify', 'tarzoom', 'itarzoom' * @property {boolean} [normals=false] - Whether to load normal maps * @property {string} [server] - IIP server URL (for IIP layout) * @property {number} [worldRotation=0] - Global rotation offset * @extends LayerOptions */ /** * LayerRTI implements Reflectance Transformation Imaging (RTI) visualization. * * RTI is an imaging technique that captures surface reflectance data to enable * interactive relighting of an object from different directions. The layer handles * the 'relight' data format, which consists of: * * - info.json: Contains RTI parameters and configuration * - plane_*.jpg: Series of coefficient images * - normals.jpg: Optional normal map (when using normals=true) * * Features: * - Interactive relighting * - Multiple layout support * - Normal map integration * - Light direction control * - Animation support * - World rotation handling * * Technical Details: * - Uses coefficient-based relighting * - Supports multiple image planes * - Handles various tiling schemes * - Manages WebGL resources * - Coordinates light transformations * * Data Format Support: * - Relight JSON configuration * - Multiple layout systems * - JPEG coefficient planes * - Optional normal maps * - IIP image protocol * * @extends Layer * * @example * ```javascript * // Create RTI layer with deepzoom layout * const rtiLayer = new OpenLIME.Layer({ * type: 'rti', * url: 'path/to/info.json', * layout: 'deepzoom', * normals: true * }); * * // Add to viewer * viewer.addLayer('rti', rtiLayer); * * // Change light direction with animation * rtiLayer.setLight([0.5, 0.5], 1000); * ``` * * @see {@link https://github.com/cnr-isti-vclab/relight|Relight on GitHub} */ class LayerRTI extends Layer { /** * Creates a new LayerRTI instance * @param {LayerRTIOptions} options - Configuration options * @throws {Error} If rasters options is not empty * @throws {Error} If url is not provided */ constructor(options) { super(options); if (Object.keys(this.rasters).length != 0) throw \"Rasters options should be empty!\"; if (!this.url) throw \"Url option is required\"; this.shaders['rti'] = new ShaderRTI({ normals: this.normals }); this.setShader('rti'); this.addControl('light', [0, 0]); this.worldRotation = 0; //if the canvas or ethe layer rotate, light direction neeeds to be rotated too. this.loadJson(this.url); } /** * Constructs URL for image plane resources based on layout type * @param {string} url - Base URL * @param {string} plane - Plane identifier * @returns {string} Complete URL for the resource * @private */ imageUrl(url, plane) { let path = this.url.substring(0, this.url.lastIndexOf('/') + 1); switch (this.layout.type) { case 'image': return path + plane + '.jpg'; break; case 'google': return path + plane; break; case 'deepzoom': return path + plane + '.dzi'; break; case 'tarzoom': return path + plane + '.tzi'; break; case 'itarzoom': return path + 'planes.tzi'; break; case 'zoomify': return path + plane + '/ImageProperties.xml'; break; case 'iip': return url; break; case 'iiif': throw Error(\"Unimplemented\"); default: throw Error(\"Unknown layout: \" + layout.type); } } /** * Sets the light direction with optional animation * @param {number[]} light - Light direction vector [x, y] * @param {number} [dt] - Animation duration in milliseconds */ setLight(light, dt) { this.setControl('light', light, dt); } /** * Loads and processes RTI configuration * @param {string} url - URL to info.json * @private * @async */ loadJson(url) { (async () =&gt; { let infoUrl = url; // Need to handle embedded RTI info.json when using IIP and TIFF image stacks if (this.layout.type == \"iip\") infoUrl = (this.server ? this.server + '?FIF=' : '') + url + \"&amp;obj=description\"; var response = await fetch(infoUrl); if (!response.ok) { this.status = \"Failed loading \" + infoUrl + \": \" + response.statusText; return; } let json = await response.json(); // Update layout image format and pixelSize if provided in info.json this.layout.suffix = json.format; if (json.pixelSizeInMM) this.pixelSize = json.pixelSizeInMM; this.shader.init(json); let urls = []; for (let p = 0; p &lt; this.shader.njpegs; p++) { let imageUrl = this.layout.imageUrl(url, 'plane_' + p); urls.push(imageUrl); let raster = new Raster({ format: 'vec3' }); this.rasters.push(raster); } if (this.normals) { // ITARZOOM must include normals and currently has a limitation: loads the entire tile let imageUrl = this.layout.imageUrl(url, 'normals'); urls.push(imageUrl); let raster = new Raster({ format: 'vec3' }); this.rasters.push(raster); } this.layout.setUrls(urls); })().catch(e =&gt; { console.log(e); this.status = e; }); } /** * Updates light direction based on control state * Handles world rotation transformations * @returns {boolean} Whether interpolation is complete * @override * @private */ interpolateControls() { let done = super.interpolateControls(); if (!done) { let light = this.controls['light'].current.value; //this.shader.setLight(light); let rotated = Transform.rotate(light[0], light[1], this.worldRotation * Math.PI); this.shader.setLight([rotated.x, rotated.y]); } return done; } /** * Renders the RTI visualization * Updates world rotation and manages drawing * @param {Transform} transform - Current view transform * @param {Object} viewport - Current viewport * @returns {boolean} Whether render completed successfully * @override * @private */ draw(transform, viewport) { this.worldRotation = transform.a + this.transform.a; return super.draw(transform, viewport); } } /** * Register this layer type with the Layer factory * @type {Function} * @private */ Layer.prototype.types['rti'] = (options) =&gt; { return new LayerRTI(options); } export { LayerRTI } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"Layout.js.html":{"id":"Layout.js.html","title":"Source: Layout.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: Layout.js import { BoundingBox } from \"./BoundingBox\"; import { addSignals } from \"./Signals\"; import { Tile } from \"./Tile\"; import { CoordinateSystem } from \"./CoordinateSystem\"; // Tile level x y index ----- tex missing() start/end (tarzoom) ----- time, priority size(byte) /** * @typedef {Object} Tile * @property {number} level - Zoom level in the image pyramid * @property {number} x - Horizontal position in tile grid * @property {number} y - Vertical position in tile grid * @property {number} index - Unique tile identifier * @property {number} [start] - Starting byte position in dataset (for tar formats) * @property {number} [end] - Ending byte position in dataset (for tar formats) * @property {number} missing - Number of pending channel data requests * @property {WebGLTexture[]} tex - Array of textures (one per channel) * @property {number} time - Tile creation timestamp for cache management * @property {number} priority - Loading priority for cache management * @property {number} size - Total tile size in bytes */ /** * @typedef {'image'|'deepzoom'|'deepzoom1px'|'google'|'zoomify'|'iiif'|'tarzoom'|'itarzoom'} LayoutType * @description Supported image format types: * - image: Single-resolution web images (jpg, png, etc.) * - deepzoom: Microsoft Deep Zoom with root tile &gt; 1px * - deepzoom1px: Microsoft Deep Zoom with 1px root tile * - google: Google Maps tiling scheme * - zoomify: Zoomify format * - iiif: International Image Interoperability Framework * - tarzoom: OpenLIME tar-based tiling * - itarzoom: OpenLIME indexed tar-based tiling */ /** * @typedef {Object} LayoutOptions * @property {number} [width] - Image width (required for google layout) * @property {number} [height] - Image height (required for google layout) * @property {string} [suffix='jpg'] - Tile file extension * @property {string} [subdomains='abc'] - Available subdomains for URL templates */ /** * Layout manages image formats and tiling schemes in OpenLIME. * * This class is responsible for: * - Managing different image formats * - Handling tiling schemes * - Coordinating tile loading * - Converting between coordinate systems * - Managing tile priorities * * Format Support: * 1. Single-resolution images: * - Direct URL to image file * - Supports all standard web formats (jpg, png, etc) * * 2. Tiled formats: * - DeepZoom (Microsoft): Uses .dzi config file * - Google Maps: Direct directory structure * - Zoomify: Uses ImageProperties.xml * - IIIF: Standard server interface * - TarZoom: OpenLIME's optimized format * * @fires Layout#ready - When layout is initialized and ready for use * @fires Layout#updateSize - When layout dimensions change * * @example * ```javascript * // Single image * const imageLayout = new Layout('image.jpg', 'image'); * * // Deep Zoom * const dzLayout = new Layout('tiles.dzi', 'deepzoom'); * * // Google Maps format * const googleLayout = new Layout('tiles/', 'google', { * width: 2000, * height: 1500 * }); * ``` */ class Layout { /** * Creates a new Layout instance * @param {string} url - URL to image or configuration file * @param {LayoutType} type - Type of image layout * @param {LayoutOptions} [options] - Additional configuration * @throws {Error} If layout type is unknown or module not loaded */ constructor(url, type, options) { if (type == 'image') { this.setDefaults(type); this.init(url, type, options); } else if (type in this.types) return this.types[type](url, type, options); else if (type == null) return; else throw \"Layout type: \" + type + \" unknown, or module not loaded\"; } /** * Gets tile dimensions * @returns {number[]} [width, height] of tiles */ getTileSize() { return [this.width, this.height]; } /** * Sets default layout properties * @param {LayoutType} type - Layout type * @private */ setDefaults(type) { Object.assign(this, { type: type, width: 0, height: 0, suffix: 'jpg', urls: [], status: null, subdomains: 'abc' }); } /** * Initializes layout configuration * @param {string} url - Resource URL * @param {LayoutType} type - Layout type * @param {LayoutOptions} options - Configuration options * @private */ init(url, type, options) { if (options) Object.assign(this, options); if (typeof (url) == 'string') this.setUrls([url]); if (this.width &amp;&amp; this.height) this.status = 'ready'; } /** * Sets URLs for layout resources * @param {string[]} urls - Array of resource URLs * @fires Layout#ready * @private */ setUrls(urls) { /** * The event is fired when a layout is ready to be drawn(the single-resolution image is downloaded or the multi-resolution structure has been initialized). * @event Layout#ready */ this.urls = urls; this.getTileURL = (rasterid, tile) =&gt; { return this.urls[rasterid]; } this.status = 'ready'; this.emit('ready'); } /** * Constructs URL for specific image plane * @param {string} url - Base URL * @param {string} plane - Plane identifier * @returns {string} Complete URL */ imageUrl(url, plane) { let path = url.substring(0, url.lastIndexOf('/') + 1); return path + plane + '.jpg'; } /** * Gets URL for specific tile * @param {number} id - Channel identifier * @param {Tile} tile - Tile object * @returns {string} Tile URL * @abstract */ getTileURL(id, tile) { throw Error(\"Layout not defined or ready.\"); } /** * Gets layout bounds * @returns {BoundingBox} Layout boundaries */ boundingBox() { //if(!this.width) throw \"Layout not initialized still\"; return new BoundingBox({ xLow: -this.width / 2, yLow: -this.height / 2, xHigh: this.width / 2, yHigh: this.height / 2 }); } /** * Calculates tile coordinates * @param {Tile} tile - Tile to calculate coordinates for * @returns {{coords: Float32Array, tcoords: Float32Array}} Image and texture coordinates */ tileCoords(tile) { let w = this.width; let h = this.height; //careful: here y is inverted due to textures not being flipped on load (Firefox fault!). var tcoords = new Float32Array([0, 1, 0, 0, 1, 0, 1, 1]); return { coords: new Float32Array([-w / 2, -h / 2, 0, -w / 2, h / 2, 0, w / 2, h / 2, 0, w / 2, -h / 2, 0]), tcoords: tcoords }; } /** * Creates new tile instance * @param {number} index - Tile identifier * @returns {Tile} New tile object * @private */ newTile(index) { let tile = new Tile(); tile.index = index; return tile; } /** * Determines required tiles for rendering * @param {Object} viewport - Current viewport * @param {Transform} transform - Current transform * @param {Transform} layerTransform - Layer transform * @param {number} border - Border size * @param {number} bias - Mipmap bias * @param {Map} tiles - Existing tiles * @param {number} [maxtiles=8] - Maximum tiles to return * @returns {Tile[]} Array of needed tiles */ needed(viewport, transform, layerTransform, border, bias, tiles, maxtiles = 8) { //FIXME should check if image is withing the viewport (+ border) let tile = tiles.get(0) || this.newTile(0); //{ index, x, y, missing, tex: [], level }; tile.time = performance.now(); tile.priority = 10; if (tile.missing === null) // || tile.missing != 0 &amp;&amp; !this.requested[index]) return [tile]; return []; } /** * Gets tiles available for rendering * @param {Object} viewport - Current viewport * @param {Transform} transform - Current transform * @param {Transform} layerTransform - Layer transform * @param {number} border - Border size * @param {number} bias - Mipmap bias * @param {Map} tiles - Existing tiles * @returns {Object.&lt;number, Tile&gt;} Map of available tiles */ available(viewport, transform, layerTransform, border, bias, tiles) { //FIXME should check if image is withing the viewport (+ border) let torender = {}; if (tiles.has(0) &amp;&amp; tiles.get(0).missing == 0) torender[0] = tiles.get(0); //{ index: index, level: level, x: x &gt;&gt; d, y: y &gt;&gt; d, complete: true }; return torender; } /** * Calculates viewport bounding box * @param {Object} viewport - Viewport parameters * @param {Transform} transform - Current transform * @param {Transform} layerT - Layer transform * @returns {BoundingBox} Viewport bounds in image space */ getViewportBox(viewport, transform, layerT) { const boxViewport = new BoundingBox({ xLow: viewport.x, yLow: viewport.y, xHigh: viewport.x + viewport.dx, yHigh: viewport.y + viewport.dy }); return CoordinateSystem.fromViewportBoxToImageBox(boxViewport, transform, viewport, layerT, { w: this.width, h: this.height }); } } Layout.prototype.types = {} addSignals(Layout, 'ready', 'updateSize'); export { Layout } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"LayoutTiles.js.html":{"id":"LayoutTiles.js.html","title":"Source: LayoutTiles.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: LayoutTiles.js import { BoundingBox } from \"./BoundingBox\"; import { Layout } from \"./Layout\"; import { Transform } from \"./Transform\"; // Tile level x y index ----- tex missing() start/end (tarzoom) ----- time, priority size(byte) /** * @typedef {Object} Tile * Represents a single element of a regular grid that subdivides an image. * Tiles are identified by their position (x, y) within the grid and the zoom level. * * @property {number} level - The zoom level of the tile (0 is top/most zoomed out) * @property {number} x - Horizontal position of the tile in the grid at the given level * @property {number} y - Vertical position of the tile in the grid at the given level * @property {number} index - Unique identifier for the tile across all levels * @property {number} [start] - Starting byte position in the dataset (used for tarzoom/itarzoom formats) * @property {number} [end] - Ending byte position in the dataset (used for tarzoom/itarzoom formats) * @property {number} missing - For multi-channel formats (RTI, BRDF), tracks pending channel data requests * @property {WebGLTexture[]} tex - Array of WebGL textures (one per channel) * @property {number} time - Timestamp of tile creation (used by cache algorithms) * @property {number} priority - Tile priority for cache management (lower = higher priority) * @property {number} size - Total size of the tile in bytes (used by cache algorithms) */ /** * @typedef {'image'|'deepzoom'|'deepzoom1px'|'google'|'zoomify'|'iiif'|'iip'|'tarzoom'|'itarzoom'} Layout#Type * Supported image layout types including both single-resolution and multi-resolution formats. * - image: Standard web image formats (jpg, png, gif, etc.) * - deepzoom: Microsoft Deep Zoom format with root tile &gt; 1px * - deepzoom1px: Microsoft Deep Zoom format with 1px root tile * - google: Google Maps tiling scheme * - zoomify: Zoomify tiling format * - iiif: International Image Interoperability Framework * - iip: Internet Imaging Protocol * - tarzoom: OpenLIME custom format (single TAR of DeepZoom pyramid) * - itarzoom: OpenLIME custom interleaved TAR format */ /** * The Layout class is responsible for specifying the data formats (images) managed by OpenLIME. * All web single-resolution image types (*jpg*, *png*, *gif*, etc...) are supported as well as the most common * tiled image formats (*deepzoom*, *zoomify*, *IIIF*, *google maps*), which are suitable for large images. * #### Single-resolution images * The URL is the address of the file (for instance, 'https://my.example/image.jpg'). * #### Tiled images * They can be specified in a variety of ways depending on the format chosen. * * **deepzoom** - The root tile of the image pyramid has a size &gt; 1px (typical value is 254px). It is defined by the URL of the *.dzi* file * (for instance, 'https://my.example/image.dzi'). See: {@link https://docs.microsoft.com/en-us/previous-versions/windows/silverlight/dotnet-windows-silverlight/cc645077(v=vs.95)?redirectedfrom=MSDN DeepZoom} * * **deepzoom1px** - The root tile of the image pyramid has a size = 1px. It is defined by the URL of the *.dzi* file * (for instance, 'https://my.example/image.dzi'). See: {@link https://docs.microsoft.com/en-us/previous-versions/windows/silverlight/dotnet-windows-silverlight/cc645077(v=vs.95)?redirectedfrom=MSDN DeepZoom} * * **google** - The URL points directly to the directory containing the pyramid of images (for instance, 'https://my.example/image'). * The standard does not require any configuration file, so it is mandatory to indicate in the `options` the * width and height in pixels of the original image. See: {@link https://www.microimages.com/documentation/TechGuides/78googleMapsStruc.pdf Google Maps} * * **zoomify** - The URL indicates the location of Zoomify configuration file (for instance, 'https://my.example/image/ImageProperties.xml'). * See: {@link http://www.zoomify.com/ZIFFileFormatSpecification.htm Zoomify} * * **iip** - The server parameter (optional) indicates the URL of the IIPImage endpoint (for example '/fcgi-bin/iipsrv.fcgi'). * The URL parameter indicates either just the name of the path and image file (for instance 'image.tif') if the server parameter has been set or the full IIP URL if not * (for instance '/fcgi-bin/iipsrv.fcgi?FIF=image.tif' or 'https://you.server//fcgi-bin/iipsrv.fcgi?FIF=image.tif' if image is hosted elsewhere) * See: {@link https://iipimage.sourceforge.io/ IIPImage Server} * * **iiif** - According to the standard, the URL is the address of a IIIF server (for instance, 'https://myiiifserver.example/'). * See: {@link https://iiif.io/api/image/3.0/ IIIF } * * **tarzoom** and **itarzoom** - This is a custom format of the OpenLIME framework. It can be described as the TAR of a DeepZoom (all the DeepZoom image pyramid is stored in a single file). * It takes advantage of the fact that current web servers are able to handle partial-content HTTP requests. Tarzoom facilitates * the work of the server, which is not penalised by having to manage a file system with many small files. The URL is the address of the *.tzi* file * (for instance, 'https://my.example/image.tzi'). Warning: tarzoom|itarzoom may not work on older web servers. * * @extends Layout * * @example * ```javascript * // DeepZoom layout * const dzLayout = new LayoutTiles('image.dzi', 'deepzoom', { * cachelevels: 8 * }); * * // Google Maps layout * const googleLayout = new LayoutTiles('tiles/', 'google', { * width: 4096, * height: 3072, * suffix: 'png' * }); * * // IIIF layout * const iiifLayout = new LayoutTiles('https://server/image', 'iiif'); * ``` * * @fires Layout#ready - When layout initialization is complete * @fires Layout#updateSize - When layout dimensions change */ class LayoutTiles extends Layout { /** * Creates a new LayoutTiles instance. * @param {string} url - URL to the image or tile configuration * @param {Layout#Type} type - The type of image layout * @param {Object} [options] - Configuration options * @param {number} [options.width] - Width of original image (required for 'google' type) * @param {number} [options.height] - Height of original image (required for 'google' type) * @param {string} [options.suffix='jpg'] - Tile file extension * @param {string} [options.subdomains='abc'] - Available subdomains for Google URL template * @param {number} [options.cachelevels=10] - Number of levels above current to cache * @param {string} [options.server] - IIP server URL (for IIP type only) * @fires Layout#ready * @fires Layout#updateSize */ constructor(url, type, options) { super(url, null, options); this.setDefaults(type); this.init(url, type, options); } /** * Sets default values for the layout. * @private * @param {Layout#Type} type - The layout type */ setDefaults(type) { super.setDefaults(type); Object.assign(this, { tilesize: 256, overlap: 0, nlevels: 1, //level 0 is the top, single tile level. qbox: [], //array of bounding box in tiles, one for mipmap bbox: [], //array of bounding box in pixels (w, h) urls: [], cachelevels: 10, }); } /** * Configures URLs and initializes the layout based on type. * @private * @param {string[]} urls - Array of URLs to configure * @fires Layout#ready * @fires Layout#updateSize */ setUrls(urls) { /** * The event is fired when a layout is ready to be drawn(the single-resolution image is downloaded or the multi-resolution structure has been initialized). * @event Layout#ready */ this.urls = urls; (async () =&gt; { switch (this.type) { case 'google': await this.initGoogle(); break; // No Url needed case 'deepzoom1px': await this.initDeepzoom(true); break; // urls[0] only needed case 'deepzoom': await this.initDeepzoom(false); break; // urls[0] only needed case 'zoomify': await this.initZoomify(); break; // urls[0] only needed case 'iiif': await this.initIIIF(); break; // urls[0] only needed case 'iip': await this.initIIP(); break; // urls[0] only needed case 'tarzoom': await this.initTarzoom(); break; // all urls needed case 'itarzoom': await this.initITarzoom(); break; // actually it has just one url } this.initBoxes(); this.status = 'ready'; this.emit('ready'); })().catch(e =&gt; { console.log(e); this.status = e; }); } /** * Constructs image URL for a specific plane/channel. * @private * @param {string} url - Base URL * @param {string} plane - Plane/channel identifier * @returns {string} Constructed URL * @throws {Error} For unknown layout types */ imageUrl(url, plane) { let path = url.substring(0, url.lastIndexOf('/') + 1); switch (this.type) { case 'image': return path + plane + '.jpg'; break; case 'google': return path + plane; break; case 'deepzoom': return path + plane + '.dzi'; break; case 'tarzoom': return path + plane + '.tzi'; break; case 'itarzoom': return path + 'planes.tzi'; break; case 'zoomify': return path + plane + '/ImageProperties.xml'; break; case 'iip': return url + \"&amp;SDS=\" + plane.substring(plane.lastIndexOf('_') + 1, plane.length); break; case 'iiif': throw Error(\"Unimplemented\"); default: throw Error(\"Unknown layout: \" + this.type); } } /** * Gets the tile size for the layout. * @returns {number[]} Array containing [width, height] of tiles */ getTileSize() { return [this.tilesize, this.tilesize]; } /** * Generates unique index for a tile based on its position and level. * @param {number} level - Zoom level * @param {number} x - X coordinate * @param {number} y - Y coordinate * @returns {number} Unique tile index */ index(level, x, y) { let startindex = 0; for (let i = 0; i &lt; level; i++) startindex += this.qbox[i].xHigh * this.qbox[i].yHigh; return startindex + y * this.qbox[level].xHigh + x; } /** * Converts tile index back to level, x, y coordinates. * @param {number} index - Tile index * @returns {Object} Position object containing level, x, y */ reverseIndex(index) { let originalindex = index; let level = 0; for (let i = 0; i &lt; this.qbox.length; i++) { let size = this.qbox[i].xHigh * this.qbox[i].yHigh; if (index - size &lt; 0) break; index -= size; level++; } let width = this.qbox[level].xHigh; let y = Math.floor(index / width) let x = index % width; console.assert(this.index(level, x, y) == originalindex); return { level, x, y }; } /** * Initializes bounding boxes for all pyramid levels. * @private * @fires Layout#updateSize * @returns {number} Total number of tiles */ initBoxes() { /** * The event is fired when a layout size is modified (and the scene extension must be recomputed at canvas level). * @event Layout#updateSize */ this.qbox = []; //by level (0 is the bottom) this.bbox = []; var w = this.width; var h = this.height; if (this.type == 'image') { this.qbox[0] = new BoundingBox({ xLow: 0, yLow: 0, xHigh: 1, yHigh: 1 }); this.bbox[0] = new BoundingBox({ xLow: 0, yLow: 0, xHigh: w, yHigh: h }); // Acknowledge bbox change (useful for knowing scene extension (at canvas level)) this.emit('updateSize'); return 1; } for (let level = this.nlevels - 1; level &gt;= 0; level--) { this.qbox[level] = new BoundingBox({ xLow: 0, yLow: 0, xHigh: 0, yHigh: 0 }); this.bbox[level] = new BoundingBox({ xLow: 0, yLow: 0, xHigh: w, yHigh: h }); this.qbox[level].yHigh = Math.ceil(h / this.tilesize); this.qbox[level].xHigh = Math.ceil(w / this.tilesize); w &gt;&gt;&gt;= 1; h &gt;&gt;&gt;= 1; } // Acknowledge bbox (useful for knowing scene extension (at canvas level)) this.emit('updateSize'); } /** * Gets coordinates for a tile in both image space and texture space. * @param {Tile} tile - The tile to get coordinates for * @returns {Object} Coordinate data * @returns {Float32Array} .coords - Image space coordinates [x,y,z, x,y,z, x,y,z, x,y,z] * @returns {Float32Array} .tcoords - Texture coordinates [u,v, u,v, u,v, u,v] */ tileCoords(tile) { let { level, x, y } = tile; let w = this.width; let h = this.height; //careful: here y is inverted due to textures not being flipped on load (Firefox fault!). var tcoords = new Float32Array([0, 1, 0, 0, 1, 0, 1, 1]); let coords = new Float32Array([0, 0, 0, 0, 1, 0, 1, 1, 0, 1, 0, 0]); // FIXME 32 bit and errors let ilevel = this.nlevels - 1 - level; let side = this.tilesize * (1 &lt;&lt; (ilevel)); //tile size in imagespace let tx = side; let ty = side; if (side * (x + 1) &gt; this.width) { tx = (this.width - side * x); if (this.type == 'google') tcoords[4] = tcoords[6] = tx / side; } if (side * (y + 1) &gt; this.height) { ty = (this.height - side * y); if (this.type == 'google') tcoords[1] = tcoords[7] = ty / side; } var lx = this.qbox[level].xHigh - 1; //last tile x pos, if so no overlap. var ly = this.qbox[level].yHigh - 1; var over = this.overlap; if (over) { let dtx = over / (tx / (1 &lt;&lt; ilevel) + (x == 0 ? 0 : over) + (x == lx ? 0 : over)); let dty = over / (ty / (1 &lt;&lt; ilevel) + (y == 0 ? 0 : over) + (y == ly ? 0 : over)); tcoords[0] = tcoords[2] = (x == 0 ? 0 : dtx); tcoords[3] = tcoords[5] = (y == 0 ? 0 : dty); tcoords[4] = tcoords[6] = (x == lx ? 1 : 1 - dtx); tcoords[1] = tcoords[7] = (y == ly ? 1 : 1 - dty); } //flip Y coordinates //TODO cleanup this mess! let tmp = tcoords[1]; tcoords[1] = tcoords[7] = tcoords[3]; tcoords[3] = tcoords[5] = tmp; for (let i = 0; i &lt; coords.length; i += 3) { coords[i] = coords[i] * tx + side * x - this.width / 2; coords[i + 1] = -coords[i + 1] * ty - side * y + this.height / 2; } return { coords: coords, tcoords: tcoords } } /** * Creates a new tile instance with computed properties. * @param {number} index - Unique tile identifier * @returns {Tile} New tile instance */ newTile(index) { let tile = super.newTile(index) tile.index = index; Object.assign(tile, this.reverseIndex(index)); return tile; } /** * Determines which tiles are needed for the current view. * @param {Viewport} viewport - Current viewport * @param {Transform} transform - Current transform * @param {Transform} layerTransform - Layer-specific transform * @param {number} border - Border size in tile units for prefetching * @param {number} bias - Resolution bias (0-1, affects mipmap level selection) * @param {Map&lt;number,Tile&gt;} tiles - Currently available tiles * @param {number} [maxtiles=8] - Maximum number of tiles to return * @returns {Tile[]} Array of needed tiles sorted by priority */ needed(viewport, transform, layerTransform, border, bias, tiles, maxtiles = 8) { let neededBox = this.neededBox(viewport, transform, layerTransform, 0, bias); //if (this.previouslyNeeded &amp;&amp; this.sameNeeded(this.previouslyNeeded, neededBox)) // return; //this.previouslyNeeded = neededBox; let needed = []; let now = performance.now(); //look for needed nodes and prefetched nodes (on the pos destination //let missing = this.shader.samplers.length; for (let level = 0; level &lt;= neededBox.level; level++) { let box = neededBox.pyramid[level]; let tmp = []; for (let y = box.yLow; y &lt; box.yHigh; y++) { for (let x = box.xLow; x &lt; box.xHigh; x++) { let index = this.index(level, x, y); let tile = tiles.get(index) || this.newTile(index); //{ index, x, y, missing, tex: [], level }; tile.time = now; tile.priority = neededBox.level - level; if (tile.priority &gt; this.cachelevels) continue; if (tile.missing === null) // || tile.missing != 0 &amp;&amp; !this.requested[index]) tmp.push(tile); } } let c = box.center(); //sort tiles by distance to the center TODO: check it's correct! tmp.sort(function (a, b) { return Math.abs(a.x - c.x) + Math.abs(a.y - c.y) - Math.abs(b.x - c.x) - Math.abs(b.y - c.y); }); needed = needed.concat(tmp); } return needed; } /** * Gets tiles currently available for rendering. * @param {Viewport} viewport - Current viewport * @param {Transform} transform - Current transform * @param {Transform} layerTransform - Layer-specific transform * @param {number} border - Border size in tile units * @param {number} bias - Resolution bias * @param {Map&lt;number,Tile&gt;} tiles - Available tiles * @returns {Object.&lt;number,Tile&gt;} Map of tile index to tile object with additional 'complete' property */ available(viewport, transform, layerTransform, border, bias, tiles) { let needed = this.neededBox(viewport, transform, layerTransform, 0, bias); let torender = {}; //array of minlevel, actual level, x, y (referred to minlevel) let brothers = {}; let minlevel = needed.level; let box = needed.pyramid[minlevel]; for (let y = box.yLow; y &lt; box.yHigh; y++) { for (let x = box.xLow; x &lt; box.xHigh; x++) { let level = minlevel; while (level &gt;= 0) { let d = minlevel - level; let index = this.index(level, x &gt;&gt; d, y &gt;&gt; d); if (tiles.has(index) &amp;&amp; tiles.get(index).missing == 0) { torender[index] = tiles.get(index); //{ index: index, level: level, x: x &gt;&gt; d, y: y &gt;&gt; d, complete: true }; break; } else { let sx = (x &gt;&gt; (d + 1)) &lt;&lt; 1; let sy = (y &gt;&gt; (d + 1)) &lt;&lt; 1; brothers[this.index(level, sx, sy)] = 1; brothers[this.index(level, sx + 1, sy)] = 1; brothers[this.index(level, sx + 1, sy + 1)] = 1; brothers[this.index(level, sx, sy + 1)] = 1; } level--; } } } for (let index in brothers) { if (index in torender) torender[index].complete = false; } return torender; } /** * Computes required tiles at each pyramid level for the current view. * @param {Viewport} viewport - Current viewport * @param {Transform} transform - Current transform * @param {Transform} layerTransform - Layer-specific transform * @param {number} border - Border size in tile units for prefetching * @param {number} bias - Resolution bias (0-1) * @returns {Object} Tile requirements * @returns {number} .level - Optimal pyramid level * @returns {BoundingBox[]} .pyramid - Array of tile bounding boxes per level */ neededBox(viewport, transform, layerTransform, border, bias) { if (this.type == \"image\") return { level: 0, pyramid: [new BoundingBox({ xLow: 0, yLow: 0, xHigh: 1, yHigh: 1 })] }; //here we are computing with inverse levels; level 0 is the bottom! let iminlevel = Math.max(0, Math.min(Math.floor(-Math.log2(transform.z) + bias), this.nlevels - 1)); let minlevel = this.nlevels - 1 - iminlevel; const bbox = this.getViewportBox(viewport, transform, layerTransform); let pyramid = []; for (let level = 0; level &lt;= minlevel; level++) { let ilevel = this.nlevels - 1 - level; let side = this.tilesize * Math.pow(2, ilevel); let qbox = new BoundingBox(bbox); qbox.quantize(side); //clamp! qbox.xLow = Math.max(qbox.xLow - border, this.qbox[level].xLow); qbox.yLow = Math.max(qbox.yLow - border, this.qbox[level].yLow); qbox.xHigh = Math.min(qbox.xHigh + border, this.qbox[level].xHigh); qbox.yHigh = Math.min(qbox.yHigh + border, this.qbox[level].yHigh); pyramid[level] = qbox; } return { level: minlevel, pyramid: pyramid }; } /** * Gets URL for a specific tile. * @param {number} id - Channel/raster ID * @param {Tile} tile - Tile to get URL for * @returns {string} URL to fetch tile data * @throws {Error} If layout not defined or ready */ getTileURL(id, tile) { throw Error(\"Layout not defined or ready.\"); } /** * Initializes single-image layout. * @private * @async */ async initImage() { this.getTileURL = (rasterid, tile) =&gt; { return this.urls[rasterid]; } this.nlevels = 1; this.tilesize = 0; } /** * Initializes Google Maps layout. * @private * @async * @throws {Error} If width or height not specified */ async initGoogle() { if (!this.width || !this.height) throw \"Google rasters require to specify width and height\"; this.tilesize = 256; this.overlap = 0; let max = Math.max(this.width, this.height) / this.tilesize; this.nlevels = Math.ceil(Math.log(max) / Math.LN2) + 1; if (this.urls[0].includes('{')) { this.getTileURL = (rasterid, tile) =&gt; { let s = this.subdomains ? this.subdomains[Math.abs(tile.x + tile.y) % this.subdomains.length] : ''; let vars = { s, ...tile, z: tile.level }; return this.urls[rasterid].replace(/{(.+?)}/g, (match, p) =&gt; vars[p]); } } else this.getTileURL = (rasterid, tile) =&gt; { return this.urls[rasterid] + \"/\" + tile.level + \"/\" + tile.y + \"/\" + tile.x + '.' + this.suffix; }; } /** * Initializes DeepZoom layout. * @private * @async * @param {boolean} onepixel - Whether using 1px root tile variant * @throws {Error} If unable to fetch or parse DZI file */ async initDeepzoom(onepixel) { let url = this.urls.filter(u =&gt; u)[0]; var response = await fetch(url); if (!response.ok) { this.status = \"Failed loading \" + url + \": \" + response.statusText; throw new Error(this.status); } let text = await response.text(); let xml = (new window.DOMParser()).parseFromString(text, \"text/xml\"); let doc = xml.documentElement; this.suffix = doc.getAttribute('Format'); this.tilesize = parseInt(doc.getAttribute('TileSize')); this.overlap = parseInt(doc.getAttribute('Overlap')); let size = doc.querySelector('Size'); this.width = parseInt(size.getAttribute('Width')); this.height = parseInt(size.getAttribute('Height')); let max = Math.max(this.width, this.height) / this.tilesize; this.nlevels = Math.ceil(Math.log(max) / Math.LN2) + 1; this.urls = this.urls.map(url =&gt; url ? url.substr(0, url.lastIndexOf(\".\")) + '_files/' : null); this.skiplevels = 0; if (onepixel) this.skiplevels = Math.ceil(Math.log(this.tilesize) / Math.LN2); this.getTileURL = (rasterid, tile) =&gt; { let url = this.urls[rasterid]; let level = tile.level + this.skiplevels; return url + level + '/' + tile.x + '_' + tile.y + '.' + this.suffix; }; } /** * Initializes Tarzoom layout. * @private * @async * @throws {Error} If unable to fetch or parse TZI file */ async initTarzoom() { this.tarzoom = []; for (let url of this.urls) { var response = await fetch(url); if (!response.ok) { this.status = \"Failed loading \" + url + \": \" + response.statusText; throw new Error(this.status); } let json = await response.json(); json.url = url.substr(0, url.lastIndexOf(\".\")) + '.tzb'; Object.assign(this, json); this.tarzoom.push(json); } this.getTileURL = (rasterid, tile) =&gt; { const tar = this.tarzoom[rasterid]; tile.start = tar.offsets[tile.index]; tile.end = tar.offsets[tile.index + 1]; return tar.url; }; } /** * Initializes Tarzoom layout. * @private * @async * @throws {Error} If unable to fetch or parse TZI file */ async initITarzoom() { const url = this.urls[0]; var response = await fetch(url); if (!response.ok) { this.status = \"Failed loading \" + url + \": \" + response.statusText; throw new Error(this.status); } let json = await response.json(); Object.assign(this, json); //suffix, tilesize, overlap, width, height, levels this.url = url.substr(0, url.lastIndexOf(\".\")) + '.tzb'; this.getTileURL = (rasterid, tile) =&gt; { let index = tile.index * this.stride; tile.start = this.offsets[index]; tile.end = this.offsets[index + this.stride]; tile.offsets = [] for (let i = 0; i &lt; this.stride + 1; i++) tile.offsets.push(this.offsets[index + i] - tile.start); return this.url; }; } /** * Initializes Zoomify layout. * @private * @async * @throws {Error} If unable to fetch or parse ImageProperties.xml */ async initZoomify() { const url = this.urls[0]; this.overlap = 0; var response = await fetch(url); if (!response.ok) { this.status = \"Failed loading \" + url + \": \" + response.statusText; throw new Error(this.status); } let text = await response.text(); let xml = (new window.DOMParser()).parseFromString(text, \"text/xml\"); let doc = xml.documentElement; this.tilesize = parseInt(doc.getAttribute('TILESIZE')); this.width = parseInt(doc.getAttribute('WIDTH')); this.height = parseInt(doc.getAttribute('HEIGHT')); if (!this.tilesize || !this.height || !this.width) throw \"Missing parameter files for zoomify!\"; let max = Math.max(this.width, this.height) / this.tilesize; this.nlevels = Math.ceil(Math.log(max) / Math.LN2) + 1; this.getTileURL = (rasterid, tile) =&gt; { const tileUrl = this.urls[rasterid].substr(0, url.lastIndexOf(\"/\")); let group = tile.index &gt;&gt; 8; return tileUrl + \"/TileGroup\" + group + \"/\" + tile.level + \"-\" + tile.x + \"-\" + tile.y + \".\" + this.suffix; }; } /** * Initializes IIIF layout. * @private * @async * @throws {Error} If unable to fetch or parse info.json */ async initIIIF() { const url = this.urls[0]; this.overlap = 0; var response = await fetch(url); if (!response.ok) { this.status = \"Failed loading \" + url + \": \" + response.statusText; throw new Error(this.status); } let info = await response.json(); this.width = info.width; this.height = info.height; this.nlevels = info.tiles[0].scaleFactors.length; this.tilesize = info.tiles[0].width; this.getTileURL = (rasterid, tile) =&gt; { const tileUrl = this.urls[rasterid].substr(0, url.lastIndexOf(\"/\")); let tw = this.tilesize; let ilevel = parseInt(this.nlevels - 1 - tile.level); let s = Math.pow(2, tile.level); //region parameters let xr = tile.x * tw * s; let yr = tile.y * tw * s; let wr = Math.min(tw * s, this.width - xr) let hr = Math.min(tw * s, this.height - yr); // pixel size parameters /ws,hs/ let ws = tw if (xr + tw * s &gt; this.width) ws = (this.width - xr + s - 1) / s let hs = tw if (yr + tw * s &gt; this.height) hs = (this.height - yr + s - 1) / s return `${tileUrl}/${xr},${yr},${wr},${hr}/${ws},${hs}/0/default.jpg`; }; } /** * Initializes IIP layout. * @private * @async * @throws {Error} If unable to fetch or parse server response */ async initIIP() { const server = this.server ? (this.server + '?FIF=') : ''; const url = server + this.urls[0] + \"&amp;obj=Max-size&amp;obj=Tile-size&amp;obj=Resolution-number\"; let response = await fetch(url); if (!response.ok) { this.status = \"Failed loading \" + url + \": \" + response.statusText; throw new Error(this.status); } let info = await response.text(); let tmp = info.split(\"Tile-size:\"); if (!tmp[1]) return null; this.tilesize = parseInt(tmp[1].split(\" \")[0]); tmp = info.split(\"Max-size:\"); if (!tmp[1]) return null; tmp = tmp[1].split('\\n')[0].split(' '); this.width = parseInt(tmp[0]); this.height = parseInt(tmp[1]); this.nlevels = parseInt(info.split(\"Resolution-number:\")[1]); this.getTileURL = (rasterid, tile) =&gt; { // Tile index for this resolution let index = tile.y * this.qbox[tile.level].xHigh + tile.x; // Handle different formats if requested or indicated in the info.json let command = \"JTL\"; // Default if (this.suffix == \"webp\") command = \"WTL\"; else if (this.suffix == \"png\") command = \"PTL\"; let url = (this.server ? this.server + '?FIF=' : '') + this.urls[rasterid] + \"&amp;\" + command + \"=\" + tile.level + \",\" + index; return url; }; } } /** * @event Layout#ready * Fired when the layout is ready for rendering. * This occurs when: * - Single-resolution image is fully downloaded * - Multi-resolution structure is initialized and validated * - Tile pyramid information is computed */ /** * @event Layout#updateSize * Fired when the layout size changes and scene extension needs updating. * This occurs when: * - Image dimensions are determined * - Pyramid levels are initialized * - Bounding boxes are computed */ /** * Factory function to create LayoutTiles instances. * @private * @param {string} url - URL to image resource * @param {Layout#Type} type - Layout type * @param {Object} [options] - Configuration options * @returns {LayoutTiles} New LayoutTiles instance */ const factory = (url, type, options) =&gt; { return new LayoutTiles(url, type, options); }; // Register supported layout types for (let type of ['google', 'deepzoom1px', 'deepzoom', 'zoomify', 'iiif', 'iip', 'tarzoom', 'itarzoom']) Layout.prototype.types[type] = factory; export { LayoutTiles } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"LayoutTileImages.js.html":{"id":"LayoutTileImages.js.html","title":"Source: LayoutTileImages.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: LayoutTileImages.js import { Layout } from './Layout.js'; import { BoundingBox } from './BoundingBox.js'; import { Tile } from './Tile.js'; import { Annotation } from './Annotation.js'; /** * @fileoverview * LayoutTileImages module provides management for collections of image tiles with associated regions. * This layout type is specialized for handling multiple independent image tiles, each with their own * position and dimensions, rather than a regular grid of tiles like LayoutTiles. */ /** * @typedef {Object} TileDescriptor * Properties expected in tile descriptors: * @property {boolean} visible - Whether the tile should be rendered * @property {Object} region - Position and dimensions of the tile * @property {number} region.x - X coordinate of tile's top-left corner * @property {number} region.y - Y coordinate of tile's top-left corner * @property {number} region.w - Width of the tile * @property {number} region.h - Height of the tile * @property {string} image - URL or path to the tile's image * @property {number} [publish] - Publication status (1 = published) */ /** * LayoutTileImages class manages collections of image tiles with associated regions. * Each tile represents an independent image with its own position and dimensions in the layout space. * Tiles can be individually shown or hidden and are loaded from annotation files or external descriptors. * @extends Layout */ class LayoutTileImages extends Layout { /** * Creates a new LayoutTileImages instance. * @param {string|null} url - URL to the annotation file containing tile descriptors, or null if descriptors will be set later * @param {string} type - The layout type (should be 'tile_images') * @param {Object} [options] - Configuration options inherited from Layout */ constructor(url, type, options) { super(url, null, options); this.setDefaults(type); this.init(url, type, options); // Contain array of records with at least visible,region,image (url of the image). // Can be also a pointer to annotation array set from outside with setTileDescriptors() this.tileDescriptors = []; this.box = new BoundingBox(); if (url != null) { // Read data from annotation file this.loadDescriptors(url); } } /** * Gets the tile size. For this layout, tiles don't have a fixed size. * @returns {number[]} Returns [0, 0] as tiles have variable sizes */ getTileSize() { return [0, 0]; } /** * Loads tile descriptors from an annotation file. * @private * @async * @param {string} url - URL of the annotation file * @fires Layout#ready - When descriptors are loaded and processed * @fires Layout#updateSize - When bounding box is computed */ async loadDescriptors(url) { // Load tile descriptors from annotation file let response = await fetch(url); if (!response.ok) { this.status = \"Failed loading \" + url + \": \" + response.statusText; return; } this.tileDescriptors = await response.json(); if (this.tileDescriptors.status == 'error') { alert(\"Failed to load annotations: \" + this.tileDescriptors.msg); return; } //this.annotations = this.annotations.map(a =&gt; '@context' in a ? Annotation.fromJsonLd(a): a); this.tileDescriptors = this.tileDescriptors.map(a =&gt; new Annotation(a)); for (let a of this.tileDescriptors) { if (a.publish != 1) a.visible = false; } this.computeBoundingBox(); this.emit('updateSize'); if (this.path == null) { this.setPathFromUrl(url); } this.status = 'ready'; this.emit('ready'); } /** * Computes the bounding box containing all tile regions. * Updates the layout's box property to encompass all tile regions. * @private */ computeBoundingBox() { this.box = new BoundingBox(); for (let a of this.tileDescriptors) { let r = a.region; let b = new BoundingBox({ xLow: r.x, yLow: r.y, xHigh: r.x + r.w, yHigh: r.y + r.h }); this.box.mergeBox(b); } } /** * Gets the layout's bounding box. * @returns {BoundingBox} The bounding box containing all tile regions */ boundingBox() { return this.box; } /** * Sets the base path for tile URLs based on the annotation file location. * @private * @param {string} url - URL of the annotation file */ setPathFromUrl(url) { // Assume annotations in dir of annotation.json + /annot/ const myArray = url.split(\"/\"); const N = myArray.length; this.path = \"\"; for (let i = 0; i &lt; N - 1; ++i) { this.path += myArray[i] + \"/\"; } this.getTileURL = (id, tile) =&gt; { const url = this.path + '/' + this.tileDescriptors[tile.index].image; return url; } //this.path += \"/annot/\"; } /** * Sets tile descriptors programmatically instead of loading from a file. * @param {Annotation[]} tileDescriptors - Array of tile descriptors * @fires Layout#ready */ setTileDescriptors(tileDescriptors) { this.tileDescriptors = tileDescriptors; this.status = 'ready'; this.emit('ready'); } /** * Gets the URL for a specific tile. * @param {number} id - Channel/raster ID * @param {Tile} tile - Tile object * @returns {string} URL to fetch tile image */ getTileURL(id, tile) { const url = this.path + '/' + this.tileDescriptors[id].image; return url; } /** * Sets visibility for a specific tile. * @param {number} index - Index of the tile * @param {boolean} visible - Visibility state to set */ setTileVisible(index, visible) { this.tileDescriptors[index].visible = visible; } /** * Sets visibility for all tiles. * @param {boolean} visible - Visibility state to set for all tiles */ setAllTilesVisible(visible) { const N = this.tileCount(); for (let i = 0; i &lt; N; ++i) { this.tileDescriptors[i].visible = visible; } } /** * Maps tile coordinates to a linear index. * In this layout, x directly maps to the index as tiles are stored in a flat list. * @param {number} level - Zoom level (unused in this layout) * @param {number} x - X coordinate (used as index) * @param {number} y - Y coordinate (unused in this layout) * @returns {number} Linear index of the tile */ index(level, x, y) { // Map x to index (flat list) return x; } /** * Gets coordinates for a tile in both image space and texture space. * @param {Tile} tile - The tile to get coordinates for * @returns {Object} Coordinate data * @returns {Float32Array} .coords - Image space coordinates [x,y,z, x,y,z, x,y,z, x,y,z] * @returns {Float32Array} .tcoords - Texture coordinates [u,v, u,v, u,v, u,v] */ tileCoords(tile) { const r = this.tileDescriptors[tile.index].region; const x0 = r.x; const y0 = r.y const x1 = x0 + r.w; const y1 = y0 + r.h; return { coords: new Float32Array([x0, y0, 0, x0, y1, 0, x1, y1, 0, x1, y0, 0]), //careful: here y is inverted due to textures not being flipped on load (Firefox fault!). tcoords: new Float32Array([0, 1, 0, 0, 1, 0, 1, 1]) }; } /** * Determines which tiles are needed for the current view. * @param {Viewport} viewport - Current viewport * @param {Transform} transform - Current transform * @param {Transform} layerTransform - Layer-specific transform * @param {number} border - Border size in viewport units * @param {number} bias - Resolution bias (unused in this layout) * @param {Map&lt;number,Tile&gt;} tiles - Currently available tiles * @param {number} [maxtiles=8] - Maximum number of tiles to return * @returns {Tile[]} Array of needed tiles sorted by distance to viewport center */ needed(viewport, transform, layerTransform, border, bias, tiles, maxtiles = 8) { //look for needed nodes and prefetched nodes (on the pos destination const box = this.getViewportBox(viewport, transform, layerTransform); let needed = []; let now = performance.now(); // Linear scan of all the potential tiles const N = this.tileCount(); const flipY = true; for (let x = 0; x &lt; N; x++) { let index = this.index(0, x, 0); let tile = tiles.get(index) || this.newTile(index); if (this.intersects(box, index, flipY)) { tile.time = now; tile.priority = this.tileDescriptors[index].visible ? 10 : 1; if (tile.missing === null) needed.push(tile); } } let c = box.center(); //sort tiles by distance to the center TODO: check it's correct! needed.sort(function (a, b) { return Math.abs(a.x - c[0]) + Math.abs(a.y - c[1]) - Math.abs(b.x - c[0]) - Math.abs(b.y - c[1]); }); return needed; } /** * Gets tiles currently available for rendering. * @param {Viewport} viewport - Current viewport * @param {Transform} transform - Current transform * @param {Transform} layerTransform - Layer-specific transform * @param {number} border - Border size in viewport units * @param {number} bias - Resolution bias (unused in this layout) * @param {Map&lt;number,Tile&gt;} tiles - Available tiles * @returns {Object.&lt;number,Tile&gt;} Map of tile index to tile object for visible, loaded tiles */ available(viewport, transform, layerTransform, border, bias, tiles) { //find box in image coordinates where (0, 0) is in the upper left corner. const box = this.getViewportBox(viewport, transform, layerTransform); let torender = []; // Linear scan of all the potential tiles const N = this.tileCount(); const flipY = true; for (let x = 0; x &lt; N; x++) { let index = this.index(0, x, 0); if (this.tileDescriptors[index].visible &amp;&amp; this.intersects(box, index, flipY)) { if (tiles.has(index)) { let tile = tiles.get(index); if (tile.missing == 0) { torender[index] = tile; } } } } return torender; } /** * Creates a new tile instance with properties from its descriptor. * @param {number} index - Index of the tile descriptor * @returns {Tile} New tile instance with region and image properties */ newTile(index) { let tile = new Tile(); tile.index = index; let descriptor = this.tileDescriptors[index]; tile.image = descriptor.image; Object.assign(tile, descriptor.region); return tile; } /** * Checks if a tile's region intersects with a given box. * @private * @param {BoundingBox} box - Box to check intersection with * @param {number} index - Index of the tile to check * @param {boolean} [flipY=true] - Whether to flip Y coordinates for texture coordinate space * @returns {boolean} True if the tile intersects the box */ intersects(box, index, flipY = true) { const r = this.tileDescriptors[index].region; const xLow = r.x; const yLow = r.y; const xHigh = xLow + r.w; const yHigh = yLow + r.h; const boxYLow = flipY ? -box.yHigh : box.yLow; const boxYHigh = flipY ? -box.yLow : box.yHigh; return xLow &lt; box.xHigh &amp;&amp; yLow &lt; boxYHigh &amp;&amp; xHigh &gt; box.xLow &amp;&amp; yHigh &gt; boxYLow; } /** * Gets the total number of tiles in the layout. * @returns {number} Number of tile descriptors */ tileCount() { return this.tileDescriptors.length; } } /** * @event Layout#ready * Fired when the layout is ready for rendering. * This occurs when: * - Tile descriptors are loaded from annotation file * - Tile descriptors are set programmatically */ /** * @event Layout#updateSize * Fired when the layout size changes and scene extension needs updating. * This occurs when: * - Tile descriptors are loaded and bounding box is computed */ // Register the tile_images layout type Layout.prototype.types['tile_images'] = (url, type, options) =&gt; { return new LayoutTileImages(url, type, options); }; export { LayoutTileImages } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"LensDashboard.js.html":{"id":"LensDashboard.js.html","title":"Source: LensDashboard.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: LensDashboard.js import { CoordinateSystem } from \"./CoordinateSystem\"; import { Util } from \"./Util\" /** * @fileoverview * LensDashboard module provides functionality for creating and managing an interactive lens interface * in OpenLIME. It handles the lens border, SVG masking, and positioning of UI elements around the lens. */ /** * @enum {string} * Defines rendering modes for lens and background areas. * @property {string} draw - \"fill:white;\" Shows content in the specified area * @property {string} hide - \"fill:black;\" Hides content in the specified area */ const RenderingMode = { draw: \"fill:white;\", hide: \"fill:black;\" }; /** * Callback function fired by a 'click' event on a lens dashboard element. * @function taskCallback * @param {Event} e The DOM event. */ /** * LensDashboard class creates an interactive container for a lens interface. * It provides: * - A square HTML container that moves with the lens * - SVG-based circular lens border with drag interaction for resizing * - Masking capabilities for controlling content visibility inside/outside the lens * - Ability to add HTML elements positioned relative to the lens */ class LensDashboard { /** * Creates a new LensDashboard instance. * @param {Viewer} viewer - The OpenLIME viewer instance * @param {Object} [options] - Configuration options * @param {number} [options.containerSpace=80] - Extra space around the lens for dashboard elements (in pixels) * @param {number[]} [options.borderColor=[0.078, 0.078, 0.078, 1]] - RGBA color for lens border * @param {number} [options.borderWidth=12] - Width of the lens border (in pixels) * @param {LayerSvgAnnotation} [options.layerSvgAnnotation=null] - Associated SVG annotation layer */ constructor(viewer, options) { options = Object.assign({ containerSpace: 80, borderColor: [0.078, 0.078, 0.078, 1], borderWidth: 12, layerSvgAnnotation: null }, options); Object.assign(this, options); this.lensLayer = null; this.viewer = viewer; this.elements = []; this.container = document.createElement('div'); this.container.style = `position: absolute; width: 50px; height: 50px; background-color: rgb(200, 0, 0, 0.0); pointer-events: none`; this.container.classList.add('openlime-lens-dashboard'); this.viewer.containerElement.appendChild(this.container); const col = [255.0 * this.borderColor[0], 255.0 * this.borderColor[1], 255.0 * this.borderColor[2], 255.0 * this.borderColor[3]]; this.lensElm = Util.createSVGElement('svg', { viewBox: `0 0 100 100` }); const circle = Util.createSVGElement('circle', { cx: 10, cy: 10, r: 50 }); circle.setAttributeNS(null, 'style', `position:absolute; visibility: visible; fill: none; stroke: rgb(${col[0]},${col[1]},${col[2]},${col[3]}); stroke-width: ${this.borderWidth}px;`); circle.setAttributeNS(null, 'shape-rendering', 'geometricPrecision'); this.lensElm.appendChild(circle); this.container.appendChild(this.lensElm); this.setupCircleInteraction(circle); this.lensBox = { x: 0, y: 0, r: 0, w: 0, h: 0 }; this.svgElement = null; this.svgMaskId = 'openlime-image-mask'; this.svgMaskUrl = `url(#${this.svgMaskId})`; this.noupdate = false; } /** * Sets up interactive lens border resizing. * Creates event listeners for pointer events to allow users to drag the lens border to resize. * @private * @param {SVGElement} circle - The SVG circle element representing the lens border */ setupCircleInteraction(circle) { circle.style.pointerEvents = 'auto'; this.isCircleSelected = false; // OffsetXY are unstable from this point (I don't know why) // Thus get coordinates from clientXY function getXYFromEvent(e, container) { const x = e.clientX - container.offsetLeft - container.clientLeft; const y = e.clientY - container.offsetTop - container.clientTop; return { offsetX: x, offsetY: y }; } this.viewer.containerElement.addEventListener('pointerdown', (e) =&gt; { if (circle == e.target) { this.isCircleSelected = true; if (this.lensLayer.controllers[0]) { const p = getXYFromEvent(e, this.viewer.containerElement); this.lensLayer.controllers[0].zoomStart(p); } e.preventDefault(); e.stopPropagation(); } }); this.viewer.containerElement.addEventListener('pointermove', (e) =&gt; { if (this.isCircleSelected) { if (this.lensLayer.controllers[0]) { const p = getXYFromEvent(e, this.viewer.containerElement); this.lensLayer.controllers[0].zoomMove(p); } e.preventDefault(); e.stopPropagation(); } }); this.viewer.containerElement.addEventListener('pointerup', (e) =&gt; { if (this.isCircleSelected) { if (this.lensLayer.controllers[0]) { this.lensLayer.controllers[0].zoomEnd(); } this.isCircleSelected = false; e.preventDefault(); e.stopPropagation(); } }); } /** * Toggles the visibility of the dashboard UI elements. * Uses CSS classes to show/hide the interface. */ toggle() { this.container.classList.toggle('closed'); } /** * Associates a LayerSvgAnnotation with the dashboard. * This enables proper masking of SVG annotations within the lens area. * @param {LayerSvgAnnotation} layer - The SVG annotation layer to associate */ setLayerSvgAnnotation(layer) { this.layerSvgAnnotation = l; this.svgElement = this.layerSvgAnnotation.svgElement; } /** * Creates SVG masking elements for the lens. * Sets up a composite mask consisting of: * - A full-viewport rectangle for the background * - A circle for the lens area * The mask controls visibility of content inside vs outside the lens. * @private */ createSvgLensMask() { if (this.svgElement == null) this.setupSvgElement(); if (this.svgElement == null) return; // Create a mask made of a rectangle (it will be set to the full viewport) for the background // And a circle, corresponding to the lens. const w = 100; // The real size will be set at each frame by the update function this.svgMask = Util.createSVGElement(\"mask\", { id: this.svgMaskId }); this.svgGroup = Util.createSVGElement(\"g\"); this.outMask = Util.createSVGElement(\"rect\", { id: 'outside-lens-mask', x: -w / 2, y: -w / 2, width: w, height: w, style: \"fill:black;\" }); this.inMask = Util.createSVGElement(\"circle\", { id: 'inside-lens-mask', cx: 0, cy: 0, r: w / 2, style: \"fill:white;\" }); this.svgGroup.appendChild(this.outMask); this.svgGroup.appendChild(this.inMask); this.svgMask.appendChild(this.svgGroup); this.svgElement.appendChild(this.svgMask); // FIXME Remove svgCheck. It's a Check, just to have an SVG element to mask // this.svgCheck = Util.createSVGElement('rect', {x:-w/2, y:-w/2, width:w/2, height:w/2, style:'fill:orange; stroke:blue; stroke-width:5px;'}); // // this.svgCheck.setAttribute('mask', this.svgMaskUrl); // this.svgElement.appendChild(this.svgCheck); // console.log(this.svgCheck); } /** * Sets up the SVG container element for the lens. * Will either: * - Use the SVG element from an associated annotation layer * - Find an existing SVG element in the shadow DOM * - Create a new SVG element if needed * @private */ setupSvgElement() { if (this.layerSvgAnnotation) { // AnnotationLayer available, get its root svgElement if (this.svgElement == null) { //console.log(\"NULL SVG ELEMENT, take it from layerSvgAnnotation\"); this.svgElement = this.layerSvgAnnotation.svgElement; } } else { // No annotationLayer, search for an svgElement // First: get shadowRoot to attach the svgElement let shadowRoot = this.viewer.canvas.overlayElement.shadowRoot; if (shadowRoot == null) { //console.log(\"WARNING: null ShadowRoot, create a new one\"); shadowRoot = this.viewer.canvas.overlayElement.attachShadow({ mode: \"open\" }); } //console.log(\"WARNING: no svg element, create a new one\"); this.svgElement = shadowRoot.querySelector('svg'); if (this.svgElement == null) { // Not availale svg element: build a new one and attach to the tree this.svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); this.svgElement.classList.add('openlime-svgoverlay-mask'); this.svgElement.setAttributeNS(null, 'style', 'pointer-events: none;'); shadowRoot.appendChild(this.svgElement); } } } /** * Applies the lens mask to an SVG element. * Elements with the mask will only be visible within the lens area * (or outside, depending on mask configuration). * @param {SVGElement} svg - The SVG element to mask */ setMaskOnSvgLayer(svg) { svg.setAttributeNS(null, 'mask', this.svgMaskUrl); } /** * Removes the lens mask from an SVG element. * Returns the element to its normal, unmasked rendering. * @param {SVGElement} svg - The SVG element to unmask */ removeMaskFromSvgLayer(svg) { svg.removeAttribute('mask'); } /** * Adds an HTML element to the dashboard container. * The element should use absolute positioning relative to the container. * Example: * ```javascript * const button = document.createElement('button'); * button.style = 'position: absolute; left: 10px; top: 10px;'; * lensDashboard.append(button); * ``` * @param {HTMLElement} elm - The HTML element to add */ append(elm) { this.container.appendChild(elm); } /** * Sets the rendering mode for the lens area. * Controls whether content inside the lens is shown or hidden. * @param {RenderingMode} mode - The rendering mode to use */ setLensRenderingMode(mode) { this.inMask.setAttributeNS(null, 'style', mode); } /** * Sets the rendering mode for the background (area outside the lens). * Controls whether content outside the lens is shown or hidden. * @param {RenderingMode} mode - The rendering mode to use */ setBackgroundRenderingMode(mode) { this.outMask.setAttributeNS(null, 'style', mode); } /** * Updates the dashboard position and size. * Called internally when the lens moves or resizes. * @private * @param {number} x - Center X coordinate in scene space * @param {number} y - Center Y coordinate in scene space * @param {number} r - Lens radius in scene space */ update(x, y, r) { const useGL = false; const center = CoordinateSystem.fromSceneToCanvasHtml({ x: x, y: y }, this.viewer.camera, useGL); const now = performance.now(); let cameraT = this.viewer.camera.getCurrentTransform(now); const radius = r * cameraT.z; const sizew = 2 * radius + 2 * this.containerSpace; const sizeh = 2 * radius + 2 * this.containerSpace; const p = { x: 0, y: 0 }; p.x = center.x - radius - this.containerSpace; p.y = center.y - radius - this.containerSpace; this.container.style.left = `${p.x}px`; this.container.style.top = `${p.y}px`; this.container.style.width = `${sizew}px`; this.container.style.height = `${sizeh}px`; // Lens circle if (sizew != this.lensBox.w || sizeh != this.lensBox.h) { const cx = Math.ceil(sizew * 0.5); const cy = Math.ceil(sizeh * 0.5); this.lensElm.setAttributeNS(null, 'viewBox', `0 0 ${sizew} ${sizeh}`); const circle = this.lensElm.querySelector('circle'); circle.setAttributeNS(null, 'cx', cx); circle.setAttributeNS(null, 'cy', cy); circle.setAttributeNS(null, 'r', radius - 0.5 * this.borderWidth); } this.updateMask(cameraT, center, radius); this.lensBox = { x: center.x, y: center.y, r: radius, w: sizew, h: sizeh } } /** * Updates the SVG mask position and size. * Called internally by update() to keep the mask aligned with the lens. * @private * @param {Transform} cameraT - Current camera transform * @param {Object} center - Lens center in canvas coordinates * @param {number} center.x - Center X coordinate * @param {number} center.y - Center Y coordinate * @param {number} radius - Lens radius in canvas coordinates */ updateMask(cameraT, center, radius) { if (this.svgElement == null) { this.createSvgLensMask(); } if (this.svgElement == null) return; // Lens Mask const viewport = this.viewer.camera.viewport; if (this.layerSvgAnnotation != null) { // Compensate the mask transform with the inverse of the annotation svgGroup transform const inverse = true; const invTransfStr = this.layerSvgAnnotation.getSvgGroupTransform(cameraT, inverse); this.svgGroup.setAttribute(\"transform\", invTransfStr); } else { // Set the viewbox. (in the other branch it is set by the layerSvgAnnotation) this.svgElement.setAttribute('viewBox', `${-viewport.w / 2} ${-viewport.h / 2} ${viewport.w} ${viewport.h}`); } // Set the full viewport for outer mask rectangle this.outMask.setAttribute('x', -viewport.w / 2); this.outMask.setAttribute('y', -viewport.h / 2); this.outMask.setAttribute('width', viewport.w); this.outMask.setAttribute('height', viewport.h); // Set lens parameter for inner lens this.inMask.setAttributeNS(null, 'cx', center.x - viewport.w / 2); this.inMask.setAttributeNS(null, 'cy', center.y - viewport.h / 2); this.inMask.setAttributeNS(null, 'r', radius - this.borderWidth - 2); } } /** * Example usage of LensDashboard: * ```javascript * const lensDashboard = new OpenLIME.LensDashboard(limeViewer, { * containerSpace: 100, * borderColor: [0.1, 0.1, 0.1, 1], * borderWidth: 10 * }); * * const lensLayer = new OpenLIME.Layer({ * type: \"lens\", * layers: [innerLayer], * camera: limeViewer.camera, * radius: 200, * dashboard: lensDashboard, * visible: true * }); * * const button = document.createElement('button'); * button.innerHTML = \"Toggle Layer\"; * button.style = ` * position: absolute; * left: 10px; * top: 10px; * pointer-events: auto; * `; * lensDashboard.append(button); * ``` */ export { LensDashboard, RenderingMode }; × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"LensDashboardNavigator.js.html":{"id":"LensDashboardNavigator.js.html","title":"Source: LensDashboardNavigator.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: LensDashboardNavigator.js import { Util } from \"./Util\" import { LensDashboard } from \"./LensDashboard\" /** * @fileoverview * LensDashboardNavigator module provides an enhanced lens dashboard with navigation controls and tools. * Extends the base LensDashboard with additional UI elements for camera control, lighting, and annotation navigation. */ /** * LensDashboardNavigator class creates an interactive lens dashboard with navigation controls. * Provides: * - Camera movement control * - Light direction control * - Annotation switching and navigation * - Toolbar UI elements positioned around the lens * @extends LensDashboard */ class LensDashboardNavigator extends LensDashboard { /** * Creates a new LensDashboardNavigator instance. * @param {Viewer} viewer - The OpenLIME viewer instance * @param {Object} [options] - Configuration options * @param {number} [options.toolboxHeight=22] - Height of the toolbox UI elements in pixels * @param {number} [options.angleToolbar=30] - Angle of toolbar position in degrees * @param {Object} [options.actions] - Configuration for toolbar actions * @param {Object} [options.actions.camera] - Camera control action * @param {string} options.actions.camera.label - Action identifier * @param {Function} options.actions.camera.task - Callback for camera action * @param {Object} [options.actions.light] - Light control action * @param {string} options.actions.light.label - Action identifier * @param {Function} options.actions.light.task - Callback for light action * @param {Object} [options.actions.annoswitch] - Annotation toggle action * @param {string} options.actions.annoswitch.label - Action identifier * @param {string} options.actions.annoswitch.type - Action type ('toggle') * @param {string} options.actions.annoswitch.toggleClass - CSS class for toggle element * @param {Function} options.actions.annoswitch.task - Callback for annotation toggle * @param {Object} [options.actions.prev] - Previous annotation action * @param {string} options.actions.prev.label - Action identifier * @param {Function} options.actions.prev.task - Callback for previous action * @param {Object} [options.actions.down] - Download annotation action * @param {string} options.actions.down.label - Action identifier * @param {Function} options.actions.down.task - Callback for download action * @param {Object} [options.actions.next] - Next annotation action * @param {string} options.actions.next.label - Action identifier * @param {Function} options.actions.next.task - Callback for next action * @param {Function} [options.updateCb] - Callback fired during lens updates * @param {Function} [options.updateEndCb] - Callback fired when lens movement ends */ constructor(viewer, options) { super(viewer, options); options = Object.assign({ toolboxHeight: 22, actions: { camera: { label: 'camera', task: (event) =&gt; { if (!this.actions.camera.active) this.toggleLightController(); } }, light: { label: 'light', task: (event) =&gt; { if (!this.actions.light.active) this.toggleLightController(); } }, annoswitch: { label: 'annoswitch', type: 'toggle', toggleClass: '.openlime-lens-dashboard-annoswitch-bar', task: (event) =&gt; { } }, prev: { label: 'prev', task: (event) =&gt; { } }, down: { label: 'down', task: (event) =&gt; { } }, next: { label: 'next', task: (event) =&gt; { } }, }, updateCb: null, updateEndCb: null }, options); Object.assign(this, options); this.moving = false; this.delay = 400; this.timeout = null; // Timeout for moving this.noupdate = false; this.angleToolbar = 30.0 * (Math.PI / 180.0); this.container.style.display = 'block'; this.container.style.margin = '0'; const h1 = document.createElement('div'); h1.style = `text-align: center; color: #fff`; h1.classList.add('openlime-lens-dashboard-toolbox-header'); h1.innerHTML = 'MOVE'; const h2 = document.createElement('div'); h2.style = `text-align: center; color: #fff`; h2.classList.add('openlime-lens-dashboard-toolbox-header'); h2.innerHTML = 'INFO'; this.toolbox1 = document.createElement('div'); this.toolbox1.style = `z-index: 10; position: absolute; padding: 4px; left: 0px; width: fit-content; background-color: rgb(20, 20, 20, 1.0); border-radius: 10px; gap: 8px`; this.toolbox1.classList.add('openlime-lens-dashboard-toolbox'); this.container.appendChild(this.toolbox1); this.toolbox1.appendChild(h1); this.toolbox2 = document.createElement('div'); this.toolbox2.style = `z-index: 10; position: absolute; padding: 4px; right: 0px; width: fit-content; background-color: rgb(20, 20, 20, 1.0); border-radius: 10px; gap: 8px`; this.toolbox2.classList.add('openlime-lens-dashboard-toolbox'); this.container.appendChild(this.toolbox2); this.toolbox2.appendChild(h2); this.tools1 = document.createElement('div'); this.tools1.style = `display: flex; justify-content: center; height: ${this.toolboxHeight}px`; this.tools1.classList.add('openlime-lens-dashboard-toolbox-tools'); this.toolbox1.appendChild(this.tools1); this.tools2 = document.createElement('div'); this.tools2.style = `display: flex; justify-content: center; height: ${this.toolboxHeight}px`; this.tools2.classList.add('openlime-lens-dashboard-toolbox-tools'); this.toolbox2.appendChild(this.tools2); // TOOLBOX ITEMS this.actions.camera.svg = `&lt;?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?&gt; &lt;!-- Created with Inkscape (http://www.inkscape.org/) --&gt; &lt;svg viewBox=\"0 0 83.319054 83.319054\" version=\"1.1\" id=\"svg2495\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\"&gt; &lt;defs id=\"defs2492\" /&gt; &lt;g id=\"layer1\" transform=\"translate(-69.000668,-98.39946)\"&gt; &lt;g id=\"g2458\" transform=\"matrix(0.35277777,0,0,0.35277777,46.261671,-65.803422)\" class=\"openlime-lens-dashboard-camera\"&gt; &lt;path class=\"openlime-lens-dashboard-button-bkg\" d=\"m 300.637,583.547 c 0,65.219 -52.871,118.09 -118.09,118.09 -65.219,0 -118.09,-52.871 -118.09,-118.09 0,-65.219 52.871,-118.09 118.09,-118.09 65.219,0 118.09,52.871 118.09,118.09 z\" style=\"fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none\" id=\"path50\" /&gt; &lt;g id=\"g52\"&gt; &lt;path d=\"M 123.445,524.445 H 241.652 V 642.648 H 123.445 Z\" style=\"fill:#ffffff;fill-opacity:0;fill-rule:nonzero;stroke:#000000;stroke-width:16.7936;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1\" id=\"path54\" /&gt; &lt;/g&gt; &lt;g id=\"g56\" transform=\"scale(1,0.946694)\"&gt; &lt;path d=\"m 190.449,581.031 h -15.793 c -0.011,7.563 0,27.472 0,27.472 0,0 -17.133,0 -25.609,0.025 v 15.779 c 8.476,-0.009 25.609,-0.009 25.609,-0.009 0,0 0,19.881 -0.011,27.485 h 15.793 c 0.011,-7.604 0.011,-27.485 0.011,-27.485 0,0 17.125,0 25.598,0 v -15.795 c -8.473,0 -25.598,0 -25.598,0 0,0 -0.023,-19.904 0,-27.472\" style=\"fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.52673;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1\" id=\"path58\" /&gt; &lt;/g&gt; &lt;path d=\"m 269.254,557.93 22.332,21.437 c 2.098,2.071 2.195,5.344 0,7.504 l -22.332,21.008 c -1.25,1.25 -5.004,1.25 -6.254,-2.504 v -46.273 c 1.25,-3.672 5.004,-2.422 6.254,-1.172 z\" style=\"fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none\" id=\"path60\" /&gt; &lt;path d=\"M 95.844,607.395 73.508,585.957 c -2.094,-2.07 -2.192,-5.34 0,-7.504 l 22.336,-21.008 c 1.25,-1.25 5,-1.25 6.254,2.504 v 46.274 c -1.254,3.672 -5.004,2.422 -6.254,1.172 z\" style=\"fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none\" id=\"path62\" /&gt; &lt;path d=\"m 157.59,494.32 21.437,-22.332 c 2.071,-2.097 5.344,-2.191 7.504,0 l 21.008,22.332 c 1.25,1.254 1.25,5.004 -2.504,6.254 h -46.273 c -3.672,-1.25 -2.422,-5 -1.172,-6.254 z\" style=\"fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none\" id=\"path64\" /&gt; &lt;path d=\"m 207.055,671.785 -21.438,22.336 c -2.07,2.094 -5.344,2.191 -7.504,0 l -21.008,-22.336 c -1.25,-1.25 -1.25,-5 2.504,-6.25 h 46.274 c 3.672,1.25 2.422,5 1.172,6.25 z\" style=\"fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none\" id=\"path66\" /&gt; &lt;/g&gt; &lt;/g&gt; &lt;/svg&gt;`; this.actions.light.svg = `&lt;?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?&gt; &lt;!-- Created with Inkscape (http://www.inkscape.org/) --&gt; &lt;svg viewBox=\"0 0 83.319054 83.320114\" version=\"1.1\" id=\"svg5698\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\"&gt; &lt;defs id=\"defs5695\" /&gt; &lt;g id=\"layer1\" transform=\"translate(-104.32352,-59.017909)\"&gt; &lt;g id=\"g2477\" transform=\"matrix(0.35277777,0,0,0.35277777,-16.220287,-105.16169)\" class=\"openlime-lens-dashboard-light\"&gt; &lt;path class=\"openlime-lens-dashboard-button-bkg\" d=\"m 577.879,583.484 c 0,65.219 -52.871,118.09 -118.09,118.09 -65.219,0 -118.09,-52.871 -118.09,-118.09 0,-65.222 52.871,-118.093 118.09,-118.093 65.219,0 118.09,52.871 118.09,118.093 z\" style=\"fill:#fbfbfb;fill-opacity:1;fill-rule:nonzero;stroke:none\" id=\"path74\" /&gt; &lt;path d=\"m 546.496,558.359 22.332,21.438 c 2.098,2.066 2.192,5.34 0,7.504 l -22.332,21.004 c -1.25,1.254 -5.004,1.254 -6.254,-2.5 v -46.274 c 1.25,-3.672 5.004,-2.422 6.254,-1.172 z\" style=\"fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none\" id=\"path76\" /&gt; &lt;path d=\"M 373.082,607.82 350.75,586.383 c -2.094,-2.067 -2.191,-5.34 0,-7.504 l 22.332,-21.004 c 1.254,-1.25 5.004,-1.25 6.254,2.5 v 46.277 c -1.25,3.672 -5,2.422 -6.254,1.168 z\" style=\"fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none\" id=\"path78\" /&gt; &lt;path d=\"m 434.832,494.75 21.438,-22.332 c 2.07,-2.098 5.339,-2.195 7.503,0 l 21.008,22.332 c 1.25,1.25 1.25,5.004 -2.504,6.254 h -46.273 c -3.672,-1.25 -2.422,-5.004 -1.172,-6.254 z\" style=\"fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none\" id=\"path80\" /&gt; &lt;path d=\"m 484.297,672.215 -21.438,22.332 c -2.07,2.098 -5.343,2.195 -7.507,0 l -21.004,-22.332 c -1.25,-1.25 -1.25,-5.004 2.504,-6.254 h 46.273 c 3.672,1.25 2.422,5.004 1.172,6.254 z\" style=\"fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none\" id=\"path82\" /&gt; &lt;path d=\"m 438.223,599.988 c 0,0 -2.161,-0.535 -3.684,0.227 -1.523,0.762 -0.789,8.773 -0.789,8.773 l 16.305,-0.222 c 0,0 -14.071,3.597 -15.383,6.296 -1.317,2.7 1.672,6.786 4.34,7.426 2.136,0.516 45.793,-13.426 46.808,-14.625 0.883,-1.039 1.446,-6.75 0.528,-7.648 -0.922,-0.899 -4.602,-0.789 -4.602,-0.789 0,0 -1.449,0.113 -0.133,-3.934 1.317,-4.051 15.254,-20.137 18.672,-30.262 3.293,-9.753 1.387,-22.531 -2.367,-28.683 -3.965,-6.504 -9.598,-10.688 -17.356,-13.723 -7.789,-3.051 -22.191,-4.773 -33.664,-1.578 -11.425,3.188 -20.32,8.988 -25.507,16.649 -4.657,6.878 -4.473,20.699 -2.895,26.097 1.578,5.403 17.621,25.426 19.199,29.473 1.578,4.051 0.528,6.523 0.528,6.523 z\" style=\"fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none\" id=\"path84\" /&gt; &lt;g id=\"g86\" transform=\"scale(1,0.855493)\"&gt; &lt;path d=\"m 438.223,701.337 c 0,0 -2.161,-0.626 -3.684,0.265 -1.523,0.89 -0.789,10.255 -0.789,10.255 l 16.305,-0.26 c 0,0 -14.071,4.205 -15.383,7.36 -1.317,3.155 1.672,7.931 4.34,8.68 2.136,0.603 45.793,-15.693 46.808,-17.095 0.883,-1.215 1.446,-7.89 0.528,-8.94 -0.922,-1.051 -4.602,-0.923 -4.602,-0.923 0,0 -1.449,0.133 -0.133,-4.598 1.317,-4.735 15.254,-23.538 18.672,-35.373 3.293,-11.402 1.387,-26.337 -2.367,-33.529 -3.965,-7.603 -9.598,-12.493 -17.356,-16.041 -7.789,-3.566 -22.191,-5.579 -33.664,-1.844 -11.425,3.725 -20.32,10.506 -25.507,19.46 -4.657,8.041 -4.473,24.196 -2.895,30.506 1.578,6.315 17.621,29.721 19.199,34.451 1.578,4.735 0.528,7.626 0.528,7.626 z\" style=\"fill:none;stroke:#f8f8f8;stroke-width:8.1576;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.00677317\" id=\"path88\" /&gt; &lt;/g&gt; &lt;path d=\"m 435.59,631.598 c 0.394,3.714 14.992,14.851 20.91,15.414 5.914,0.562 5.125,0.898 9.336,-0.453 4.207,-1.348 17.617,-9.223 18.277,-10.571 1.68,-3.453 2.758,-6.976 1.313,-9.113 -1.449,-2.145 -3.946,-0.563 -6.574,0.227 -2.629,0.785 -13.805,5.734 -17.489,6.859 -2.89,0.883 -9.203,-0.563 -9.203,-0.563 0,0 32.012,-10.578 33.266,-12.933 1.316,-2.477 0.262,-6.977 -2.762,-7.539 -1.926,-0.36 -43.785,13.386 -44.836,15.074 -1.055,1.688 -2.238,3.598 -2.238,3.598 z\" style=\"fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none\" id=\"path90\" /&gt; &lt;g id=\"g92\" transform=\"scale(1,0.855493)\"&gt; &lt;path d=\"m 435.59,738.285 c 0.394,4.343 14.992,17.361 20.91,18.018 5.914,0.658 5.125,1.05 9.336,-0.529 4.207,-1.576 17.617,-10.781 18.277,-12.356 1.68,-4.037 2.758,-8.155 1.313,-10.653 -1.449,-2.507 -3.946,-0.657 -6.574,0.265 -2.629,0.918 -13.805,6.703 -17.489,8.018 -2.89,1.032 -9.203,-0.658 -9.203,-0.658 0,0 32.012,-12.365 33.266,-15.118 1.316,-2.895 0.262,-8.155 -2.762,-8.812 -1.926,-0.421 -43.785,15.648 -44.836,17.62 -1.055,1.973 -2.238,4.205 -2.238,4.205 z\" style=\"fill:none;stroke:#f8f8f8;stroke-width:8.1576;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.00677317\" id=\"path94\" /&gt; &lt;/g&gt; &lt;path d=\"m 438.223,599.988 c 0,0 -2.161,-0.535 -3.684,0.227 -1.523,0.762 -0.789,8.773 -0.789,8.773 l 16.305,-0.222 c 0,0 -14.071,3.597 -15.383,6.296 -1.317,2.7 1.672,6.786 4.34,7.426 2.136,0.516 45.793,-13.426 46.808,-14.625 0.883,-1.039 1.446,-6.75 0.528,-7.648 -0.922,-0.899 -4.602,-0.789 -4.602,-0.789 0,0 -1.449,0.113 -0.133,-3.934 1.317,-4.051 15.254,-20.137 18.672,-30.262 3.293,-9.753 1.387,-22.531 -2.367,-28.683 -3.965,-6.504 -9.598,-10.688 -17.356,-13.723 -7.789,-3.051 -22.191,-4.773 -33.664,-1.578 -11.425,3.188 -20.32,8.988 -25.507,16.649 -4.657,6.878 -4.473,20.699 -2.895,26.097 1.578,5.403 17.621,25.426 19.199,29.473 1.578,4.051 0.528,6.523 0.528,6.523 z\" style=\"fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none\" id=\"path96\" /&gt; &lt;g id=\"g98\" transform=\"scale(1,0.855493)\"&gt; &lt;path d=\"m 438.223,701.337 c 0,0 -2.161,-0.626 -3.684,0.265 -1.523,0.89 -0.789,10.255 -0.789,10.255 l 16.305,-0.26 c 0,0 -14.071,4.205 -15.383,7.36 -1.317,3.155 1.672,7.931 4.34,8.68 2.136,0.603 45.793,-15.693 46.808,-17.095 0.883,-1.215 1.446,-7.89 0.528,-8.94 -0.922,-1.051 -4.602,-0.923 -4.602,-0.923 0,0 -1.449,0.133 -0.133,-4.598 1.317,-4.735 15.254,-23.538 18.672,-35.373 3.293,-11.402 1.387,-26.337 -2.367,-33.529 -3.965,-7.603 -9.598,-12.493 -17.356,-16.041 -7.789,-3.566 -22.191,-5.579 -33.664,-1.844 -11.425,3.725 -20.32,10.506 -25.507,19.46 -4.657,8.041 -4.473,24.196 -2.895,30.506 1.578,6.315 17.621,29.721 19.199,34.451 1.578,4.735 0.528,7.626 0.528,7.626 z\" style=\"fill:none;stroke:#f8f8f8;stroke-width:8.1576;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.00677317\" id=\"path100\" /&gt; &lt;/g&gt; &lt;path d=\"m 435.59,631.598 c 0.394,3.714 14.992,14.851 20.91,15.414 5.914,0.562 5.125,0.898 9.336,-0.453 4.207,-1.348 17.617,-9.223 18.277,-10.571 1.68,-3.453 2.758,-6.976 1.313,-9.113 -1.449,-2.145 -3.946,-0.563 -6.574,0.227 -2.629,0.785 -13.805,5.734 -17.489,6.859 -2.89,0.883 -9.203,-0.563 -9.203,-0.563 0,0 32.012,-10.578 33.266,-12.933 1.316,-2.477 0.262,-6.977 -2.762,-7.539 -1.926,-0.36 -43.785,13.386 -44.836,15.074 -1.055,1.688 -2.238,3.598 -2.238,3.598 z\" style=\"fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none\" id=\"path102\" /&gt; &lt;g id=\"g104\" transform=\"scale(1,0.855493)\"&gt; &lt;path d=\"m 435.59,738.285 c 0.394,4.343 14.992,17.361 20.91,18.018 5.914,0.658 5.125,1.05 9.336,-0.529 4.207,-1.576 17.617,-10.781 18.277,-12.356 1.68,-4.037 2.758,-8.155 1.313,-10.653 -1.449,-2.507 -3.946,-0.657 -6.574,0.265 -2.629,0.918 -13.805,6.703 -17.489,8.018 -2.89,1.032 -9.203,-0.658 -9.203,-0.658 0,0 32.012,-12.365 33.266,-15.118 1.316,-2.895 0.262,-8.155 -2.762,-8.812 -1.926,-0.421 -43.785,15.648 -44.836,17.62 -1.055,1.973 -2.238,4.205 -2.238,4.205 z\" style=\"fill:none;stroke:#f8f8f8;stroke-width:8.1576;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.00677317\" id=\"path106\" /&gt; &lt;/g&gt; &lt;/g&gt; &lt;/g&gt; &lt;/svg&gt;`; this.actions.annoswitch.svg = `&lt;?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?&gt; &lt;!-- Created with Inkscape (http://www.inkscape.org/) --&gt; &lt;svg viewBox=\"0 0 83.319054 83.320114\" version=\"1.1\" id=\"svg11415\" xml:space=\"preserve\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\"&gt;&lt;defs id=\"defs11412\"&gt;&lt;marker style=\"overflow:visible\" id=\"TriangleStart\" refX=\"0\" refY=\"0\" orient=\"auto-start-reverse\" markerWidth=\"5.3244081\" markerHeight=\"6.155385\" viewBox=\"0 0 5.3244081 6.1553851\" preserveAspectRatio=\"xMidYMid\"&gt;&lt;path transform=\"scale(0.5)\" style=\"fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt\" d=\"M 5.77,0 -2.88,5 V -5 Z\" id=\"path135\" /&gt;&lt;/marker&gt;&lt;marker style=\"overflow:visible\" id=\"TriangleStart-5\" refX=\"0\" refY=\"0\" orient=\"auto-start-reverse\" markerWidth=\"5.3244081\" markerHeight=\"6.155385\" viewBox=\"0 0 5.3244081 6.1553851\" preserveAspectRatio=\"xMidYMid\"&gt;&lt;path transform=\"scale(0.5)\" style=\"fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt\" d=\"M 5.77,0 -2.88,5 V -5 Z\" id=\"path135-3\" /&gt;&lt;/marker&gt;&lt;/defs&gt;&lt;g id=\"g327\" transform=\"translate(129.83427,13.264356)\"&gt;&lt;g id=\"g346\"&gt;&lt;path d=\"m -46.51522,28.396234 c 0,23.007813 -18.65172,41.659526 -41.65953,41.659526 -23.00782,0 -41.65952,-18.651713 -41.65952,-41.659526 0,-23.00887 18.6517,-41.66059 41.65952,-41.66059 23.00781,0 41.65953,18.65172 41.65953,41.66059 z\" style=\"fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.352778\" id=\"path68\" class=\"openlime-lens-dashboard-button-bkg\" /&gt;&lt;g aria-label=\"i\" id=\"text430\" style=\"font-size:50.8px;line-height:1.25;font-family:'Palace Script MT';-inkscape-font-specification:'Palace Script MT';font-variant-ligatures:none;letter-spacing:0px;word-spacing:0px;stroke-width:0.264583\" transform=\"matrix(1.9896002,0,0,1.9896002,-378.32178,-41.782121)\"&gt;&lt;path d=\"m 149.74343,19.295724 c -1.4224,1.1176 -2.5908,2.032 -3.5052,2.6416 0.3556,1.0668 0.8128,1.9304 1.9304,3.556 1.4224,-1.27 1.5748,-1.4224 3.302,-2.7432 -0.1524,-0.3048 -0.254,-0.508 -0.6604,-1.1684 -0.3048,-0.6096 -0.3556,-0.6096 -0.762,-1.6256 z m 1.9304,25.4 -0.8636,0.4572 c -3.5052,1.9304 -4.1148,2.1844 -4.7244,2.1844 -0.5588,0 -0.9144,-0.5588 -0.9144,-1.4224 0,-0.8636 0,-0.8636 1.6764,-7.5692 1.8796,-7.7216 1.8796,-7.7216 1.8796,-8.128 0,-0.3048 -0.254,-0.508 -0.6096,-0.508 -0.8636,0 -3.8608,1.6764 -8.0264,4.4704 l -0.1016,1.4224 c 3.0988,-1.6764 3.2512,-1.7272 3.7084,-1.7272 0.4064,0 0.6096,0.3048 0.6096,0.8636 0,0.7112 -0.1524,1.4224 -0.9144,4.318 -2.3876,8.8392 -2.3876,8.8392 -2.3876,10.16 0,1.2192 0.4572,2.032 1.2192,2.032 0.8636,0 2.2352,-0.6604 4.9276,-2.3876 0.9652,-0.6096 1.9304,-1.2192 2.8956,-1.8796 0.4572,-0.254 0.8128,-0.508 1.4224,-0.8636 z\" style=\"font-weight:bold;font-family:Z003;-inkscape-font-specification:'Z003 Bold'\" id=\"path495\" /&gt;&lt;/g&gt;&lt;path style=\"fill:none;stroke:#000000;stroke-width:17.09477;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1\" d=\"M -66.121922,49.608737 -110.22757,7.1826674\" id=\"path465\" class=\"openlime-lens-dashboard-annoswitch-bar\" /&gt;&lt;/g&gt;&lt;/g&gt;&lt;/svg&gt;`; this.actions.prev.svg = `&lt;svg viewBox=\"0 0 83.319054 83.320114\" version=\"1.1\" id=\"svg11415\" xml:space=\"preserve\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\"&gt;&lt;defs id=\"defs11412\"&gt;&lt;marker style=\"overflow:visible\" id=\"TriangleStart\" refX=\"0\" refY=\"0\" orient=\"auto-start-reverse\" markerWidth=\"5.3244081\" markerHeight=\"6.155385\" viewBox=\"0 0 5.3244081 6.1553851\" preserveAspectRatio=\"xMidYMid\"&gt;&lt;path transform=\"scale(0.5)\" style=\"fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt\" d=\"M 5.77,0 -2.88,5 V -5 Z\" id=\"path135\" /&gt;&lt;/marker&gt;&lt;marker style=\"overflow:visible\" id=\"TriangleStart-5\" refX=\"0\" refY=\"0\" orient=\"auto-start-reverse\" markerWidth=\"5.3244081\" markerHeight=\"6.155385\" viewBox=\"0 0 5.3244081 6.1553851\" preserveAspectRatio=\"xMidYMid\"&gt;&lt;path transform=\"scale(0.5)\" style=\"fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt\" d=\"M 5.77,0 -2.88,5 V -5 Z\" id=\"path135-3\" /&gt;&lt;/marker&gt;&lt;/defs&gt;&lt;g id=\"g417\" transform=\"matrix(3.3565779,0,0,3.3565779,129.92814,-51.220758)\"&gt;&lt;g id=\"g335\"&gt;&lt;path d=\"m -172.71351,100.60243 c 0,23.00781 -18.65172,41.65952 -41.65953,41.65952 -23.00782,0 -41.65952,-18.65171 -41.65952,-41.65952 0,-23.00887 18.6517,-41.66059 41.65952,-41.66059 23.00781,0 41.65953,18.65172 41.65953,41.66059 z\" style=\"fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.352778\" id=\"path68\" class=\"openlime-lens-dashboard-button-bkg\" transform=\"matrix(0.29792248,0,0,0.29792248,37.569341,-2.3002842)\" /&gt;&lt;path style=\"fill:#030104\" d=\"m -35.494703,28.624414 c 0,-0.264 0.213,-0.474 0.475,-0.474 h 2.421 c 0.262,0 0.475,0.21 0.475,0.474 0,3.211 2.615,5.826 5.827,5.826 3.212,0 5.827,-2.615 5.827,-5.826 0,-3.214 -2.614,-5.826 -5.827,-5.826 -0.34,0 -0.68,0.028 -1.016,0.089 v 1.647 c 0,0.193 -0.116,0.367 -0.291,0.439 -0.181,0.073 -0.383,0.031 -0.521,-0.104 l -4.832,-3.273 c -0.184,-0.185 -0.184,-0.482 0,-0.667 l 4.833,-3.268 c 0.136,-0.136 0.338,-0.176 0.519,-0.104 0.175,0.074 0.291,0.246 0.291,0.438 v 1.487 c 0.34,-0.038 0.68,-0.057 1.016,-0.057 5.071,0 9.198,4.127 9.198,9.198 0,5.07 -4.127,9.197 -9.198,9.197 -5.07,10e-4 -9.197,-4.126 -9.197,-9.196 z\" id=\"path415\" /&gt;&lt;/g&gt;&lt;/g&gt;&lt;/svg&gt;`; this.actions.down.svg = `&lt;?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?&gt; &lt;!-- Created with Inkscape (http://www.inkscape.org/) --&gt; &lt;svg viewBox=\"0 0 83.319054 83.320114\" version=\"1.1\" id=\"svg11415\" xml:space=\"preserve\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\"&gt;&lt;defs id=\"defs11412\"&gt;&lt;marker style=\"overflow:visible\" id=\"TriangleStart\" refX=\"0\" refY=\"0\" orient=\"auto-start-reverse\" markerWidth=\"5.3244081\" markerHeight=\"6.155385\" viewBox=\"0 0 5.3244081 6.1553851\" preserveAspectRatio=\"xMidYMid\"&gt;&lt;path transform=\"scale(0.5)\" style=\"fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt\" d=\"M 5.77,0 -2.88,5 V -5 Z\" id=\"path135\" /&gt;&lt;/marker&gt;&lt;marker style=\"overflow:visible\" id=\"TriangleStart-5\" refX=\"0\" refY=\"0\" orient=\"auto-start-reverse\" markerWidth=\"5.3244081\" markerHeight=\"6.155385\" viewBox=\"0 0 5.3244081 6.1553851\" preserveAspectRatio=\"xMidYMid\"&gt;&lt;path transform=\"scale(0.5)\" style=\"fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt\" d=\"M 5.77,0 -2.88,5 V -5 Z\" id=\"path135-3\" /&gt;&lt;/marker&gt;&lt;/defs&gt;&lt;g id=\"g4652\" transform=\"translate(145.46385,95.197966)\"&gt;&lt;g id=\"g4846\" transform=\"translate(-126.60931,52.756264)\"&gt;&lt;path d=\"m 64.464511,-106.29364 c 0,23.007813 -18.65172,41.659526 -41.65953,41.659526 -23.0078196,0 -41.659526,-18.651713 -41.659526,-41.659526 0,-23.00887 18.6517064,-41.66059 41.659526,-41.66059 23.00781,0 41.65953,18.65172 41.65953,41.66059 z\" style=\"fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.352778\" id=\"path68\" class=\"openlime-lens-dashboard-button-bkg\" /&gt;&lt;g id=\"g2392-5\" transform=\"matrix(0.26458333,0,0,0.26458333,-283.58108,-263.57207)\"&gt;&lt;path style=\"fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:40;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1\" d=\"m 1072.4033,509.27736 h 171.1826\" id=\"path351-6\" /&gt;&lt;path style=\"fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:30;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1\" d=\"m 1185.0215,568.3701 h 59.6026\" id=\"path351-3-2\" /&gt;&lt;path style=\"fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:30;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1\" d=\"m 1184.2167,621.15576 h 59.6026\" id=\"path351-3-2-0\" /&gt;&lt;path style=\"fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:40;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1\" d=\"m 1072.4033,679.59496 h 171.1826\" id=\"path351-3-6-7-1\" /&gt;&lt;path style=\"display:inline;fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:11.4448;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#TriangleStart-5)\" d=\"m 1074.9115,570.87447 54.1203,-0.0275\" id=\"path1366-2\" /&gt;&lt;path style=\"fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:14;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1\" d=\"m 1080.0425,521.28147 v 54.87857\" id=\"path1402-7\" /&gt;&lt;path style=\"fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1\" d=\"m 1150.8866,623.00688 0.3956,-5.02729\" id=\"path2545\" /&gt;&lt;path style=\"fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:30;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1\" d=\"m 1185.0215,567.71656 h 59.6026\" id=\"path2720\" /&gt;&lt;/g&gt;&lt;/g&gt;&lt;/g&gt;&lt;/svg&gt;`; this.actions.next.svg = `&lt;?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?&gt; &lt;!-- Created with Inkscape (http://www.inkscape.org/) --&gt; &lt;svg viewBox=\"0 0 83.319054 83.320114\" version=\"1.1\" id=\"svg11415\" xml:space=\"preserve\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\"&gt;&lt;defs id=\"defs11412\"&gt;&lt;marker style=\"overflow:visible\" id=\"TriangleStart\" refX=\"0\" refY=\"0\" orient=\"auto-start-reverse\" markerWidth=\"5.3244081\" markerHeight=\"6.155385\" viewBox=\"0 0 5.3244081 6.1553851\" preserveAspectRatio=\"xMidYMid\"&gt;&lt;path transform=\"scale(0.5)\" style=\"fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt\" d=\"M 5.77,0 -2.88,5 V -5 Z\" id=\"path135\" /&gt;&lt;/marker&gt;&lt;/defs&gt;&lt;g id=\"g4652\" transform=\"translate(-12.647874,74.762541)\"&gt;&lt;path d=\"m 95.96693,-33.101955 c 0,23.007813 -18.65172,41.6595258 -41.65953,41.6595258 -23.00782,0 -41.659526,-18.6517128 -41.659526,-41.6595258 0,-23.008872 18.651706,-41.660586 41.659526,-41.660586 23.00781,0 41.65953,18.651714 41.65953,41.660586 z\" style=\"fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.352778\" id=\"path68\" class=\"openlime-lens-dashboard-button-bkg\" /&gt;&lt;g id=\"g4636\" transform=\"translate(173.74831,-50.897484)\"&gt;&lt;path style=\"fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:10.5833;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1\" d=\"m -142.08694,-4.7366002 h 45.292059\" id=\"path351\" /&gt;&lt;path style=\"fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:10.5833;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1\" d=\"m -142.08694,40.326598 h 45.292059\" id=\"path351-3-6-7\" /&gt;&lt;path style=\"display:inline;fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:3.20746;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#TriangleStart)\" d=\"m -136.09942,8.7192481 0.008,14.9721889\" id=\"path1366\" /&gt;&lt;path style=\"fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:3.70417;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1\" d=\"M -136.07283,-1.5605128 V 24.204958\" id=\"path1402\" /&gt;&lt;path style=\"fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:7.9375;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1\" d=\"m -111.69142,24.864565 h 15.76985\" id=\"path351-3-2-0-3\" /&gt;&lt;path style=\"fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:7.9375;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1\" d=\"m -111.37623,10.725444 h 15.76986\" id=\"path2720-9\" /&gt;&lt;/g&gt;&lt;/g&gt;&lt;/svg&gt;`; for (let [name, action] of Object.entries(this.actions)) { action.element = Util.SVGFromString(action.svg); action.element.style = `height: 100%; margin: 0 5px`; action.element.classList.add('openlime-lens-dashboard-button'); if (action.type == 'toggle') { const toggleElm = action.element.querySelector(action.toggleClass); toggleElm.style.visibility = `hidden`; action.active = false; } action.element.addEventListener('pointerdown', (e) =&gt; { if (action.type == 'toggle') { action.active = !action.active; const toggleElm = action.element.querySelector(action.toggleClass); if (action.active) { toggleElm.style.visibility = `visible`; } else { toggleElm.style.visibility = `hidden`; } this.noupdate = true; } action.task(e); e.preventDefault(); }); } this.tools1.appendChild(this.actions.camera.element); this.tools1.appendChild(this.actions.light.element); this.tools2.appendChild(this.actions.annoswitch.element); this.tools2.appendChild(this.actions.prev.element); this.tools2.appendChild(this.actions.down.element); this.tools2.appendChild(this.actions.next.element); // Set Camera movement active this.actions.camera.active = this.actions.camera.element.classList.toggle('openlime-lens-dashboard-camera-active'); this.actions.light.active = false; // Enable camera, light, next buttons this.setActionEnabled('camera'); this.setActionEnabled('light'); this.setActionEnabled('annoswitch'); this.setActionEnabled('next'); } /** * Retrieves an action configuration by its label. * @param {string} label - The action label to find * @returns {Object|null} The action configuration object or null if not found * @private */ getAction(label) { let result = null; for (let [name, action] of Object.entries(this.actions)) { if (action.label === label) { result = action; break; } } return result; } /** * Enables or disables a specific action button. * @param {string} label - The action label to modify * @param {boolean} [enable=true] - Whether to enable or disable the action */ setActionEnabled(label, enable = true) { const action = this.getAction(label); if (action) { action.element.classList.toggle('enabled', enable); } } /** * Toggles between camera and light control modes. * When light control is active, modifies controller behavior for light direction adjustment. * @private */ toggleLightController() { let active = this.actions.light.element.classList.toggle('openlime-lens-dashboard-light-active'); this.actions.light.active = active; this.actions.camera.active = this.actions.camera.element.classList.toggle('openlime-lens-dashboard-camera-active'); for (let layer of Object.values(this.viewer.canvas.layers)) for (let c of layer.controllers) if (c.control == 'light') { c.active = true; c.activeModifiers = active ? [0, 2, 4] : [2, 4]; //nothing, shift and alt } } /** * Updates the dashboard position and UI elements. * @private * @param {number} x - Center X coordinate in scene space * @param {number} y - Center Y coordinate in scene space * @param {number} r - Lens radius in scene space */ update(x, y, r) { if (this.noupdate) { this.noupdate = false; return; } super.update(x, y, r); const center = { x: this.lensBox.x, y: this.lensBox.y } const radius = this.lensBox.r; const sizew = this.lensBox.w; const sizeh = this.lensBox.h; // Set toolbox position const tbw1 = this.toolbox1.clientWidth; const tbh1 = this.toolbox1.clientHeight; const tbw2 = this.toolbox2.clientWidth; const tbh2 = this.toolbox2.clientHeight; let cbx = radius * Math.sin(this.angleToolbar); let cby = radius * Math.cos(this.angleToolbar); let bx1 = this.containerSpace + radius - cbx - tbw1 / 2; let by1 = this.containerSpace + radius + cby - tbh1 / 2; this.toolbox1.style.left = `${bx1}px`; this.toolbox1.style.top = `${by1}px`; let bx2 = this.containerSpace + radius + cbx - tbw2 / 2; let by2 = this.containerSpace + radius + cby - tbh2 / 2; this.toolbox2.style.left = `${bx2}px`; this.toolbox2.style.top = `${by2}px`; if (this.updateCb) { // updateCb(c.x, c.y, r, dashboard.w, dashboard.h, canvas.w, canvas.h) all params in canvas coordinates this.updateCb(center.x, center.y, radius, sizew, sizeh, this.viewer.camera.viewport.w, this.viewer.camera.viewport.h); } if (!this.moving) { this.toggle(); this.moving = true; } if (this.timeout) clearTimeout(this.timeout); this.timeout = setTimeout(() =&gt; { this.toggle(); this.moving = false; if (this.updateEndCb) this.updateEndCb(center.x, center.y, radius, sizew, sizeh, this.viewer.camera.viewport.w, this.viewer.camera.viewport.h); }, this.delay); } } export { LensDashboardNavigator } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"LensDashboardNavigatorRadial.js.html":{"id":"LensDashboardNavigatorRadial.js.html","title":"Source: LensDashboardNavigatorRadial.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: LensDashboardNavigatorRadial.js import { Util } from \"./Util\" import { LensDashboard } from \"./LensDashboard\" /** * @fileoverview * LensDashboardNavigatorRadial module provides a radial menu interface for lens controls. * Extends the base LensDashboard with a circular arrangement of navigation controls and tools. */ /** * LensDashboardNavigatorRadial class creates a circular lens dashboard with radially arranged controls. * Provides: * - Circular arrangement of controls around the lens * - Grouped tool positioning * - Animated visibility transitions * - Background arc for visual grouping * @extends LensDashboard */ class LensDashboardNavigatorRadial extends LensDashboard { /** * Creates a new LensDashboardNavigatorRadial instance. * @param {Viewer} viewer - The OpenLIME viewer instance * @param {Object} [options] - Configuration options * @param {number} [options.toolSize=34] - Size of tool buttons in pixels * @param {number} [options.toolPadding=0] - Padding between tool buttons * @param {number[]} [options.group=[-65, 0]] - Angle positions for tool groups in degrees * @param {Object} [options.actions] - Configuration for toolbar actions * @param {Object} [options.actions.camera] - Camera control action * @param {string} options.actions.camera.label - Action identifier * @param {number} options.actions.camera.group - Group index for positioning * @param {number} options.actions.camera.angle - Angle offset within group * @param {Function} options.actions.camera.task - Callback for camera action * @param {Object} [options.actions.light] - Light control action (same properties as camera) * @param {Object} [options.actions.annoswitch] - Annotation toggle action * @param {string} options.actions.annoswitch.type - Action type ('toggle') * @param {string} options.actions.annoswitch.toggleClass - CSS class for toggle element * @param {Object} [options.actions.prev] - Previous annotation action (same properties as camera) * @param {Object} [options.actions.down] - Download annotation action (same properties as camera) * @param {Object} [options.actions.next] - Next annotation action (same properties as camera) * @param {Function} [options.updateCb] - Callback fired during lens updates * @param {Function} [options.updateEndCb] - Callback fired when lens movement ends */ constructor(viewer, options) { super(viewer, options); options = Object.assign({ toolSize: 34, toolPadding: 0, group: [-65, 0], actions: { camera: { label: 'camera', group: 0, angle: -25, task: (event) =&gt; { if (!this.actions.camera.active) this.toggleLightController(); } }, light: { label: 'light', group: 0, angle: 0, task: (event) =&gt; { if (!this.actions.light.active) this.toggleLightController(); } }, annoswitch: { label: 'annoswitch', group: 1, angle: 0, type: 'toggle', toggleClass: '.openlime-lens-dashboard-annoswitch-bar', task: (event) =&gt; { } }, prev: { label: 'prev', group: 1, angle: 25, task: (event) =&gt; { } }, down: { label: 'down', group: 1, angle: 50, task: (event) =&gt; { } }, next: { label: 'next', group: 1, angle: 75, task: (event) =&gt; { } }, }, updateCb: null, updateEndCb: null }, options); Object.assign(this, options); this.moving = false; this.delay = 400; this.timeout = null; // Timeout for moving this.noupdate = false; // TOOLBOX BKG const col = [255.0 * this.borderColor[0], 255.0 * this.borderColor[1], 255.0 * this.borderColor[2], 255.0 * this.borderColor[3]]; col[3] = 0.4; this.toolboxBkgSize = 56; this.toolboxBkgPadding = 4; this.toolboxBkg = new Object(); this.toolboxBkg.svg = `&lt;?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?&gt; &lt;svg viewBox=\"0 0 200 200\" fill=\"none\" version=\"1.1\" id=\"svg11\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\"&gt; &lt;path id=\"shape-dashboard-bkg\" d=\"\" stroke=\"none\" fill=\"rgb(${col[0]},${col[1]},${col[2]},${col[3]})\"/&gt; &lt;/svg&gt;`; this.toolboxBkg.element = Util.SVGFromString(this.toolboxBkg.svg); this.toolboxBkg.element.setAttributeNS(null, 'style', 'position: absolute; top: 0px; left:0px;'); this.container.appendChild(this.toolboxBkg.element); // TOOLBOX ITEMS this.actions.camera.svg = `&lt;?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?&gt; &lt;!-- Created with Inkscape (http://www.inkscape.org/) --&gt; &lt;svg viewBox=\"0 0 83.319054 83.319054\" version=\"1.1\" id=\"svg2495\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\"&gt; &lt;defs id=\"defs2492\" /&gt; &lt;g id=\"layer1\" transform=\"translate(-69.000668,-98.39946)\"&gt; &lt;g id=\"g2458\" transform=\"matrix(0.35277777,0,0,0.35277777,46.261671,-65.803422)\" class=\"openlime-lens-dashboard-camera\"&gt; &lt;path class=\"openlime-lens-dashboard-button-bkg\" d=\"m 300.637,583.547 c 0,65.219 -52.871,118.09 -118.09,118.09 -65.219,0 -118.09,-52.871 -118.09,-118.09 0,-65.219 52.871,-118.09 118.09,-118.09 65.219,0 118.09,52.871 118.09,118.09 z\" style=\"fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none\" id=\"path50\" /&gt; &lt;g id=\"g52\"&gt; &lt;path d=\"M 123.445,524.445 H 241.652 V 642.648 H 123.445 Z\" style=\"fill:#ffffff;fill-opacity:0;fill-rule:nonzero;stroke:#000000;stroke-width:16.7936;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1\" id=\"path54\" /&gt; &lt;/g&gt; &lt;g id=\"g56\" transform=\"scale(1,0.946694)\"&gt; &lt;path d=\"m 190.449,581.031 h -15.793 c -0.011,7.563 0,27.472 0,27.472 0,0 -17.133,0 -25.609,0.025 v 15.779 c 8.476,-0.009 25.609,-0.009 25.609,-0.009 0,0 0,19.881 -0.011,27.485 h 15.793 c 0.011,-7.604 0.011,-27.485 0.011,-27.485 0,0 17.125,0 25.598,0 v -15.795 c -8.473,0 -25.598,0 -25.598,0 0,0 -0.023,-19.904 0,-27.472\" style=\"fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.52673;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1\" id=\"path58\" /&gt; &lt;/g&gt; &lt;path d=\"m 269.254,557.93 22.332,21.437 c 2.098,2.071 2.195,5.344 0,7.504 l -22.332,21.008 c -1.25,1.25 -5.004,1.25 -6.254,-2.504 v -46.273 c 1.25,-3.672 5.004,-2.422 6.254,-1.172 z\" style=\"fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none\" id=\"path60\" /&gt; &lt;path d=\"M 95.844,607.395 73.508,585.957 c -2.094,-2.07 -2.192,-5.34 0,-7.504 l 22.336,-21.008 c 1.25,-1.25 5,-1.25 6.254,2.504 v 46.274 c -1.254,3.672 -5.004,2.422 -6.254,1.172 z\" style=\"fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none\" id=\"path62\" /&gt; &lt;path d=\"m 157.59,494.32 21.437,-22.332 c 2.071,-2.097 5.344,-2.191 7.504,0 l 21.008,22.332 c 1.25,1.254 1.25,5.004 -2.504,6.254 h -46.273 c -3.672,-1.25 -2.422,-5 -1.172,-6.254 z\" style=\"fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none\" id=\"path64\" /&gt; &lt;path d=\"m 207.055,671.785 -21.438,22.336 c -2.07,2.094 -5.344,2.191 -7.504,0 l -21.008,-22.336 c -1.25,-1.25 -1.25,-5 2.504,-6.25 h 46.274 c 3.672,1.25 2.422,5 1.172,6.25 z\" style=\"fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none\" id=\"path66\" /&gt; &lt;/g&gt; &lt;/g&gt; &lt;/svg&gt;`; this.actions.light.svg = `&lt;?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?&gt; &lt;!-- Created with Inkscape (http://www.inkscape.org/) --&gt; &lt;svg viewBox=\"0 0 83.319054 83.320114\" version=\"1.1\" id=\"svg5698\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\"&gt; &lt;defs id=\"defs5695\" /&gt; &lt;g id=\"layer1\" transform=\"translate(-104.32352,-59.017909)\"&gt; &lt;g id=\"g2477\" transform=\"matrix(0.35277777,0,0,0.35277777,-16.220287,-105.16169)\" class=\"openlime-lens-dashboard-light\"&gt; &lt;path class=\"openlime-lens-dashboard-button-bkg\" d=\"m 577.879,583.484 c 0,65.219 -52.871,118.09 -118.09,118.09 -65.219,0 -118.09,-52.871 -118.09,-118.09 0,-65.222 52.871,-118.093 118.09,-118.093 65.219,0 118.09,52.871 118.09,118.093 z\" style=\"fill:#fbfbfb;fill-opacity:1;fill-rule:nonzero;stroke:none\" id=\"path74\" /&gt; &lt;path d=\"m 546.496,558.359 22.332,21.438 c 2.098,2.066 2.192,5.34 0,7.504 l -22.332,21.004 c -1.25,1.254 -5.004,1.254 -6.254,-2.5 v -46.274 c 1.25,-3.672 5.004,-2.422 6.254,-1.172 z\" style=\"fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none\" id=\"path76\" /&gt; &lt;path d=\"M 373.082,607.82 350.75,586.383 c -2.094,-2.067 -2.191,-5.34 0,-7.504 l 22.332,-21.004 c 1.254,-1.25 5.004,-1.25 6.254,2.5 v 46.277 c -1.25,3.672 -5,2.422 -6.254,1.168 z\" style=\"fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none\" id=\"path78\" /&gt; &lt;path d=\"m 434.832,494.75 21.438,-22.332 c 2.07,-2.098 5.339,-2.195 7.503,0 l 21.008,22.332 c 1.25,1.25 1.25,5.004 -2.504,6.254 h -46.273 c -3.672,-1.25 -2.422,-5.004 -1.172,-6.254 z\" style=\"fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none\" id=\"path80\" /&gt; &lt;path d=\"m 484.297,672.215 -21.438,22.332 c -2.07,2.098 -5.343,2.195 -7.507,0 l -21.004,-22.332 c -1.25,-1.25 -1.25,-5.004 2.504,-6.254 h 46.273 c 3.672,1.25 2.422,5.004 1.172,6.254 z\" style=\"fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none\" id=\"path82\" /&gt; &lt;path d=\"m 438.223,599.988 c 0,0 -2.161,-0.535 -3.684,0.227 -1.523,0.762 -0.789,8.773 -0.789,8.773 l 16.305,-0.222 c 0,0 -14.071,3.597 -15.383,6.296 -1.317,2.7 1.672,6.786 4.34,7.426 2.136,0.516 45.793,-13.426 46.808,-14.625 0.883,-1.039 1.446,-6.75 0.528,-7.648 -0.922,-0.899 -4.602,-0.789 -4.602,-0.789 0,0 -1.449,0.113 -0.133,-3.934 1.317,-4.051 15.254,-20.137 18.672,-30.262 3.293,-9.753 1.387,-22.531 -2.367,-28.683 -3.965,-6.504 -9.598,-10.688 -17.356,-13.723 -7.789,-3.051 -22.191,-4.773 -33.664,-1.578 -11.425,3.188 -20.32,8.988 -25.507,16.649 -4.657,6.878 -4.473,20.699 -2.895,26.097 1.578,5.403 17.621,25.426 19.199,29.473 1.578,4.051 0.528,6.523 0.528,6.523 z\" style=\"fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none\" id=\"path84\" /&gt; &lt;g id=\"g86\" transform=\"scale(1,0.855493)\"&gt; &lt;path d=\"m 438.223,701.337 c 0,0 -2.161,-0.626 -3.684,0.265 -1.523,0.89 -0.789,10.255 -0.789,10.255 l 16.305,-0.26 c 0,0 -14.071,4.205 -15.383,7.36 -1.317,3.155 1.672,7.931 4.34,8.68 2.136,0.603 45.793,-15.693 46.808,-17.095 0.883,-1.215 1.446,-7.89 0.528,-8.94 -0.922,-1.051 -4.602,-0.923 -4.602,-0.923 0,0 -1.449,0.133 -0.133,-4.598 1.317,-4.735 15.254,-23.538 18.672,-35.373 3.293,-11.402 1.387,-26.337 -2.367,-33.529 -3.965,-7.603 -9.598,-12.493 -17.356,-16.041 -7.789,-3.566 -22.191,-5.579 -33.664,-1.844 -11.425,3.725 -20.32,10.506 -25.507,19.46 -4.657,8.041 -4.473,24.196 -2.895,30.506 1.578,6.315 17.621,29.721 19.199,34.451 1.578,4.735 0.528,7.626 0.528,7.626 z\" style=\"fill:none;stroke:#f8f8f8;stroke-width:8.1576;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.00677317\" id=\"path88\" /&gt; &lt;/g&gt; &lt;path d=\"m 435.59,631.598 c 0.394,3.714 14.992,14.851 20.91,15.414 5.914,0.562 5.125,0.898 9.336,-0.453 4.207,-1.348 17.617,-9.223 18.277,-10.571 1.68,-3.453 2.758,-6.976 1.313,-9.113 -1.449,-2.145 -3.946,-0.563 -6.574,0.227 -2.629,0.785 -13.805,5.734 -17.489,6.859 -2.89,0.883 -9.203,-0.563 -9.203,-0.563 0,0 32.012,-10.578 33.266,-12.933 1.316,-2.477 0.262,-6.977 -2.762,-7.539 -1.926,-0.36 -43.785,13.386 -44.836,15.074 -1.055,1.688 -2.238,3.598 -2.238,3.598 z\" style=\"fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none\" id=\"path90\" /&gt; &lt;g id=\"g92\" transform=\"scale(1,0.855493)\"&gt; &lt;path d=\"m 435.59,738.285 c 0.394,4.343 14.992,17.361 20.91,18.018 5.914,0.658 5.125,1.05 9.336,-0.529 4.207,-1.576 17.617,-10.781 18.277,-12.356 1.68,-4.037 2.758,-8.155 1.313,-10.653 -1.449,-2.507 -3.946,-0.657 -6.574,0.265 -2.629,0.918 -13.805,6.703 -17.489,8.018 -2.89,1.032 -9.203,-0.658 -9.203,-0.658 0,0 32.012,-12.365 33.266,-15.118 1.316,-2.895 0.262,-8.155 -2.762,-8.812 -1.926,-0.421 -43.785,15.648 -44.836,17.62 -1.055,1.973 -2.238,4.205 -2.238,4.205 z\" style=\"fill:none;stroke:#f8f8f8;stroke-width:8.1576;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.00677317\" id=\"path94\" /&gt; &lt;/g&gt; &lt;path d=\"m 438.223,599.988 c 0,0 -2.161,-0.535 -3.684,0.227 -1.523,0.762 -0.789,8.773 -0.789,8.773 l 16.305,-0.222 c 0,0 -14.071,3.597 -15.383,6.296 -1.317,2.7 1.672,6.786 4.34,7.426 2.136,0.516 45.793,-13.426 46.808,-14.625 0.883,-1.039 1.446,-6.75 0.528,-7.648 -0.922,-0.899 -4.602,-0.789 -4.602,-0.789 0,0 -1.449,0.113 -0.133,-3.934 1.317,-4.051 15.254,-20.137 18.672,-30.262 3.293,-9.753 1.387,-22.531 -2.367,-28.683 -3.965,-6.504 -9.598,-10.688 -17.356,-13.723 -7.789,-3.051 -22.191,-4.773 -33.664,-1.578 -11.425,3.188 -20.32,8.988 -25.507,16.649 -4.657,6.878 -4.473,20.699 -2.895,26.097 1.578,5.403 17.621,25.426 19.199,29.473 1.578,4.051 0.528,6.523 0.528,6.523 z\" style=\"fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none\" id=\"path96\" /&gt; &lt;g id=\"g98\" transform=\"scale(1,0.855493)\"&gt; &lt;path d=\"m 438.223,701.337 c 0,0 -2.161,-0.626 -3.684,0.265 -1.523,0.89 -0.789,10.255 -0.789,10.255 l 16.305,-0.26 c 0,0 -14.071,4.205 -15.383,7.36 -1.317,3.155 1.672,7.931 4.34,8.68 2.136,0.603 45.793,-15.693 46.808,-17.095 0.883,-1.215 1.446,-7.89 0.528,-8.94 -0.922,-1.051 -4.602,-0.923 -4.602,-0.923 0,0 -1.449,0.133 -0.133,-4.598 1.317,-4.735 15.254,-23.538 18.672,-35.373 3.293,-11.402 1.387,-26.337 -2.367,-33.529 -3.965,-7.603 -9.598,-12.493 -17.356,-16.041 -7.789,-3.566 -22.191,-5.579 -33.664,-1.844 -11.425,3.725 -20.32,10.506 -25.507,19.46 -4.657,8.041 -4.473,24.196 -2.895,30.506 1.578,6.315 17.621,29.721 19.199,34.451 1.578,4.735 0.528,7.626 0.528,7.626 z\" style=\"fill:none;stroke:#f8f8f8;stroke-width:8.1576;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.00677317\" id=\"path100\" /&gt; &lt;/g&gt; &lt;path d=\"m 435.59,631.598 c 0.394,3.714 14.992,14.851 20.91,15.414 5.914,0.562 5.125,0.898 9.336,-0.453 4.207,-1.348 17.617,-9.223 18.277,-10.571 1.68,-3.453 2.758,-6.976 1.313,-9.113 -1.449,-2.145 -3.946,-0.563 -6.574,0.227 -2.629,0.785 -13.805,5.734 -17.489,6.859 -2.89,0.883 -9.203,-0.563 -9.203,-0.563 0,0 32.012,-10.578 33.266,-12.933 1.316,-2.477 0.262,-6.977 -2.762,-7.539 -1.926,-0.36 -43.785,13.386 -44.836,15.074 -1.055,1.688 -2.238,3.598 -2.238,3.598 z\" style=\"fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none\" id=\"path102\" /&gt; &lt;g id=\"g104\" transform=\"scale(1,0.855493)\"&gt; &lt;path d=\"m 435.59,738.285 c 0.394,4.343 14.992,17.361 20.91,18.018 5.914,0.658 5.125,1.05 9.336,-0.529 4.207,-1.576 17.617,-10.781 18.277,-12.356 1.68,-4.037 2.758,-8.155 1.313,-10.653 -1.449,-2.507 -3.946,-0.657 -6.574,0.265 -2.629,0.918 -13.805,6.703 -17.489,8.018 -2.89,1.032 -9.203,-0.658 -9.203,-0.658 0,0 32.012,-12.365 33.266,-15.118 1.316,-2.895 0.262,-8.155 -2.762,-8.812 -1.926,-0.421 -43.785,15.648 -44.836,17.62 -1.055,1.973 -2.238,4.205 -2.238,4.205 z\" style=\"fill:none;stroke:#f8f8f8;stroke-width:8.1576;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.00677317\" id=\"path106\" /&gt; &lt;/g&gt; &lt;/g&gt; &lt;/g&gt; &lt;/svg&gt;`; this.actions.annoswitch.svg = `&lt;?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?&gt; &lt;!-- Created with Inkscape (http://www.inkscape.org/) --&gt; &lt;svg viewBox=\"0 0 83.319054 83.320114\" version=\"1.1\" id=\"svg11415\" xml:space=\"preserve\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\"&gt;&lt;defs id=\"defs11412\"&gt;&lt;marker style=\"overflow:visible\" id=\"TriangleStart\" refX=\"0\" refY=\"0\" orient=\"auto-start-reverse\" markerWidth=\"5.3244081\" markerHeight=\"6.155385\" viewBox=\"0 0 5.3244081 6.1553851\" preserveAspectRatio=\"xMidYMid\"&gt;&lt;path transform=\"scale(0.5)\" style=\"fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt\" d=\"M 5.77,0 -2.88,5 V -5 Z\" id=\"path135\" /&gt;&lt;/marker&gt;&lt;marker style=\"overflow:visible\" id=\"TriangleStart-5\" refX=\"0\" refY=\"0\" orient=\"auto-start-reverse\" markerWidth=\"5.3244081\" markerHeight=\"6.155385\" viewBox=\"0 0 5.3244081 6.1553851\" preserveAspectRatio=\"xMidYMid\"&gt;&lt;path transform=\"scale(0.5)\" style=\"fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt\" d=\"M 5.77,0 -2.88,5 V -5 Z\" id=\"path135-3\" /&gt;&lt;/marker&gt;&lt;/defs&gt;&lt;g id=\"g327\" transform=\"translate(129.83427,13.264356)\"&gt;&lt;g id=\"g346\"&gt;&lt;path d=\"m -46.51522,28.396234 c 0,23.007813 -18.65172,41.659526 -41.65953,41.659526 -23.00782,0 -41.65952,-18.651713 -41.65952,-41.659526 0,-23.00887 18.6517,-41.66059 41.65952,-41.66059 23.00781,0 41.65953,18.65172 41.65953,41.66059 z\" style=\"fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.352778\" id=\"path68\" class=\"openlime-lens-dashboard-button-bkg\" /&gt;&lt;g aria-label=\"i\" id=\"text430\" style=\"font-size:50.8px;line-height:1.25;font-family:'Palace Script MT';-inkscape-font-specification:'Palace Script MT';font-variant-ligatures:none;letter-spacing:0px;word-spacing:0px;stroke-width:0.264583\" transform=\"matrix(1.9896002,0,0,1.9896002,-378.32178,-41.782121)\"&gt;&lt;path d=\"m 149.74343,19.295724 c -1.4224,1.1176 -2.5908,2.032 -3.5052,2.6416 0.3556,1.0668 0.8128,1.9304 1.9304,3.556 1.4224,-1.27 1.5748,-1.4224 3.302,-2.7432 -0.1524,-0.3048 -0.254,-0.508 -0.6604,-1.1684 -0.3048,-0.6096 -0.3556,-0.6096 -0.762,-1.6256 z m 1.9304,25.4 -0.8636,0.4572 c -3.5052,1.9304 -4.1148,2.1844 -4.7244,2.1844 -0.5588,0 -0.9144,-0.5588 -0.9144,-1.4224 0,-0.8636 0,-0.8636 1.6764,-7.5692 1.8796,-7.7216 1.8796,-7.7216 1.8796,-8.128 0,-0.3048 -0.254,-0.508 -0.6096,-0.508 -0.8636,0 -3.8608,1.6764 -8.0264,4.4704 l -0.1016,1.4224 c 3.0988,-1.6764 3.2512,-1.7272 3.7084,-1.7272 0.4064,0 0.6096,0.3048 0.6096,0.8636 0,0.7112 -0.1524,1.4224 -0.9144,4.318 -2.3876,8.8392 -2.3876,8.8392 -2.3876,10.16 0,1.2192 0.4572,2.032 1.2192,2.032 0.8636,0 2.2352,-0.6604 4.9276,-2.3876 0.9652,-0.6096 1.9304,-1.2192 2.8956,-1.8796 0.4572,-0.254 0.8128,-0.508 1.4224,-0.8636 z\" style=\"font-weight:bold;font-family:Z003;-inkscape-font-specification:'Z003 Bold'\" id=\"path495\" /&gt;&lt;/g&gt;&lt;path style=\"fill:none;stroke:#000000;stroke-width:17.09477;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1\" d=\"M -66.121922,49.608737 -110.22757,7.1826674\" id=\"path465\" class=\"openlime-lens-dashboard-annoswitch-bar\" /&gt;&lt;/g&gt;&lt;/g&gt;&lt;/svg&gt;`; this.actions.prev.svg = `&lt;svg viewBox=\"0 0 83.319054 83.320114\" version=\"1.1\" id=\"svg11415\" xml:space=\"preserve\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\"&gt;&lt;defs id=\"defs11412\"&gt;&lt;marker style=\"overflow:visible\" id=\"TriangleStart\" refX=\"0\" refY=\"0\" orient=\"auto-start-reverse\" markerWidth=\"5.3244081\" markerHeight=\"6.155385\" viewBox=\"0 0 5.3244081 6.1553851\" preserveAspectRatio=\"xMidYMid\"&gt;&lt;path transform=\"scale(0.5)\" style=\"fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt\" d=\"M 5.77,0 -2.88,5 V -5 Z\" id=\"path135\" /&gt;&lt;/marker&gt;&lt;marker style=\"overflow:visible\" id=\"TriangleStart-5\" refX=\"0\" refY=\"0\" orient=\"auto-start-reverse\" markerWidth=\"5.3244081\" markerHeight=\"6.155385\" viewBox=\"0 0 5.3244081 6.1553851\" preserveAspectRatio=\"xMidYMid\"&gt;&lt;path transform=\"scale(0.5)\" style=\"fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt\" d=\"M 5.77,0 -2.88,5 V -5 Z\" id=\"path135-3\" /&gt;&lt;/marker&gt;&lt;/defs&gt;&lt;g id=\"g417\" transform=\"matrix(3.3565779,0,0,3.3565779,129.92814,-51.220758)\"&gt;&lt;g id=\"g335\"&gt;&lt;path d=\"m -172.71351,100.60243 c 0,23.00781 -18.65172,41.65952 -41.65953,41.65952 -23.00782,0 -41.65952,-18.65171 -41.65952,-41.65952 0,-23.00887 18.6517,-41.66059 41.65952,-41.66059 23.00781,0 41.65953,18.65172 41.65953,41.66059 z\" style=\"fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.352778\" id=\"path68\" class=\"openlime-lens-dashboard-button-bkg\" transform=\"matrix(0.29792248,0,0,0.29792248,37.569341,-2.3002842)\" /&gt;&lt;path style=\"fill:#030104\" d=\"m -35.494703,28.624414 c 0,-0.264 0.213,-0.474 0.475,-0.474 h 2.421 c 0.262,0 0.475,0.21 0.475,0.474 0,3.211 2.615,5.826 5.827,5.826 3.212,0 5.827,-2.615 5.827,-5.826 0,-3.214 -2.614,-5.826 -5.827,-5.826 -0.34,0 -0.68,0.028 -1.016,0.089 v 1.647 c 0,0.193 -0.116,0.367 -0.291,0.439 -0.181,0.073 -0.383,0.031 -0.521,-0.104 l -4.832,-3.273 c -0.184,-0.185 -0.184,-0.482 0,-0.667 l 4.833,-3.268 c 0.136,-0.136 0.338,-0.176 0.519,-0.104 0.175,0.074 0.291,0.246 0.291,0.438 v 1.487 c 0.34,-0.038 0.68,-0.057 1.016,-0.057 5.071,0 9.198,4.127 9.198,9.198 0,5.07 -4.127,9.197 -9.198,9.197 -5.07,10e-4 -9.197,-4.126 -9.197,-9.196 z\" id=\"path415\" /&gt;&lt;/g&gt;&lt;/g&gt;&lt;/svg&gt;`; this.actions.down.svg = `&lt;?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?&gt; &lt;!-- Created with Inkscape (http://www.inkscape.org/) --&gt; &lt;svg viewBox=\"0 0 83.319054 83.320114\" version=\"1.1\" id=\"svg11415\" xml:space=\"preserve\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\"&gt;&lt;defs id=\"defs11412\"&gt;&lt;marker style=\"overflow:visible\" id=\"TriangleStart\" refX=\"0\" refY=\"0\" orient=\"auto-start-reverse\" markerWidth=\"5.3244081\" markerHeight=\"6.155385\" viewBox=\"0 0 5.3244081 6.1553851\" preserveAspectRatio=\"xMidYMid\"&gt;&lt;path transform=\"scale(0.5)\" style=\"fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt\" d=\"M 5.77,0 -2.88,5 V -5 Z\" id=\"path135\" /&gt;&lt;/marker&gt;&lt;marker style=\"overflow:visible\" id=\"TriangleStart-5\" refX=\"0\" refY=\"0\" orient=\"auto-start-reverse\" markerWidth=\"5.3244081\" markerHeight=\"6.155385\" viewBox=\"0 0 5.3244081 6.1553851\" preserveAspectRatio=\"xMidYMid\"&gt;&lt;path transform=\"scale(0.5)\" style=\"fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt\" d=\"M 5.77,0 -2.88,5 V -5 Z\" id=\"path135-3\" /&gt;&lt;/marker&gt;&lt;/defs&gt;&lt;g id=\"g4652\" transform=\"translate(145.46385,95.197966)\"&gt;&lt;g id=\"g4846\" transform=\"translate(-126.60931,52.756264)\"&gt;&lt;path d=\"m 64.464511,-106.29364 c 0,23.007813 -18.65172,41.659526 -41.65953,41.659526 -23.0078196,0 -41.659526,-18.651713 -41.659526,-41.659526 0,-23.00887 18.6517064,-41.66059 41.659526,-41.66059 23.00781,0 41.65953,18.65172 41.65953,41.66059 z\" style=\"fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.352778\" id=\"path68\" class=\"openlime-lens-dashboard-button-bkg\" /&gt;&lt;g id=\"g2392-5\" transform=\"matrix(0.26458333,0,0,0.26458333,-283.58108,-263.57207)\"&gt;&lt;path style=\"fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:40;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1\" d=\"m 1072.4033,509.27736 h 171.1826\" id=\"path351-6\" /&gt;&lt;path style=\"fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:30;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1\" d=\"m 1185.0215,568.3701 h 59.6026\" id=\"path351-3-2\" /&gt;&lt;path style=\"fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:30;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1\" d=\"m 1184.2167,621.15576 h 59.6026\" id=\"path351-3-2-0\" /&gt;&lt;path style=\"fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:40;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1\" d=\"m 1072.4033,679.59496 h 171.1826\" id=\"path351-3-6-7-1\" /&gt;&lt;path style=\"display:inline;fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:11.4448;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#TriangleStart-5)\" d=\"m 1074.9115,570.87447 54.1203,-0.0275\" id=\"path1366-2\" /&gt;&lt;path style=\"fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:14;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1\" d=\"m 1080.0425,521.28147 v 54.87857\" id=\"path1402-7\" /&gt;&lt;path style=\"fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1\" d=\"m 1150.8866,623.00688 0.3956,-5.02729\" id=\"path2545\" /&gt;&lt;path style=\"fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:30;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1\" d=\"m 1185.0215,567.71656 h 59.6026\" id=\"path2720\" /&gt;&lt;/g&gt;&lt;/g&gt;&lt;/g&gt;&lt;/svg&gt;`; this.actions.next.svg = `&lt;?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?&gt; &lt;!-- Created with Inkscape (http://www.inkscape.org/) --&gt; &lt;svg viewBox=\"0 0 83.319054 83.320114\" version=\"1.1\" id=\"svg11415\" xml:space=\"preserve\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\"&gt;&lt;defs id=\"defs11412\"&gt;&lt;marker style=\"overflow:visible\" id=\"TriangleStart\" refX=\"0\" refY=\"0\" orient=\"auto-start-reverse\" markerWidth=\"5.3244081\" markerHeight=\"6.155385\" viewBox=\"0 0 5.3244081 6.1553851\" preserveAspectRatio=\"xMidYMid\"&gt;&lt;path transform=\"scale(0.5)\" style=\"fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt\" d=\"M 5.77,0 -2.88,5 V -5 Z\" id=\"path135\" /&gt;&lt;/marker&gt;&lt;/defs&gt;&lt;g id=\"g4652\" transform=\"translate(-12.647874,74.762541)\"&gt;&lt;path d=\"m 95.96693,-33.101955 c 0,23.007813 -18.65172,41.6595258 -41.65953,41.6595258 -23.00782,0 -41.659526,-18.6517128 -41.659526,-41.6595258 0,-23.008872 18.651706,-41.660586 41.659526,-41.660586 23.00781,0 41.65953,18.651714 41.65953,41.660586 z\" style=\"fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.352778\" id=\"path68\" class=\"openlime-lens-dashboard-button-bkg\" /&gt;&lt;g id=\"g4636\" transform=\"translate(173.74831,-50.897484)\"&gt;&lt;path style=\"fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:10.5833;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1\" d=\"m -142.08694,-4.7366002 h 45.292059\" id=\"path351\" /&gt;&lt;path style=\"fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:10.5833;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1\" d=\"m -142.08694,40.326598 h 45.292059\" id=\"path351-3-6-7\" /&gt;&lt;path style=\"display:inline;fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:3.20746;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#TriangleStart)\" d=\"m -136.09942,8.7192481 0.008,14.9721889\" id=\"path1366\" /&gt;&lt;path style=\"fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:3.70417;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1\" d=\"M -136.07283,-1.5605128 V 24.204958\" id=\"path1402\" /&gt;&lt;path style=\"fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:7.9375;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1\" d=\"m -111.69142,24.864565 h 15.76985\" id=\"path351-3-2-0-3\" /&gt;&lt;path style=\"fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:7.9375;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1\" d=\"m -111.37623,10.725444 h 15.76986\" id=\"path2720-9\" /&gt;&lt;/g&gt;&lt;/g&gt;&lt;/svg&gt;`; if (queueMicrotask) queueMicrotask(() =&gt; { this.init() }); //allows modification of actions and layers before init. else setTimeout(() =&gt; { this.init(); }, 0); } /** * Initializes the dashboard after construction. * Allows modification of actions and layers before initialization. * @private */ init() { this.container.style.display = 'block'; this.container.style.margin = '0'; for (let [name, action] of Object.entries(this.actions)) { this.addAction(action); } // Set Camera movement active this.actions.camera.active = this.actions.camera.element.classList.toggle('openlime-lens-dashboard-camera-active'); this.actions.light.active = false; // Enable camera, light, next buttons this.setActionEnabled('camera'); this.setActionEnabled('light'); this.setActionEnabled('annoswitch'); this.setActionEnabled('next'); } /** * Converts degrees to radians. * @private * @param {number} angle - Angle in degrees * @returns {number} Angle in radians */ static degToRadians(angle) { return angle * (Math.PI / 180.0); } /** * Converts polar coordinates to cartesian coordinates. * @private * @param {number} centerX - Center X coordinate * @param {number} centerY - Center Y coordinate * @param {number} radius - Radius * @param {number} angleInDegrees - Angle in degrees * @returns {Object} Cartesian coordinates {x, y} */ static polarToCartesian(centerX, centerY, radius, angleInDegrees) { const angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0; return { x: centerX + (radius * Math.cos(angleInRadians)), y: centerY + (radius * Math.sin(angleInRadians)) }; } /** * Generates SVG arc path description. * @private * @param {number} x - Center X coordinate * @param {number} y - Center Y coordinate * @param {number} radius - Inner radius * @param {number} border - Border width * @param {number} startAngle - Start angle in degrees * @param {number} endAngle - End angle in degrees * @returns {string} SVG path description */ static describeArc(x, y, radius, border, startAngle, endAngle) { const start = LensDashboardNavigatorRadial.polarToCartesian(x, y, radius + border, endAngle); const end = LensDashboardNavigatorRadial.polarToCartesian(x, y, radius + border, startAngle); const startIn = LensDashboardNavigatorRadial.polarToCartesian(x, y, radius, endAngle); const endIn = LensDashboardNavigatorRadial.polarToCartesian(x, y, radius, startAngle); const largeArcFlag = endAngle - startAngle &lt;= 180 ? \"0\" : \"1\"; const d = [ \"M\", start.x, start.y, \"A\", radius + border, radius + border, 0, largeArcFlag, 0, end.x, end.y, \"L\", endIn.x, endIn.y, \"A\", radius, radius, 1, largeArcFlag, 1, startIn.x, startIn.y, ].join(\" \"); return d; } /** * Updates the background arc element. * @private * @param {number} r - Radius * @param {number} sizew - Width * @param {number} sizeh - Height */ setToolboxBkg(r, sizew, sizeh) { const e = this.toolboxBkg.element; e.setAttributeNS(null, 'viewBox', `0 0 ${sizew} ${sizeh}`); const shape = e.querySelector('#shape-dashboard-bkg'); const cs = this.containerSpace; const b = this.toolboxBkgSize; const cx = sizew * 0.5; const cy = sizeh * 0.5; shape.setAttributeNS(null, 'd', LensDashboardNavigatorRadial.describeArc(cx, cy, r, b, -110, 110)); // shape.setAttributeNS(null, 'd', `M ${sizew*0.5-r-b},${sizeh*0.5} a1,1 0 0,1 ${2*(r+b)},0 h ${-b} a1,1 0 1,0 ${-2*r},0 Z`); } /** * Adds an action button to the dashboard. * @private * @param {Object} action - Action configuration */ addAction(action) { action.element = Util.SVGFromString(action.svg); action.element.style = `position:absolute; height: ${this.toolSize}px; margin: 0`; action.element.classList.add('openlime-lens-dashboard-button'); if (action.type == 'toggle') { const toggleElm = action.element.querySelector(action.toggleClass); toggleElm.style.visibility = `hidden`; action.active = false; } action.element.addEventListener('click', (e) =&gt; { if (action.type == 'toggle') { action.active = !action.active; const toggleElm = action.element.querySelector(action.toggleClass); if (action.active) { toggleElm.style.visibility = `visible`; } else { toggleElm.style.visibility = `hidden`; } this.noupdate = true; } action.task(e); e.preventDefault(); }); this.container.appendChild(action.element); } /** * Retrieves an action configuration by its label. * @param {string} label - The action label to find * @returns {Object|null} The action configuration object or null if not found */ getAction(label) { let result = null; for (let [name, action] of Object.entries(this.actions)) { if (action.label === label) { result = action; break; } } return result; } /** * Enables or disables a specific action button. * @param {string} label - The action label to modify * @param {boolean} [enable=true] - Whether to enable or disable the action */ setActionEnabled(label, enable = true) { const action = this.getAction(label); if (action) { action.element.classList.toggle('enabled', enable); } } /** * Toggles between camera and light control modes. * @private */ toggleLightController() { let active = this.actions.light.element.classList.toggle('openlime-lens-dashboard-light-active'); this.actions.light.active = active; this.actions.camera.active = this.actions.camera.element.classList.toggle('openlime-lens-dashboard-camera-active'); for (let layer of Object.values(this.viewer.canvas.layers)) for (let c of layer.controllers) if (c.control == 'light') { c.active = true; c.activeModifiers = active ? [0, 2, 4] : [2, 4]; //nothing, shift and alt } } /** * Sets visibility of toggle elements. * @private * @param {boolean} visible - Whether toggle elements should be visible */ setToggleClassVisibility(t) { for (let [name, action] of Object.entries(this.actions)) { if (action.type == 'toggle' &amp;&amp; action.active) { const toggleElm = action.element.querySelector(action.toggleClass); if (t) { toggleElm.style.visibility = `visible`; } else { toggleElm.style.visibility = `hidden`; } } } } /** * Updates tool element positions in the radial layout. * @private * @param {number} radius - Current lens radius * @param {number} sizew - Container width * @param {number} sizeh - Container height */ setToolboxElm(radius, sizew, sizeh) { // Toolbox Background this.setToolboxBkg(radius - this.borderWidth - 2, sizew, sizeh); this.first = false; // Set tool position const alphaDelta = 2.0 * Math.asin((this.toolSize * 0.5 + this.toolPadding) / (radius)); for (let i = 0; i &lt; this.group.length; i++) { const gArr = Object.entries(this.actions).filter(([key, value]) =&gt; value.group == i); if (Math.abs(this.group[i]) &gt; 90) gArr.reverse(); let idx = 0; for (let [name, action] of gArr) { // const tw = action.element.clientWidth; // const th = action.element.clientHeight; const th = this.toolSize; const tw = this.toolSize; const rad = LensDashboardNavigatorRadial.degToRadians(this.group[i]) + idx * alphaDelta; let cbx = (radius + this.toolSize * 0.5 + this.toolboxBkgPadding) * Math.sin(rad); let cby = (radius + this.toolSize * 0.5 + this.toolboxBkgPadding) * Math.cos(rad); let bx = sizew * 0.5 + cbx - tw / 2; let by = sizeh * 0.5 - cby - th / 2; action.element.style.left = `${bx}px`; action.element.style.top = `${by}px`; idx++; } } } /** * Updates the dashboard position and UI elements. * @private * @param {number} x - Center X coordinate in scene space * @param {number} y - Center Y coordinate in scene space * @param {number} r - Lens radius in scene space */ update(x, y, r) { if (this.noupdate) { this.noupdate = false; return; } super.update(x, y, r); const center = { x: this.lensBox.x, y: this.lensBox.y } const radius = this.lensBox.r; const sizew = this.lensBox.w; const sizeh = this.lensBox.h; //this.setToolboxElm(radius, sizew, sizeh); if (this.updateCb) { // updateCb(c.x, c.y, r, dashboard.w, dashboard.h, canvas.w, canvas.h) all params in canvas coordinates this.updateCb(center.x, center.y, radius, sizew, sizeh, this.viewer.camera.viewport.w, this.viewer.camera.viewport.h); } if (!this.moving) { this.toggle(); this.moving = true; } if (this.timeout) clearTimeout(this.timeout); this.timeout = setTimeout(() =&gt; { this.toggle(); this.moving = false; this.setToolboxElm(radius, sizew, sizeh); if (this.updateEndCb) this.updateEndCb(center.x, center.y, radius, sizew, sizeh, this.viewer.camera.viewport.w, this.viewer.camera.viewport.h); }, this.delay); } } export { LensDashboardNavigatorRadial } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"LightSphereController.js.html":{"id":"LightSphereController.js.html","title":"Source: LightSphereController.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: LightSphereController.js /** * @fileoverview * LightSphereController module provides a spherical interface for controlling light direction. * It creates a circular canvas-based UI element that allows users to interactively adjust * lighting direction through pointer interactions. */ /** * LightSphereController creates an interactive sphere UI for light direction control. * Features: * - Circular interface with gradient background * - Pointer-based interaction for light direction * - Configurable size, position, and colors * - Minimum theta angle constraint * - Visual feedback with gradient and marker */ class LightSphereController { /** * Creates a new LightSphereController instance. * @param {HTMLElement|string} parent - Parent element or selector where the controller will be mounted * @param {Object} [options] - Configuration options * @param {number} [options.width=128] - Width of the controller in pixels * @param {number} [options.height=128] - Height of the controller in pixels * @param {number} [options.top=60] - Top position offset in pixels * @param {number} [options.right=0] - Right position offset in pixels * @param {number} [options.thetaMin=0] - Minimum theta angle in degrees (constrains interaction radius) * @param {string} [options.colorSpot='#ffffff'] - Color of the central spot in the gradient * @param {string} [options.colorBkg='#0000ff'] - Color of the outer edge of the gradient * @param {string} [options.colorMark='#ff0000'] - Color of the position marker */ constructor(parent, options) { options = Object.assign({ width: 128, height: 128, top: 60, right: 0, thetaMin: 0, colorSpot: '#ffffff', colorBkg: '#0000ff', colorMark: '#ff0000' }, options); Object.assign(this, options); this.parent = parent; this.layers = []; if (typeof (this.parent) == 'string') this.parent = document.querySelector(this.parent); this.lightDir = [0, 0]; this.containerElement = document.createElement('div'); this.containerElement.style = `padding: 0; position: absolute; width: ${this.width}px; height: ${this.height}px; top:${this.top}px; right:${this.right}px; z-index: 200; touch-action: none; visibility: visible;`; this.containerElement.classList.add('openlime-lsc'); const sd = (this.width * 0.5) * (1 - 0.8); this.dlCanvas = document.createElement('canvas'); this.dlCanvas.width = this.width; this.dlCanvas.height = this.height; // this.dlCanvas.style = '' this.dlCanvasCtx = this.dlCanvas.getContext(\"2d\"); this.dlGradient = ''; this.containerElement.appendChild(this.dlCanvas); this.parent.appendChild(this.containerElement); this.r = this.width * 0.5; this.thetaMinRad = this.thetaMin / 180.0 * Math.PI; this.rmax = this.r * Math.cos(this.thetaMinRad); this.interactLightDir(this.width * 0.5, this.height * 0.5); this.pointerDown = false; this.dlCanvas.addEventListener(\"pointerdown\", (e) =&gt; { this.pointerDown = true; const rect = this.dlCanvas.getBoundingClientRect(); let clickPosX = (this.dlCanvas.width * (e.clientX - rect.left)) / rect.width; let clickPosY = (this.dlCanvas.height * (e.clientY - rect.top)) / rect.height; this.interactLightDir(clickPosX, clickPosY); e.preventDefault(); }); this.dlCanvas.addEventListener(\"pointermove\", (e) =&gt; { if (this.pointerDown) { const rect = this.dlCanvas.getBoundingClientRect(); let clickPosX = (this.dlCanvas.width * (e.clientX - rect.left)) / rect.width; let clickPosY = (this.dlCanvas.height * (e.clientY - rect.top)) / rect.height; this.interactLightDir(clickPosX, clickPosY); e.preventDefault(); } }); this.dlCanvas.addEventListener(\"pointerup\", (e) =&gt; { this.pointerDown = false; }); this.dlCanvas.addEventListener(\"pointerout\", (e) =&gt; { this.pointerDown = false; }); } /** * Adds a layer to be controlled by this light sphere. * The layer must support light control operations. * @param {Layer} layer - Layer to be controlled */ addLayer(l) { this.layers.push(l); } /** * Makes the controller visible. * @returns {string} The visibility style value */ show() { return this.containerElement.style.visibility = 'visible'; } /** * Hides the controller. * @returns {string} The visibility style value */ hide() { return this.containerElement.style.visibility = 'hidden'; } /** * Computes the radial gradient based on current light direction. * Creates a gradient that provides visual feedback about the light position. * @private */ computeGradient() { const x = (this.lightDir[0] + 1.0) * this.dlCanvas.width * 0.5; const y = (-this.lightDir[1] + 1.0) * this.dlCanvas.height * 0.5; this.dlGradient = this.dlCanvasCtx.createRadialGradient( x, y, this.dlCanvas.height / 8.0, x, y, this.dlCanvas.width / 1.2 ); this.dlGradient.addColorStop(0, this.colorSpot); this.dlGradient.addColorStop(1, this.colorBkg); } /** * Handles interaction to update light direction. * Converts pointer position to light direction vector while respecting constraints. * @private * @param {number} x - X coordinate in canvas space * @param {number} y - Y coordinate in canvas space */ interactLightDir(x, y) { let xc = x - this.r; let yc = this.r - y; const phy = Math.atan2(yc, xc); let l = Math.sqrt(xc * xc + yc * yc); l = l &gt; this.rmax ? this.rmax : l; xc = l * Math.cos(this.thetaMinRad) * Math.cos(phy); yc = l * Math.cos(this.thetaMinRad) * Math.sin(phy); x = xc + this.r; y = this.r - yc; this.lightDir[0] = 2 * (x / this.dlCanvas.width - 0.5); this.lightDir[1] = 2 * (1 - y / this.dlCanvas.height - 0.5); // console.log('LD ', this.lightDir); for (const l of this.layers) { if (l.controls.light) l.setControl('light', this.lightDir, 5); } this.computeGradient(); this.drawLightSelector(x, y); } /** * Draws the light direction selector UI. * Renders: * - Circular background with gradient * - Position marker at current light direction * @private * @param {number} x - X coordinate for position marker * @param {number} y - Y coordinate for position marker */ drawLightSelector(x, y) { this.dlCanvasCtx.clearRect(0, 0, this.dlCanvas.width, this.dlCanvas.height); this.dlCanvasCtx.beginPath(); this.dlCanvasCtx.arc( this.dlCanvas.width / 2, this.dlCanvas.height / 2, this.dlCanvas.width / 2, 0, 2 * Math.PI ); this.dlCanvasCtx.fillStyle = this.dlGradient; this.dlCanvasCtx.fill(); this.dlCanvasCtx.beginPath(); this.dlCanvasCtx.arc(x, y, this.dlCanvas.width / 30, 0, 2 * Math.PI); this.dlCanvasCtx.strokeStyle = this.colorMark; this.dlCanvasCtx.lineWidth = 2; this.dlCanvasCtx.stroke(); } } /** * Example usage of LightSphereController: * ```javascript * // Create controller with custom options * const lightController = new LightSphereController('#container', { * width: 200, * height: 200, * top: 80, * right: 20, * thetaMin: 15, * colorSpot: '#ffff00', * colorBkg: '#000066', * colorMark: '#ff3333' * }); * * // Add layers to be controlled * lightController.addLayer(layer1); * lightController.addLayer(layer2); * * // Show/hide controller * lightController.show(); * lightController.hide(); * ``` * * @property {number[]} lightDir - Current light direction vector [x, y] * @property {HTMLElement} containerElement - Main container element * @property {HTMLCanvasElement} dlCanvas - Canvas element for drawing * @property {CanvasRenderingContext2D} dlCanvasCtx - Canvas 2D rendering context * @property {CanvasGradient} dlGradient - Current radial gradient * @property {number} r - Radius of the control sphere * @property {number} thetaMinRad - Minimum theta angle in radians * @property {number} rmax - Maximum interaction radius based on thetaMin * @property {boolean} pointerDown - Whether pointer is currently pressed * @property {Layer[]} layers - Array of layers being controlled */ export { LightSphereController } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"PointerManager.js.html":{"id":"PointerManager.js.html","title":"Source: PointerManager.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: PointerManager.js /** * The `PointerManager` class is a high-level event manager that interprets low-level pointer interactions * (mouse, touch, and stylus) into higher-level gestures such as taps, holds, panning, and pinching. * It simplifies the process of handling user interactions on devices with touch screens or trackpads by * converting raw pointer events (e.g., `pointerdown`, `pointermove`, `pointerup`) into easy-to-use gestures. * * Key features include: * - **Event Management**: Registers, unregisters, and broadcasts event handlers for gestures like single/double tap, hold, panning, and pinching. * - **Gesture Recognition**: Automatically detects and handles gestures such as finger taps, holds (long press), panning (drag), and pinch (zoom). * - **Idle Detection**: Detects periods of inactivity and can trigger events based on user idleness. * - **Multiple Pointer Support**: Manages multiple pointers simultaneously, supporting interactions like pinch-to-zoom. * - **Utility Methods**: Includes helper methods for tasks like calculating device pixels per millimeter (useful for different screen densities). * * Common use cases for `PointerManager` include applications that require touch gestures, such as image or map manipulation, * or any interactive web application that benefits from handling complex pointer-based interactions. * * @module PointerManager */ /** * High-level event manager for handling pointer interactions. * Captures and classifies PointerEvents (mouse/touch) into higher-level gestures. * * @fires PointerManager#fingerHover - When pointer moves over target * @fires PointerManager#fingerSingleTap - On quick press/touch * @fires PointerManager#fingerDoubleTap - On two quick presses/touches * @fires PointerManager#fingerHold - When press/touch held for &gt;600ms * @fires PointerManager#mouseWheel - On mouse wheel rotation * @fires PointerManager#panStart - When pan gesture begins * @fires PointerManager#panMove - During pan gesture * @fires PointerManager#panEnd - When pan gesture ends * @fires PointerManager#pinchStart - When pinch gesture begins * @fires PointerManager#pinchMove - During pinch gesture * @fires PointerManager#pinchEnd - When pinch gesture ends * * @example * // Create manager and attach event handler * const canvas = document.querySelector('canvas'); * const pointerManager = new PointerManager(canvas); * const handler = { * priority: 10, * fingerSingleTap: (e) =&gt; { * console.log(\"SINGLE TAP at\", e.clientX, e.clientY); * }, * fingerHold: (e) =&gt; { * console.log(\"HOLD at\", e.clientX, e.clientY); * } * }; * pointerManager.onEvent(handler); */ class PointerManager { /** * Creates a new PointerManager instance. * @param {HTMLElement} target - DOM element to attach event listeners to * @param {Object} [options] - Configuration options * @param {number} [options.pinchMaxInterval=250] - Maximum time (ms) between touches to trigger pinch * @param {number} [options.idleTime=60] - Seconds of inactivity before idle event */ constructor(target, options) { this.target = target; Object.assign(this, { pinchMaxInterval: 250 // in ms, fingerDown event max distance in time to trigger a pinch. }); if (options) Object.assign(this, options); this.idleTimeout = null; this.idleTime = 60; //in seconds this.idling = false; this.currentPointers = []; this.eventObservers = new Map(); this.ppmm = PointerManager.getPixelsPerMM(); this.target.style.touchAction = \"none\"; this.target.addEventListener('pointerdown', (e) =&gt; this.handleEvent(e), false); this.target.addEventListener('pointermove', (e) =&gt; this.handleEvent(e), false); this.target.addEventListener('pointerup', (e) =&gt; this.handleEvent(e), false); this.target.addEventListener('pointercancel', (e) =&gt; this.handleEvent(e), false); this.target.addEventListener('wheel', (e) =&gt; this.handleEvent(e), false); } /** * Constant for targeting all pointers. * @type {number} * @readonly */ static get ANYPOINTER() { return -1; } /// Utilities /** * Splits a string into an array based on whitespace. * * @param {string} str - The input string to split. * @returns {Array&lt;string&gt;} An array of strings split by whitespace. */ static splitStr(str) { return str.trim().split(/\\s+/g); } /** * Calculates device pixels per millimeter. * @returns {number} Pixels per millimeter for current display * @private */ static getPixelsPerMM() { // Get the device pixel ratio const pixelRatio = window.devicePixelRatio || 1; // Create a div to measure const div = document.createElement(\"div\"); div.style.width = \"1in\"; div.style.height = \"1in\"; div.style.position = \"absolute\"; div.style.left = \"-100%\"; div.style.top = \"-100%\"; document.body.appendChild(div); // Measure the div const pixelsPerInch = div.offsetWidth * pixelRatio; // Clean up document.body.removeChild(div); // Convert pixels per inch to pixels per mm const pixelsPerMM = pixelsPerInch / 25.4; return pixelsPerMM; } /////////////////////////////////////////////////////////// /// Class interface /** * Registers event handlers. * @param {string} eventTypes - Space-separated list of event types * @param {Object|Function} obj - Handler object or function * @param {number} [idx=ANYPOINTER] - Pointer index to target, or ANYPOINTER for all * @returns {Object} Handler object */ on(eventTypes, obj, idx = PointerManager.ANYPOINTER) { eventTypes = PointerManager.splitStr(eventTypes); if (typeof (obj) == 'function') { obj = Object.fromEntries(eventTypes.map(e =&gt; [e, obj])); obj.priority = -1000; } eventTypes.forEach(eventType =&gt; { if (idx == PointerManager.ANYPOINTER) { this.broadcastOn(eventType, obj); } else { const p = this.currentPointers[idx]; if (!p) { throw new Error(\"Bad Index\"); } p.on(eventType, obj); } }); return obj; } /** * Unregisters event handlers. * @param {string} eventTypes - Space-separated list of event types * @param {Object|Function} callback - Handler to remove * @param {number} [idx=ANYPOINTER] - Pointer index to target */ off(eventTypes, callback, idx = PointerManager.ANYPOINTER) { if (idx == PointerManager.ANYPOINTER) { this.broadcastOff(eventTypes, callback); } else { PointerManager.splitStr(eventTypes).forEach(eventType =&gt; { const p = this.currentPointers[idx]; if (!p) { throw new Error(\"Bad Index\"); } p.off(eventType, callback); }); } } /** * Registers a complete event handler with multiple callbacks. * @param {Object} handler - Handler object * @param {number} handler.priority - Handler priority (higher = earlier execution) * @param {Function} [handler.fingerHover] - Hover callback * @param {Function} [handler.fingerSingleTap] - Single tap callback * @param {Function} [handler.fingerDoubleTap] - Double tap callback * @param {Function} [handler.fingerHold] - Hold callback * @param {Function} [handler.mouseWheel] - Mouse wheel callback * @param {Function} [handler.panStart] - Pan start callback * @param {Function} [handler.panMove] - Pan move callback * @param {Function} [handler.panEnd] - Pan end callback * @param {Function} [handler.pinchStart] - Pinch start callback * @param {Function} [handler.pinchMove] - Pinch move callback * @param {Function} [handler.pinchEnd] - Pinch end callback * @throws {Error} If handler lacks priority or required callbacks */ onEvent(handler) { const cb_properties = ['fingerHover', 'fingerSingleTap', 'fingerDoubleTap', 'fingerHold', 'mouseWheel', 'wentIdle', 'activeAgain']; if (!handler.hasOwnProperty('priority')) throw new Error(\"Event handler has not priority property\"); if (!cb_properties.some((e) =&gt; typeof (handler[e]) == 'function')) throw new Error(\"Event handler properties are wrong or missing\"); for (let e of cb_properties) if (typeof (handler[e]) == 'function') { this.on(e, handler); } if (handler.panStart) this.onPan(handler); if (handler.pinchStart) this.onPinch(handler); } /** * Registers pan gesture callbacks. * * @param {Object} handler - The handler object with pan callbacks. * @throws {Error} If the handler is missing any required pan callbacks. */ onPan(handler) { const cb_properties = ['panStart', 'panMove', 'panEnd']; if (!handler.hasOwnProperty('priority')) throw new Error(\"Event handler has not priority property\"); if (!cb_properties.every((e) =&gt; typeof (handler[e]) == 'function')) throw new Error(\"Pan handler is missing one of this functions: panStart, panMove or panEnd\"); handler.fingerMovingStart = (e) =&gt; { handler.panStart(e); if (!e.defaultPrevented) return; this.on('fingerMoving', (e1) =&gt; { handler.panMove(e1); }, e.idx); this.on('fingerMovingEnd', (e2) =&gt; { handler.panEnd(e2); }, e.idx); } this.on('fingerMovingStart', handler); } /** * Registers pinch gesture callbacks. * * @param {Object} handler - The handler object with pinch callbacks. * @throws {Error} If the handler is missing any required pinch callbacks. */ onPinch(handler) { const cb_properties = ['pinchStart', 'pinchMove', 'pinchEnd']; if (!handler.hasOwnProperty('priority')) throw new Error(\"Event handler has not priority property\"); if (!cb_properties.every((e) =&gt; typeof (handler[e]) == 'function')) throw new Error(\"Pinch handler is missing one of this functions: pinchStart, pinchMove or pinchEnd\"); handler.fingerDown = (e1) =&gt; { //find other pointers not in moving status const filtered = this.currentPointers.filter(cp =&gt; cp &amp;&amp; cp.idx != e1.idx &amp;&amp; cp.status == cp.stateEnum.DETECT); if (filtered.length == 0) return; //for each pointer search for the last fingerDown event. const fingerDownEvents = []; for (let cp of filtered) { let down = null; for (let e of cp.eventHistory.toArray()) if (e.fingerType == 'fingerDown') down = e; if (down) fingerDownEvents.push(down); } //we start from the closest one //TODO maybe we should sort by distance instead. fingerDownEvents.sort((a, b) =&gt; b.timeStamp - a.timeStamp); for (let e2 of fingerDownEvents) { if (e1.timeStamp - e2.timeStamp &gt; this.pinchMaxInterval) break; handler.pinchStart(e1, e2); if (!e1.defaultPrevented) break; clearTimeout(this.currentPointers[e1.idx].timeout); clearTimeout(this.currentPointers[e2.idx].timeout); this.on('fingerMovingStart', (e) =&gt; e.preventDefault(), e1.idx); //we need to capture this event (pan conflict) this.on('fingerMovingStart', (e) =&gt; e.preventDefault(), e2.idx); this.on('fingerMoving', (e) =&gt; e2 &amp;&amp; handler.pinchMove(e1 = e, e2), e1.idx); //we need to assign e1 and e2, to keep last position. this.on('fingerMoving', (e) =&gt; e1 &amp;&amp; handler.pinchMove(e1, e2 = e), e2.idx); this.on('fingerMovingEnd', (e) =&gt; { if (e2) handler.pinchEnd(e, e2); e1 = e2 = null; }, e1.idx); this.on('fingerMovingEnd', (e) =&gt; { if (e1) handler.pinchEnd(e1, e); e1 = e2 = null; }, e2.idx); break; } } this.on('fingerDown', handler); } /////////////////////////////////////////////////////////// /// Implementation stuff // register broadcast handlers broadcastOn(eventType, obj) { if (!this.eventObservers.has(eventType)) { this.eventObservers.set(eventType, new Set()); } this.eventObservers.get(eventType).add(obj); } broadcastOff(eventTypes, obj) { PointerManager.splitStr(eventTypes).forEach(eventType =&gt; { if (this.eventObservers.has(eventType)) { if (!obj) { this.eventObservers.delete(eventType); } else { const handlers = this.eventObservers.get(eventType); handlers.delete(obj); if (handlers.size === 0) { this.eventObservers.delete(eventType); } } } }); } broadcast(e) { if (!this.eventObservers.has(e.fingerType)) return; const handlers = Array.from(this.eventObservers.get(e.fingerType)); handlers.sort((a, b) =&gt; b.priority - a.priority); for (const obj of handlers) { obj[e.fingerType](e); if (e.defaultPrevented) break; } } addCurrPointer(cp) { let result = -1; for (let i = 0; i &lt; this.currentPointers.length &amp;&amp; result &lt; 0; i++) { if (this.currentPointers[i] == null) { result = i; } } if (result &lt; 0) { this.currentPointers.push(cp); result = this.currentPointers.length - 1; } else { this.currentPointers[result] = cp; } return result; } removeCurrPointer(index) { this.currentPointers[index] = null; while ((this.currentPointers.length &gt; 0) &amp;&amp; (this.currentPointers[this.currentPointers.length - 1] == null)) { this.currentPointers.pop(); } } handleEvent(e) { //IDLING MANAGEMENT if (this.idling) { this.broadcast({ fingerType: 'activeAgain' }); this.idling = false; } else { if (this.idleTimeout) clearTimeout(this.idleTimeout); this.idleTimeout = setTimeout(() =&gt; { this.broadcast({ fingerType: 'wentIdle' }); this.idling = true; }, this.idleTime * 1000); } if (e.type == 'pointerdown') this.target.setPointerCapture(e.pointerId); if (e.type == 'pointercancel') console.log(e); let handled = false; for (let i = 0; i &lt; this.currentPointers.length &amp;&amp; !handled; i++) { const cp = this.currentPointers[i]; if (cp) { handled = cp.handleEvent(e); if (cp.isDone()) this.removeCurrPointer(i); } } if (!handled) { const cp = new SinglePointerHandler(this, e.pointerId, { ppmm: this.ppmm }); handled = cp.handleEvent(e); } //e.preventDefault(); } } /** * Handles events for a single pointer. * @private */ class SinglePointerHandler { /** * Creates a new SinglePointerHandler instance. * @param {PointerManager} parent - Parent PointerManager instance * @param {number} pointerId - Pointer identifier * @param {Object} [options] - Configuration options * @param {number} [options.ppmm=3] - Pixels per millimeter */ constructor(parent, pointerId, options) { this.parent = parent; this.pointerId = pointerId; Object.assign(this, { ppmm: 3, // 27in screen 1920x1080 = 3 ppmm }); if (options) Object.assign(this, options); this.eventHistory = new CircularBuffer(10); this.isActive = false; this.startTap = 0; this.threshold = 15; // 15mm this.eventObservers = new Map(); this.isDown = false; this.done = false; this.stateEnum = { IDLE: 0, DETECT: 1, HOVER: 2, MOVING_START: 3, MOVING: 4, MOVING_END: 5, HOLD: 6, TAPS_DETECT: 7, SINGLE_TAP: 8, DOUBLE_TAP_DETECT: 9, DOUBLE_TAP: 10, }; this.status = this.stateEnum.IDLE; this.timeout = null; this.holdTimeoutThreshold = 600; this.tapTimeoutThreshold = 100; this.oldDownPos = { clientX: 0, clientY: 0 }; this.movingThreshold = 1; // 1mm this.idx = this.parent.addCurrPointer(this); } /////////////////////////////////////////////////////////// /// Utilities static distance(x0, y0, x1, y1) { return Math.sqrt((x1 - x0) ** 2 + (y1 - y0) ** 2); } distanceMM(x0, y0, x1, y1) { return SinglePointerHandler.distance(x0, y0, x1, y1) / this.ppmm; } /////////////////////////////////////////////////////////// /// Class interface on(eventType, obj) { this.eventObservers.set(eventType, obj); } off(eventType) { if (this.eventObservers.has(eventType)) { this.eventObservers.delete(eventType); } } /////////////////////////////////////////////////////////// /// Implementation stuff addToHistory(e) { this.eventHistory.push(e); } prevPointerEvent() { return this.eventHistory.last(); } handlePointerDown(e) { this.startTap = e.timeStamp; } handlePointerUp(e) { const tapDuration = e.timeStamp - this.startTap; } isLikelySamePointer(e) { let result = this.pointerId == e.pointerId; if (!result &amp;&amp; !this.isDown &amp;&amp; e.type == \"pointerdown\") { const prevP = this.prevPointerEvent(); if (prevP) { result = (e.pointerType == prevP.pointerType) &amp;&amp; this.distanceMM(e.clientX, e.clientY, prevP.clientX, prevP.clientY) &lt; this.threshold; } } return result; } // emit+broadcast emit(e) { if (this.eventObservers.has(e.fingerType)) { this.eventObservers.get(e.fingerType)[e.fingerType](e); if (e.defaultPrevented) return; } this.parent.broadcast(e); } // output Event, speed is computed only on pointermove createOutputEvent(e, type) { const result = e; result.fingerType = type; result.originSrc = this.originSrc; result.speedX = 0; result.speedY = 0; result.idx = this.idx; const prevP = this.prevPointerEvent(); if (prevP &amp;&amp; (e.type == 'pointermove')) { const dt = result.timeStamp - prevP.timeStamp; if (dt &gt; 0) { result.speedX = (result.clientX - prevP.clientX) / dt * 1000.0; // px/s result.speedY = (result.clientY - prevP.clientY) / dt * 1000.0; // px/s } } return result; } // Finite State Machine processEvent(e) { let distance = 0; if (e.type == \"pointerdown\") { this.oldDownPos.clientX = e.clientX; this.oldDownPos.clientY = e.clientY; this.isDown = true; } if (e.type == \"pointerup\" || e.type == \"pointercancel\") this.isDown = false; if (e.type == \"pointermove\" &amp;&amp; this.isDown) { distance = this.distanceMM(e.clientX, e.clientY, this.oldDownPos.clientX, this.oldDownPos.clientY) } if (e.type == \"wheel\") { this.emit(this.createOutputEvent(e, 'mouseWheel')); return; } switch (this.status) { case this.stateEnum.HOVER: case this.stateEnum.IDLE: if (e.type == 'pointermove') { this.emit(this.createOutputEvent(e, 'fingerHover')); this.status = this.stateEnum.HOVER; this.originSrc = e.composedPath()[0]; } else if (e.type == 'pointerdown') { this.status = this.stateEnum.DETECT; this.emit(this.createOutputEvent(e, 'fingerDown')); if (e.defaultPrevented) { // An observer captured the fingerDown event this.status = this.stateEnum.MOVING; break; } this.originSrc = e.composedPath()[0]; this.timeout = setTimeout(() =&gt; { this.emit(this.createOutputEvent(e, 'fingerHold')); if (e.defaultPrevented) this.status = this.stateEnum.IDLE; }, this.holdTimeoutThreshold); } break; case this.stateEnum.DETECT: if (e.type == 'pointercancel') { /// For Firefox clearTimeout(this.timeout); this.status = this.stateEnum.IDLE; this.emit(this.createOutputEvent(e, 'fingerHold')); } else if (e.type == 'pointermove' &amp;&amp; distance &gt; this.movingThreshold) { clearTimeout(this.timeout); this.status = this.stateEnum.MOVING; this.emit(this.createOutputEvent(e, 'fingerMovingStart')); } else if (e.type == 'pointerup') { clearTimeout(this.timeout); this.status = this.stateEnum.TAPS_DETECT; this.timeout = setTimeout(() =&gt; { this.status = this.stateEnum.IDLE; this.emit(this.createOutputEvent(e, 'fingerSingleTap')); }, this.tapTimeoutThreshold); } break; case this.stateEnum.TAPS_DETECT: if (e.type == 'pointerdown') { clearTimeout(this.timeout); this.status = this.stateEnum.DOUBLE_TAP_DETECT; this.timeout = setTimeout(() =&gt; { this.emit(this.createOutputEvent(e, 'fingerHold')); if (e.defaultPrevented) this.status = this.stateEnum.IDLE; }, this.tapTimeoutThreshold); } else if (e.type == 'pointermove' &amp;&amp; distance &gt; this.movingThreshold) { clearTimeout(this.timeout); this.status = this.stateEnum.IDLE; this.emit(this.createOutputEvent(e, 'fingerHover')); } break; case this.stateEnum.DOUBLE_TAP_DETECT: if (e.type == 'pointerup' || e.type == 'pointercancel') { clearTimeout(this.timeout); this.status = this.stateEnum.IDLE; this.emit(this.createOutputEvent(e, 'fingerDoubleTap')); } break; case this.stateEnum.DOUBLE_TAP_DETECT: if (e.type == 'pointermove' &amp;&amp; distance &gt; this.movingThreshold) { this.status = this.stateEnum.MOVING; this.emit(this.createOutputEvent(e, 'fingerMovingStart')); } break; case this.stateEnum.MOVING: if (e.type == 'pointermove') { // Remain MOVING this.emit(this.createOutputEvent(e, 'fingerMoving')); } else if (e.type == 'pointerup' || e.type == 'pointercancel') { this.status = this.stateEnum.IDLE; this.emit(this.createOutputEvent(e, 'fingerMovingEnd')); } break; default: console.log(\"ERROR \" + this.status); console.log(e); break; } this.addToHistory(e); } handleEvent(e) { let result = false; if (this.isLikelySamePointer(e)) { this.pointerId = e.pointerId; //it's mine this.processEvent(e); result = true; } return result; } isDone() { return this.status == this.stateEnum.IDLE; } } /** * Circular buffer for event history. * @private */ class CircularBuffer { /** * Creates a new CircularBuffer instance. * @param {number} capacity - Maximum number of elements * @throws {TypeError} If capacity is not a positive integer */ constructor(capacity) { if (typeof capacity != \"number\" || !Number.isInteger(capacity) || capacity &lt; 1) throw new TypeError(\"Invalid capacity\"); this.buffer = new Array(capacity); this.capacity = capacity; this.first = 0; this.size = 0; } clear() { this.first = 0; this.size = 0; } empty() { return this.size == 0; } size() { return this.size; } capacity() { return this.capacity; } first() { let result = null; if (this.size &gt; 0) result = this.buffer[this.first]; return result; } last() { let result = null; if (this.size &gt; 0) result = this.buffer[(this.first + this.size - 1) % this.capacity]; return result; } enqueue(v) { this.first = (this.first &gt; 0) ? this.first - 1 : this.first = this.capacity - 1; this.buffer[this.first] = v; if (this.size &lt; this.capacity) this.size++; } push(v) { if (this.size === this.capacity) { this.buffer[this.first] = v; this.first = (this.first + 1) % this.capacity; } else { this.buffer[(this.first + this.size) % this.capacity] = v; this.size++; } } dequeue() { if (this.size == 0) throw new RangeError(\"Dequeue on empty buffer\"); const v = this.buffer[(this.first + this.size - 1) % this.capacity]; this.size--; return v; } pop() { return this.dequeue(); } shift() { if (this.size == 0) throw new RangeError(\"Shift on empty buffer\"); const v = this.buffer[this.first]; if (this.first == this.capacity - 1) this.first = 0; else this.first++; this.size--; return v; } get(start, end) { if (this.size === 0 &amp;&amp; start === 0 &amp;&amp; (end === undefined || end === 0)) return []; if (typeof start !== \"number\" || !Number.isInteger(start) || start &lt; 0) throw new TypeError(\"Invalid start value\"); if (start &gt;= this.size) throw new RangeError(\"Start index past end of buffer: \" + start); if (end === undefined) return this.buffer[(this.first + start) % this.capacity]; if (typeof end !== \"number\" || !Number.isInteger(end) || end &lt; 0) throw new TypeError(\"Invalid end value\"); if (end &gt;= this.size) throw new RangeError(\"End index past end of buffer: \" + end); const result = []; for (let i = start; i &lt;= end; i++) { result.push(this.buffer[(this.first + i) % this.capacity]); } return result; } toArray() { if (this.size == 0) return []; return this.get(0, this.size - 1); } } export { PointerManager } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"Signals.js.html":{"id":"Signals.js.html","title":"Source: Signals.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: Signals.js function addSignals(proto, ...signals) { if(!proto.prototype.allSignals) proto.prototype.allSignals = []; proto.prototype.allSignals = [...proto.prototype.allSignals, ...signals]; proto.prototype.initSignals = function() { this.signals = Object.fromEntries(this.allSignals.map( s =&gt; [s, []])); } /** * Adds a Layer Event * @param {string} event A label to identify the event. * @param {*} callback The event callback function. */ proto.prototype.addEvent = function(event, callback) { if(!this.signals) this.initSignals(); this.signals[event].push(callback); } /* * Emits an event (running all the callbacks referred to it). * @param {*} event The event name */ /** @ignore */ proto.prototype.emit = function(event, ...parameters) { if(!this.signals) this.initSignals(); for (let r of this.signals[event]) r(...parameters); } } export { addSignals } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"Raster.js.html":{"id":"Raster.js.html","title":"Source: Raster.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: Raster.js /** * An Raster Format describes the way that the images in textures and renderbuffers store their data. * * 'vec3' format must be specified if the image is RGB (without alpha). * * 'vec4' is related to RGBA images. * * 'float' is for file containg coefficients. * @typedef {('vec3'|'vec4'|'float')} Raster#Format */ /** * Raster is a provider of image and/or plane of coefficients. * It support all file formats supported by {@link Layout}. * * An object literal with Raster `options` can be specified. * * @param {Object} [options] An object literal describing the raster content. * @param {Raster#Format} options.format='vec3' The color format of the image. */ class Raster { constructor(options) { Object.assign(this, { format: 'vec3', }); Object.assign(this, options); } /** * Gets a tile. * @param {Tile} tile A tile. * @param {WebGLRenderingContext} gl The WebGL rendering context . * @returns {'[tex, size]'} A pair (tex,size). */ async loadImage(tile, gl) { let img; let cors = (new URL(tile.url, window.location.href)).origin !== window.location.origin; if (tile.end || typeof createImageBitmap == 'undefined') { let options = {}; options.headers = { range: `bytes=${tile.start}-${tile.end}`, 'Accept-Encoding': 'indentity', mode: cors? 'cors' : 'same-origin' }; let response = await fetch(tile.url, options); if (!response.ok) { callback(\"Failed loading \" + tile.url + \": \" + response.statusText); return; } if (response.status != 206) throw \"The server doesn't support partial content requests (206).\"; let blob = await response.blob(); img = await this.blobToImage(blob, gl); } else { img = document.createElement('img'); if (cors) img.crossOrigin=\"\"; img.onerror = function (e) { console.log(\"Texture loading error!\"); }; img.src = tile.url; await new Promise((resolve, reject) =&gt; { img.onload = () =&gt; { resolve(); } }); } let tex = this.loadTexture(gl, img); //TODO 3 is not accurate for type of image, when changing from rgb to grayscale, fix this value. let size = img.width * img.height * 3; return [tex, size]; } /** @ignore */ async blobToImage(blob, gl) { let tex, img; if(typeof createImageBitmap != 'undefined') { var isFirefox = typeof InstallTrigger !== 'undefined'; //firefox does not support options for this call, BUT the image is automatically flipped. if(isFirefox) img = await createImageBitmap(blob); else img = await createImageBitmap(blob, { imageOrientation1: 'flipY' }); } else { //fallback for IOS let urlCreator = window.URL || window.webkitURL; img = document.createElement('img'); img.onerror = function(e) { console.log(\"Texture loading error!\"); }; img.src = urlCreator.createObjectURL(blob); await new Promise((resolve, reject) =&gt; { img.onload = () =&gt; resolve() }); urlCreator.revokeObjectURL(img.src); } return img; } /** @ignore */ loadTexture(gl, img) { this.width = img.width; //this will be useful for layout image. this.height = img.height; var tex = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, tex); let glFormat = gl.RGBA; switch(this.format) { case 'vec3': glFormat = gl.RGB; break; case 'vec4': glFormat = gl.RGBA; break; case 'float': glFormat = gl.LUMINANCE; break; default: break; } gl.texImage2D(gl.TEXTURE_2D, 0, glFormat, glFormat, gl.UNSIGNED_BYTE, img); gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); //build mipmap for large images. if(this.width &gt; 1024 || this.height &gt; 1024) { gl.generateMipmap(gl.TEXTURE_2D); gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR); } else { gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); } gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); return tex; } } export { Raster } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"ShaderBRDF.js.html":{"id":"ShaderBRDF.js.html","title":"Source: ShaderBRDF.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: ShaderBRDF.js import { Shader } from './Shader.js' /** * @param {object} options * mode: default is color, can be [color, diffuse, specular, normals] * color implements ward */ class ShaderBRDF extends Shader { constructor(options) { super({}); this.modes = ['color', 'diffuse', 'specular', 'normals', 'monochrome']; this.mode = 'color'; Object.assign(this, options); const kdCS = this.colorspaces['kd'] == 'linear' ? 0 : 1; const ksCS = this.colorspaces['ks'] == 'linear' ? 0 : 1; const brightness = options.brightness ? options.brightness : 1.0; const gamma = options.gamma ? options.gamma : 2.2; const alphaLimits = options.alphaLimits ? options.alphaLimits : [0.01, 0.5]; const monochromeMaterial = options.monochromeMaterial ? options.monochromeMaterial : [0.80, 0.79, 0.75]; const kAmbient = options.kAmbient ? options.kAmbient : 0.02; this.uniforms = { uLightInfo: { type: 'vec4', needsUpdate: true, size: 4, value: [0.1, 0.1, 0.9, 0] }, uAlphaLimits: { type: 'vec2', needsUpdate: true, size: 2, value: alphaLimits }, uBrightnessGamma: { type: 'vec2', needsUpdate: true, size: 2, value: [brightness, gamma] }, uInputColorSpaceKd: { type: 'int', needsUpdate: true, size: 1, value: kdCS }, uInputColorSpaceKs: { type: 'int', needsUpdate: true, size: 1, value: ksCS }, uMonochromeMaterial: { type: 'vec3', needsUpdate: true, size: 3, value: monochromeMaterial }, uKAmbient: { type: 'float', needsUpdate: true, size: 1, value: kAmbient }, } this.innerCode = ''; this.setMode(this.mode); } setLight(light) { // Light with 4 components (Spot: 4th==1, Dir: 4th==0) this.setUniform('uLightInfo', light); } setMode(mode) { this.mode = mode; switch(mode) { case 'color': this.innerCode = `vec3 linearColor = (kd + ks * spec) * NdotL; linearColor += kd * uKAmbient; // HACK! adding just a bit of ambient` break; case 'diffuse': this.innerCode = `vec3 linearColor = kd;` break; case 'specular': this.innerCode = `vec3 linearColor = clamp((ks * spec) * NdotL, 0.0, 1.0);` break; case 'normals': this.innerCode = `vec3 linearColor = (N+vec3(1.))/2.; applyGamma = false;` break; case 'monochrome': this.innerCode = 'vec3 linearColor = kd * NdotL + kd * uKAmbient;' break; default: console.log(\"ShaderBRDF: Unknown mode: \" + mode); throw Error(\"ShaderBRDF: Unknown mode: \" + mode); break; } this.needsUpdate = true; } fragShaderSrc(gl) { let gl2 = !(gl instanceof WebGLRenderingContext); let hasKd = this.samplers.findIndex( s =&gt; s.name == 'uTexKd') != -1 &amp;&amp; this.mode != 'monochrome'; let hasGloss = this.samplers.findIndex( s =&gt; s.name == 'uTexGloss') != -1 &amp;&amp; this.mode != 'monochrome'; let hasKs = this.samplers.findIndex( s =&gt; s.name == 'uTexKs') != -1; let str = ` #define NULL_NORMAL vec3(0,0,0) #define SQR(x) ((x)*(x)) #define PI (3.14159265359) #define ISO_WARD_EXPONENT (4.0) ${gl2? 'in' : 'varying'} vec2 v_texcoord; uniform sampler2D uTexKd; uniform sampler2D uTexKs; uniform sampler2D uTexNormals; uniform sampler2D uTexGloss; uniform vec4 uLightInfo; // [x,y,z,w] (if .w==0 =&gt; Directional, if w==1 =&gt; Spot) uniform vec2 uAlphaLimits; uniform vec2 uBrightnessGamma; uniform vec3 uMonochromeMaterial; uniform float uKAmbient; uniform int uInputColorSpaceKd; // 0: Linear; 1: sRGB uniform int uInputColorSpaceKs; // 0: Linear; 1: sRGB vec3 getNormal(const in vec2 texCoord) { vec3 n = texture(uTexNormals, texCoord).xyz; n = 2. * n - vec3(1.); float norm = length(n); if(norm &lt; 0.5) return NULL_NORMAL; else return n/norm; } vec3 linear2sRGB(vec3 linearRGB) { bvec3 cutoff = lessThan(linearRGB, vec3(0.0031308)); vec3 higher = vec3(1.055)*pow(linearRGB, vec3(1.0/2.4)) - vec3(0.055); vec3 lower = linearRGB * vec3(12.92); return mix(higher, lower, cutoff); } vec3 sRGB2Linear(vec3 sRGB) { bvec3 cutoff = lessThan(sRGB, vec3(0.04045)); vec3 higher = pow((sRGB + vec3(0.055))/vec3(1.055), vec3(2.4)); vec3 lower = sRGB/vec3(12.92); return mix(higher, lower, cutoff); } float ward(in vec3 V, in vec3 L, in vec3 N, in vec3 X, in vec3 Y, in float alpha) { vec3 H = normalize(V + L); float H_dot_N = dot(H, N); float sqr_alpha_H_dot_N = SQR(alpha * H_dot_N); if(sqr_alpha_H_dot_N &lt; 0.00001) return 0.0; float L_dot_N_mult_N_dot_V = dot(L,N) * dot(N,V); if(L_dot_N_mult_N_dot_V &lt;= 0.0) return 0.0; float spec = 1.0 / (4.0 * PI * alpha * alpha * sqrt(L_dot_N_mult_N_dot_V)); //float exponent = -(SQR(dot(H,X)) + SQR(dot(H,Y))) / sqr_alpha_H_dot_N; // Anisotropic float exponent = -SQR(tan(acos(H_dot_N))) / SQR(alpha); // Isotropic spec *= exp( exponent ); return spec; } vec4 data() { vec3 N = getNormal(v_texcoord); if(N == NULL_NORMAL) { return vec4(0.0); } vec3 L = (uLightInfo.w == 0.0) ? normalize(uLightInfo.xyz) : normalize(uLightInfo.xyz - gl_FragCoord.xyz); vec3 V = vec3(0.0,0.0,1.0); vec3 H = normalize(L + V); float NdotL = max(dot(N,L),0.0); vec3 kd = ${hasKd ? 'texture(uTexKd, v_texcoord).xyz' : 'uMonochromeMaterial'}; vec3 ks = ${hasKs ? 'texture(uTexKs, v_texcoord).xyz' : 'vec3(0.0, 0.0, 0.0)'}; if(uInputColorSpaceKd == 1) { kd = sRGB2Linear(kd); } if(uInputColorSpaceKs == 1) { ks = sRGB2Linear(ks); } kd /= PI; float gloss = ${hasGloss ? 'texture(uTexGloss, v_texcoord).x' : '0.0'}; float minGloss = 1.0 - pow(uAlphaLimits[1], 1.0 / ISO_WARD_EXPONENT); float maxGloss = 1.0 - pow(uAlphaLimits[0], 1.0 / ISO_WARD_EXPONENT); float alpha = pow(1.0 - gloss * (maxGloss - minGloss) - minGloss, ISO_WARD_EXPONENT); vec3 e = vec3(0.0,0.0,1.0); vec3 T = normalize(cross(N,e)); vec3 B = normalize(cross(N,T)); float spec = ward(V, L, N, T, B, alpha); bool applyGamma = true; ${this.innerCode} vec3 finalColor = applyGamma ? pow(linearColor * uBrightnessGamma[0], vec3(1.0/uBrightnessGamma[1])) : linearColor; return vec4(finalColor, 1.0); } `; return str; } } export { ShaderBRDF } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"ShaderCombiner.js.html":{"id":"ShaderCombiner.js.html","title":"Source: ShaderCombiner.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: ShaderCombiner.js import { Shader } from './Shader.js' /** * The **ShaderCombiner** class specifies a shader that computes an output texture as a combination of two input textures. * It defines four modes (shader behaviors): * * 'first' assigns the first texture as output (draws the first texture). The color of each fragment is cout=c1 * * 'second' assigns the second texture as output (draws the second texture). The color of each fragment is cout=c2 * * 'mean' calculates the average color of the two textures. The color of each fragment is cout=(c1+c2)/2.0 * * 'diff' calculates the difference between the color of the textures. Color of each fragment is cout=c2.rgb-c1.rgb * * Extends {@link Shader}. */ class ShaderCombiner extends Shader { /** * Instantiates a **ShaderCombiner** class. * An object literal with ShaderCombiner `options` can be specified. * @param {Object} [options] An object literal with options that inherits from {@link Shader}. */ constructor(options) { super(options); this.mode = 'mean', //Lighten Darken Contrast Inversion HSV components LCh components this.samplers = [ { id:0, name:'source1', type:'vec3' }, { id:1, name:'source2', type:'vec3' } ]; this.modes = ['first','second','mean','diff']; this.operations = { 'first': 'color = c1;', 'second': 'color = c2;', 'mean': 'color = (c1 + c2)/2.0;', 'diff': 'color = vec4(c2.rgb - c1.rgb, c1.a);' }; } /** @ignore */ fragShaderSrc(gl) { let gl2 = !(gl instanceof WebGLRenderingContext); let operation = this.operations[this.mode]; return ` ${gl2? 'in' : 'varying'} vec2 v_texcoord; uniform sampler2D source1; uniform sampler2D source2; vec4 data() { vec4 c1 = texture(source1, v_texcoord); vec4 c2 = texture(source2, v_texcoord); vec4 color; ${operation}; return color; } `; } /** @ignore */ vertShaderSrc(gl) { let gl2 = !(gl instanceof WebGLRenderingContext); return `${gl2? '#version 300 es':''} ${gl2? 'in' : 'attribute'} vec4 a_position; ${gl2? 'in' : 'attribute'} vec2 a_texcoord; ${gl2? 'out' : 'varying'} vec2 v_texcoord; void main() { gl_Position = a_position; v_texcoord = a_texcoord; }`; } } export { ShaderCombiner } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"ShaderFilter.js.html":{"id":"ShaderFilter.js.html","title":"Source: ShaderFilter.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: ShaderFilter.js class ShaderFilter { constructor(options) { options = Object.assign({ }, options); Object.assign(this, options); this.name = this.constructor.name; this.uniforms = {}; this.samplers = []; this.needsUpdate = true; this.shader = null; this.modes = {}; } setMode(mode, id) { if (!this.shader) throw Error(\"Shader not registered\"); if (Object.keys(this.modes).length &gt; 0) { const list = this.modes[mode]; if (list) { list.map(a =&gt; { a.enable = a.id == id; }); this.shader.needsUpdate = true; } else { throw Error(`Mode \"${mode}\" not exist!`); } } } // Callback in Shader.js prepare(gl) { if (this.needsUpdate) if (this.createTextures) this.createTextures(gl); this.needsUpdate = false; } // Callback to create textures for samplers // async createTextures(gl) { // } // Constant (modes) declarations in shader program fragModeSrc() { let src = ''; for (const key of Object.keys(this.modes)) { for (const e of this.modes[key]) { if (e.enable) { src += e.src + '\\n'; } } } return src; } /** * Sets the value of a uniform variable. * @param {string} name The name of the uniform variable (it will be converted with the unique filter name). * @param {*} value The value to assign. */ setUniform(name, value) { if(!this.shader) { throw Error(`Shader not registered`); } this.shader.setUniform(this.uniformName(name), value); } // Sampler declarations in shader program fragSamplerSrc() { let src = ''; for (let s of this.samplers) { src += ` uniform sampler2D ${s.name};`; } return src; } // Uniform declarations in shader program fragUniformSrc() { let src = ''; for (const [key, value] of Object.entries(this.uniforms)) { src += ` uniform ${this.uniforms[key].type} ${key};`; } return src; } fragDataSrc(gl) { return null; } functionName() { return this.name + \"_data\"; } samplerName(name) { return `${this.name}_${name}`; } uniformName(name) { return `u_${this.name}_${name}`; } modeName(name) { return `m_${this.name}_${name}`; } getSampler(name) { const samplername = this.samplerName(name); return this.samplers.find(e =&gt; e.name == samplername); } } class ShaderFilterTest extends ShaderFilter { constructor(options) { super(options); this.uniforms[this.uniformName('nodata_col')] = { type: 'vec4', needsUpdate: true, size: 4, value: [1, 1, 0, 1] }; } fragDataSrc(gl) { return ` vec4 ${this.functionName()}(vec4 col){ return col.a &gt; 0.0 ? col : ${this.uniformName('nodata_col')}; }`; } } class ShaderFilterOpacity extends ShaderFilter { constructor(opacity, options) { super(options); this.uniforms[this.uniformName('opacity')] = { type: 'float', needsUpdate: true, size: 1, value: opacity }; } fragDataSrc(gl) { return ` vec4 ${this.functionName()}(vec4 col){ return vec4(col.rgb, col.a * ${this.uniformName('opacity')}); }`; } } class ShaderGammaFilter extends ShaderFilter { constructor(options) { super(options); this.uniforms[this.uniformName('gamma')] = { type: 'float', needsUpdate: true, size: 1, value: 2.2 }; } fragDataSrc(gl) { return ` vec4 ${this.functionName()}(vec4 col){ float igamma = 1.0/${this.uniformName('gamma')}; return vec4(pow(col.r, igamma), pow(col.g, igamma), pow(col.b, igamma), col.a); }`; } } export { ShaderFilter, ShaderFilterTest, ShaderFilterOpacity, ShaderGammaFilter } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"ShaderNeural.js.html":{"id":"ShaderNeural.js.html","title":"Source: ShaderNeural.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: ShaderNeural.js import { Shader } from './Shader.js' /** * Extends {@link Shader}, initialized with a Neural .json ( **/ class ShaderNeural extends Shader { constructor(options) { super({}); Object.assign(this, { modes: ['light'], mode: 'light', nplanes: null, //number of coefficient planes scale: null, //factor and bias are used to dequantize coefficient planes. bias: null, }); Object.assign(this, options); this.samplers = [ { id:1, name:'u_texture_1', type:'vec3' }, { id:2, name:'u_texture_2', type:'vec3' }, { id:3, name:'u_texture_3', type:'vec3' } ]; this.uniforms = { lights: { type: 'vec2', needsUpdate: true, size: 2, value: [0.0, 0.0] }, min: { type: 'vec3', needsUpdate: true, size: 3, value: [0, 0, 0] }, max: { type: 'vec3', needsUpdate: true, size: 3, value: [1, 1, 1] }, layer1_weights: { type: 'vec4', needsUpdate: true, size: this.c*this.n/4}, layer1_biases: { type: 'vec4', needsUpdate: true, size: this.n/4}, layer2_weights: { type: 'vec4', needsUpdate: true, size: this.n*this.n/4}, layer2_biases: { type: 'vec4', needsUpdate: true, size: this.n/4}, layer3_weights: { type: 'vec4', needsUpdate: true, size: this.n*3/4}, layer3_biases: { type: 'vec3', needsUpdate: true, size: 1}, }; } createProgram(gl) { super.createProgram(gl); this.position_location = gl.getAttribLocation(this.program, \"a_position\"); this.texcoord_location = gl.getAttribLocation(this.program, \"a_texcoord\"); } setLight(light) { this.setUniform('lights', light); } init() { this.lightWeights([0, 0, 1], 'base'); } setShaderInfo(samples, planes, n, c, colorspace) { this.samples = samples; this.planes = planes; this.n = n; this.c = c; this.colorspace = colorspace; } vertShaderSrc(gl) { return `#version 300 es in vec2 a_position; in vec2 a_texcoord; out vec2 v_texcoord; void main() { gl_Position = vec4(a_position, 0.0, 1.0); v_texcoord = a_texcoord; }`; } fragShaderSrc(gl) { return ` vec4 inputs[${this.c/4}]; // 12/4 vec4 output1[${this.n/4}]; // 52/4 vec4 output2[${this.n/4}]; // 52/4 vec3 output3; in vec2 v_texcoord; uniform sampler2D u_texture_1; uniform sampler2D u_texture_2; uniform sampler2D u_texture_3; uniform vec2 lights; uniform vec4 layer1_weights[${this.c*this.n/4}]; // 12*52/4 uniform vec4 layer1_biases[${this.n/4}]; // 52/4 uniform vec4 layer2_weights[${this.n*this.n/4}]; // 52*52/4 uniform vec4 layer2_biases[${this.n/4}]; // 52/4 uniform vec4 layer3_weights[${this.n*3/4}]; // 52*3/4 uniform vec3 layer3_biases; uniform vec3 min[${this.planes/3}]; uniform vec3 max[${this.planes/3}]; float elu(float a){ return (a &gt; 0.0) ? a : (exp(a) - 1.0); } vec4 relightCoeff(vec3 color_1, vec3 color_2, vec3 color_3) { // Rescaling features color_1 = color_1 * (max[0] - min[0]) + min[0]; color_2 = color_2 * (max[1] - min[1]) + min[1]; color_3 = color_3 * (max[2] - min[2]) + min[2]; // building input inputs[0] = vec4(color_1, color_2.x); inputs[1] = vec4(color_2.yz, color_3.xy); inputs[2] = vec4(color_3.z, lights, 0.0); float sum = 0.0; // layer 1 - 11 x 49 for (int i=0; i &lt; ${this.n}; i++){ sum = 0.0; for (int j=0; j &lt; ${this.c/4}; j++){ sum += dot(inputs[j], layer1_weights[${this.c/4}*i+j]); } output1[i/4][i%4] = elu(sum + layer1_biases[i/4][i%4]); } // layer 2 - 49 x 49 for (int i=0; i &lt; ${this.n}; i++){ sum = 0.0; for (int j=0; j &lt; ${this.n/4}; j++){ sum += dot(output1[j], layer2_weights[${this.n/4}*i+j]); } output2[i/4][i%4] = elu(sum + layer2_biases[i/4][i%4]); } // layer 3 - 49 x 3 for (int i=0; i &lt; 3; i++){ sum = 0.0; for (int j=0; j &lt; ${this.n/4}; j++){ sum += dot(output2[j], layer3_weights[${this.n/4}*i+j]); } output3[i] = sum + layer3_biases[i]; } return vec4(output3.${this.colorspace}, 1.0); } vec4 relight(vec2 v) { vec3 color_1 = texture(u_texture_1, v).${this.colorspace}; vec3 color_2 = texture(u_texture_2, v).${this.colorspace}; vec3 color_3 = texture(u_texture_3, v).${this.colorspace}; return relightCoeff(color_1, color_2, color_3); } vec4 data() { return relight(v_texcoord); } vec4 data1() { vec2 uv = v_texcoord; bool showDiff = false; bool showA = false; if(v_texcoord.x &gt; 0.5) { showDiff = true; uv.x -= 0.5; } if(v_texcoord.y &gt; 0.5) { showA = true; uv.y -= 0.5; } vec2 o = floor(uv*128.0)/128.0; float step = 1.0/256.0; vec4 a = vec4(0, 0, 0, 0); vec3 color_1 = vec3(0, 0, 0); vec3 color_2 = vec3(0, 0, 0); vec3 color_3 = vec3(0, 0, 0); for(float y = 0.0; y &lt;= step; y = y + step) { for(float x = 0.0; x &lt;= step; x = x + step) { vec2 d = o + vec2(x, y); a += 0.25*relight(d); color_1 += texture(u_texture_1, d).${this.colorspace}; color_2 += texture(u_texture_2, d).${this.colorspace}; color_3 += texture(u_texture_3, d).${this.colorspace}; } } vec4 b = relightCoeff(0.25*color_1, 0.25*color_2, 0.25*color_3); float diff = 255.0*length((a - b).xyz); if(showDiff) { if(diff &lt; 10.0) { return vec4(0.0, 0.0, 0.0, 1.0); } else if (diff &lt; 20.0) { return vec4(0.0, 0.0, 1.0, 1.0); } else if(diff &lt; 40.0) { return vec4(0.0, 1.0, 0.0, 1.0); } else return vec4(1.0, 0.0, 0.0, 1.0); } if(showA) return a; return b; } `; } } export { ShaderNeural } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"ShaderRTI.js.html":{"id":"ShaderRTI.js.html","title":"Source: ShaderRTI.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: ShaderRTI.js import { Shader } from './Shader.js' /** * Extends {@link Shader}, initialized with a relight .json (see: * [relight on github]{@link https://github.com/cnr-isti-vclab/relight} for details). * * Supported modes are * light: relightable images depending on light direction * normals: shows a normal map * diffuse: remove albedo and display only the geometry with a white material. * specular: specular enhancement * * From the .json configuration the type of basis used: ('ptm', 'hsh', rbf', 'bln'), * and the colorspace ('lrgb', 'rgb', 'mrgb', 'mycc') along with all the other parameters. * * @param {object} options * *compose*: compose operation: add, subtract, multiply, etc. */ class ShaderRTI extends Shader { constructor(options) { super({}); Object.assign(this, { modes: ['light', 'normals', 'diffuse', 'specular'], mode: 'normal', type: ['ptm', 'hsh', 'sh', 'rbf', 'bln'], colorspaces: ['lrgb', 'rgb', 'mrgb', 'mycc'], nplanes: null, //number of coefficient planes yccplanes: null, //number of luminance planes for mycc color space njpegs: null, //number of textures needed (ceil(nplanes/3)) material: null, //material parameters lights: null, //light directions (needed for rbf interpolation) sigma: null, //rbf interpolation parameter ndimensions: null, //PCA dimension space (for rbf and bln) scale: null, //factor and bias are used to dequantize coefficient planes. bias: null, basis: null, //PCA basis for rbf and bln lweights: null //light direction dependent coefficients to be used with coefficient planes }); Object.assign(this, options); if(this.relight) this.init(this.relight); this.setMode('light'); } /* * Set current rendering mode * @param {string} mode one of 'light', 'normals', 'diffuse', 'specular' * @param {number} dt in ms, interpolation duration. */ setMode(mode) { if(!(this.modes.includes(mode))) throw Error(\"Unknown mode: \" + mode); this.mode = mode; if( mode != 'light') { this.lightWeights([ 0.612, 0.354, 0.707], 'base'); this.lightWeights([-0.612, 0.354, 0.707], 'base1'); this.lightWeights([ 0, -0.707, 0.707], 'base2'); } this.needsUpdate = true; } setLight(light) { if(!this.uniforms.light) throw \"Shader not initialized, wait on layer ready event for setLight.\" let x = light[0]; let y = light[1]; //map the square to the circle. let r = Math.sqrt(x*x + y*y); if(r &gt; 1) { x /= r; y /= r; } let z = Math.sqrt(Math.max(0, 1 - x*x - y*y)); light = [x, y, z]; if(this.mode == 'light') this.lightWeights(light, 'base'); this.setUniform('light', light); } setSpecularExp(value) { this.setUniform('specular_exp', value); } init(relight) { Object.assign(this, relight); if(this.colorspace == 'mycc') this.nplanes = this.yccplanes[0] + this.yccplanes[1] + this.yccplanes[2]; else this.yccplanes = [0, 0, 0]; this.planes = []; this.njpegs = 0; while(this.njpegs*3 &lt; this.nplanes) this.njpegs++; for(let i = 0; i &lt; this.njpegs; i++) this.samplers.push({ id:i, name:'plane'+i, type:'vec3' }); if(this.normals) this.samplers.push({ id:this.njpegs, name:'normals', type:'vec3' }); this.material = this.materials[0]; if(this.lights) this.lights + new Float32Array(this.lights); if(this.type == \"rbf\") this.ndimensions = this.lights.length/3; if(this.type == \"bilinear\") { this.ndimensions = this.resolution*this.resolution; this.type = \"bln\"; } this.scale = this.material.scale; this.bias = this.material.bias; if(['mrgb', 'mycc'].includes(this.colorspace)) this.loadBasis(this.basis); this.uniforms = { light: { type: 'vec3', needsUpdate: true, size: 3, value: [0.0, 0.0, 1] }, specular_exp: { type: 'float', needsUpdate: false, size: 1, value: 10 }, bias: { type: 'vec3', needsUpdate: true, size: this.nplanes/3, value: this.bias }, scale: { type: 'vec3', needsUpdate: true, size: this.nplanes/3, value: this.scale }, base: { type: 'vec3', needsUpdate: true, size: this.nplanes }, base1: { type: 'vec3', needsUpdate: false, size: this.nplanes }, base2: { type: 'vec3', needsUpdate: false, size: this.nplanes } } this.lightWeights([0, 0, 1], 'base'); } lightWeights(light, basename, time) { let value; switch(this.type) { case 'ptm': value = PTM.lightWeights(light); break; case 'hsh': value = HSH.lightWeights(light); break; case 'sh' : value = SH.lightWeights(light); break; case 'rbf': value = RBF.lightWeights(light, this); break; case 'bln': value = BLN.lightWeights(light, this); break; } this.setUniform(basename, value, time); } baseLightOffset(p, l, k) { return (p*this.ndimensions + l)*3 + k; } basePixelOffset(p, x, y, k) { return (p*this.resolution*this.resolution + (x + y*this.resolution))*3 + k; } loadBasis(data) { let tmp = new Uint8Array(data); this.basis = new Float32Array(data.length); let basis = new Float32Array(tmp.length); for(let plane = 0; plane &lt; this.nplanes+1; plane++) { for(let c = 0; c &lt; this.ndimensions; c++) { for(let k = 0; k &lt; 3; k++) { let o = this.baseLightOffset(plane, c, k); if(plane == 0) this.basis[o] = tmp[o]/255; else this.basis[o] = ((tmp[o] - 127)/this.material.range[plane-1]); } } } } fragShaderSrc(gl) { let basetype = 'vec3'; //(this.colorspace == 'mrgb' || this.colorspace == 'mycc')?'vec3':'float'; let gl2 = !(gl instanceof WebGLRenderingContext); let str = ` #define np1 ${this.nplanes + 1} ${gl2? 'in' : 'varying'} vec2 v_texcoord; const mat3 T = mat3(8.1650e-01, 4.7140e-01, 4.7140e-01, -8.1650e-01, 4.7140e-01, 4.7140e-01, -1.6222e-08, -9.4281e-01, 4.7140e-01); uniform vec3 light; uniform float specular_exp; uniform vec3 bias[np1]; uniform vec3 scale[np1]; uniform ${basetype} base[np1]; uniform ${basetype} base1[np1]; uniform ${basetype} base2[np1]; `; for(let n = 0; n &lt; this.njpegs; n++) str += ` uniform sampler2D plane${n}; `; if(this.normals) str += ` uniform sampler2D normals; `; if(this.colorspace == 'mycc') str += ` const int ny0 = ${this.yccplanes[0]}; const int ny1 = ${this.yccplanes[1]}; ` switch(this.colorspace) { case 'lrgb': str += LRGB.render(this.njpegs, gl2); break; case 'rgb' : str += RGB.render(this.njpegs, gl2); break; case 'mrgb': str += MRGB.render(this.njpegs, gl2); break; case 'mycc': str += MYCC.render(this.njpegs, this.yccplanes[0], gl2); break; } str += ` vec4 data() { `; if(this.mode == 'light') { str += ` vec4 color = render(base); `; } else { str += ` vec4 color; `; if(this.normals) str += ` vec3 normal = (texture${gl2?'':'2D'}(normals, v_texcoord).zyx *2.0) - 1.0; normal.z = sqrt(1.0 - normal.x*normal.x - normal.y*normal.y); `; else str += ` vec3 normal; normal.x = dot(render(base ).xyz, vec3(1)); normal.y = dot(render(base1).xyz, vec3(1)); normal.z = dot(render(base2).xyz, vec3(1)); normal = normalize(T * normal); `; switch(this.mode) { case 'normals': str += ` normal = (normal + 1.0)/2.0; color = vec4(0.0, normal.xy, 1); `; break; case 'diffuse': if(this.colorspace == 'lrgb' || this.colorspace == 'rgb') str += ` vec4 diffuse = texture${gl2?'':'2D'}(plane0, v_texcoord); float s = dot(light, normal); color = vec4(s * diffuse.xyz, 1); `; else str += ` color = vec4(vec3(dot(light, normal)), 1); `; break; case 'specular': default: str += ` float s = pow(dot(light, normal), specular_exp); //color = vec4(render(base).xyz*s, 1.0); color = vec4(s, s, s, 1.0); `; break; } } str += `return color; }`; return str; } } class LRGB { static render(njpegs, gl2) { let str = ` vec4 render(vec3 base[np1]) { float l = 0.0; ` for(let j = 1, k = 0; j &lt; njpegs; j++, k+=3) { str += ` { vec4 c = texture${gl2?'':'2D'}(plane${j}, v_texcoord); l += base[${k}].x*(c.x - bias[${j}].x)*scale[${j}].x; l += base[${k+1}].x*(c.y - bias[${j}].y)*scale[${j}].y; l += base[${k+2}].x*(c.z - bias[${j}].z)*scale[${j}].z; } `; } str += ` vec3 basecolor = (texture${gl2?'':'2D'}(plane0, v_texcoord).xyz - bias[0])*scale[0]; return l*vec4(basecolor, 1); } `; return str; } } class RGB { static render(njpegs, gl2) { let str = ` vec4 render(vec3 base[np1]) { vec4 rgb = vec4(0, 0, 0, 1);`; for(let j = 0; j &lt; njpegs; j++) { str += ` { vec4 c = texture${gl2?'':'2D'}(plane${j}, v_texcoord); rgb.x += base[${j}].x*(c.x - bias[${j}].x)*scale[${j}].x; rgb.y += base[${j}].y*(c.y - bias[${j}].y)*scale[${j}].y; rgb.z += base[${j}].z*(c.z - bias[${j}].z)*scale[${j}].z; } `; } str += ` return rgb; } `; return str; } } class MRGB { static render(njpegs, gl2) { let str = ` vec4 render(vec3 base[np1]) { vec3 rgb = base[0]; vec4 c; vec3 r; `; for(let j = 0; j &lt; njpegs; j++) { str += ` c = texture${gl2?'':'2D'}(plane${j}, v_texcoord); r = (c.xyz - bias[${j}])* scale[${j}]; rgb += base[${j}*3+1]*r.x; rgb += base[${j}*3+2]*r.y; rgb += base[${j}*3+3]*r.z; `; } str += ` return vec4(rgb, 1); } `; return str; } } class MYCC { static render(njpegs, ny1, gl2) { let str = ` vec3 toRgb(vec3 ycc) { vec3 rgb; rgb.g = ycc.r + ycc.b/2.0; rgb.b = ycc.r - ycc.b/2.0 - ycc.g/2.0; rgb.r = rgb.b + ycc.g; return rgb; } vec4 render(vec3 base[np1]) { vec3 rgb = base[0]; vec4 c; vec3 r; `; for(let j = 0; j &lt; njpegs; j++) { str += ` c = texture${gl2?'':'2D'}(plane${j}, v_texcoord); r = (c.xyz - bias[${j}])* scale[${j}]; `; if(j &lt; ny1) { str += ` rgb.x += base[${j}*3+1].x*r.x; rgb.y += base[${j}*3+2].y*r.y; rgb.z += base[${j}*3+3].z*r.z; `; } else { str += ` rgb.x += base[${j}*3+1].x*r.x; rgb.x += base[${j}*3+2].x*r.y; rgb.x += base[${j}*3+3].x*r.z; `; } } str += ` return vec4(toRgb(rgb), 1); } `; return str; } } /* PTM utility functions */ class PTM { /* @param {Array} v expects light direction as [x, y, z] */ static lightWeights(v) { let b = [1.0, v[0], v[1], v[0]*v[0], v[0]*v[1], v[1]*v[1]]; let base = new Float32Array(18); for(let i = 0; i &lt; 18; i++) base[3*i] = base[3*i+1] = base[3*i+2] = b[i]; return base; } } /* HSH utility functions */ class HSH { static minElevation = 0.15; /* @param {Array} v expects light direction as [x, y, z] */ static lightWeights(v) { let PI = 3.1415; let phi = Math.atan2(v[1], v[0]); if (phi &lt; 0) phi = 2 * PI + phi; let theta = Math.min(Math.acos(v[2]), PI / 2 - this.minElevation); let cosP = Math.cos(phi); let cosT = Math.cos(theta); let cosT2 = cosT * cosT; let b = [ 1.0 / Math.sqrt(2 * PI), Math.sqrt(6 / PI) * (cosP * Math.sqrt(cosT-cosT2)), Math.sqrt(3 / (2 * PI)) * (-1 + 2*cosT), Math.sqrt(6 / PI) * (Math.sqrt(cosT - cosT2) * Math.sin(phi)), Math.sqrt(30 / PI) * (Math.cos(2 * phi) * (-cosT + cosT2)), Math.sqrt(30 / PI) * (cosP*(-1 + 2 * cosT) * Math.sqrt(cosT - cosT2)), Math.sqrt(5 / (2 * PI)) * (1 - 6 * cosT + 6 * cosT2), Math.sqrt(30 / PI) * ((-1 + 2 * cosT) * Math.sqrt(cosT - cosT2) * Math.sin(phi)), Math.sqrt(30 / PI) * ((-cosT + cosT2) * Math.sin(2*phi)) ]; let base = new Float32Array(27); for(let i = 0; i &lt; 27; i++) base[3*i] = base[3*i+1] = base[3*i+2] = b[i]; return base; } } class SH { /* @param {Array} v expects light direction as [x, y, z] */ static lightWeights(v) { let PI = 3.1415; let A = 0.5*Math.sqrt(3.0/PI); let B = 0.5*Math.sqrt(15/PI); let b = [ 0.5/Math.sqrt(PI), A*v[0], A*v[2], A*v[1], B*v[0]*v[1], B*v[0]*v[2], 0.5*Math.sqrt(5/PI)*(3*v[2]*v[2] - 1), B*v[1]*v[2], 0.5*B*(v[1]*v[1] - v[0]*v[0]) ]; let base = new Float32Array(27); for(let i = 0; i &lt; 27; i++) base[3*i] = base[3*i+1] = base[3*i+2] = b[i]; return base; } } class RBF { /* @param {Array} v expects light direction as [x, y, z] */ static lightWeights(lpos, shader) { let weights = RBF.rbf(lpos, shader); let np = shader.nplanes; let lweights = new Float32Array((np + 1) * 3); for(let p = 0; p &lt; np+1; p++) { for(let k = 0; k &lt; 3; k++) { for(let l = 0; l &lt; weights.length; l++) { let o = shader.baseLightOffset(p, weights[l][0], k); lweights[3*p + k] += weights[l][1]*shader.basis[o]; } } } return lweights; } static rbf(lpos, shader) { let radius = 1/(shader.sigma*shader.sigma); let weights = new Array(shader.ndimensions); //compute rbf weights let totw = 0.0; for(let i = 0; i &lt; weights.length; i++) { let dx = shader.lights[i*3+0] - lpos[0]; let dy = shader.lights[i*3+1] - lpos[1]; let dz = shader.lights[i*3+2] - lpos[2]; let d2 = dx*dx + dy*dy + dz*dz; let w = Math.exp(-radius * d2); weights[i] = [i, w]; totw += w; } for(let i = 0; i &lt; weights.length; i++) weights[i][1] /= totw; //pick only most significant and renormalize let count = 0; totw = 0.0; for(let i = 0; i &lt; weights.length; i++) { if(weights[i][1] &gt; 0.001) { weights[count++] = weights[i]; totw += weights[i][1]; } } weights = weights.slice(0, count); for(let i = 0; i &lt; weights.length; i++) weights[i][1] /= totw; return weights; } } class BLN { static lightWeights(lpos, shader) { let np = shader.nplanes; let s = Math.abs(lpos[0]) + Math.abs(lpos[1]) + Math.abs(lpos[2]); //rotate 45 deg. let x = (lpos[0] + lpos[1])/s; let y = (lpos[1] - lpos[0])/s; x = (x + 1.0)/2.0; y = (y + 1.0)/2.0; x = x*(shader.resolution - 1.0); y = y*(shader.resolution - 1.0); let sx = Math.min(shader.resolution-2, Math.max(0, Math.floor(x))); let sy = Math.min(shader.resolution-2, Math.max(0, Math.floor(y))); let dx = x - sx; let dy = y - sy; //bilinear interpolation coefficients. let s00 = (1 - dx)*(1 - dy); let s10 = dx *(1 - dy); let s01 = (1 - dx)* dy; let s11 = dx * dy; let lweights = new Float32Array((np + 1) * 3); //TODO optimize away basePixel for(let p = 0; p &lt; np+1; p++) { for(let k = 0; k &lt; 3; k++) { let o00 = shader.basePixelOffset(p, sx, sy, k); let o10 = shader.basePixelOffset(p, sx+1, sy, k); let o01 = shader.basePixelOffset(p, sx, sy+1, k); let o11 = shader.basePixelOffset(p, sx+1, sy+1, k); lweights[3*p + k] = s00*shader.basis[o00] + s10*shader.basis[o10] + s01*shader.basis[o01] + s11*shader.basis[o11]; } } return lweights; } } export { ShaderRTI, HSH } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"Skin.js.html":{"id":"Skin.js.html","title":"Source: Skin.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: Skin.js let url = 'skin/skin.svg'; let svg = null; let pad = 5; /** * The static class **Skin** implements some utilities for handling the skin file. * A skin file is a SVG file containing SVG icons that are used by **UIBasic* * for customizing the visual appearance of the user interface (i.e., icons for buttons, menu, toolbar, dialog...). * Each SVG drawing element must be tagged with a 'class' attribute whose name must begin with *openlime-*: * for instance, the HOME icon is a SVG element tagged with `class=\"openlime-home\"`. */ class Skin { /** * Sets the URL of the SVG skin file. By default it is *'skin/skin.svg'*; * @param {string} u The URL of the SVG skin file. */ static setUrl(u) { url = u; } /** * Loads the SVG skin file and converts it into a global DOM SVGElement ready for use in a web page. */ static async loadSvg() { var response = await fetch(url); if (!response.ok) { throw Error(\"Failed loading \" + url + \": \" + response.statusText); return; } let text = await response.text(); let parser = new DOMParser(); svg = parser.parseFromString(text, \"image/svg+xml\").documentElement; } /** * Gets the SVG element with a specific CSS `selector`. * @param {string} selector A CSS selector (e.g. a class name). * @returns {SVGElement} The SVGElement referenced by the selector. */ static async getElement(selector) { if (!svg) await Skin.loadSvg(); return svg.querySelector(selector).cloneNode(true); } /** * Appends the selected SVG element to the `container`. * @param {HTMLElement} container A HTML DOM node. * @param {SVGElement|string} elm An SVGElement or a CSS selector (e.g. a class name). * @returns {SVGElement} A pointer to the SVG icon referenced by the elm. */ static async appendIcon(container, icon) { let element = null; let box = null; if (typeof icon == 'string') { element = await Skin.getElement(icon); icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); icon.appendChild(element); document.body.appendChild(icon); box = element.getBBox(); let tlist = element.transform.baseVal; if (tlist.numberOfItems == 0) tlist.appendItem(icon.createSVGTransform()); tlist.getItem(0).setTranslate(-box.x, -box.y); } else { document.body.appendChild(icon); box = icon.getBBox(); } icon.setAttribute('viewBox', `${-pad} ${-pad} ${box.width + 2 * pad} ${box.height + 2 * pad}`); icon.setAttribute('preserveAspectRatio', 'xMidYMid meet'); container.appendChild(icon); return icon; } } export { Skin } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"TextToSpeechPlayer.js.html":{"id":"TextToSpeechPlayer.js.html","title":"Source: TextToSpeechPlayer.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: TextToSpeechPlayer.js /** * The TextToSpeechPlayer class is responsible for text-to-speech functionality in the application. * It handles voice selection, speech synthesis, and various audio controls. */ class TextToSpeechPlayer { /** * Creates an TextToSpeechPlayer. Additionally, an object literal with TextToSpeechPlayer `options` can be specified. * @param {Object} [options] * @param {string} [options.language='it-IT'] The language for speech synthesis. * @param {number} [options.rate=1.12] The speech rate. * @param {number} [options.volume=1.0] The speech volume. * @param {boolean} [options.cleanText=true] Whether to clean the text before speech synthesis. * @param {number} [options.voiceSelected=-1] The index of the selected voice. */ constructor(options) { Object.assign(this, { language: 'it-IT', rate: 1.0, volume: 1.0, cleanText: true, voiceSelected: -1 }); Object.assign(this, options); this.voice = null; this.isSpeaking = false; this.currentUtterance = null; this.isOfflineCapable = false; this.resumeTimer = null; this.timeoutTimer = null; this.isPaused = false; this.previousVolume = this.volume; } /** * Initializes the TextToSpeechPlayer by loading the voice and checking offline capability. * @returns {Promise&lt;void&gt;} */ async initialize() { try { await this.loadVoice(); this.checkOfflineCapability(); console.log(\"TextToSpeechPlayer initialized successfully\"); console.log(`Offline capable: ${this.isOfflineCapable}`); } catch (error) { console.error(\"Failed to initialize TextToSpeechPlayer:\", error); throw error; } this.setupPageListeners(); } /** * Sets up event listeners for page visibility changes and unload events. * @private */ setupPageListeners() { // For page close/refresh window.addEventListener('beforeunload', () =&gt; { this.stopSpeaking(); }); // For page visibility change (e.g., switching tabs) document.addEventListener('visibilitychange', () =&gt; { if (document.hidden) { this.stopSpeaking(); } }); } /** * Activates the TextToSpeechPlayer. */ activate() { this.isSpeaking = true; } /** * Loads the voice for speech synthesis based on the selected language. * @returns {Promise&lt;SpeechSynthesisVoice&gt;} * @private */ async loadVoice() { console.log(`Loading voice for language: ${this.language}`); return new Promise((resolve, reject) =&gt; { let synth = window.speechSynthesis; const setVoice = () =&gt; { let voices = synth.getVoices(); if (voices.length === 0) { console.warn(`No voices available for this browser`); reject(new Error(`No voices available for this browser`)); } if (this.voiceSelected &gt;= 0) { this.voice = voices[this.voiceSelected]; } else { const firstTwo = this.language.substring(0, 2); this.voice = voices.find(v =&gt; v.lang.startsWith(firstTwo)); } if (this.voice) { console.log(`Voice loaded: ${this.voice.name}`); resolve(this.voice); } else { console.warn(`No suitable voice found for language: ${this.language}`); reject(new Error(`No voice available for ${this.language}`)); } }; if (synth.getVoices().length &gt; 0) { setVoice(); } else { synth.onvoiceschanged = () =&gt; { setVoice(); synth.onvoiceschanged = null; }; // Set a timeout in case onvoiceschanged doesn't fire setTimeout(() =&gt; { if (!this.voice) { console.warn(\"Timeout while waiting for voices to load\"); setVoice(); } }, 1000); } }); } /** * Checks if the selected voice is capable of offline speech synthesis. * @private */ checkOfflineCapability() { if (this.voice) { // If a voice is loaded and it's not marked as a network voice, assume it's offline capable this.isOfflineCapable = !this.voice.localService; } else { this.isOfflineCapable = false; } } /** * Cleans the input text for speech synthesis by removing HTML tags and escape characters. * @param {string} text - The text to clean. * @returns {string} The cleaned text. * @private */ cleanTextForSpeech(text) { // Remove content of any HTML tag with class \"omissis\" (with or without escaped quotes) let cleanedText = text.replace(/&lt;[^&gt;]+class=(\\\"omissis\\\"|\"omissis\")[^&gt;]*&gt;[\\s\\S]*?&lt;\\/[^&gt;]+&gt;/g, \"\"); // Substitute &lt;br&gt; tag with whitespace \" \" cleanedText = cleanedText.replace(/&lt;br\\s*\\/?&gt;/gi, \" \"); // Remove HTML tags cleanedText = cleanedText.replace(/&lt;\\/?[^&gt;]+(&gt;|$)/g, \"\"); // Remove escape characters like \\n, \\t, etc. cleanedText = cleanedText.replace(/\\\\[nrt]/g, \" \"); // Trim leading and trailing whitespace return cleanedText.trim(); } /** * Speaks the provided text using speech synthesis. * @param {string} text - The text to speak. * @returns {Promise&lt;void&gt;} */ async speakText(text) { if (window.speechSynthesis.speaking) { window.speechSynthesis.cancel(); } this.currentUtterance = null; if (!this.voice) { console.error(\"Voice not loaded. Please initialize TextToSpeechPlayer first.\"); return; } if (!this.isOfflineCapable &amp;&amp; !navigator.onLine) { console.error(\"No internet connection and offline speech is not available.\"); return; } this.isSpeaking = true; let cleanedText = text; if (this.cleanText) cleanedText = this.cleanTextForSpeech(text); console.log(\"Attempting to speak:\", cleanedText); if (window.speechSynthesis.speaking) { window.speechSynthesis.cancel(); await new Promise(resolve =&gt; setTimeout(resolve, 100)); } let synth = window.speechSynthesis; this.currentUtterance = new SpeechSynthesisUtterance(cleanedText); this.currentUtterance.lang = this.language; this.currentUtterance.voice = this.voice; this.currentUtterance.rate = this.rate; this.currentUtterance.volume = this.volume; try { await new Promise((resolve, reject) =&gt; { this.currentUtterance.onend = () =&gt; { resolve(); }; this.currentUtterance.onerror = (event) =&gt; { console.error(\"Speech error:\", event); reject(event); }; synth.speak(this.currentUtterance); // Timeout to prevent speech from running indefinitely if it takes too long let maxSpeechTime = cleanedText.length * 800; this.timeoutTimer = setTimeout(() =&gt; { if (synth.speaking &amp;&amp; this.isSpeaking) { console.warn(\"Speech synthesis taking too long. Resetting...\"); synth.cancel(); clearInterval(this.resumeTimer); reject(new Error(\"Speech synthesis timeout\")); } }, maxSpeechTime); // Workaround to resume speech every 10 seconds this.resumeTimer = setInterval(() =&gt; { console.log(speechSynthesis.speaking); if (!speechSynthesis.speaking) { clearInterval(this.resumeTimer); } else if (!this.isPaused) { // Only pause and resume if not manually paused speechSynthesis.pause(); speechSynthesis.resume(); } }, 10000); }); } catch (error) { console.error(\"Error during speech:\", error); } clearTimeout(this.timeoutTimer); this.timeoutTimer = null; clearInterval(this.resumeTimer); this.resumeTimer = null; this.currentUtterance = null; } /** * Pauses or resumes the current speech synthesis. * @param {boolean} enable - True to pause, false to resume. */ pauseSpeaking(enable) { if (!this.currentUtterance) { console.log(\"No speech in progress to pause/resume\"); return; } if (enable &amp;&amp; !this.isPaused) { window.speechSynthesis.pause(); this.isPaused = true; clearInterval(this.resumeTimer); // Clear the resume timer when pausing } else if (!enable &amp;&amp; this.isPaused) { window.speechSynthesis.resume(); this.isPaused = false; // Restart the resume timer this.resumeTimer = setInterval(() =&gt; { if (!speechSynthesis.speaking) { clearInterval(this.resumeTimer); } else { speechSynthesis.pause(); speechSynthesis.resume(); } }, 10000); } } /** * Mutes or unmutes the audio playback. * @param {boolean} enable - True to mute, false to unmute. */ mute(enable) { if (enable) { this.previousVolume = this.volume; this.volume = 0; } else { this.volume = this.previousVolume; } } /** * Stops the current speech synthesis. */ stopSpeaking() { if (this.isSpeaking) { if (window.speechSynthesis.speaking) { window.speechSynthesis.cancel(); } this.currentUtterance = null; clearInterval(this.resumeTimer); this.resumeTimer = null; } this.isSpeaking = false; } } export { TextToSpeechPlayer } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"Tile.js.html":{"id":"Tile.js.html","title":"Source: Tile.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: Tile.js // Tile level x y index ----- tex missing() start/end (tarzoom) ----- time, priority size(byte) /** * A tile represents a single element of a regular grid that subdivides an image. * A tile is identified by its position (`x`, `y`) within the grid and the zoom `level` of the image. * @typedef {Object} Tile * @property {number} level The zoom level of the tile. * @property {number} x x position of the tile in the grid. * @property {number} y y position of the tile in the grid. * @property {number} index Unique tile identifier. * @property {number} start The position of the first byte of the tile in the image dataset (used only for tarzoom and itarzoom image formats). * @property {number} end The position of the last byte of the tile in the image dataset (used only for tarzoom and itarzoom image formats). * @property {number} missing In the case of multi-channel formats (RTI, BRDF), the information content of a tile is distributed over several planes (channels). * `missing` represents the number of pending channel data requests. * @property {Array} tex A array of WebGLTexture (one texture per channel). * @property {time} time Tile creation time (this value is used internally by the cache algorithms). * @property {number} priority The priority of the tile (this value is used internally by the cache algorithms). * @property {number} size The total size of the tile in bytes (this value is used internally by the cache algorithms). */ class Tile { constructor() { Object.assign(this, { index: null, bbox: null, level: null, //used only in LayoutTiles x: null, y: null, w: null, // used only in LayoutImages h: null, // used only in LayoutImages start:null, end:null, tex: [], missing: null, time: null, priority: null, size: null }); } }; export { Tile } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"UIBasic.js.html":{"id":"UIBasic.js.html","title":"Source: UIBasic.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: UIBasic.js import { Skin } from './Skin' import { Util } from './Util' import { Controller2D } from './Controller2D' import { ControllerPanZoom } from './ControllerPanZoom' import { Ruler } from \"./Ruler\" import { ScaleBar } from './ScaleBar' import { addSignals } from './Signals' /** * An Action describes the behaviour of a tool button. * @typedef {Object} UIBasic#Action * @property {string} title The nameof the action. * @property {bool} display Whether to show the action in the toolbar. * @property {string} key The shortcut key. * @property {callback} task The callback executed by the action. */ /** * A MenuEntry describes an entry for the menu. * @typedef {Object} UIBasic#Action * @property {string} title The menu title. * @property {string} section The section title. * @property {string} html A HTML text. * @property {callback} task The callback executed by the action. */ /* Basic viewer for a single layer. * we support actions through buttons: each button style is controlled by classes (trigger), active (if support status) * and custom. * actions supported are: * home: reset the camera * zoomin, zoomout * fullscreen * rotate (45/90 deg rotation option. * light: turn on light changing. * switch layer(s) * lens. * * How the menu works: * Each entry eg: { title: 'Coin 16' } * title: large title * section: smaller title * html: whatever html * button: visually a button, attributes: group, layer, mode * slider: callback(percent) * list: an array of entries. * * Additional attributes: * onclick: a function(event) {} * group: a group of entries where at most one is active * layer: a layer id: will be active if layer is visible * mode: a layer visualization mode, active if it's the current mode. * layer + mode: if both are specified, both must be current for an active. */ /** * **UIBasic** is a flexible and easy-to-use class that implements a complete user interface to bind to the `viewer` * The interface is associated with a CSS file (skin.css) that defines the style of the HTML DOM and a graphic * file (skin.svg) that specifies the geometric characteristics of the tool buttons. * * The class provides a set of default ready-to-use tools (called actions): * * **home** resets the camera. * * **fullscreen** enables the fullscreen mode. * * **layers** displays the layer menu. * * **zoomin** performs a camera zoom-in. * * **zoomout** performs a camera zoom-out. * * **rotate** rotates the camera around the z-axis (by 45-degs steps). * * **light** enables light manipulation. * * **help** displays a help dialog box. * * In the following example a UIBasic interface is created and binded to the `lime` viewer. * The `light` action is disabled, and the `zoomin` and `zoomout` actions are enabled. * ``` * // Creates an User Interface * const ui = new OpenLIME.UIBasic(lime); * * // Removes light from the toolbar * ui.actions.light.display=false; * // Adds zoomin and zoomout to the toolbar * ui.actions.zoomin.display=true; * ui.actions.zoomout.display=true; * ``` */ class UIBasic { /** * Instantiates a UIBasic object. * @param {Viewer} viewer The OpenLIME viewer. * @param {Object} [options] An object literal with UIBasic parameters. * @param {string} options.skin='skin/skin.svg' The file name of the vector image defining the tool buttons. * @param {bool} options.autofit=true Whether the initial position of the camera is set to fit the scene model. * @param {number} options.priority=0 Higher priority controllers are invoked first. * @param {{UIBasic#Action}} options.actions An Object of {@link UIBasic#Action}. A set of default actions are ready to be used. * @param {number} options.pixelSize Spatial resolution: physical size represented by a single pixel in mm * @param {string} options.attribution Some information related to data attribution or credits. * @param {Array&lt;UIBasic#MenuEntry&gt;} options.menu The interface menu structure. * @param {bool} options.enableTooltip=true Whether to enable tool button tooltip. * @param {bool} options.showLightDirections=false Whether to draw light direction vectors. */ constructor(viewer, options) { //we need to know the size of the scene but the layers are not ready. let camera = viewer.camera; Object.assign(this, { viewer: viewer, camera: viewer.camera, skin: 'skin/skin.svg', autoFit: true, //FIXME to be moved in the viewer? //skinCSS: 'skin.css', // TODO: probably not useful actions: { home: { title: 'Home', display: true, key: 'Home', task: (event) =&gt; { if (camera.boundingBox) camera.fitCameraBox(250); } }, fullscreen: { title: 'Fullscreen', display: true, key: 'f', task: (event) =&gt; { this.toggleFullscreen(); } }, layers: { title: 'Layers', display: true, key: 'Escape', task: (event) =&gt; { this.toggleLayers(); } }, zoomin: { title: 'Zoom in', display: false, key: '+', task: (event) =&gt; { camera.deltaZoom(250, 1.25, 0, 0); } }, zoomout: { title: 'Zoom out', display: false, key: '-', task: (event) =&gt; { camera.deltaZoom(250, 1 / 1.25, 0, 0); } }, rotate: { title: 'Rotate', display: false, key: 'r', task: (event) =&gt; { camera.rotate(250, -45); } }, light: { title: 'Light', display: 'auto', key: 'l', task: (event) =&gt; { this.toggleLightController(); } }, ruler: { title: 'Ruler', display: false, task: (event) =&gt; { this.toggleRuler(); } }, help: { title: 'Help', display: false, key: '?', task: (event) =&gt; { this.toggleHelp(this.actions.help); }, html: '&lt;p&gt;Help here!&lt;/p&gt;' }, //FIXME Why a boolean in toggleHelp? snapshot: { title: 'Snapshot', display: false, task: (event) =&gt; { this.snapshot() } }, //FIXME not work! }, postInit: () =&gt; {}, pixelSize: null, unit: null, //FIXME to be used with ruler attribution: null, //image attribution lightcontroller: null, showLightDirections: false, enableTooltip: true, controlZoomMessage: null, //\"Use Ctrl + Wheel to zoom instead of scrolling\" , menu: [] }); Object.assign(this, options); if (this.autoFit) //FIXME Check if fitCamera is triggered only if the layer is loaded. Is updateSize the right event? this.viewer.canvas.addEvent('updateSize', () =&gt; this.viewer.camera.fitCameraBox(0)); this.panzoom = new ControllerPanZoom(this.viewer.camera, { priority: -1000, activeModifiers: [0, 1], controlZoom: this.controlZoomMessage != null }); if (this.controlZoomMessage) this.panzoom.addEvent('nowheel', () =&gt; { this.showOverlayMessage(this.controlZoomMessage); }); this.viewer.pointerManager.onEvent(this.panzoom); //register wheel, doubleclick, pan and pinch // this.viewer.pointerManager.on(\"fingerSingleTap\", { \"fingerSingleTap\": (e) =&gt; { this.showInfo(e); }, priority: 10000 }); /*let element = entry.element; let group = element.getAttribute('data-group'); let layer = element.getAttribute('data-layer'); let mode = element.getAttribute('data-mode'); let active = (layer &amp;&amp; this.viewer.canvas.layers[layer].visible) &amp;&amp; (!mode || this.viewer.canvas.layers[layer].getMode() == mode); entry.element.classList.toggle('active', active); */ this.menu.push({ section: \"Layers\" }); for (let [id, layer] of Object.entries(this.viewer.canvas.layers)) { let modes = [] for (let m of layer.getModes()) { let mode = { button: m, mode: m, layer: id, onclick: () =&gt; { layer.setMode(m); }, status: () =&gt; layer.getMode() == m ? 'active' : '', }; if (m == 'specular' &amp;&amp; layer.shader.setSpecularExp) mode.list = [{ slider: '', oninput: (e) =&gt; { layer.shader.setSpecularExp(e.target.value); } }]; modes.push(mode); } let layerEntry = { button: layer.label || id, onclick: () =&gt; { this.setLayer(layer); }, status: () =&gt; layer.visible ? 'active' : '', layer: id }; if (modes.length &gt; 1) layerEntry.list = modes; if (layer.annotations) { layerEntry.list = []; //setTimeout(() =&gt; { layerEntry.list.push(layer.annotationsEntry()); //this.updateMenu(); //}, 1000); //TODO: this could be a convenience, creating an editor which can be //customized later using layer.editor. //if(layer.editable) // layer.editor = this.editor; } this.menu.push(layerEntry); } let controller = new Controller2D( (x, y) =&gt; { for (let layer of lightLayers) layer.setLight([x, y], 0); if (this.showLightDirections) this.updateLightDirections(x, y); this.emit('lightdirection', [x, y, Math.sqrt(1 - x * x + y * y)]); }, { // TODO: IS THIS OK? It was false before active: false, activeModifiers: [2, 4], control: 'light', onPanStart: this.showLightDirections ? () =&gt; { Object.values(this.viewer.canvas.layers).filter(l =&gt; l.annotations != null).forEach(l =&gt; l.setVisible(false)); this.enableLightDirections(true); } : null, onPanEnd: this.showLightDirections ? () =&gt; { Object.values(this.viewer.canvas.layers).filter(l =&gt; l.annotations != null).forEach(l =&gt; l.setVisible(true)); this.enableLightDirections(false); } : null, relative: true }); controller.priority = 0; this.viewer.pointerManager.onEvent(controller); this.lightcontroller = controller; let lightLayers = []; for (let [id, layer] of Object.entries(this.viewer.canvas.layers)) if (layer.controls.light) lightLayers.push(layer); if (lightLayers.length) { this.createLightDirections(); for (let layer of lightLayers) { controller.setPosition(0.5, 0.5); //layer.setLight([0.5, 0.5], 0); layer.controllers.push(controller); } } if (queueMicrotask) queueMicrotask(() =&gt; { this.init() }); //allows modification of actions and layers before init. else setTimeout(() =&gt; { this.init(); }, 0); } showOverlayMessage(msg, duration = 2000) { if (this.overlayMessage) { clearTimeout(this.overlayMessage.timeout); this.overlayMessage.timeout = setTimeout(() =&gt; this.destroyOverlayMessage(), duration); return; } let background = document.createElement('div'); background.classList.add('openlime-overlaymsg'); background.innerHTML = `&lt;p&gt;${msg}&lt;/p&gt;`; this.viewer.containerElement.appendChild(background); this.overlayMessage = { background, timeout: setTimeout(() =&gt; this.destroyOverlayMessage(), duration) } } destroyOverlayMessage() { this.overlayMessage.background.remove(); this.overlayMessage = null; } /** @ignore */ getMenuLayerEntry(id) { const found = this.menu.find(e =&gt; e.layer == id); return found; } /** @ignore */ createLightDirections() { this.lightDirections = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); this.lightDirections.setAttribute('viewBox', '-100, -100, 200 200'); this.lightDirections.setAttribute('preserveAspectRatio', 'xMidYMid meet'); this.lightDirections.style.display = 'none'; this.lightDirections.classList.add('openlime-lightdir'); for (let x = -1; x &lt;= 1; x++) { for (let y = -1; y &lt;= 1; y++) { let line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); line.pos = [x * 35, y * 35]; //line.setAttribute('data-start', `${x} ${y}`); this.lightDirections.appendChild(line); } } this.viewer.containerElement.appendChild(this.lightDirections); } /** @ignore */ updateLightDirections(lx, ly) { let lines = [...this.lightDirections.children]; for (let line of lines) { let x = line.pos[0]; let y = line.pos[1]; line.setAttribute('x1', 0.6 * x - 25 * 0 * lx); line.setAttribute('y1', 0.6 * y + 25 * 0 * ly); line.setAttribute('x2', x / 0.6 + 60 * lx); line.setAttribute('y2', y / 0.6 - 60 * ly); } } /** @ignore */ enableLightDirections(show) { this.lightDirections.style.display = show ? 'block' : 'none'; } /** @ignore */ init() { (async () =&gt; { document.addEventListener('keydown', (e) =&gt; this.keyDown(e), false); document.addEventListener('keyup', (e) =&gt; this.keyUp(e), false); this.createMenu(); this.updateMenu(); this.viewer.canvas.addEvent('update', () =&gt; this.updateMenu()); if (this.actions.light &amp;&amp; this.actions.light.display === 'auto') this.actions.light.display = true; if (this.skin) await this.loadSkin(); /* TODO: this is probably not needed if(this.skinCSS) await this.loadSkinCSS(); */ this.setupActions(); /* Get pixel size from options if provided or from layer metadata */ if (this.pixelSize) { this.scalebar = new ScaleBar(this.pixelSize, this.viewer); } else if (this.viewer.canvas.layers[Object.keys(this.viewer.canvas.layers)[0]].pixelSize) { let pixelSize = this.viewer.canvas.layers[Object.keys(this.viewer.canvas.layers)[0]].pixelSizePerMM(); this.scalebar = new ScaleBar(pixelSize, this.viewer); } if (this.attribution) { var p = document.createElement('p'); p.classList.add('openlime-attribution'); p.innerHTML = this.attribution; this.viewer.containerElement.appendChild(p); } for (let l of Object.values(this.viewer.canvas.layers)) { this.setLayer(l); break; } if (this.actions.light &amp;&amp; this.actions.light.active) this.toggleLightController(); if (this.actions.layers &amp;&amp; this.actions.layers.active) this.toggleLayers(); this.postInit(); })().catch(e =&gt; { console.log(e); throw Error(\"Something failed\") }); } /** @ignore */ keyDown(e) { } /** @ignore */ keyUp(e) { if (e.target != document.body &amp;&amp; e.target.closest('input, textarea') != null) return; if (e.defaultPrevented) return; for (const a of Object.values(this.actions)) { if ('key' in a &amp;&amp; a.key == e.key) { e.preventDefault(); a.task(e); return; } } } /** @ignore */ async loadSkin() { let toolbar = document.createElement('div'); toolbar.classList.add('openlime-toolbar'); this.viewer.containerElement.appendChild(toolbar); //toolbar manually created with parameters (padding, etc) + css for toolbar positioning and size. if (1) { let padding = 10; let x = 0; let h = 0; for (let [name, action] of Object.entries(this.actions)) { if (action.display !== true) continue; if ('icon' in action) { if (typeof action.icon == 'string') { if (Util.isSVGString(action.icon)) { action.icon = Util.SVGFromString(action.icon); } else { action.icon = await Util.loadSVG(action.icon); } action.icon.classList.add('openlime-button'); } } else { action.icon = '.openlime-' + name; } action.element = await Skin.appendIcon(toolbar, action.icon); if (this.enableTooltip) { let title = document.createElementNS('http://www.w3.org/2000/svg', 'title'); title.textContent = action.title; action.element.appendChild(title); } } } if (0) { //single svg toolbar let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); toolbar.appendChild(svg); ui.toggleLightController(); let x = padding; let h = 0; for (let [name, action] of Object.entries(this.actions)) { if (action.display !== true) continue; let element = skin.querySelector('.openlime-' + name).cloneNode(true); if (!element) continue; svg.appendChild(element); let box = element.getBBox(); h = Math.max(h, box.height); let tlist = element.transform.baseVal; if (tlist.numberOfItems == 0) tlist.appendItem(svg.createSVGTransform()); tlist.getItem(0).setTranslate(-box.x + x, -box.y); x += box.width + padding; } svg.setAttribute('viewBox', `0 0 ${x} ${h}`); svg.setAttribute('preserveAspectRatio', 'xMidYMid meet'); } //TODO: not needed, probably. Toolbar build from the skin directly if (0) { toolbar.appendChild(skin); let w = skin.getAttribute('width'); let h = skin.getAttribute('height'); let viewbox = skin.getAttribute('viewBox'); if (!viewbox) skin.setAttribute('viewBox', `0 0 ${w} ${h}`); } } /** @ignore */ setupActions() { for (let [name, action] of Object.entries(this.actions)) { let element = action.element; if (!element) continue; // let pointerManager = new PointerManager(element); // pointerManager.onEvent({ fingerSingleTap: action.task, priority: -2000 }); element.addEventListener('click', (e) =&gt; { action.task(e); e.preventDefault(); }); } let items = document.querySelectorAll('.openlime-layers-button'); for (let item of items) { let id = item.getAttribute('data-layer'); if (!id) continue; item.addEventListener('click', () =&gt; { this.setLayer(this.viewer.layers[id]); }); } } //we need the concept of active layer! so we an turn on and off light. /** @ignore */ toggleLightController(on) { let div = this.viewer.containerElement; let active = div.classList.toggle('openlime-light-active', on); this.lightActive = active; for (let layer of Object.values(this.viewer.canvas.layers)) for (let c of layer.controllers) if (c.control == 'light') { c.active = true; c.activeModifiers = active ? [0, 2, 4] : [2, 4]; //nothing, shift and alt } } /** @ignore */ toggleFullscreen() { let canvas = this.viewer.canvasElement; let div = this.viewer.containerElement; let active = div.classList.toggle('openlime-fullscreen-active'); if (!active) { var request = document.exitFullscreen || document.webkitExitFullscreen || document.mozCancelFullScreen || document.msExitFullscreen; request.call(document); document.querySelector('.openlime-scale &gt; line'); this.viewer.resize(canvas.offsetWidth, canvas.offsetHeight); } else { var request = div.requestFullscreen || div.webkitRequestFullscreen || div.mozRequestFullScreen || div.msRequestFullscreen; request.call(div); } this.viewer.resize(canvas.offsetWidth, canvas.offsetHeight); } /** @ignore */ toggleRuler() { if (!this.ruler) { this.ruler = new Ruler(this.viewer, this.pixelSize); this.viewer.pointerManager.onEvent(this.ruler); } if (!this.ruler.enabled) this.ruler.start(); else this.ruler.end(); } /** @ignore */ toggleHelp(help, on) { if (!help.dialog) { help.dialog = new UIDialog(this.viewer.containerElement, { modal: true, class: 'openlime-help-dialog' }); help.dialog.setContent(help.html); } else help.dialog.toggle(on); } /** @ignore */ snapshot() { var e = document.createElement('a'); e.setAttribute('href', this.viewer.canvas.canvasElement.toDataURL()); e.setAttribute('download', 'snapshot.png'); e.style.display = 'none'; document.body.appendChild(e); e.click(); document.body.removeChild(e); } /* Layer management */ /** @ignore */ createEntry(entry) { if (!('id' in entry)) entry.id = 'entry_' + (this.entry_count++); let id = `id=\"${entry.id}\"`; let tooltip = 'tooltip' in entry ? `title=\"${entry.tooltip}\"` : ''; let classes = 'classes' in entry ? entry.classes : ''; let html = ''; if ('title' in entry) { html += `&lt;h2 ${id} class=\"openlime-title ${classes}\" ${tooltip}&gt;${entry.title}&lt;/h2&gt;`; } else if ('section' in entry) { html += `&lt;h3 ${id} class=\"openlime-section ${classes}\" ${tooltip}&gt;${entry.section}&lt;/h3&gt;`; } else if ('html' in entry) { html += `&lt;div ${id} class=\"${classes}\"&gt;${entry.html}&lt;/div&gt;`; } else if ('button' in entry) { let group = 'group' in entry ? `data-group=\"${entry.group}\"` : ''; let layer = 'layer' in entry ? `data-layer=\"${entry.layer}\"` : ''; let mode = 'mode' in entry ? `data-mode=\"${entry.mode}\"` : ''; html += `&lt;a href=\"#\" ${id} ${group} ${layer} ${mode} ${tooltip} class=\"openlime-entry ${classes}\"&gt;${entry.button}&lt;/a&gt;`; } else if ('slider' in entry) { let value = ('value' in entry) ? entry['value'] : 50; html += `&lt;input type=\"range\" min=\"1\" max=\"100\" value=\"${value}\" class=\"openlime-slider ${classes}\" ${id}&gt;`; } if ('list' in entry) { let ul = `&lt;div class=\"openlime-list ${classes}\"&gt;`; for (let li of entry.list) ul += this.createEntry(li); ul += '&lt;/div&gt;'; html += ul; } return html; } /** @ignore */ addEntryCallbacks(entry) { entry.element = this.layerMenu.querySelector('#' + entry.id); if (entry.onclick) entry.element.addEventListener('click', (e) =&gt; { entry.onclick(); //this.updateMenu(); }); if (entry.oninput) entry.element.addEventListener('input', entry.oninput); if (entry.oncreate) entry.oncreate(); if ('list' in entry) for (let e of entry.list) this.addEntryCallbacks(e); } /** @ignore */ updateEntry(entry) { let status = entry.status ? entry.status() : ''; entry.element.classList.toggle('active', status == 'active'); if ('list' in entry) for (let e of entry.list) this.updateEntry(e); } /** @ignore */ updateMenu() { for (let entry of this.menu) this.updateEntry(entry); } /** @ignore */ createMenu() { this.entry_count = 0; let html = `&lt;div class=\"openlime-layers-menu\"&gt;`; for (let entry of this.menu) { html += this.createEntry(entry); } html += '&lt;/div&gt;'; let template = document.createElement('template'); template.innerHTML = html.trim(); this.layerMenu = template.content.firstChild; this.viewer.containerElement.appendChild(this.layerMenu); for (let entry of this.menu) { this.addEntryCallbacks(entry); } /* for(let li of document.querySelectorAll('[data-layer]')) li.addEventListener('click', (e) =&gt; { this.setLayer(this.viewer.canvas.layers[li.getAttribute('data-layer')]); }); */ } /** @ignore */ toggleLayers() { this.layerMenu.classList.toggle('open'); } /** @ignore */ setLayer(layer_on) { if (typeof layer_on == 'string') layer_on = this.viewer.canvas.layers[layer_on]; if (layer_on.overlay) { //just toggle layer_on.setVisible(!layer_on.visible); } else { for (let layer of Object.values(this.viewer.canvas.layers)) { if (layer.overlay) continue; layer.setVisible(layer == layer_on); for (let c of layer.controllers) { if (c.control == 'light') c.active = this.lightActive &amp;&amp; layer == layer_on; } } } this.updateMenu(); this.viewer.redraw(); } /** @ignore */ closeLayersMenu() { this.layerMenu.style.display = 'none'; } } /** * A **UIDialog** is a top-level window used for communications with the user. It may be modal or modeless. * The content of the dialog can be either an HTML text or a pre-built DOM element. * When hidden, a dialog emits a 'closed' event. */ class UIDialog { //FIXME standalone class /** * Instatiates a UIDialog object. * @param {HTMLElement} container The HTMLElement on which the dialog is focused * @param {Object} [options] An object literal with UIDialog parameters. * @param {bool} options.modal Whether the dialog is modal. */ constructor(container, options) { Object.assign(this, { dialog: null, content: null, container: container, modal: false, class: null, visible: false, backdropEvents: true }, options); this.create(); } /** @ignore */ create() { let background = document.createElement('div'); background.classList.add('openlime-dialog-background'); let dialog = document.createElement('div'); dialog.classList.add('openlime-dialog'); if (this.class) dialog.classList.add(this.class); (async () =&gt; { let close = await Skin.appendIcon(dialog, '.openlime-close'); close.classList.add('openlime-close'); close.addEventListener('click', () =&gt; this.hide()); //content.appendChild(close); })(); // let close = Skin.appendIcon(dialog, '.openlime-close'); // close.classList.add('openlime-close'); // close.addEventListener('click', () =&gt; this.hide()); let content = document.createElement('div'); content.classList.add('openlime-dialog-content'); dialog.append(content); if (this.modal) { //FIXME backdrown =&gt; backdrop if (this.backdropEvents) background.addEventListener('click', (e) =&gt; { if (e.target == background) this.hide(); }); background.appendChild(dialog); this.container.appendChild(background); this.element = background; } else { this.container.appendChild(dialog); this.element = dialog; } this.dialog = dialog; this.content = content; this.hide(); } /** * Sets the content of the dialog. * @param {(string|HTMLElement)} html The content of the dialog (a HTML text or element). */ setContent(html) { if (typeof (html) == 'string') this.content.innerHTML = html; else this.content.replaceChildren(html); } /** * Shows the dialog. */ show() { this.element.classList.remove('hidden'); this.visible = true; } /** * Hides the dialog. */ hide() { /** * The event is fired when the dialog is closed. * @event UIDialog#closed */ this.element.classList.add('hidden'); this.visible = false; this.emit('closed'); } /** * Adds fading effect to the dialog. * @param {bool} on Whether the fading effect is enabled. */ fade(on) { //FIXME Does it work? this.element.classList.toggle('fading'); } /** * Toggles the display of the dialog. * @param {bool} force Whether to turn the dialog into a one way-only operation. */ toggle(force) { //FIXME Why not remove force? this.element.classList.toggle('hidden', force); this.visible = !this.visible; //FIXME not in sync with 'force' } } addSignals(UIDialog, 'closed'); addSignals(UIBasic, 'lightdirection'); export { UIBasic, UIDialog } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"Viewer.js.html":{"id":"Viewer.js.html","title":"Source: Viewer.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: Viewer.js import { Canvas } from './Canvas.js' import { Camera } from './Camera.js' import { PointerManager } from './PointerManager.js' import { Controller } from './Controller.js'; import { addSignals } from './Signals.js' /** **Viewer** is the central class of the OpenLIME framework. It is used to create a viewer on a web page and manipulate it. * In the following example, after instantiating a Viewer, a LayerImage is added to it. * ``` * // Create an OpenLIME canvas into .openlime * const lime = new OpenLIME.Viewer('.openlime'); * * // Create an image layer and add it to the canvans * const layer = new OpenLIME.Layer({ * layout: 'image', * type: 'image', * url: '../../assets/lime/image/lime.jpg' * }); * lime.addLayer('Base', layer); * * // Access to internal structures * const camera = lime.camera; * const canvas = lime.canvas; * const layers = canvas.layers; * ``` */ class Viewer { /** * Instantiates a viewer object given the `div` element or a DOM selector of a `div` element. * Additionally, an object literal with Viewer `options` can be specified. * The class creates the canvas, enables the WebGL context and takes care of the content redrawing when needed. * Viewer is the main class of the OpenLIME framework. It allows access to all the internal structures that make up the system. * * @param {(HTMLElement|string)} div A DOM element or a selector (es. '#openlime' or '.openlime'). * @param {Object} [options] An object literal describing the viewer content. * @param {color} options.background CSS style for background (it overwrites CSS if present). * @param {bool} options.autofit=true Whether the initial position of the camera is set to fit the scene model. */ constructor(div, options) { Object.assign(this, { background: null, autofit: true, canvas: {}, camera: new Camera(), }); if (typeof (div) == 'string') div = document.querySelector(div); if (!div) throw \"Missing element parameter\"; Object.assign(this, options); if (this.background) div.style.background = this.background; this.containerElement = div; this.canvasElement = div.querySelector('canvas'); if (!this.canvasElement) { this.canvasElement = document.createElement('canvas'); div.prepend(this.canvasElement); } this.overlayElement = document.createElement('div'); this.overlayElement.classList.add('openlime-overlay'); this.containerElement.appendChild(this.overlayElement); this.canvas = new Canvas(this.canvasElement, this.overlayElement, this.camera, this.canvas); this.canvas.addEvent('update', () =&gt; { this.redraw(); }); if (this.autofit) this.canvas.addEvent('updateSize', () =&gt; this.camera.fitCameraBox(0)); this.pointerManager = new PointerManager(this.overlayElement); this.canvasElement.addEventListener('contextmenu', (e) =&gt; { e.preventDefault(); return false; }); let resizeobserver = new ResizeObserver(entries =&gt; { for (let entry of entries) { this.resize(entry.contentRect.width, entry.contentRect.height); } }); resizeobserver.observe(this.canvasElement); this.resize(this.canvasElement.clientWidth, this.canvasElement.clientHeight); } /** * Adds a device event controller to the viewer. * @param {Controller} controller An OpenLIME controller. */ addController(controller) { this.pointerManager.onEvent(controller); } /** Adds the given layer to the Viewer. * @param {string} id A label to identify the layer. * @param {Layer} layer An OpenLIME Layer object. */ addLayer(id, layer) { this.canvas.addLayer(id, layer); this.redraw(); } /** Remove the given layer from the Viewer. * @param {(Layer|string)} layer An OpenLIME Layer or a Layer identifier. */ removeLayer(layer) { if (typeof (layer) == 'string') layer = this.canvas.layers[layer]; if (layer) { this.canvas.removeLayer(layer); this.redraw(); } } /* Resizes the canvas (and the overlay) and triggers a redraw. * This method is internal and used by a ResizeObserver of the Canvas size. * @param {number} width A width value defined in CSS pixel. * @param {number} height A height value defined in CSS pixel. */ /** * @ignore */ resize(width, height) { if(width == 0 || height == 0) return; // Test with retina display! this.canvasElement.width = width * window.devicePixelRatio; this.canvasElement.height = height * window.devicePixelRatio; let view = { x: 0, y: 0, dx: width, dy: height, w: width, h: height }; this.camera.setViewport(view); this.canvas.updateSize(); this.emit('resize', view); this.canvas.prefetch(); this.redraw(); } /** * Schedules a redrawing. */ redraw() { if (this.animaterequest) return; this.animaterequest = requestAnimationFrame((time) =&gt; { this.draw(time); }); this.requestTime = performance.now(); } /* * Renders the canvas content. * This method is internal. * @param {time} time The current time (a DOMHighResTimeStamp variable, as in `performance.now()`). */ /** * @ignore */ draw(time) { if (!time) time = performance.now(); this.animaterequest = null; let elapsed = performance.now() - this.requestTime; this.canvas.addRenderTiming(elapsed); let viewport = this.camera.viewport; let transform = this.camera.getCurrentTransform(time); let done = this.canvas.draw(time); if (!done) this.redraw(); this.emit('draw'); } } addSignals(Viewer, 'draw'); addSignals(Viewer, 'resize'); //args: viewport export { Viewer }; × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"global.html":{"id":"global.html","title":"Global","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Global Members &lt;constant&gt; RenderingMode :string Defines rendering modes for lens and background areas. Type: string Properties: Name Type Default Description draw string \"fill:white;\" Shows content in the specified area hide string \"fill:black;\" Hides content in the specified area draw string fill:white; hide string fill:black; Source: LensDashboard.js, line 16 Methods simplify(points, tolerance) Simplifies a polyline via the Douglas-Peucker algorithm. Parameters: Name Type Description points Array.&lt;Point&gt; A polyline. tolerance * The tolerance is the maximum distance between the original polyline and the simplified polyline. It has the same metric as the point coordinates. Source: Simplify.js, line 19 Returns: The simplified polyline. Type Array.&lt;Point&gt; smooth(points, cornerThres, match) Uses Bezier Curve to smooth a polyline Parameters: Name Type Description points Array.&lt;Point&gt; A polyline. cornerThres number The angular threshold (in degrees). Two segments are smoothed if their angle is less then the threshold. match bool Whether the smoothed curve should traverse the original points or approximate them. Source: Simplify.js, line 82 Returns: The smoothed polyline. Type Array.&lt;BezierPoint&gt; smoothToPath(smoothed) Converts a smoothed polyline into an SVG path. Parameters: Name Type Description smoothed Array.&lt;BezierPoint&gt; The smoothed polyline. Source: Simplify.js, line 181 Returns: The SVG path. Type Array.&lt;String&gt; taskCallback(e) Callback function fired by a 'click' event on a lens dashboard element. Parameters: Name Type Description e Event The DOM event. Source: LensDashboard.js, line 21 Type Definitions Annotation Type: Object Properties: Name Type Argument Description id string Unique identifier label string Annotation title description string Detailed description class string Class name for styling/categorization publish number Publication status (0 or 1) data Object Custom data object elements Array.&lt;SVGElement&gt; SVG elements composing the annotation state Object &lt;optional&gt; Camera and viewer state Source: EditorSvgAnnotation.js, line 7 AnnotationClass Type: Object Properties: Name Type Description stroke string CSS color for SVG elements (lines, text, outlines) label string Display name for the class Source: LayerSvgAnnotation.js, line 7 AnnotationClasses Map of class names to their visual properties Type: Object.&lt;string, AnnotationClass&gt; Source: LayerSvgAnnotation.js, line 13 APoint A [x, y] point. Properties: Name Type Description p.0 number The x-coordinate. p.1 number The y-coordinate. Source: Transform.js, line 3 BezierPoint A [x, y, xc, yc] point. Properties: Name Type Description p.0 number The x-coordinate. p.1 number The y-coordinate. p.2 number The x-coordinate of the control point. p.3 number The y-coordinate of the control point. Source: Simplify.js, line 3 crudCallback(annotation) Callback for create/update/delete operations on annotations Parameters: Name Type Description annotation Annotation The annotation being operated on Source: EditorSvgAnnotation.js, line 19 Returns: Success status of the operation Type boolean customDataCallback(annotation) Callback to customize the annotation data object Parameters: Name Type Description annotation Annotation The annotation being modified Source: EditorSvgAnnotation.js, line 32 customStateCallback(annotation) Callback to customize state information saved with annotations Parameters: Name Type Description annotation Annotation The annotation being modified Source: EditorSvgAnnotation.js, line 26 Focus Type: Object Properties: Name Type Description position Object Lens center position in dataset coordinates Properties Name Type Description x number X coordinate y number Y coordinate radius number Lens radius in dataset units Source: FocusContext.js, line 14 LayerAnnotationImageOptions Type: Object Properties: Name Type Argument Default Description url string &lt;optional&gt; URL to the annotations JSON file path string &lt;optional&gt; Base path for annotation image files format string &lt;optional&gt; 'vec4' Raster format for image data Source: LayerAnnotationImage.js, line 7 LayerAnnotationOptions Type: Object Properties: Name Type Argument Default Description style string &lt;optional&gt; CSS styles for annotation rendering annotations string | Array.&lt;Annotation&gt; &lt;optional&gt; [] URL of JSON annotation data or array of annotations overlay boolean &lt;optional&gt; true Whether annotations render as overlay selected Set.&lt;string&gt; &lt;optional&gt; new Set() Set of selected annotation IDs annotationsListEntry Object &lt;optional&gt; null UI entry for annotations list Source: LayerAnnotation.js, line 5 LayerBRDFOptions Type: Object Properties: Name Type Argument Default Description channels Object Required channels for BRDF rendering Properties Name Type Description kd string URL to diffuse color map (required) ks string URL to specular color map (optional) normals string URL to normal map (required) gloss string URL to glossiness/roughness map (optional) colorspaces Object &lt;optional&gt; Color space definitions for material properties Properties Name Type Argument Default Description kd 'linear' | 'srgb' &lt;optional&gt; 'linear' Color space for diffuse map ks 'linear' | 'srgb' &lt;optional&gt; 'linear' Color space for specular map brightness number &lt;optional&gt; 1.0 Overall brightness adjustment gamma number &lt;optional&gt; 2.2 Gamma correction value alphaLimits Array.&lt;number&gt; &lt;optional&gt; [0.01, 0.5] Range for glossiness/roughness monochromeMaterial Array.&lt;number&gt; &lt;optional&gt; [0.80, 0.79, 0.75] RGB color for monochrome rendering kAmbient number &lt;optional&gt; 0.1 Ambient light coefficient Source: LayerBRDF.js, line 5 LayerCombinerOptions Type: Object Properties: Name Type Argument Default Description layers Array.&lt;Layer&gt; Array of layers to be combined (required) shaders Object.&lt;string, Shader&gt; &lt;optional&gt; Map of available shaders type string &lt;optional&gt; 'combiner' Must be 'combiner' when using Layer factory visible boolean &lt;optional&gt; true Whether combined output is visible Source: LayerCombiner.js, line 3 LayerDStretchOptions Type: Object Properties: Name Type Argument Default Description url string URL to the image to be processed (required) eulerRotation Array.&lt;number&gt; &lt;optional&gt; [0,0,0] Initial Euler rotation angles worldRotation number &lt;optional&gt; 0 Global rotation offset for canvas/layer Source: LayerDstretch.js, line 6 LayerImageOptions Type: Object Properties: Name Type Argument Default Description url string URL of the image to display (required) layout string | Layout &lt;optional&gt; 'image' Layout format for image display format string &lt;optional&gt; 'vec4' Image data format for WebGL processing type string &lt;optional&gt; 'image' Must be 'image' when using Layer factory Source: LayerImage.js, line 5 LayerLensOptions Type: Object Properties: Name Type Argument Default Description overlay boolean &lt;optional&gt; true Whether the lens renders as an overlay radius number &lt;optional&gt; 100 Initial lens radius in pixels borderColor Array.&lt;number&gt; &lt;optional&gt; [0.078, 0.078, 0.078, 1] RGBA border color borderWidth number &lt;optional&gt; 12 Border width in pixels borderEnable boolean &lt;optional&gt; false Whether to show lens border dashboard Object &lt;optional&gt; null Dashboard UI component for lens control camera Camera Camera instance (required) Source: LayerLens.js, line 6 LayerMaskedImageOptions Type: Object Properties: Name Type Argument Default Description url string URL of the masked image to display (required) format string &lt;optional&gt; 'vec4' Image data format type string &lt;optional&gt; 'maskedimage' Must be 'maskedimage' when using Layer factory Source: LayerMaskedImage.js, line 5 LayerNeuralRTIOptions Type: Object Properties: Name Type Argument Default Description url string URL to the Neural RTI configuration JSON layout Layout Layout system for image loading convergenceSpeed number &lt;optional&gt; 1.2 Speed of quality convergence maxTiles number &lt;optional&gt; 40 Maximum number of tiles to process colorspace string &lt;optional&gt; 'rgb' Color space for processing Source: LayerNeuralRTI.js, line 8 LayerOptions Type: Object Properties: Name Type Argument Default Description layout string | Layout &lt;optional&gt; 'image' Layout/format of input raster images type string &lt;optional&gt; Identifier for specific derived layer class id string &lt;optional&gt; Unique layer identifier label string &lt;optional&gt; Display label for UI (defaults to id) transform Transform &lt;optional&gt; Transform from layer to canvas coordinates visible boolean &lt;optional&gt; true Whether layer should be rendered zindex number &lt;optional&gt; 0 Stack order for rendering (higher = on top) overlay boolean &lt;optional&gt; false Whether layer renders in overlay mode prefetchBorder number &lt;optional&gt; 1 Tile prefetch threshold in tile units mipmapBias number &lt;optional&gt; 0.4 Texture resolution selection bias (0=highest, 1=lowest) shaders Object.&lt;string, Shader&gt; &lt;optional&gt; Map of available shaders controllers Array.&lt;Controller&gt; &lt;optional&gt; Array of active UI controllers sourceLayer Layer &lt;optional&gt; Layer to share tiles with pixelSize number &lt;optional&gt; 0.0 Physical size of a pixel in mm Source: Layer.js, line 8 LayerRTIOptions Type: Object Properties: Name Type Argument Default Description url string URL to RTI info.json file (required) layout string Layout type: 'image', 'deepzoom', 'google', 'iiif', 'zoomify', 'tarzoom', 'itarzoom' normals boolean &lt;optional&gt; false Whether to load normal maps server string &lt;optional&gt; IIP server URL (for IIP layout) worldRotation number &lt;optional&gt; 0 Global rotation offset Source: LayerRTI.js, line 6 LayerSvgAnnotationOptions Type: Object Properties: Name Type Argument Default Description classes AnnotationClasses Annotation class definitions with styles onClick function &lt;optional&gt; Callback for annotation click events (param: selected annotation) shadow boolean &lt;optional&gt; true Whether to use Shadow DOM for SVG elements overlayElement HTMLElement &lt;optional&gt; Container for SVG overlay style string &lt;optional&gt; Additional CSS styles for annotations annotationUpdate function &lt;optional&gt; Custom update function for annotations Source: LayerSvgAnnotation.js, line 18 LayoutOptions Type: Object Properties: Name Type Argument Default Description width number &lt;optional&gt; Image width (required for google layout) height number &lt;optional&gt; Image height (required for google layout) suffix string &lt;optional&gt; 'jpg' Tile file extension subdomains string &lt;optional&gt; 'abc' Available subdomains for URL templates Source: Layout.js, line 36 LayoutType Supported image format types: image: Single-resolution web images (jpg, png, etc.) deepzoom: Microsoft Deep Zoom with root tile &gt; 1px deepzoom1px: Microsoft Deep Zoom with 1px root tile google: Google Maps tiling scheme zoomify: Zoomify format iiif: International Image Interoperability Framework tarzoom: OpenLIME tar-based tiling itarzoom: OpenLIME indexed tar-based tiling Type: 'image' | 'deepzoom' | 'deepzoom1px' | 'google' | 'zoomify' | 'iiif' | 'tarzoom' | 'itarzoom' Source: Layout.js, line 23 Point A {x, y} point. Type: Object Properties: Name Type Description x number The x-coordinate. y number The y-coordinate. Source: Transform.js, line 10 selectedCallback(annotation) Callback executed when an annotation is selected in the UI Parameters: Name Type Description annotation Annotation The selected annotation Source: EditorSvgAnnotation.js, line 38 Tile Type: Object Properties: Name Type Argument Description level number Zoom level in the image pyramid x number Horizontal position in tile grid y number Vertical position in tile grid index number Unique tile identifier start number &lt;optional&gt; Starting byte position in dataset (for tar formats) end number &lt;optional&gt; Ending byte position in dataset (for tar formats) missing number Number of pending channel data requests tex Array.&lt;WebGLTexture&gt; Array of textures (one per channel) time number Tile creation timestamp for cache management priority number Loading priority for cache management size number Total tile size in bytes Source: Layout.js, line 8 Tile Represents a single element of a regular grid that subdivides an image. Tiles are identified by their position (x, y) within the grid and the zoom level. Type: Object Properties: Name Type Argument Description level number The zoom level of the tile (0 is top/most zoomed out) x number Horizontal position of the tile in the grid at the given level y number Vertical position of the tile in the grid at the given level index number Unique identifier for the tile across all levels start number &lt;optional&gt; Starting byte position in the dataset (used for tarzoom/itarzoom formats) end number &lt;optional&gt; Ending byte position in the dataset (used for tarzoom/itarzoom formats) missing number For multi-channel formats (RTI, BRDF), tracks pending channel data requests tex Array.&lt;WebGLTexture&gt; Array of WebGL textures (one per channel) time number Timestamp of tile creation (used by cache algorithms) priority number Tile priority for cache management (lower = higher priority) size number Total size of the tile in bytes (used by cache algorithms) Source: LayoutTiles.js, line 7 Tile A tile represents a single element of a regular grid that subdivides an image. A tile is identified by its position (x, y) within the grid and the zoom level of the image. Type: Object Properties: Name Type Description level number The zoom level of the tile. x number x position of the tile in the grid. y number y position of the tile in the grid. index number Unique tile identifier. start number The position of the first byte of the tile in the image dataset (used only for tarzoom and itarzoom image formats). end number The position of the last byte of the tile in the image dataset (used only for tarzoom and itarzoom image formats). missing number In the case of multi-channel formats (RTI, BRDF), the information content of a tile is distributed over several planes (channels). missing represents the number of pending channel data requests. tex Array A array of WebGLTexture (one texture per channel). time time Tile creation time (this value is used internally by the cache algorithms). priority number The priority of the tile (this value is used internally by the cache algorithms). size number The total size of the tile in bytes (this value is used internally by the cache algorithms). Source: Tile.js, line 3 TileDescriptor Properties expected in tile descriptors: Type: Object Properties: Name Type Argument Description visible boolean Whether the tile should be rendered region Object Position and dimensions of the tile Properties Name Type Description x number X coordinate of tile's top-left corner y number Y coordinate of tile's top-left corner w number Width of the tile h number Height of the tile image string URL or path to the tile's image publish number &lt;optional&gt; Publication status (1 = published) Source: LayoutTileImages.js, line 12 updatePosition(x, y) Callback for position updates. Parameters: Name Type Description x number X coordinate in the range [-1, 1] y number Y coordinate in the range [-1, 1] Source: Controller2D.js, line 4 Viewport Defines a rectangular viewing region inside a canvas area. Type: Object Properties: Name Type Description x number X-coordinate of the lower-left corner y number Y-coordinate of the lower-left corner dx number Width of the viewport dy number Height of the viewport w number Total canvas width h number Total canvas height Source: Camera.js, line 5 Viewport Type: Object Properties: Name Type Description x number Viewport x position y number Viewport y position dx number Viewport horizontal offset dy number Viewport vertical offset w number Viewport width h number Viewport height Source: FocusContext.js, line 4 Events Layout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computed Source: LayoutTiles.js, line 736 Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmatically Source: LayoutTileImages.js, line 338 Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computed Source: LayoutTiles.js, line 745 Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computed Source: LayoutTileImages.js, line 346 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"modules.list.html":{"id":"modules.list.html","title":"Modules","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Modules Classes Annotation AudioPlayer BoundingBox Camera Canvas Color Colormap ColormapLegend Controller Controller2D ControllerFocusContext ControllerLens ControllerPanZoom CoordinateSystem Draggable EditorSvgAnnotation FocusContext Layer LayerAnnotation LayerAnnotationImage LayerBRDF LayerCombiner LayerDstretch LayerImage LayerLens LayerMaskedImage LayerNeuralRTI LayerRTI LayerSvgAnnotation Layout LayoutTileImages LayoutTiles LensDashboard LensDashboardNavigator LensDashboardNavigatorRadial LightSphereController PointerManager Raster Shader ShaderBRDF ShaderCombiner ShaderNeural ShaderRTI Skin TextToSpeechPlayer Transform UIBasic UIDialog Viewer Namespaces Cache Events update The event is fired when the camera target is changed. Source: Camera.js, line 135 update The event is fired when a uniform shader variable is changed. Source: Shader.js, line 130 ready Fired when all layers are initialized and ready to display. Source: Canvas.js, line 311 update Fired when canvas content is updated (layer changes, camera moves). Source: Canvas.js, line 301 updateSize Fired when canvas or layout size changes. Source: Canvas.js, line 306 ready The event is fired when a layer is initialized. Source: Layer.js, line 231 update The event is fired if a redraw is needed. Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: LayerAnnotation#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: LayerAnnotation#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: LayerImage#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: LayerImage#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: LayerCombiner#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: LayerCombiner#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: LayerAnnotation#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: LayerAnnotation#event:update Source: Layer.js, line 235 ready The event is fired when a layout is ready to be drawn(the single-resolution image is downloaded or the multi-resolution structure has been initialized). Source: Layout.js, line 158 ready The event is fired when a layout is ready to be drawn(the single-resolution image is downloaded or the multi-resolution structure has been initialized). Source: LayoutTiles.js, line 138 updateSize The event is fired when a layout size is modified (and the scene extension must be recomputed at canvas level). Source: LayoutTiles.js, line 234 Layout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computed Source: LayoutTiles.js, line 736 Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmatically Source: LayoutTileImages.js, line 338 Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computed Source: LayoutTiles.js, line 745 Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computed Source: LayoutTileImages.js, line 346 ready The event is fired when a layout is ready to be drawn(the single-resolution image is downloaded or the multi-resolution structure has been initialized). Inherited From: Layout#event:ready Overrides: Layout#event:ready Source: Layout.js, line 158 updateSize The event is fired when a layout size is modified (and the scene extension must be recomputed at canvas level). Inherited From: Layout#event:updateSize Overrides: Layout#event:updateSize Source: LayoutTiles.js, line 234 ready The event is fired when a layout is ready to be drawn(the single-resolution image is downloaded or the multi-resolution structure has been initialized). Inherited From: Layout#event:ready Overrides: Layout#event:ready Source: Layout.js, line 158 updateSize The event is fired when a layout size is modified (and the scene extension must be recomputed at canvas level). Inherited From: Layout#event:updateSize Overrides: Layout#event:updateSize Source: LayoutTiles.js, line 234 closed The event is fired when the dialog is closed. Source: UIBasic.js, line 773 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"classes.list.html":{"id":"classes.list.html","title":"Classes","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Classes Classes Annotation AudioPlayer BoundingBox Camera Canvas Color Colormap ColormapLegend Controller Controller2D ControllerFocusContext ControllerLens ControllerPanZoom CoordinateSystem Draggable EditorSvgAnnotation FocusContext Layer LayerAnnotation LayerAnnotationImage LayerBRDF LayerCombiner LayerDstretch LayerImage LayerLens LayerMaskedImage LayerNeuralRTI LayerRTI LayerSvgAnnotation Layout LayoutTileImages LayoutTiles LensDashboard LensDashboardNavigator LensDashboardNavigatorRadial LightSphereController PointerManager Raster Shader ShaderBRDF ShaderCombiner ShaderNeural ShaderRTI Skin TextToSpeechPlayer Transform UIBasic UIDialog Viewer Namespaces Cache Events update The event is fired when the camera target is changed. Source: Camera.js, line 135 update The event is fired when a uniform shader variable is changed. Source: Shader.js, line 130 ready Fired when all layers are initialized and ready to display. Source: Canvas.js, line 311 update Fired when canvas content is updated (layer changes, camera moves). Source: Canvas.js, line 301 updateSize Fired when canvas or layout size changes. Source: Canvas.js, line 306 ready The event is fired when a layer is initialized. Source: Layer.js, line 231 update The event is fired if a redraw is needed. Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: LayerAnnotation#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: LayerAnnotation#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: LayerImage#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: LayerImage#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: LayerCombiner#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: LayerCombiner#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: LayerAnnotation#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: LayerAnnotation#event:update Source: Layer.js, line 235 ready The event is fired when a layout is ready to be drawn(the single-resolution image is downloaded or the multi-resolution structure has been initialized). Source: Layout.js, line 158 ready The event is fired when a layout is ready to be drawn(the single-resolution image is downloaded or the multi-resolution structure has been initialized). Source: LayoutTiles.js, line 138 updateSize The event is fired when a layout size is modified (and the scene extension must be recomputed at canvas level). Source: LayoutTiles.js, line 234 Layout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computed Source: LayoutTiles.js, line 736 Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmatically Source: LayoutTileImages.js, line 338 Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computed Source: LayoutTiles.js, line 745 Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computed Source: LayoutTileImages.js, line 346 ready The event is fired when a layout is ready to be drawn(the single-resolution image is downloaded or the multi-resolution structure has been initialized). Inherited From: Layout#event:ready Overrides: Layout#event:ready Source: Layout.js, line 158 updateSize The event is fired when a layout size is modified (and the scene extension must be recomputed at canvas level). Inherited From: Layout#event:updateSize Overrides: Layout#event:updateSize Source: LayoutTiles.js, line 234 ready The event is fired when a layout is ready to be drawn(the single-resolution image is downloaded or the multi-resolution structure has been initialized). Inherited From: Layout#event:ready Overrides: Layout#event:ready Source: Layout.js, line 158 updateSize The event is fired when a layout size is modified (and the scene extension must be recomputed at canvas level). Inherited From: Layout#event:updateSize Overrides: Layout#event:updateSize Source: LayoutTiles.js, line 234 closed The event is fired when the dialog is closed. Source: UIBasic.js, line 773 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"namespaces.list.html":{"id":"namespaces.list.html","title":"Namespaces","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Namespaces Classes Annotation AudioPlayer BoundingBox Camera Canvas Color Colormap ColormapLegend Controller Controller2D ControllerFocusContext ControllerLens ControllerPanZoom CoordinateSystem Draggable EditorSvgAnnotation FocusContext Layer LayerAnnotation LayerAnnotationImage LayerBRDF LayerCombiner LayerDstretch LayerImage LayerLens LayerMaskedImage LayerNeuralRTI LayerRTI LayerSvgAnnotation Layout LayoutTileImages LayoutTiles LensDashboard LensDashboardNavigator LensDashboardNavigatorRadial LightSphereController PointerManager Raster Shader ShaderBRDF ShaderCombiner ShaderNeural ShaderRTI Skin TextToSpeechPlayer Transform UIBasic UIDialog Viewer Namespaces Cache Events update The event is fired when the camera target is changed. Source: Camera.js, line 135 update The event is fired when a uniform shader variable is changed. Source: Shader.js, line 130 ready Fired when all layers are initialized and ready to display. Source: Canvas.js, line 311 update Fired when canvas content is updated (layer changes, camera moves). Source: Canvas.js, line 301 updateSize Fired when canvas or layout size changes. Source: Canvas.js, line 306 ready The event is fired when a layer is initialized. Source: Layer.js, line 231 update The event is fired if a redraw is needed. Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: LayerAnnotation#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: LayerAnnotation#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: LayerImage#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: LayerImage#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: LayerCombiner#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: LayerCombiner#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: LayerAnnotation#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: LayerAnnotation#event:update Source: Layer.js, line 235 ready The event is fired when a layout is ready to be drawn(the single-resolution image is downloaded or the multi-resolution structure has been initialized). Source: Layout.js, line 158 ready The event is fired when a layout is ready to be drawn(the single-resolution image is downloaded or the multi-resolution structure has been initialized). Source: LayoutTiles.js, line 138 updateSize The event is fired when a layout size is modified (and the scene extension must be recomputed at canvas level). Source: LayoutTiles.js, line 234 Layout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computed Source: LayoutTiles.js, line 736 Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmatically Source: LayoutTileImages.js, line 338 Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computed Source: LayoutTiles.js, line 745 Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computed Source: LayoutTileImages.js, line 346 ready The event is fired when a layout is ready to be drawn(the single-resolution image is downloaded or the multi-resolution structure has been initialized). Inherited From: Layout#event:ready Overrides: Layout#event:ready Source: Layout.js, line 158 updateSize The event is fired when a layout size is modified (and the scene extension must be recomputed at canvas level). Inherited From: Layout#event:updateSize Overrides: Layout#event:updateSize Source: LayoutTiles.js, line 234 ready The event is fired when a layout is ready to be drawn(the single-resolution image is downloaded or the multi-resolution structure has been initialized). Inherited From: Layout#event:ready Overrides: Layout#event:ready Source: Layout.js, line 158 updateSize The event is fired when a layout size is modified (and the scene extension must be recomputed at canvas level). Inherited From: Layout#event:updateSize Overrides: Layout#event:updateSize Source: LayoutTiles.js, line 234 closed The event is fired when the dialog is closed. Source: UIBasic.js, line 773 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"tutorials.list.html":{"id":"tutorials.list.html","title":"Howto","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Howto Classes Annotation AudioPlayer BoundingBox Camera Canvas Color Colormap ColormapLegend Controller Controller2D ControllerFocusContext ControllerLens ControllerPanZoom CoordinateSystem Draggable EditorSvgAnnotation FocusContext Layer LayerAnnotation LayerAnnotationImage LayerBRDF LayerCombiner LayerDstretch LayerImage LayerLens LayerMaskedImage LayerNeuralRTI LayerRTI LayerSvgAnnotation Layout LayoutTileImages LayoutTiles LensDashboard LensDashboardNavigator LensDashboardNavigatorRadial LightSphereController PointerManager Raster Shader ShaderBRDF ShaderCombiner ShaderNeural ShaderRTI Skin TextToSpeechPlayer Transform UIBasic UIDialog Viewer Namespaces Cache Events update The event is fired when the camera target is changed. Source: Camera.js, line 135 update The event is fired when a uniform shader variable is changed. Source: Shader.js, line 130 ready Fired when all layers are initialized and ready to display. Source: Canvas.js, line 311 update Fired when canvas content is updated (layer changes, camera moves). Source: Canvas.js, line 301 updateSize Fired when canvas or layout size changes. Source: Canvas.js, line 306 ready The event is fired when a layer is initialized. Source: Layer.js, line 231 update The event is fired if a redraw is needed. Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: LayerAnnotation#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: LayerAnnotation#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: LayerImage#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: LayerImage#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: LayerCombiner#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: LayerCombiner#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: LayerAnnotation#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: LayerAnnotation#event:update Source: Layer.js, line 235 ready The event is fired when a layout is ready to be drawn(the single-resolution image is downloaded or the multi-resolution structure has been initialized). Source: Layout.js, line 158 ready The event is fired when a layout is ready to be drawn(the single-resolution image is downloaded or the multi-resolution structure has been initialized). Source: LayoutTiles.js, line 138 updateSize The event is fired when a layout size is modified (and the scene extension must be recomputed at canvas level). Source: LayoutTiles.js, line 234 Layout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computed Source: LayoutTiles.js, line 736 Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmatically Source: LayoutTileImages.js, line 338 Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computed Source: LayoutTiles.js, line 745 Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computed Source: LayoutTileImages.js, line 346 ready The event is fired when a layout is ready to be drawn(the single-resolution image is downloaded or the multi-resolution structure has been initialized). Inherited From: Layout#event:ready Overrides: Layout#event:ready Source: Layout.js, line 158 updateSize The event is fired when a layout size is modified (and the scene extension must be recomputed at canvas level). Inherited From: Layout#event:updateSize Overrides: Layout#event:updateSize Source: LayoutTiles.js, line 234 ready The event is fired when a layout is ready to be drawn(the single-resolution image is downloaded or the multi-resolution structure has been initialized). Inherited From: Layout#event:ready Overrides: Layout#event:ready Source: Layout.js, line 158 updateSize The event is fired when a layout size is modified (and the scene extension must be recomputed at canvas level). Inherited From: Layout#event:updateSize Overrides: Layout#event:updateSize Source: LayoutTiles.js, line 234 closed The event is fired when the dialog is closed. Source: UIBasic.js, line 773 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"index.html":{"id":"index.html","title":"Index","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback openlime 0.1.1 OpenLIME (Open Layered IMage Explorer) OpenLIME (Open Layered IMage Explorer) is an open-source JavaScript library for the efficient display of scalable high-resolution relightable images. OpenLime is jointly developed by CRS4 Visual and Data-intensive Computing Group and CNR ISTI - Visual Computing Lab. OpenLIME natively supports BRDF and RTI datasets, and can be easily extended for other multi-channel raster datasets, such as hyper spectral imaging or other reflectance modeling. Input data can be combined in a multi-layer visualization system using opacity and blending modes, and interactive lenses. All web image types (jpg, png, gif, etc...) are supported as well as the most common multi-resolution image formats (deepzoom, zoomify, IIIF, google maps), which are suitable for large images. OpenLIME provides a set of ready-to-use layers that allows developers to quickly publish their datasets on the web or make kiosk applications. Ready-to-use layers ranging from images, to multi-channel data (such as, for example, RTI or BRDF) or the combination of multiple layers or for visualization through lenses. The OpenLIME library comes with a responsive user iterface that works well with both desktop monitors and multitouch systems. Additionally, it is designed to be highly configurable, so it will be easy for the experienced developer to build their own custom interface. The library contains a convenient set of examples that can be used both to understand how the library works and as a starting point for programming with OpenLIME itself. Installing npm Ubuntu sudo apt install npm Ubuntu 18.04 You might have some problem using the old npm version shipped with Ubuntu18.04, and even upgrading it. This worked for me: sudo npm install -g npm@latest-6 Windows To obtain npm for Windows, you need to download the Windows version of node.js from https://nodejs.org/en/download/ . You can download either the Windows Installer (.msi) or the Windows Binary (.zip). If you download and expand the Windows Binary zip file, you will afterwards need to set your PATH variable to include the directory that contains the npm executable (this directory is the subdirectory node_modules\\npm\\bin). Setting up npm (all platforms) The following step should be performed in the openlime directory that was cloned from this repository. Before using npm, you need to install the required packages locally. This only needs to be done once. The following command tells npm to download all the webpack packages (and their dependencies) listed in the package.json file. These will be put in the ./node_modules directory. npm install The downloaded packages include rollup, documentation, and nodemon, which will be used below. Using npm (all platforms) These steps should be performed in the openlime directory that was cloned from this repository. Build the code The following command reads the javascript code in ./src, and puts the transpiled webpack code in ./dist/main.js. npm run build The webpack code is used, for example, by the ./dist/index.html web page. Run the node.js server If you wish, you can run the node.js development server to serve your web pages. This server will use ./dist as the home directory. The server is run in \"hot\" mode, which means that whenever you change a file in the ./src directory, the webpack code will automatically be rebuilt, and your web browser will automatically refresh, to reflect your latest changes. npm run start Then access the demo app at http://localhost:8080 (which by default is ./dist/index.html). If you prefer to serve from a different port, say 8088, you can call npm run start -- --port 8088 Create a rollup file to use with other servers You do not need to use node.js as the server. Instead, you can use the &lt;script&gt; approach, embedding a rollup file, either ./build/openlime.min.js or ./build/openlime.js, in your web page. The files ./dist/ui_custom.html and ./dist/ui_svg.html are examples of this approach. Such files will display correctly when served from any web server. To create the rollup files, call rollup: npm run rollup Keep the rollup files up to date If you keep a nodemon (node monitor) script running, it will automatically update the rollup files ./build/openlime.min.js and ./build/openlime.js whenever anything changes in the ./src directory. Note that, unlike with the node.js server, the browser will not refresh automatically; you will have to do that yourself once the rollup files have been updated. npm run nodemon Create documentation The documentation is created from structured comments in the source code (in ./src). Once created, it is accessible from ./docs/index.html npm run doc Customization skin.css skin.svg Run svgo -p 1 skin.svg -o skin.min.svg to minimize svg. Documentation.js supports markdown syntax and JSDoc syntax. JSON example of the configuration: { camera: { }, canvas: { rasters: [ { id: name: width: //optional height: //optional url: layout: &lt;image|google|deepzoom|zoomify|iip|iiif&gt; //optional if can be determined from the url. } ] }, overlay: { } } Index LayoutTileImages.js LayoutTileImages module provides management for collections of image tiles with associated regions. This layout type is specialized for handling multiple independent image tiles, each with their own position and dimensions, rather than a regular grid of tiles like LayoutTiles. Source: LayoutTileImages.js, line 5 Index LensDashboard.js LensDashboard module provides functionality for creating and managing an interactive lens interface in OpenLIME. It handles the lens border, SVG masking, and positioning of UI elements around the lens. Source: LensDashboard.js, line 4 Index LensDashboardNavigator.js LensDashboardNavigator module provides an enhanced lens dashboard with navigation controls and tools. Extends the base LensDashboard with additional UI elements for camera control, lighting, and annotation navigation. Source: LensDashboardNavigator.js, line 4 Index LensDashboardNavigatorRadial.js LensDashboardNavigatorRadial module provides a radial menu interface for lens controls. Extends the base LensDashboard with a circular arrangement of navigation controls and tools. Source: LensDashboardNavigatorRadial.js, line 4 Index LightSphereController.js LightSphereController module provides a spherical interface for controlling light direction. It creates a circular canvas-based UI element that allows users to interactively adjust lighting direction through pointer interactions. Source: LightSphereController.js, line 1 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"global.html#Annotation":{"id":"global.html#Annotation","title":"Class: Annotation","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: Annotation Annotation Represents an annotation that can be drawn as an overlay on a canvas. An annotation is a decoration (text, graphics element, glyph) that provides additional information for interpreting underlying drawings. Each annotation has a unique identifier and can contain various properties such as description, category, drawing style, labels, etc. new Annotation( [options]) Creates a new Annotation instance. Parameters: Name Type Argument Description options Object &lt;optional&gt; Configuration options for the annotation. Properties Name Type Argument Default Description id string &lt;optional&gt; Unique identifier for the annotation. If not provided, a UUID will be generated. code string &lt;optional&gt; A code identifier for the annotation. label string &lt;optional&gt; '' Display label for the annotation. description string &lt;optional&gt; HTML text containing a comprehensive description. class string &lt;optional&gt; Category or classification of the annotation. target string &lt;optional&gt; Target element or area this annotation refers to. svg string &lt;optional&gt; SVG content for the annotation. image Object &lt;optional&gt; Image data associated with the annotation. region Object &lt;optional&gt; Region coordinates {x, y, w, h} for the annotation. data Object &lt;optional&gt; {} Additional custom data for the annotation. style Object &lt;optional&gt; Style configuration for rendering. bbox BoundingBox &lt;optional&gt; Bounding box of the annotation. visible boolean &lt;optional&gt; true Visibility state of the annotation. state Object &lt;optional&gt; State variables for the annotation. ready boolean &lt;optional&gt; false Indicates if SVG conversion is complete. needsUpdate boolean &lt;optional&gt; true Indicates if annotation needs updating. editing boolean &lt;optional&gt; false Indicates if annotation is being edited. Source: Annotation.js, line 10 Methods &lt;static&gt; fromJsonLd(entry) Creates an Annotation instance from a JSON-LD format string. Parameters: Name Type Description entry Object The JSON-LD object representing an annotation. Source: Annotation.js, line 110 Throws: If the entry is not a valid JSON-LD annotation or contains unsupported selectors. Type Error Returns: A new Annotation instance. Type Annotation getBBoxFromElements() Calculates and returns the bounding box of the annotation based on its elements or region. The coordinates are always relative to the top-left corner of the canvas. Source: Annotation.js, line 80 Returns: The calculated bounding box of the annotation. If the annotation has no elements and no region, returns an empty bounding box. If the annotation has a region but no elements, returns a bounding box based on the region. If the annotation has elements, calculates the bounding box that encompasses all elements. Type BoundingBox toJsonLd() Converts the annotation to a JSON-LD format object. Source: Annotation.js, line 140 Returns: A JSON-LD representation of the annotation including context, id, type, body (with code, class, and description), and target selector information. Type Object × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"AudioPlayer.html":{"id":"AudioPlayer.html","title":"Class: AudioPlayer","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: AudioPlayer AudioPlayer Class representing an audio player with playback control capabilities. Supports playing, pausing, resuming, and stopping audio files with volume control and playback speed adjustment. new AudioPlayer() Creates an instance of AudioPlayer. Initializes the player with default settings and sets up signal handling for the 'ended' event. Source: AudioPlayer.js, line 8 Methods &lt;async&gt; continue() Resumes playback of a paused audio file. Source: AudioPlayer.js, line 79 Returns: Resolves when the resumed audio playback completes. Type Promise.&lt;void&gt; getPlayDuration() Returns the total play duration in milliseconds. Source: AudioPlayer.js, line 132 Returns: Total play duration in milliseconds. Type number pause() Pauses the currently playing audio. Updates play duration when pausing. Source: AudioPlayer.js, line 66 &lt;async&gt; play(audioFile [, speed]) Plays an audio file with optional playback speed adjustment. If audio is paused, it will resume playback instead of starting a new file. Parameters: Name Type Argument Default Description audioFile string The path or URL to the audio file. speed number &lt;optional&gt; 1.0 Playback speed multiplier (1.0 is normal speed). Source: AudioPlayer.js, line 32 Returns: Resolves when the audio playback completes. Type Promise.&lt;void&gt; setVolume(volume) Sets the audio volume level. Parameters: Name Type Description volume number Volume level between 0.0 and 1.0. Source: AudioPlayer.js, line 141 &lt;async&gt; silence(ms) Creates a delay in the execution flow. Parameters: Name Type Description ms number Number of milliseconds to wait. Source: AudioPlayer.js, line 160 Returns: Resolves after the specified delay. Type Promise.&lt;void&gt; stop() Stops the current audio playback and resets all player states. Removes event listeners and updates final play duration. Source: AudioPlayer.js, line 99 toggleMute() Toggles the mute state of the audio player. Stores the previous volume level when muting and restores it when unmuting. Source: AudioPlayer.js, line 168 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"BoundingBox.html":{"id":"BoundingBox.html","title":"Class: BoundingBox","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: BoundingBox BoundingBox Represents an axis-aligned rectangular bounding box that can be wrapped tightly around geometric elements. The box is defined by two opposite vertices (low and high corners) and provides a comprehensive set of utility methods for manipulating and analyzing bounding boxes. new BoundingBox( [options]) Creates a new BoundingBox instance. Parameters: Name Type Argument Description options Object &lt;optional&gt; Configuration options for the bounding box Properties Name Type Argument Default Description xLow number &lt;optional&gt; 1e20 X coordinate of the lower corner yLow number &lt;optional&gt; 1e20 Y coordinate of the lower corner xHigh number &lt;optional&gt; -1e20 X coordinate of the upper corner yHigh number &lt;optional&gt; -1e20 Y coordinate of the upper corner Source: BoundingBox.js, line 6 Methods center() Calculates the center point of the bounding box. Source: BoundingBox.js, line 146 Returns: The coordinates of the center point Type Object corner(i) Gets the coordinates of a specific corner of the bounding box. Parameters: Name Type Description i number Corner index (0: bottom-left, 1: bottom-right, 2: top-left, 3: top-right) Source: BoundingBox.js, line 155 Returns: The coordinates of the specified corner Type Object fromArray(x) Initializes the bounding box from an array of coordinates. Parameters: Name Type Description x Array.&lt;number&gt; Array containing coordinates in order [xLow, yLow, xHigh, yHigh] Source: BoundingBox.js, line 29 height() Calculates the height of the bounding box. Source: BoundingBox.js, line 138 Returns: The difference between yHigh and yLow Type number intersects(box) Checks if this bounding box intersects with another bounding box. Parameters: Name Type Description box BoundingBox The other bounding box to check intersection with Source: BoundingBox.js, line 166 Returns: True if the boxes intersect, false otherwise Type boolean isEmpty() Checks if the bounding box is empty (has no valid area). A box is considered empty if its low corner coordinates are greater than its high corner coordinates. Source: BoundingBox.js, line 51 Returns: True if the box is empty, false otherwise Type boolean mergeBox(box) Enlarges this bounding box to include another bounding box. If this box is empty, it will adopt the dimensions of the input box. If the input box is null, no changes are made. Parameters: Name Type Description box BoundingBox | null The bounding box to merge with this one Source: BoundingBox.js, line 77 mergePoint(p) Enlarges this bounding box to include a point. Parameters: Name Type Description p Object The point to include in the bounding box Source: BoundingBox.js, line 95 print() Prints the bounding box coordinates to the console in a formatted string. Output format: \"BOX=xLow, yLow, xHigh, yHigh\" with values rounded to 2 decimal places Source: BoundingBox.js, line 174 quantize(side) Quantizes the bounding box coordinates by dividing by a specified value and rounding down. This creates a grid-aligned bounding box. Parameters: Name Type Description side number The value to divide coordinates by Source: BoundingBox.js, line 119 shift(dx, dy) Moves the bounding box by the specified displacement. Parameters: Name Type Description dx number Displacement along the x-axis dy number Displacement along the y-axis Source: BoundingBox.js, line 107 toArray() Converts the bounding box coordinates to an array. Source: BoundingBox.js, line 59 Returns: Array of coordinates in order [xLow, yLow, xHigh, yHigh] Type Array.&lt;number&gt; toEmpty() Resets the bounding box to an empty state by setting coordinates to extreme values. Source: BoundingBox.js, line 39 toString() Creates a space-separated string representation of the bounding box coordinates. Source: BoundingBox.js, line 67 Returns: String in format \"xLow yLow xHigh yHigh\" Type string width() Calculates the width of the bounding box. Source: BoundingBox.js, line 130 Returns: The difference between xHigh and xLow Type number × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"Cache.html":{"id":"Cache.html","title":"Namespace: Cache","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Namespace: Cache Cache Singleton cache instance for managing tile loading and caching across layers. Provides efficient tile retrieval and memory management with configurable capacity and request rate limiting. Properties: Name Type Description capacity number Total cache capacity in bytes (default: 512MB) size number Current amount of GPU RAM used maxRequest number Maximum concurrent HTTP requests (default: 6) requested number Current number of active requests maxRequestsRate number Maximum requests per second (0 for unlimited) maxPrefetch number Maximum size of prefetched tiles in bytes prefetched number Current amount of prefetched GPU RAM layers Array.&lt;Layer&gt; Array of layers being managed by the cache Source: Cache.js, line 191 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"Camera.html":{"id":"Camera.html","title":"Class: Camera","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: Camera Camera Camera class that manages viewport parameters and camera transformations. Acts as a container for parameters needed to define the viewport and camera position, supporting smooth animations between positions using source and target transforms. The camera maintains two Transform objects: source: represents current position target: represents destination position Animation between positions is handled automatically by the OpenLIME system unless manually interrupted by user input. new Camera( [options]) Creates a new Camera instance. Parameters: Name Type Argument Description options Object &lt;optional&gt; Configuration options Properties Name Type Argument Default Description bounded boolean &lt;optional&gt; true Whether to limit camera translation to scene boundaries maxFixedZoom number &lt;optional&gt; 2 Maximum allowed pixel size minScreenFraction number &lt;optional&gt; 1 Minimum portion of screen to show when zoomed in target Transform &lt;optional&gt; Initial target transform Source: Camera.js, line 28 Fires: Camera#event:update Methods copy() Creates a deep copy of the camera instance. Source: Camera.js, line 58 Returns: A new Camera instance with copied properties Type Camera deltaZoom(dt, dz [, x] [, y]) Applies a relative zoom change at a specific point. Parameters: Name Type Argument Default Description dt number Animation duration in milliseconds dz number Relative zoom change factor x number &lt;optional&gt; 0 X coordinate to zoom around y number &lt;optional&gt; 0 Y coordinate to zoom around Source: Camera.js, line 237 fit(box [, dt]) Adjusts the camera to frame a specified bounding box. Parameters: Name Type Argument Default Description box BoundingBox The box to frame in canvas coordinates dt number &lt;optional&gt; 0 Animation duration in milliseconds Source: Camera.js, line 288 fitCameraBox(dt) Resets the camera to show the entire scene. Parameters: Name Type Description dt number Animation duration in milliseconds Source: Camera.js, line 308 getCurrentTransform(time) Gets the camera transform at a specific time. Parameters: Name Type Description time number Current time in milliseconds (from performance.now()) Source: Camera.js, line 265 Returns: The interpolated transform at the specified time Type Transform getGlCurrentTransform(time) Gets the camera transform at a specific time in device coordinates. Parameters: Name Type Description time number Current time in milliseconds (from performance.now()) Source: Camera.js, line 275 Returns: The interpolated transform scaled for device pixels Type Transform glViewport() Returns the current viewport in device coordinates (accounting for device pixel ratio). Source: Camera.js, line 83 Returns: The current viewport scaled for device pixels Type Viewport mapToScene(x, y, transform) Converts canvas coordinates to scene coordinates using the specified transform. Parameters: Name Type Description x number X coordinate relative to canvas y number Y coordinate relative to canvas transform Transform Transform to use for conversion Source: Camera.js, line 98 Returns: Coordinates in scene space relative to viewport center Type Object pan(dt, dx, dy) Pans the camera by a specified amount in canvas coordinates. Parameters: Name Type Description dt number Animation duration in milliseconds dx number Horizontal displacement dy number Vertical displacement Source: Camera.js, line 184 rotate(dt, a) Rotates the camera around its z-axis. Parameters: Name Type Description dt number Animation duration in milliseconds a number Rotation angle in degrees Source: Camera.js, line 222 sceneToCanvas(x, y, transform) Converts scene coordinates to canvas coordinates using the specified transform. Parameters: Name Type Description x number X coordinate in scene space y number Y coordinate in scene space transform Transform Transform to use for conversion Source: Camera.js, line 117 Returns: Coordinates in canvas space Type Object setPosition(dt, x, y, z, a [, easing]) Sets the camera target parameters for a new position. Parameters: Name Type Argument Description dt number Animation duration in milliseconds x number X component of translation y number Y component of translation z number Zoom factor a number Rotation angle in degrees easing string &lt;optional&gt; Easing function name for animation Source: Camera.js, line 134 Fires: Camera#event:update setViewport(view) Updates the viewport while maintaining the camera position as close as possible to the previous one. Parameters: Name Type Description view Viewport The new viewport in CSS coordinates Source: Camera.js, line 68 zoom(dt, z [, x] [, y]) Zooms the camera to a specific point in canvas coordinates. Parameters: Name Type Argument Default Description dt number Animation duration in milliseconds z number Target zoom level x number &lt;optional&gt; 0 X coordinate to zoom towards y number &lt;optional&gt; 0 Y coordinate to zoom towards Source: Camera.js, line 199 Events update The event is fired when the camera target is changed. Source: Camera.js, line 135 update The event is fired when a uniform shader variable is changed. Source: Shader.js, line 130 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"Canvas.html":{"id":"Canvas.html","title":"Class: Canvas","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: Canvas Canvas Canvas class that manages WebGL context, layers, and scene rendering. Handles layer management, WebGL context creation/restoration, and render timing. new Canvas(canvas, overlay, camera [, options]) Creates a new Canvas instance with WebGL context and overlay support. Parameters: Name Type Argument Description canvas HTMLCanvasElement | string Canvas DOM element or selector overlay HTMLElement | string Overlay DOM element or selector for decorations (annotations, glyphs) camera Camera Scene camera instance options Object &lt;optional&gt; Configuration options Properties Name Type Argument Default Description layers Object &lt;optional&gt; Layer configurations mapping layer IDs to Layer instances preserveDrawingBuffer boolean &lt;optional&gt; false Whether to preserve WebGL buffers until manually cleared targetfps number &lt;optional&gt; 30 Target frames per second for rendering Source: Canvas.js, line 16 Fires: Canvas#event:update Canvas#event:updateSize Canvas#event:ready Methods addLayer(id, layer) Adds a layer to the canvas. Parameters: Name Type Description id string Unique identifier for the layer layer Layer Layer instance to add Source: Canvas.js, line 194 Fires: Canvas#event:update Canvas#event:ready Throws: If layer ID already exists Type Error getState( [stateMask]) Retrieves current state of the canvas and its components. Parameters: Name Type Argument Default Description stateMask Object &lt;optional&gt; null Optional mask to filter returned state properties Source: Canvas.js, line 148 Returns: Current state object Type Object removeLayer(layer) Removes a layer from the canvas. Parameters: Name Type Description layer Layer Layer instance to remove Source: Canvas.js, line 222 Example const layer = new Layer(options); canvas.addLayer('map', layer); // ... later ... canvas.removeLayer(layer); setState(state, dt [, easing]) Updates the state of the canvas and its components. Parameters: Name Type Argument Default Description state Object State object containing updates Properties Name Type Argument Description camera Object &lt;optional&gt; Camera state updates layers Object &lt;optional&gt; Layer state updates dt number Animation duration in milliseconds easing string &lt;optional&gt; 'linear' Easing function for animations Source: Canvas.js, line 130 Events ready Fired when all layers are initialized and ready to display. Source: Canvas.js, line 311 update Fired when canvas content is updated (layer changes, camera moves). Source: Canvas.js, line 301 updateSize Fired when canvas or layout size changes. Source: Canvas.js, line 306 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"Color.html":{"id":"Color.html","title":"Class: Color","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: Color Color Represents a color in RGBA format with values normalized between 0 and 1. new Color(r [, g] [, b] [, a]) Creates a new Color instance. Parameters: Name Type Argument Description r number | string Red component [0.0, 1.0] or color string ('#RGB', '#RGBA', '#RRGGBB', '#RRGGBBAA', 'rgb()', 'rgba()') g number &lt;optional&gt; Green component [0.0, 1.0] b number &lt;optional&gt; Blue component [0.0, 1.0] a number &lt;optional&gt; Alpha component [0.0, 1.0] Source: Colormap.js, line 159 Throws: If string value is not a valid color format Type Error Methods toHex() Converts color to hexadecimal string. Source: Colormap.js, line 256 Returns: Color in '#RRGGBB' format Type string toHexa() Converts color to hexadecimal string with alpha. Source: Colormap.js, line 265 Returns: Color in '#RRGGBBAA' format Type string toRGB() Converts color to RGB values [0, 255]. Source: Colormap.js, line 244 Returns: Array of [r, g, b] values Type Array.&lt;number&gt; toRGBA() Converts color to RGBA values [0-255]. Source: Colormap.js, line 274 Returns: Array of [r, g, b, a] values Type Array.&lt;number&gt; value() Gets color components as an array. Source: Colormap.js, line 236 Returns: Array of [r, g, b, a] values Type Array.&lt;number&gt; × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"Colormap.html":{"id":"Colormap.html","title":"Class: Colormap","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: Colormap Colormap Creates a colormap for mapping numerical values to colors. Supports linear, spline, and bar interpolation between colors. new Colormap( [colors] [, options]) Creates a new Colormap instance. Parameters: Name Type Argument Default Description colors Array.&lt;Color&gt; &lt;optional&gt; [black, white] Array of colors to interpolate between options Object &lt;optional&gt; Configuration options Properties Name Type Argument Default Description domain Array.&lt;number&gt; &lt;optional&gt; [0,1] Domain range for mapping lowColor Color &lt;optional&gt; Color for values below domain (defaults to first color) highColor Color &lt;optional&gt; Color for values above domain (defaults to last color) description string &lt;optional&gt; '' Description of the colormap type 'linear' | 'spline' | 'bar' &lt;optional&gt; 'linear' Interpolation type Source: Colormap.js, line 287 Throws: If colors/domain format is invalid Type Error Methods at(x) Gets color for a value using configured interpolation type. Parameters: Name Type Description x number Value to get color for Source: Colormap.js, line 410 Throws: If interpolation type is invalid Type Error Returns: Corresponding color Type Color rangeDomain() Gets the domain range of the colormap. Source: Colormap.js, line 346 Returns: Array containing [min, max] of domain Type Array.&lt;number&gt; sample(maxSteps) Samples the colormap into a buffer. Parameters: Name Type Description maxSteps number Number of samples to generate Source: Colormap.js, line 434 Returns: Sample data and buffer Type Object × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"ColormapLegend.html":{"id":"ColormapLegend.html","title":"Class: ColormapLegend","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: ColormapLegend ColormapLegend Creates a visual legend for a colormap. new ColormapLegend(viewer, colorscale [, options]) Creates a new ColormapLegend instance. Parameters: Name Type Argument Description viewer Object Viewer instance to attach legend to colorscale Colormap Colormap to create legend for options Object &lt;optional&gt; Configuration options Properties Name Type Argument Default Description nticks number &lt;optional&gt; 6 Number of ticks/divisions in legend legendWidth number &lt;optional&gt; 25 Width of legend as percentage textColor string &lt;optional&gt; '#fff' Color of text labels class string &lt;optional&gt; 'openlime-legend' CSS class for legend container Source: Colormap.js, line 454 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"Controller.html":{"id":"Controller.html","title":"Class: Controller","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: Controller Controller Base class that handles user interaction via device events (mouse/touch events). Provides an abstract user interface to define interaction actions such as panning, pinching, tapping, etc... The actions are implemented by pre-defined callback functions: panStart(e) intercepts the initial pan event (movement of the mouse after pressing a mouse button or moving a finger). The event is captured calling e.preventDefault(). panMove(e) receives and handles the pan event. panEnd(e) intercepts the final pan event (the user releases the left mouse button or removes his finger from the screen). pinchStart(e1, e2) intercepts the initial pinch event (a continuous gesture that tracks the positions between the first two fingers that touch the screen). The event is captured calling e1.preventDefault(). pinchMove(e1,e2) receives and handles the pinch event. pinchEnd(e1,e2) intercepts the final pinch event (the user removes one of their two fingers from the screen). mouseWheel(e) receives and handles the mouse wheel event (the user rotates the mouse wheel button). fingerSingleTap(e) receives and handles the single-tap event (the user presses a mouse button quickly or touches the screen shortly with a finger). fingerDoubleTap(e) receives and handles the double-tap event (the user quickly presses a mouse button twice or shortly touches the screen with a finger twice). e.preventDefault() will capture the event and wont be propagated to other controllers. This class only describes user interactions by implementing actions or callbacks. A Controller works in concert with a PointerManager object that emits events and links them to actions. &lt;abstract&gt; new Controller( [options]) Creates a new Controller instance. Parameters: Name Type Argument Description options Object &lt;optional&gt; Configuration options Properties Name Type Argument Default Description active boolean &lt;optional&gt; true Whether the controller is initially active debug boolean &lt;optional&gt; false Enable debug logging panDelay number &lt;optional&gt; 50 Inertial value for panning movements in milliseconds zoomDelay number &lt;optional&gt; 200 Delay for smoothing zoom events in milliseconds priority number &lt;optional&gt; 0 Controllers with higher priority are invoked first activeModifiers Array.&lt;number&gt; &lt;optional&gt; [0] Array of modifier states that activate this controller Source: Controller.js, line 31 Example // Create a pan-zoom controller and associate it with the viewer's pointer manager const panzoom = new OpenLIME.ControllerPanZoom(viewer.camera, { priority: -1000, activeModifiers: [0, 1] }); viewer.pointerManager.onEvent(panzoom); Methods &lt;abstract&gt; fingerDoubleTap(e) Called for quick double mouse press or double finger touch. Parameters: Name Type Description e Event The double tap event Source: Controller.js, line 166 &lt;abstract&gt; fingerSingleTap(e) Called for quick mouse press or short finger touch. Parameters: Name Type Description e Event The tap event Source: Controller.js, line 158 modifierState(e) Gets the modifier state from an event. Parameters: Name Type Description e Event The event to check Source: Controller.js, line 66 Returns: Modifier state bitmask where: 0 = No modifiers 1 = Ctrl key 2 = Shift key 4 = Alt key Multiple modifiers combine their values (e.g., Ctrl+Shift = 3) Type number &lt;abstract&gt; mouseWheel(e) Called when user rotates mouse wheel. Parameters: Name Type Description e WheelEvent The wheel event Source: Controller.js, line 150 &lt;abstract&gt; panEnd(e) Called when panning ends (mouse up or finger lift). Parameters: Name Type Description e Event The pan end event Source: Controller.js, line 114 &lt;abstract&gt; panMove(e) Called continuously during panning. Parameters: Name Type Description e Event The pan move event Source: Controller.js, line 106 &lt;abstract&gt; panStart(e) Called when user starts panning (mouse down or finger touch). Call e.preventDefault() to capture the event. Parameters: Name Type Description e Event The pan start event Source: Controller.js, line 98 &lt;abstract&gt; pinchEnd(e1, e2) Called when pinch ends (finger lift). Parameters: Name Type Description e1 Event First finger event e2 Event Second finger event Source: Controller.js, line 142 &lt;abstract&gt; pinchMove(e1, e2) Called continuously during pinching. Parameters: Name Type Description e1 Event First finger event e2 Event Second finger event Source: Controller.js, line 133 &lt;abstract&gt; pinchStart(e1, e2) Called when user starts a two-finger pinch. Call e1.preventDefault() to capture the event. Parameters: Name Type Description e1 Event First finger event e2 Event Second finger event Source: Controller.js, line 124 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"Controller2D.html":{"id":"Controller2D.html","title":"Class: Controller2D","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: Controller2D Controller2D Controller for handling 2D position updates based on pan and tap events. Extends the base Controller to track a 2D position (x, y) of the device pointer. Supports two coordinate systems: Absolute: Coordinates mapped to [-1, 1] with origin at bottom-left of canvas Relative: Coordinates based on distance from initial pan position, scaled by speed new Controller2D(callback [, options]) Creates a new Controller2D instance. Parameters: Name Type Argument Description callback updatePosition Function called when position is updated options Object &lt;optional&gt; Configuration options Properties Name Type Argument Default Description relative boolean &lt;optional&gt; false Whether to use relative coordinate system speed number &lt;optional&gt; 2.0 Scaling factor for relative coordinates box BoundingBox &lt;optional&gt; Bounding box for coordinate constraints onPanStart updatePosition &lt;optional&gt; Callback for pan start event onPanEnd updatePosition &lt;optional&gt; Callback for pan end event active boolean &lt;optional&gt; true Whether the controller is active activeModifiers Array.&lt;number&gt; &lt;optional&gt; [0] Array of active modifier states Source: Controller2D.js, line 33 Extends Controller Methods &lt;abstract&gt; fingerDoubleTap(e) Called for quick double mouse press or double finger touch. Parameters: Name Type Description e Event The double tap event Inherited From: Controller#fingerDoubleTap Overrides: Controller#fingerDoubleTap Source: Controller.js, line 166 fingerSingleTap(e) Handles single tap/click events. Only processes events in absolute coordinate mode. Parameters: Name Type Description e MouseEvent | TouchEvent Tap event Inherited From: Controller2D#fingerSingleTap Overrides: Controller#fingerSingleTap Source: Controller2D.js, line 169 modifierState(e) Gets the modifier state from an event. Parameters: Name Type Description e Event The event to check Inherited From: Controller#modifierState Overrides: Controller#modifierState Source: Controller.js, line 66 Returns: Modifier state bitmask where: 0 = No modifiers 1 = Ctrl key 2 = Shift key 4 = Alt key Multiple modifiers combine their values (e.g., Ctrl+Shift = 3) Type number &lt;abstract&gt; mouseWheel(e) Called when user rotates mouse wheel. Parameters: Name Type Description e WheelEvent The wheel event Inherited From: Controller#mouseWheel Overrides: Controller#mouseWheel Source: Controller.js, line 150 panEnd(e) Handles end of pan gesture. Parameters: Name Type Description e MouseEvent | TouchEvent Pan end event Inherited From: Controller2D#panEnd Overrides: Controller#panEnd Source: Controller2D.js, line 150 Returns: False if not currently panning Type boolean panMove(e) Handles pan movement. Parameters: Name Type Description e MouseEvent | TouchEvent Pan move event Inherited From: Controller2D#panMove Overrides: Controller#panMove Source: Controller2D.js, line 138 Returns: False if not currently panning Type boolean panStart(e) Handles start of pan gesture. Parameters: Name Type Description e MouseEvent | TouchEvent Pan start event Inherited From: Controller2D#panStart Overrides: Controller#panStart Source: Controller2D.js, line 116 &lt;abstract&gt; pinchEnd(e1, e2) Called when pinch ends (finger lift). Parameters: Name Type Description e1 Event First finger event e2 Event Second finger event Inherited From: Controller#pinchEnd Overrides: Controller#pinchEnd Source: Controller.js, line 142 &lt;abstract&gt; pinchMove(e1, e2) Called continuously during pinching. Parameters: Name Type Description e1 Event First finger event e2 Event Second finger event Inherited From: Controller#pinchMove Overrides: Controller#pinchMove Source: Controller.js, line 133 &lt;abstract&gt; pinchStart(e1, e2) Called when user starts a two-finger pinch. Call e1.preventDefault() to capture the event. Parameters: Name Type Description e1 Event First finger event e2 Event Second finger event Inherited From: Controller#pinchStart Overrides: Controller#pinchStart Source: Controller.js, line 124 setPosition(x, y) Updates the stored position for relative coordinate system. This is a convenience method typically used within callbacks. Parameters: Name Type Description x number New X coordinate in range [-1, 1] y number New Y coordinate in range [-1, 1] Source: Controller2D.js, line 76 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"ControllerFocusContext.html":{"id":"ControllerFocusContext.html","title":"Class: ControllerFocusContext","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: ControllerFocusContext ControllerFocusContext Controller for handling Focus+Context visualization interactions. Manages lens-based focus region and context region interactions including panning, zooming, and lens radius adjustments. new ControllerFocusContext(options) Creates a new ControllerFocusContext instance. Parameters: Name Type Description options Object Configuration options Properties Name Type Argument Default Description updateTimeInterval number &lt;optional&gt; 50 Time interval for position updates in ms updateDelay number &lt;optional&gt; 100 Delay for position updates in ms zoomDelay number &lt;optional&gt; 150 Delay for zoom animations in ms zoomAmount number &lt;optional&gt; 1.5 Scale factor for zoom operations priority number &lt;optional&gt; -100 Controller priority enableDirectContextControl boolean &lt;optional&gt; true Enable direct manipulation of context region lensLayer Layer Layer to use for lens visualization camera Camera Camera instance to control canvas Canvas Canvas instance to monitor Source: ControllerFocusContext.js, line 11 Throws: If required options (lensLayer, camera, canvas) are missing Type Error Extends ControllerLens Methods &lt;abstract&gt; fingerDoubleTap(e) Called for quick double mouse press or double finger touch. Parameters: Name Type Description e Event The double tap event Inherited From: Controller#fingerDoubleTap Overrides: ControllerLens#fingerDoubleTap Source: Controller.js, line 166 &lt;abstract&gt; fingerSingleTap(e) Called for quick mouse press or short finger touch. Parameters: Name Type Description e Event The tap event Inherited From: Controller#fingerSingleTap Overrides: ControllerLens#fingerSingleTap Source: Controller.js, line 158 getFocus() Gets current focus state. Inherited From: ControllerLens#getFocus Overrides: ControllerLens#getFocus Source: ControllerLens.js, line 233 Returns: Focus state object Type Object getPixelPosition(e) Converts position from canvas HTML coordinates to viewport coordinates. Parameters: Name Type Description e PointerEvent event Inherited From: ControllerLens#getPixelPosition Overrides: ControllerLens#getPixelPosition Source: ControllerLens.js, line 266 Returns: Position in viewport coordinates (origin at bottom-left, y up) Type Object getScenePosition(e) Converts position from canvas HTML coordinates to scene coordinates. Parameters: Name Type Description e PointerEvent event Inherited From: ControllerLens#getScenePosition Overrides: ControllerLens#getScenePosition Source: ControllerLens.js, line 276 Returns: Position in scene coordinates (origin at center, y up) Type Object initLens() Initializes lens position and size. Source: ControllerFocusContext.js, line 420 isInsideLens(p) Checks if a point is inside the lens. Parameters: Name Type Description p Object Point to check in scene coordinates Properties Name Type Description x number X coordinate y number Y coordinate Inherited From: ControllerLens#isInsideLens Overrides: ControllerLens#isInsideLens Source: ControllerLens.js, line 246 Returns: Whether point is inside lens and/or on border Type Object modifierState(e) Gets the modifier state from an event. Parameters: Name Type Description e Event The event to check Inherited From: Controller#modifierState Overrides: ControllerLens#modifierState Source: Controller.js, line 66 Returns: Modifier state bitmask where: 0 = No modifiers 1 = Ctrl key 2 = Shift key 4 = Alt key Multiple modifiers combine their values (e.g., Ctrl+Shift = 3) Type number updateRadiusAndScale(dz) Updates lens radius and adjusts camera to maintain Focus+Context condition. Parameters: Name Type Description dz number Scale factor for radius adjustment Source: ControllerFocusContext.js, line 306 zoomEnd() Handles end of zoom operation. Overrides: ControllerLens#zoomEnd Source: ControllerFocusContext.js, line 273 zoomMove(pe) Handles zoom movement when dragging lens border. Parameters: Name Type Description pe PointerEvent Pointer event Overrides: ControllerLens#zoomMove Source: ControllerFocusContext.js, line 223 zoomStart(pe) Starts zoom operation when clicking on lens border. Parameters: Name Type Description pe PointerEvent Pointer event Overrides: ControllerLens#zoomStart Source: ControllerFocusContext.js, line 210 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"ControllerLens.html":{"id":"ControllerLens.html","title":"Class: ControllerLens","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: ControllerLens ControllerLens Controller for handling lens-based interactions. Manages user interactions with a lens overlay including panning, zooming, and lens radius adjustments through mouse/touch events. new ControllerLens(options) Creates a new ControllerLens instance. Parameters: Name Type Description options Object Configuration options Properties Name Type Argument Default Description lensLayer Object Layer used for lens visualization camera Camera Camera instance to control useGL boolean &lt;optional&gt; false Whether to use WebGL coordinates active boolean &lt;optional&gt; true Whether the controller is initially active Source: ControllerLens.js, line 11 Throws: If required options (lensLayer, camera) are missing Type Error Extends Controller Methods &lt;abstract&gt; fingerDoubleTap(e) Called for quick double mouse press or double finger touch. Parameters: Name Type Description e Event The double tap event Inherited From: Controller#fingerDoubleTap Overrides: Controller#fingerDoubleTap Source: Controller.js, line 166 &lt;abstract&gt; fingerSingleTap(e) Called for quick mouse press or short finger touch. Parameters: Name Type Description e Event The tap event Inherited From: Controller#fingerSingleTap Overrides: Controller#fingerSingleTap Source: Controller.js, line 158 getFocus() Gets current focus state. Source: ControllerLens.js, line 233 Returns: Focus state object Type Object getPixelPosition(e) Converts position from canvas HTML coordinates to viewport coordinates. Parameters: Name Type Description e PointerEvent event Source: ControllerLens.js, line 266 Returns: Position in viewport coordinates (origin at bottom-left, y up) Type Object getScenePosition(e) Converts position from canvas HTML coordinates to scene coordinates. Parameters: Name Type Description e PointerEvent event Source: ControllerLens.js, line 276 Returns: Position in scene coordinates (origin at center, y up) Type Object isInsideLens(p) Checks if a point is inside the lens. Parameters: Name Type Description p Object Point to check in scene coordinates Properties Name Type Description x number X coordinate y number Y coordinate Source: ControllerLens.js, line 246 Returns: Whether point is inside lens and/or on border Type Object modifierState(e) Gets the modifier state from an event. Parameters: Name Type Description e Event The event to check Inherited From: Controller#modifierState Overrides: Controller#modifierState Source: Controller.js, line 66 Returns: Modifier state bitmask where: 0 = No modifiers 1 = Ctrl key 2 = Shift key 4 = Alt key Multiple modifiers combine their values (e.g., Ctrl+Shift = 3) Type number mouseWheel(e) Handles mouse wheel events. Parameters: Name Type Description e WheelEvent Wheel event Inherited From: ControllerLens#mouseWheel Overrides: Controller#mouseWheel Source: ControllerLens.js, line 159 Returns: True if event was handled Type boolean panEnd(e) Handles end of pan operation. Parameters: Name Type Description e PointerEvent Pan end event Inherited From: ControllerLens#panEnd Overrides: Controller#panEnd Source: ControllerLens.js, line 97 panMove(e) Handles pan movement. Parameters: Name Type Description e PointerEvent Pan move event Inherited From: ControllerLens#panMove Overrides: Controller#panMove Source: ControllerLens.js, line 76 panStart(e) Handles start of pan operation. Parameters: Name Type Description e PointerEvent Pan start event Inherited From: ControllerLens#panStart Overrides: Controller#panStart Source: ControllerLens.js, line 48 pinchEnd(e, x, y, scale) Handles end of pinch operation. Parameters: Name Type Description e PointerEvent End event x number X coordinate y number Y coordinate scale number Final scale value Inherited From: ControllerLens#pinchEnd Overrides: Controller#pinchEnd Source: ControllerLens.js, line 149 pinchMove(e1, e2) Handles pinch movement. Parameters: Name Type Description e1 PointerEvent First finger event e2 PointerEvent Second finger event Inherited From: ControllerLens#pinchMove Overrides: Controller#pinchMove Source: ControllerLens.js, line 132 pinchStart(e1, e2) Handles start of pinch operation. Parameters: Name Type Description e1 PointerEvent First finger event e2 PointerEvent Second finger event Inherited From: ControllerLens#pinchStart Overrides: Controller#pinchStart Source: ControllerLens.js, line 108 zoomEnd() Ends zoom operation. Source: ControllerLens.js, line 225 zoomMove(pe) Updates zoom when dragging lens border. Parameters: Name Type Description pe Object Pixel position in canvas coordinates Properties Name Type Description offsetX number X offset from canvas left offsetY number Y offset from canvas top Source: ControllerLens.js, line 204 zoomStart(pe) Initiates zoom operation when clicking on lens border. Parameters: Name Type Description pe Object Pixel position in canvas coordinates Properties Name Type Description offsetX number X offset from canvas left offsetY number Y offset from canvas top Source: ControllerLens.js, line 182 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"ControllerPanZoom.html":{"id":"ControllerPanZoom.html","title":"Class: ControllerPanZoom","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: ControllerPanZoom ControllerPanZoom ControllerPanZoom handles pan, zoom, and interaction events in a canvas element to manipulate camera parameters. It supports multiple interaction methods including: Mouse drag for panning Mouse wheel for zooming Touch gestures (pinch to zoom) Double tap to zoom The controller maintains state for ongoing pan and zoom operations and can be configured to use different coordinate systems (HTML or GL) for calculations. new ControllerPanZoom(camera [, options]) Creates a new ControllerPanZoom instance. Parameters: Name Type Argument Description camera Camera The camera object to control options Object &lt;optional&gt; Configuration options Properties Name Type Argument Default Description zoomAmount number &lt;optional&gt; 1.2 The zoom multiplier for wheel/double-tap events controlZoom boolean &lt;optional&gt; false If true, requires Ctrl key to be pressed for zoom operations useGLcoords boolean &lt;optional&gt; false If true, uses WebGL coordinate system instead of HTML panDelay number &lt;optional&gt; Delay for pan animations zoomDelay number &lt;optional&gt; Delay for zoom animations Source: ControllerPanZoom.js, line 20 Fires: ControllerPanZoom#event:nowheel - Emitted when a wheel event is received but ctrl key is required and not pressed Extends Controller Methods &lt;abstract&gt; fingerSingleTap(e) Called for quick mouse press or short finger touch. Parameters: Name Type Description e Event The tap event Inherited From: Controller#fingerSingleTap Overrides: Controller#fingerSingleTap Source: Controller.js, line 158 modifierState(e) Gets the modifier state from an event. Parameters: Name Type Description e Event The event to check Inherited From: Controller#modifierState Overrides: Controller#modifierState Source: Controller.js, line 66 Returns: Modifier state bitmask where: 0 = No modifiers 1 = Ctrl key 2 = Shift key 4 = Alt key Multiple modifiers combine their values (e.g., Ctrl+Shift = 3) Type number × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"CoordinateSystem.html":{"id":"CoordinateSystem.html","title":"Class: CoordinateSystem","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: CoordinateSystem CoordinateSystem Contain functions to pass between different coordinate system. Here described the coordinate system in sequence CanvasHTML: Html coordinates: 0,0 left,top to width height at bottom right (y Down) CanvasContext: Same as Html, but scaled by devicePixelRatio (y Down) (required for WebGL, not for SVG) Viewport: 0,0 left,bottom to (width,height) at top right (y Up) Center: 0,0 at viewport center (y Up) Scene: 0,0 at dataset center (y Up). The dataset is placed here through the camera transform Layer: 0,0 at Layer center (y Up). Layer is placed over the dataset by the layer transform Image: 0,0 at left,top (y Down) Layout: 0,0 at left,top (y Down). Depends on layout new CoordinateSystem() Source: CoordinateSystem.js, line 16 Methods &lt;static&gt; fromCanvasHtmlToImage(p, camera, layerT, layerSize, applyGLScale) Transform a point from CanvasHtml to Image Parameters: Name Type Description p * point {x, y} in CanvasHtml (0,0 left,top, y Down) camera Camera camera layerT Transform layer transform layerSize * {w, h} Size in pixel of the Layer applyGLScale bool if true apply devPixelRatio scale. Keep it false when working with SVG Source: CoordinateSystem.js, line 208 Returns: Point in Image space (0,0 left,top of the image, y Down) &lt;static&gt; fromCanvasHtmlToScene(p, camera, useGL) Transform a point from CanvasHtml to Scene Parameters: Name Type Description p * point {x, y} in CanvasHtml (0,0 left,top, y Down) camera Camera camera useGL bool True to work with WebGL, false for SVG. When true, it uses devPixelRatio scale Source: CoordinateSystem.js, line 113 Returns: Point in Scene coordinates (0,0 at scene center, y Up) &lt;static&gt; fromCanvasHtmlToViewport(p, camera, useGL) Transform point from CanvasHTML to GLViewport Parameters: Name Type Description p * point in CanvasHtml: 0,0 left,top y Down camera Camera Camera useGL bool True to work with WebGL, false for SVG. When true, it uses devPixelRatio scale Source: CoordinateSystem.js, line 38 Returns: point in GLViewport: 0,0 left,bottom, scaled by devicePixelRatio &lt;static&gt; fromLayerBoxToSceneBox(box, layerT) Transform a box from Layer to Scene Parameters: Name Type Description box BoundingBox box in Layer coordinates (0,0 at layer center) layerT Transform layer transform Source: CoordinateSystem.js, line 251 Returns: box in Scene coordinates (0,0 at scene center) &lt;static&gt; fromLayerBoxToViewportBox(box, camera, layerT, useGL) Transform a box from Layer to Viewport coordinates Parameters: Name Type Description box BoundingBox box in Layer coordinates (0,0 at Layer center y Up) camera Camera layerT Transform layer transform useGL bool True to work with WebGL, false for SVG. When true, it uses devPixelRatio scale Source: CoordinateSystem.js, line 273 Returns: Box in Viewport coordinates (0,0 at left, bottom y Up) &lt;static&gt; fromLayerToCenter(p, camera, layerT) Transform a point from Layer to Center Parameters: Name Type Description p * point {x,y} in Layer coordinates (0,0 at Layer center) camera Camera camera layerT Transform layer transform Source: CoordinateSystem.js, line 84 Returns: point in Center (0, 0 at glViewport center) coordinates. &lt;static&gt; fromLayerToImage(p, layerSize) Transform a point from Layer to Image coordinates Parameters: Name Type Description p * point {x, y} Layer coordinates (0,0 at Layer center) layerSize * {w, h} Size in pixel of the Layer Source: CoordinateSystem.js, line 100 Returns: Point in Image coordinates (0,0 at left,top, y Down) &lt;static&gt; fromLayerToViewport(p, camera, layerT, useGL) Transform a point from Layer to Viewport coordinates Parameters: Name Type Description p * point {x,y} Layer (0,0 at Layer center y Up) camera Camera layerT Transform layer transform useGL bool True to work with WebGL, false for SVG. When true, it uses devPixelRatio scale Source: CoordinateSystem.js, line 72 Returns: point in viewport coordinates (0,0 at left,bottom y Up) &lt;static&gt; fromSceneBoxToLayerBox(box, layerT) Transform a box from Scene to Layer Parameters: Name Type Description box BoundingBox box in Layer coordinates (0,0 at layer center) layerT Transform layer transform Source: CoordinateSystem.js, line 261 Returns: box in Scene coordinates (0,0 at scene center) &lt;static&gt; fromSceneToCanvasHtml(p, camera, useGL) Transform a point from Scene to CanvasHtml Parameters: Name Type Description p * point {x, y} Scene coordinates (0,0 at scene center, y Up) camera Camera camera useGL bool True to work with WebGL, false for SVG. When true, it uses devPixelRatio scale Source: CoordinateSystem.js, line 130 Returns: Point in CanvasHtml (0,0 left,top, y Down) &lt;static&gt; fromSceneToViewport(p, camera, useGL) Transform a point from Scene to Viewport Parameters: Name Type Description p * point {x, y} Scene coordinates (0,0 at scene center, y Up) camera Camera camera useGL bool True to work with WebGL, false for SVG. When true, it uses devPixelRatio scale Source: CoordinateSystem.js, line 143 Returns: Point in Viewport (0,0 left,bottom, y Up) &lt;static&gt; fromSceneToViewportNoCamera(p, cameraT, viewport) Transform a point from Scene to Viewport, using given transform and viewport Parameters: Name Type Description p * point {x, y} Scene coordinates (0,0 at scene center, y Up) cameraT Transform camera transform viewport * viewport {x,y,dx,dy,w,h} Source: CoordinateSystem.js, line 159 Returns: Point in Viewport (0,0 left,bottom, y Up) &lt;static&gt; fromViewportBoxToImageBox(box, cameraT, viewport, layerT, layerSize) Transform a box from Viewport to Image coordinates Parameters: Name Type Description box BoundingBox in Viewport coordinates (0,0 at left,bottom, y Up) cameraT Transform camera Transform viewport * {x,y,dx,dy,w,h} layerT Transform layer transform layerSize * {w,h} layer pixel size Source: CoordinateSystem.js, line 228 Returns: box in Image coordinates (0,0 left,top, y Dowm) &lt;static&gt; fromViewportBoxToLayerBox(box, camera, layerT, useGL) Transform a box from Layer to Viewport coordinates Parameters: Name Type Description box BoundingBox box in Layer coordinates (0,0 at Layer center y Up) camera Camera layerT Transform layer transform useGL bool True to work with WebGL, false for SVG. When true, it uses devPixelRatio scale Source: CoordinateSystem.js, line 286 Returns: Box in Viewport coordinates (0,0 at left, bottom y Up) &lt;static&gt; fromViewportToCanvasHtml(p, camera, useGL) Transform point from Viewport to CanvasHTML Parameters: Name Type Description p * point in Viewport: 0,0 at left,bottom camera Camera Camera which contains viewport information useGL bool True to work with WebGL, false for SVG. When true, it uses devPixelRatio scale Source: CoordinateSystem.js, line 25 Returns: point in CanvasHtml: 0,0 left,top &lt;static&gt; fromViewportToLayer(p, camera, layerT, useGL) Transform a point from Viewport to Layer coordinates Parameters: Name Type Description p * point {x,y} in Viewport (0,0 left,bottom, y Up) camera Camera camera layerT Transform layer transform useGL bool True to work with WebGL, false for SVG. When true, it uses devPixelRatio scale Source: CoordinateSystem.js, line 53 Returns: point in Layer coordinates (0, 0 at layer center, y Up) &lt;static&gt; fromViewportToScene(p, camera, useGL) Transform a point from Viewport to Scene. Parameters: Name Type Description p * point {x, y} Viewport coordinates (0,0 at left,bottom, y Up) camera Camera camera useGL bool True to work with WebGL, false for SVG. When true, it uses devPixelRatio scale Source: CoordinateSystem.js, line 174 Returns: Point in Viewport (0,0 at scene center, y Up) &lt;static&gt; fromViewportToSceneNoCamera(p, cameraT, viewport) Transform a point from Viewport to Scene, using given transform and viewport Parameters: Name Type Description p * point {x, y} Viewport coordinates (0,0 at left,bottom, y Up) cameraT Transform camera transform viewport * viewport {x,y,dx,dy,w,h} Source: CoordinateSystem.js, line 190 Returns: Point in Viewport (0,0 at scene center, y Up) &lt;static&gt; getFromLayerToViewportTransform(camera, layerT, useGL) Get a transform to go from Layer (0,0 at Layer center y Up) to Viewport (0,0 at left,bottom y Up) Parameters: Name Type Description camera Camera layerT Transform layer transform useGL bool True to work with WebGL, false for SVG. When true, it uses devPixelRatio scale Source: CoordinateSystem.js, line 328 Returns: transform from Layer to Viewport &lt;static&gt; getFromLayerToViewportTransformNoCamera(CameraT, viewport, layerT) Get a transform to go from Layer (0,0 at Layer center y Up) to Viewport (0,0 at left,bottom y Up) Parameters: Name Type Description CameraT Transform camera transform viewport viewport {x,y,dx,dy,w,h} viewport layerT Transform layer transform Source: CoordinateSystem.js, line 343 Returns: transform from Layer to Viewport &lt;static&gt; getFromViewportToCenterTransform(camera, useGL) Get a transform to go from viewport 0,0 at left, bottom y Up, to Center 0,0 at viewport center Parameters: Name Type Description camera Camera camera useGL bool True to work with WebGL, false for SVG. When true, it uses devPixelRatio scale Source: CoordinateSystem.js, line 297 Returns: transform from Viewport to Center &lt;static&gt; getFromViewportToCenterTransformNoCamera(viewport) Get a transform to go from viewport 0,0 at left, bottom y Up, to Center 0,0 at viewport center from explicit viewport param. (Not using camera parameter here) Parameters: Name Type Description viewport * viewport Source: CoordinateSystem.js, line 308 Returns: transform from Viewport to Center &lt;static&gt; getViewport(useGL) Return the camera viewport: scaled by devicePixelRatio if useGL is true. Parameters: Name Type Description useGL bool True to work with WebGL, false for SVG. When true viewport scaled by devPixelRatio Source: CoordinateSystem.js, line 376 Returns: Viewport &lt;static&gt; invertY(p, viewport) Invert y with respect to viewport.h Parameters: Name Type Description p * Point to be transformed viewport * current viewport Source: CoordinateSystem.js, line 367 Returns: Point with y inverted with respect to viewport.h &lt;static&gt; reflectY(t) Return transform with y reflected wrt origin (y=-y) Parameters: Name Type Description t Transform Source: CoordinateSystem.js, line 317 Returns: transform, with y reflected (around 0) Type Transform &lt;static&gt; scale(p, f) Scale x applying f scale factor Parameters: Name Type Description p * Point to be scaled f Number Scale factor Source: CoordinateSystem.js, line 357 Returns: Point in CanvasContext (Scaled by devicePixelRation) × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"Draggable.html":{"id":"Draggable.html","title":"Class: Draggable","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: Draggable Draggable The Draggable class enables an element to be dragged and moved around within its parent element. It creates a draggable container with a handle that can be used to initiate the dragging action. The draggable element is positioned absolutely within its parent container and can be customized through various options. The class requires either a top or bottom position and either a left or right position to be specified through the options parameter. These determine the initial position of the draggable element within its parent container. The default positioning is bottom=20 and right=20. Features: Flexible positioning using top/bottom and left/right coordinates Customizable handle size and appearance Automatic position updates on window resize Touch-enabled dragging support Configurable spacing between handle and content new Draggable(element, parent [, options]) Creates a new Draggable instance. Parameters: Name Type Argument Description element HTMLElement The element to be made draggable parent HTMLElement | string The parent element where the draggable container will be appended. Can be either an HTMLElement or a CSS selector string options Object &lt;optional&gt; Configuration options for the draggable element Properties Name Type Argument Default Description top number &lt;optional&gt; The initial top position in pixels. Mutually exclusive with bottom bottom number &lt;optional&gt; 20 The initial bottom position in pixels. Mutually exclusive with top left number &lt;optional&gt; The initial left position in pixels. Mutually exclusive with right right number &lt;optional&gt; 20 The initial right position in pixels. Mutually exclusive with left handleSize number &lt;optional&gt; 10 The size of the drag handle in pixels handleGap number &lt;optional&gt; 5 The gap between the handle and the draggable content in pixels zindex number &lt;optional&gt; 200 The z-index of the draggable container handleColor string &lt;optional&gt; '#f0f0f0b3' The background color of the handle (supports rgba) Source: Draggable.js, line 20 Methods appendChild(element) Appends an HTML element to the draggable container and updates its position. Parameters: Name Type Description element HTMLElement The element to append to the draggable container Source: Draggable.js, line 85 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"EditorSvgAnnotation.html":{"id":"EditorSvgAnnotation.html","title":"Class: EditorSvgAnnotation","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: EditorSvgAnnotation EditorSvgAnnotation EditorSvgAnnotation enables creation and editing of SVG annotations in OpenLIME. It provides tools for drawing various shapes and managing annotations through a user interface. Features: Drawing tools: point, pin, line, box, circle Annotation editing and management Custom state and data storage Integration with annotation databases through callbacks Undo/redo functionality SVG export capabilities new EditorSvgAnnotation(viewer, layer [, options]) Creates an EditorSvgAnnotation instance Parameters: Name Type Argument Description viewer Viewer The OpenLIME viewer instance layer LayerSvgAnnotation The annotation layer to edit options Object &lt;optional&gt; Configuration options Properties Name Type Argument Default Description classes Object.&lt;string, {stroke: string, label: string}&gt; Annotation classes with colors and labels createCallback crudCallback &lt;optional&gt; Called when creating annotations updateCallback crudCallback &lt;optional&gt; Called when updating annotations deleteCallback crudCallback &lt;optional&gt; Called when deleting annotations enableState boolean &lt;optional&gt; false Whether to save viewer state with annotations customState customStateCallback &lt;optional&gt; Customize saved state data customData customDataCallback &lt;optional&gt; Customize annotation data selectedCallback selectedCallback &lt;optional&gt; Called when annotation is selected tools Object &lt;optional&gt; Custom tool configurations priority number &lt;optional&gt; 20000 Event handling priority Source: EditorSvgAnnotation.js, line 77 Example ```javascript // Create annotation layer const anno = new OpenLIME.Layer(options); viewer.addLayer('annotations', anno); // Initialize editor const editor = new OpenLIME.EditorSvgAnnotation(viewer, anno, { classes: { 'default': { stroke: '#000', label: 'Default' }, 'highlight': { stroke: '#ff0', label: 'Highlight' } } }); // Setup callbacks editor.createCallback = (anno) =&gt; { console.log(\"Created:\", anno); return saveToDatabase(anno); }; ``` Methods createAnnotation() Creates a new annotation Source: EditorSvgAnnotation.js, line 221 Returns: Type void deleteSelected() Deletes the selected annotation Source: EditorSvgAnnotation.js, line 499 Returns: Type void exportAnnotations() Exports all annotations as SVG Source: EditorSvgAnnotation.js, line 533 Returns: Type void redo() Performs a redo operation Source: EditorSvgAnnotation.js, line 639 Returns: Type void undo() Performs an undo operation Source: EditorSvgAnnotation.js, line 612 Returns: Type void × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"FocusContext.html":{"id":"FocusContext.html","title":"Class: FocusContext","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: FocusContext FocusContext FocusContext manages the focus+context visualization technique for lens-based interaction. It handles the distribution of user interactions between lens movement (focus) and camera movement (context) to maintain optimal viewing conditions. Key responsibilities: Maintains proper spacing between lens and viewport boundaries Distributes pan and zoom operations between lens and camera Ensures lens stays within valid viewport bounds Adapts camera transform to accommodate lens position Manages lens radius constraints new FocusContext() Source: FocusContext.js, line 34 Methods &lt;static&gt; adaptContext(viewport, focus, context, desiredScale) Adjusts the camera transform to ensure focus+context conditions are met for a given lens Parameters: Name Type Description viewport Viewport The current viewport focus Focus The lens object context Transform The camera transform to be updated desiredScale number Target scale for the camera transform Source: FocusContext.js, line 133 &lt;static&gt; pan(viewport, focus, context, delta, imageSize) Distributes a pan operation between lens movement and camera transform to maintain focus+context Parameters: Name Type Description viewport Viewport The current viewport focus Focus The lens object to be updated context Transform The camera transform to be updated delta Object Pan amount in dataset pixels Properties Name Type Description x number Horizontal pan amount y number Vertical pan amount imageSize Object Dataset dimensions Properties Name Type Description w number Dataset width h number Dataset height Source: FocusContext.js, line 48 &lt;static&gt; scale(camera, focus, context, dz) Distributes a scale operation between lens radius and camera zoom to maintain focus+context Parameters: Name Type Description camera Camera The camera object containing viewport and zoom constraints focus Focus The lens object to be updated context Transform The camera transform to be updated dz number Scale factor to be applied (multiplier) Source: FocusContext.js, line 83 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"Layer.html":{"id":"Layer.html","title":"Class: Layer","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: Layer Layer Layer is the core class for rendering content in OpenLIME. It manages raster data display, tile loading, and shader-based rendering. Features: Tile-based rendering with level-of-detail Shader-based visualization effects Automatic tile prefetching and caching Coordinate system transformations Animation and interpolation of shader parameters Support for multiple visualization modes Integration with layout systems for different data formats Layers can be used directly or serve as a base class for specialized layer types. The class uses a registration system where derived classes register themselves, allowing instantiation through the 'type' option. new Layer( [options]) Creates a Layer. Additionally, an object literal with Layer options can be specified. Signals are triggered when: ready: the size and layout of the layer is known update: some new tile is available, or some visualization parameters has changed loaded: is fired when all the images needed have been downloaded Parameters: Name Type Argument Description options Object &lt;optional&gt; Properties Name Type Default Description layout string | Layout 'image' The layout (the format of the input raster images). type string A string identifier to select the specific derived layer class to instantiate. id string The layer unique identifier. label string A string with a more comprehensive definition of the layer. If it exists, it is used in the UI layer menu, otherwise the id value is taken. transform Transform The relative coords from layer to canvas. visible bool true Whether to render the layer. zindex number Stack ordering value for the rendering of layers (higher zindex on top). overlay bool false Whether the layer must be rendered in overlay mode. prefetchBorder number 1 The threshold (in tile units) around the current camera position for which to prefetch tiles. mipmapBias number 0.2 Determine which texture is used when scale is not a power of 2. 0: use always the highest resulution, 1 the lowest, 0.5 switch halfway. shaders Object A map (shadersId, shader) of the shaders usable for the layer rendering. See @link {Shader}. controllers Array.&lt;Controller&gt; An array of UI device controllers active on the layer. sourceLayer Layer The layer from which to take the tiles (in order to avoid tile duplication). Source: Layer.js, line 67 Fires: Layer#event:ready - Fired when layer is initialized Layer#event:update - Fired when redraw is needed Layer#event:loaded - Fired when all tiles are loaded Layer#event:updateSize - Fired when layer size changes Example ```javascript // Create a basic image layer const layer = new OpenLIME.Layer({ layout: 'deepzoom', type: 'image', url: 'path/to/image.dzi', label: 'Main Image' }); // Add to viewer viewer.addLayer('main', layer); // Listen for events layer.addEvent('ready', () =&gt; { console.log('Layer initialized'); }); ``` Methods &lt;static&gt; computeLayersBBox(layers, discardHidden) Computes combined bounding box of multiple layers Parameters: Name Type Description layers Object.&lt;string, Layer&gt; Map of layers discardHidden boolean Whether to ignore hidden layers Source: Layer.js, line 401 Returns: Combined bounding box Type BoundingBox &lt;static&gt; computeLayersMinScale(layers, discardHidden) Computes minimum scale across layers Parameters: Name Type Description layers Object.&lt;string, Layer&gt; Map of layers discardHidden boolean Whether to ignore hidden layers Source: Layer.js, line 343 Returns: Minimum scale value Type number addControl(name, value) Adds a shader parameter control Parameters: Name Type Description name string Control identifier value * Initial value Source: Layer.js, line 437 Throws: If control already exists Type Error addShaderFilter(filter) Adds a filter to the current shader Parameters: Name Type Description filter Object Filter specification Source: Layer.js, line 170 Throws: If no shader is set Type Error boundingBox() Gets layer bounding box in scene coordinates Source: Layer.js, line 381 Returns: Bounding box Type BoundingBox clearShaderFilters(name) Removes all filters from the current shader Parameters: Name Type Description name Object Filter name Source: Layer.js, line 190 Throws: If no shader is set Type Error getControl(name) Gets the shader parameter control corresponding to name Parameters: Name Type Description name * The name of the control. return {*} The control Source: Layer.js, line 422 getMode() Gets the current shader visualization mode Source: Layer.js, line 289 Returns: Current mode or null if no shader Type string | null getModes() Gets available shader modes Source: Layer.js, line 299 Returns: Array of available modes Type Array.&lt;string&gt; getState( [stateMask]) Gets the current layer state Parameters: Name Type Argument Default Description stateMask Object &lt;optional&gt; null Optional mask to filter returned state properties Source: Layer.js, line 216 Returns: Current state object Type Object interpolateControls() Updates control interpolation Source: Layer.js, line 472 Returns: Whether all interpolations are complete Type boolean pixelSizePerMM() Gets pixel size in millimeters Source: Layer.js, line 372 Returns: Size of one pixel in mm Type number removeShaderFilter(name) Removes a filter from the current shader Parameters: Name Type Description name Object Filter name Source: Layer.js, line 180 Throws: If no shader is set Type Error scale() Gets layer scale Source: Layer.js, line 362 Returns: Current scale value Type number setControl(name, value [, dt] [, easing]) Sets a shader control value with optional animation Parameters: Name Type Argument Default Description name string Control identifier value * New value dt number &lt;optional&gt; Animation duration in ms easing string &lt;optional&gt; 'linear' Easing function Source: Layer.js, line 452 Fires: Layer#event:update setMode(mode) Sets shader visualization mode Parameters: Name Type Description mode string Mode to set Source: Layer.js, line 310 Fires: Layer#event:update setShader(id) Sets the active shader Parameters: Name Type Description id string Shader identifier from registered shaders Source: Layer.js, line 277 Fires: Layer#event:update Throws: If shader ID is not found Type Error setState(state [, dt] [, easing]) Sets the layer state with optional animation Parameters: Name Type Argument Default Description state Object State object with controls and mode dt number &lt;optional&gt; Animation duration in ms easing string &lt;optional&gt; 'linear' Easing function ('linear'|'ease-out'|'ease-in-out') Source: Layer.js, line 201 setTransform(tx) Sets the layer's transform Parameters: Name Type Description tx Transform New transform Source: Layer.js, line 266 Fires: Layer#event:updateSize setViewport(view) Sets the layer's viewport Parameters: Name Type Description view Object Viewport specification Properties Name Type Description x number X position y number Y position dx number Width dy number Height Source: Layer.js, line 160 Fires: Layer#event:update setVisible(visible) Sets layer visibility Parameters: Name Type Description visible boolean Whether layer should be visible Source: Layer.js, line 320 Fires: Layer#event:update setZindex(zindex) Sets layer rendering order Parameters: Name Type Description zindex number Stack order value Source: Layer.js, line 331 Fires: Layer#event:update Events ready The event is fired when a layer is initialized. Source: Layer.js, line 231 update The event is fired if a redraw is needed. Source: Layer.js, line 235 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"LayerAnnotation.html":{"id":"LayerAnnotation.html","title":"Class: LayerAnnotation","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: LayerAnnotation LayerAnnotation LayerAnnotation provides functionality for displaying and managing annotations overlaid on other layers. It supports both local and remote annotation data, selection management, and UI integration. Features: Display of text, graphics, and glyph annotations Remote annotation loading via JSON/HTTP Selection management Visibility toggling per annotation UI integration with annotation list Annotation event handling The layer automatically handles: Annotation data loading and parsing UI synchronization Visibility states Selection states Event propagation new LayerAnnotation( [options]) Instantiates a LayerAnnotation object. Parameters: Name Type Argument Description options Object &lt;optional&gt; An object literal with options that inherits from Layer. Properties Name Type Description style string Properties to style annotations. annotations string | Array The URL of the annotation data (JSON file or HTTP GET Request to an annotation server) or an array of annotations. Source: LayerAnnotation.js, line 58 Fires: LayerAnnotation#selected - Fired when annotation selection changes,event: with selected annotation as parameter LayerAnnotation#event:loaded - Fired when annotations are loaded Layer#update - Inherited from Layer,event: fired when redraw needed Layer#ready - Inherited from Layer,event: fired when layer is ready Example ```javascript // Create annotation layer from remote JSON const annoLayer = new OpenLIME.LayerAnnotation({ annotations: 'https://example.com/annotations.json', style: '.annotation { color: red; }', overlay: true }); // Listen for selection changes annoLayer.addEvent('selected', (annotation) =&gt; { console.log('Selected annotation:', annotation.label); }); // Add to viewer viewer.addLayer('annotations', annoLayer); ``` Extends Layer Methods addControl(name, value) Adds a shader parameter control Parameters: Name Type Description name string Control identifier value * Initial value Inherited From: Layer#addControl Overrides: Layer#addControl Source: Layer.js, line 437 Throws: If control already exists Type Error addShaderFilter(filter) Adds a filter to the current shader Parameters: Name Type Description filter Object Filter specification Inherited From: Layer#addShaderFilter Overrides: Layer#addShaderFilter Source: Layer.js, line 170 Throws: If no shader is set Type Error boundingBox() Gets layer bounding box in scene coordinates Inherited From: Layer#boundingBox Overrides: Layer#boundingBox Source: Layer.js, line 381 Returns: Bounding box Type BoundingBox clearShaderFilters(name) Removes all filters from the current shader Parameters: Name Type Description name Object Filter name Inherited From: Layer#clearShaderFilters Overrides: Layer#clearShaderFilters Source: Layer.js, line 190 Throws: If no shader is set Type Error getAnnotationById(id) Retrieves an annotation by its ID Parameters: Name Type Description id string Annotation identifier Source: LayerAnnotation.js, line 214 Returns: The found annotation or null if not found Type Annotation | null getControl(name) Gets the shader parameter control corresponding to name Parameters: Name Type Description name * The name of the control. return {*} The control Inherited From: Layer#getControl Overrides: Layer#getControl Source: Layer.js, line 422 getMode() Gets the current shader visualization mode Inherited From: Layer#getMode Overrides: Layer#getMode Source: Layer.js, line 289 Returns: Current mode or null if no shader Type string | null getModes() Gets available shader modes Inherited From: Layer#getModes Overrides: Layer#getModes Source: Layer.js, line 299 Returns: Array of available modes Type Array.&lt;string&gt; getState( [stateMask]) Gets the current layer state Parameters: Name Type Argument Default Description stateMask Object &lt;optional&gt; null Optional mask to filter returned state properties Inherited From: Layer#getState Overrides: Layer#getState Source: Layer.js, line 216 Returns: Current state object Type Object interpolateControls() Updates control interpolation Inherited From: Layer#interpolateControls Overrides: Layer#interpolateControls Source: Layer.js, line 472 Returns: Whether all interpolations are complete Type boolean pixelSizePerMM() Gets pixel size in millimeters Inherited From: Layer#pixelSizePerMM Overrides: Layer#pixelSizePerMM Source: Layer.js, line 372 Returns: Size of one pixel in mm Type number removeShaderFilter(name) Removes a filter from the current shader Parameters: Name Type Description name Object Filter name Inherited From: Layer#removeShaderFilter Overrides: Layer#removeShaderFilter Source: Layer.js, line 180 Throws: If no shader is set Type Error scale() Gets layer scale Inherited From: Layer#scale Overrides: Layer#scale Source: Layer.js, line 362 Returns: Current scale value Type number setControl(name, value [, dt] [, easing]) Sets a shader control value with optional animation Parameters: Name Type Argument Default Description name string Control identifier value * New value dt number &lt;optional&gt; Animation duration in ms easing string &lt;optional&gt; 'linear' Easing function Inherited From: Layer#setControl Overrides: Layer#setControl Source: Layer.js, line 452 Fires: Layer#event:update setMode(mode) Sets shader visualization mode Parameters: Name Type Description mode string Mode to set Inherited From: Layer#setMode Overrides: Layer#setMode Source: Layer.js, line 310 Fires: Layer#event:update setSelected(anno [, on]) Sets the selection state of an annotation Parameters: Name Type Argument Default Description anno Annotation The annotation to select/deselect on boolean &lt;optional&gt; true Whether to select (true) or deselect (false) Source: LayerAnnotation.js, line 236 Fires: LayerAnnotation#event:selected setShader(id) Sets the active shader Parameters: Name Type Description id string Shader identifier from registered shaders Inherited From: Layer#setShader Overrides: Layer#setShader Source: Layer.js, line 277 Fires: Layer#event:update Throws: If shader ID is not found Type Error setState(state [, dt] [, easing]) Sets the layer state with optional animation Parameters: Name Type Argument Default Description state Object State object with controls and mode dt number &lt;optional&gt; Animation duration in ms easing string &lt;optional&gt; 'linear' Easing function ('linear'|'ease-out'|'ease-in-out') Inherited From: Layer#setState Overrides: Layer#setState Source: Layer.js, line 201 setTransform(tx) Sets the layer's transform Parameters: Name Type Description tx Transform New transform Inherited From: Layer#setTransform Overrides: Layer#setTransform Source: Layer.js, line 266 Fires: Layer#event:updateSize setViewport(view) Sets the layer's viewport Parameters: Name Type Description view Object Viewport specification Properties Name Type Description x number X position y number Y position dx number Width dy number Height Inherited From: Layer#setViewport Overrides: Layer#setViewport Source: Layer.js, line 160 Fires: Layer#event:update setVisible(visible) Sets layer visibility Parameters: Name Type Description visible boolean Whether layer should be visible Inherited From: Layer#setVisible Overrides: Layer#setVisible Source: Layer.js, line 320 Fires: Layer#event:update setZindex(zindex) Sets layer rendering order Parameters: Name Type Description zindex number Stack order value Inherited From: Layer#setZindex Overrides: Layer#setZindex Source: Layer.js, line 331 Fires: Layer#event:update Events ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"LayerAnnotationImage.html":{"id":"LayerAnnotationImage.html","title":"Class: LayerAnnotationImage","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: LayerAnnotationImage LayerAnnotationImage LayerAnnotationImage extends LayerAnnotation to provide support for image-based annotations. Each annotation corresponds to a single tile in the layer, with customizable visibility and shader-based rendering. Features: Image-based annotation rendering Per-annotation visibility control Custom shader support for image processing Automatic texture management WebGL/WebGL2 compatibility Multi-format raster support The class handles: Image loading and caching Texture creation and binding Shader setup and compilation Tile visibility management WebGL state management new LayerAnnotationImage(options) Creates a new LayerAnnotationImage instance Parameters: Name Type Description options LayerAnnotationImageOptions Configuration options Source: LayerAnnotationImage.js, line 54 Throws: If path is not specified (warns in console) Type Error Example ```javascript // Create image annotation layer const imageAnnoLayer = new OpenLIME.LayerAnnotationImage({ url: 'annotations.json', path: './annotation-images/', format: 'vec4' }); // Configure visibility imageAnnoLayer.setAllTilesVisible(true); imageAnnoLayer.setTileVisible(0, false); // Hide first annotation // Add to viewer viewer.addLayer('imageAnnotations', imageAnnoLayer); ``` Extends LayerAnnotation Methods addControl(name, value) Adds a shader parameter control Parameters: Name Type Description name string Control identifier value * Initial value Inherited From: Layer#addControl Overrides: LayerAnnotation#addControl Source: Layer.js, line 437 Throws: If control already exists Type Error addShaderFilter(filter) Adds a filter to the current shader Parameters: Name Type Description filter Object Filter specification Inherited From: Layer#addShaderFilter Overrides: LayerAnnotation#addShaderFilter Source: Layer.js, line 170 Throws: If no shader is set Type Error boundingBox() Gets layer bounding box in scene coordinates Inherited From: Layer#boundingBox Overrides: LayerAnnotation#boundingBox Source: Layer.js, line 381 Returns: Bounding box Type BoundingBox clearShaderFilters(name) Removes all filters from the current shader Parameters: Name Type Description name Object Filter name Inherited From: Layer#clearShaderFilters Overrides: LayerAnnotation#clearShaderFilters Source: Layer.js, line 190 Throws: If no shader is set Type Error getAnnotationById(id) Retrieves an annotation by its ID Parameters: Name Type Description id string Annotation identifier Inherited From: LayerAnnotation#getAnnotationById Overrides: LayerAnnotation#getAnnotationById Source: LayerAnnotation.js, line 214 Returns: The found annotation or null if not found Type Annotation | null getControl(name) Gets the shader parameter control corresponding to name Parameters: Name Type Description name * The name of the control. return {*} The control Inherited From: Layer#getControl Overrides: LayerAnnotation#getControl Source: Layer.js, line 422 getMode() Gets the current shader visualization mode Inherited From: Layer#getMode Overrides: LayerAnnotation#getMode Source: Layer.js, line 289 Returns: Current mode or null if no shader Type string | null getModes() Gets available shader modes Inherited From: Layer#getModes Overrides: LayerAnnotation#getModes Source: Layer.js, line 299 Returns: Array of available modes Type Array.&lt;string&gt; getState( [stateMask]) Gets the current layer state Parameters: Name Type Argument Default Description stateMask Object &lt;optional&gt; null Optional mask to filter returned state properties Inherited From: Layer#getState Overrides: LayerAnnotation#getState Source: Layer.js, line 216 Returns: Current state object Type Object interpolateControls() Updates control interpolation Inherited From: Layer#interpolateControls Overrides: LayerAnnotation#interpolateControls Source: Layer.js, line 472 Returns: Whether all interpolations are complete Type boolean length() Gets the number of annotations in the layer Source: LayerAnnotationImage.js, line 92 Returns: Number of annotations Type number pixelSizePerMM() Gets pixel size in millimeters Inherited From: Layer#pixelSizePerMM Overrides: LayerAnnotation#pixelSizePerMM Source: Layer.js, line 372 Returns: Size of one pixel in mm Type number removeShaderFilter(name) Removes a filter from the current shader Parameters: Name Type Description name Object Filter name Inherited From: Layer#removeShaderFilter Overrides: LayerAnnotation#removeShaderFilter Source: Layer.js, line 180 Throws: If no shader is set Type Error scale() Gets layer scale Inherited From: Layer#scale Overrides: LayerAnnotation#scale Source: Layer.js, line 362 Returns: Current scale value Type number setAllTilesVisible(visible) Sets visibility for all annotations/tiles Parameters: Name Type Description visible boolean Whether all annotations should be visible Source: LayerAnnotationImage.js, line 111 setControl(name, value [, dt] [, easing]) Sets a shader control value with optional animation Parameters: Name Type Argument Default Description name string Control identifier value * New value dt number &lt;optional&gt; Animation duration in ms easing string &lt;optional&gt; 'linear' Easing function Inherited From: Layer#setControl Overrides: LayerAnnotation#setControl Source: Layer.js, line 452 Fires: Layer#event:update setMode(mode) Sets shader visualization mode Parameters: Name Type Description mode string Mode to set Inherited From: Layer#setMode Overrides: LayerAnnotation#setMode Source: Layer.js, line 310 Fires: Layer#event:update setSelected(anno [, on]) Sets the selection state of an annotation Parameters: Name Type Argument Default Description anno Annotation The annotation to select/deselect on boolean &lt;optional&gt; true Whether to select (true) or deselect (false) Inherited From: LayerAnnotation#setSelected Overrides: LayerAnnotation#setSelected Source: LayerAnnotation.js, line 236 Fires: LayerAnnotation#event:selected setShader(id) Sets the active shader Parameters: Name Type Description id string Shader identifier from registered shaders Inherited From: Layer#setShader Overrides: LayerAnnotation#setShader Source: Layer.js, line 277 Fires: Layer#event:update Throws: If shader ID is not found Type Error setState(state [, dt] [, easing]) Sets the layer state with optional animation Parameters: Name Type Argument Default Description state Object State object with controls and mode dt number &lt;optional&gt; Animation duration in ms easing string &lt;optional&gt; 'linear' Easing function ('linear'|'ease-out'|'ease-in-out') Inherited From: Layer#setState Overrides: LayerAnnotation#setState Source: Layer.js, line 201 setTileVisible(index, visible) Sets visibility for a specific annotation/tile Parameters: Name Type Description index number Index of the annotation visible boolean Whether the annotation should be visible Source: LayerAnnotationImage.js, line 101 setTransform(tx) Sets the layer's transform Parameters: Name Type Description tx Transform New transform Inherited From: Layer#setTransform Overrides: LayerAnnotation#setTransform Source: Layer.js, line 266 Fires: Layer#event:updateSize setViewport(view) Sets the layer's viewport Parameters: Name Type Description view Object Viewport specification Properties Name Type Description x number X position y number Y position dx number Width dy number Height Inherited From: Layer#setViewport Overrides: LayerAnnotation#setViewport Source: Layer.js, line 160 Fires: Layer#event:update setVisible(visible) Sets layer visibility Parameters: Name Type Description visible boolean Whether layer should be visible Inherited From: Layer#setVisible Overrides: LayerAnnotation#setVisible Source: Layer.js, line 320 Fires: Layer#event:update setZindex(zindex) Sets layer rendering order Parameters: Name Type Description zindex number Stack order value Inherited From: Layer#setZindex Overrides: LayerAnnotation#setZindex Source: Layer.js, line 331 Fires: Layer#event:update Events ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: LayerAnnotation#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: LayerAnnotation#event:update Source: Layer.js, line 235 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"LayerBRDF.html":{"id":"LayerBRDF.html","title":"Class: LayerBRDF","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: LayerBRDF LayerBRDF LayerBRDF implements real-time BRDF (Bidirectional Reflectance Distribution Function) rendering. The BRDF model describes how light reflects off a surface, taking into account: Diffuse reflection (rough, matte surfaces) Specular reflection (mirror-like reflections) Surface normals (microscopic surface orientation) Glossiness/roughness (surface micro-structure) Features: Real-time light direction control Multiple material channels support Customizable material properties Interactive lighting model Gamma correction Ambient light component Technical implementation: Uses normal mapping for surface detail Supports both linear and sRGB color spaces Implements spherical light projection Handles multi-channel textures GPU-accelerated rendering new LayerBRDF(options) Creates a new LayerBRDF instance Parameters: Name Type Description options LayerBRDFOptions Configuration options Source: LayerBRDF.js, line 71 Throws: If required channels (kd, normals) are not provided Type Error If rasters option is not empty Type Error Example ```javascript // Create BRDF layer with all channels const brdfLayer = new OpenLIME.LayerBRDF({ channels: { kd: 'diffuse.jpg', ks: 'specular.jpg', normals: 'normals.jpg', gloss: 'gloss.jpg' }, colorspaces: { kd: 'srgb', ks: 'linear' }, brightness: 1.2, gamma: 2.2 }); // Update light direction brdfLayer.setLight([0.5, 0.5], 500, 'ease-out'); ``` Extends Layer Methods &lt;static&gt; projectToFlattenedSphere(p) Projects a 2D point onto a flattened sphere using SGI trackball algorithm. This provides more intuitive light control by avoiding acceleration near edges. Based on SIGGRAPH 1988 paper on SGI trackball implementation. Parameters: Name Type Description p Array.&lt;number&gt; 2D point [x, y] in range [-1, 1] Source: LayerBRDF.js, line 168 Returns: 3D normalized vector [x, y, z] on flattened sphere Type Array.&lt;number&gt; &lt;static&gt; projectToSphere(p) Projects a 2D point onto a sphere surface Used for converting 2D mouse/touch input to 3D light direction Parameters: Name Type Description p Array.&lt;number&gt; 2D point [x, y] in range [-1, 1] Source: LayerBRDF.js, line 144 Returns: 3D normalized vector [x, y, z] on sphere surface Type Array.&lt;number&gt; addControl(name, value) Adds a shader parameter control Parameters: Name Type Description name string Control identifier value * Initial value Inherited From: Layer#addControl Overrides: Layer#addControl Source: Layer.js, line 437 Throws: If control already exists Type Error addShaderFilter(filter) Adds a filter to the current shader Parameters: Name Type Description filter Object Filter specification Inherited From: Layer#addShaderFilter Overrides: Layer#addShaderFilter Source: Layer.js, line 170 Throws: If no shader is set Type Error boundingBox() Gets layer bounding box in scene coordinates Inherited From: Layer#boundingBox Overrides: Layer#boundingBox Source: Layer.js, line 381 Returns: Bounding box Type BoundingBox clearShaderFilters(name) Removes all filters from the current shader Parameters: Name Type Description name Object Filter name Inherited From: Layer#clearShaderFilters Overrides: Layer#clearShaderFilters Source: Layer.js, line 190 Throws: If no shader is set Type Error getControl(name) Gets the shader parameter control corresponding to name Parameters: Name Type Description name * The name of the control. return {*} The control Inherited From: Layer#getControl Overrides: Layer#getControl Source: Layer.js, line 422 getMode() Gets the current shader visualization mode Inherited From: Layer#getMode Overrides: Layer#getMode Source: Layer.js, line 289 Returns: Current mode or null if no shader Type string | null getModes() Gets available shader modes Inherited From: Layer#getModes Overrides: Layer#getModes Source: Layer.js, line 299 Returns: Array of available modes Type Array.&lt;string&gt; getState( [stateMask]) Gets the current layer state Parameters: Name Type Argument Default Description stateMask Object &lt;optional&gt; null Optional mask to filter returned state properties Inherited From: Layer#getState Overrides: Layer#getState Source: Layer.js, line 216 Returns: Current state object Type Object pixelSizePerMM() Gets pixel size in millimeters Inherited From: Layer#pixelSizePerMM Overrides: Layer#pixelSizePerMM Source: Layer.js, line 372 Returns: Size of one pixel in mm Type number removeShaderFilter(name) Removes a filter from the current shader Parameters: Name Type Description name Object Filter name Inherited From: Layer#removeShaderFilter Overrides: Layer#removeShaderFilter Source: Layer.js, line 180 Throws: If no shader is set Type Error scale() Gets layer scale Inherited From: Layer#scale Overrides: Layer#scale Source: Layer.js, line 362 Returns: Current scale value Type number setControl(name, value [, dt] [, easing]) Sets a shader control value with optional animation Parameters: Name Type Argument Default Description name string Control identifier value * New value dt number &lt;optional&gt; Animation duration in ms easing string &lt;optional&gt; 'linear' Easing function Inherited From: Layer#setControl Overrides: Layer#setControl Source: Layer.js, line 452 Fires: Layer#event:update setLight(light [, dt] [, easing]) Sets the light direction with optional animation Parameters: Name Type Argument Default Description light Array.&lt;number&gt; 2D vector [x, y] representing light direction dt number &lt;optional&gt; Animation duration in milliseconds easing string &lt;optional&gt; 'linear' Animation easing function Source: LayerBRDF.js, line 193 setMode(mode) Sets shader visualization mode Parameters: Name Type Description mode string Mode to set Inherited From: Layer#setMode Overrides: Layer#setMode Source: Layer.js, line 310 Fires: Layer#event:update setShader(id) Sets the active shader Parameters: Name Type Description id string Shader identifier from registered shaders Inherited From: Layer#setShader Overrides: Layer#setShader Source: Layer.js, line 277 Fires: Layer#event:update Throws: If shader ID is not found Type Error setState(state [, dt] [, easing]) Sets the layer state with optional animation Parameters: Name Type Argument Default Description state Object State object with controls and mode dt number &lt;optional&gt; Animation duration in ms easing string &lt;optional&gt; 'linear' Easing function ('linear'|'ease-out'|'ease-in-out') Inherited From: Layer#setState Overrides: Layer#setState Source: Layer.js, line 201 setTransform(tx) Sets the layer's transform Parameters: Name Type Description tx Transform New transform Inherited From: Layer#setTransform Overrides: Layer#setTransform Source: Layer.js, line 266 Fires: Layer#event:updateSize setViewport(view) Sets the layer's viewport Parameters: Name Type Description view Object Viewport specification Properties Name Type Description x number X position y number Y position dx number Width dy number Height Inherited From: Layer#setViewport Overrides: Layer#setViewport Source: Layer.js, line 160 Fires: Layer#event:update setVisible(visible) Sets layer visibility Parameters: Name Type Description visible boolean Whether layer should be visible Inherited From: Layer#setVisible Overrides: Layer#setVisible Source: Layer.js, line 320 Fires: Layer#event:update setZindex(zindex) Sets layer rendering order Parameters: Name Type Description zindex number Stack order value Inherited From: Layer#setZindex Overrides: Layer#setZindex Source: Layer.js, line 331 Fires: Layer#event:update Events ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"LayerCombiner.html":{"id":"LayerCombiner.html","title":"Class: LayerCombiner","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: LayerCombiner LayerCombiner LayerCombiner provides functionality to combine multiple layers using framebuffer operations and custom shaders. It enables complex visual effects by compositing layers in real-time using GPU-accelerated rendering. Features: Real-time layer composition Custom shader-based effects Framebuffer management Dynamic texture allocation Resolution-independent rendering GPU-accelerated compositing Use Cases: Layer blending and mixing Image comparison tools Lens effects (see LayerLens) Custom visual effects Multi-layer compositing Technical Details: Creates framebuffers for each input layer Manages WebGL textures and resources Supports dynamic viewport resizing Handles shader-based composition Maintains proper resource cleanup new LayerCombiner(options) Creates a new LayerCombiner instance Parameters: Name Type Description options LayerCombinerOptions Configuration options Source: LayerCombiner.js, line 71 Throws: If rasters option is not empty (rasters should be defined in source layers) Type Error Example ```javascript // Create two base layers const baseLayer = new OpenLIME.Layer({ type: 'image', url: 'base.jpg' }); const overlayLayer = new OpenLIME.Layer({ type: 'image', url: 'overlay.jpg' }); // Create combiner with custom shader const combiner = new OpenLIME.Layer({ type: 'combiner', layers: [baseLayer, overlayLayer], visible: true }); // Set up blend shader const shader = new OpenLIME.ShaderCombiner(); shader.mode = 'blend'; combiner.shaders = { 'standard': shader }; combiner.setShader('standard'); // Add to viewer viewer.addLayer('combined', combiner); ``` Extends Layer Methods addControl(name, value) Adds a shader parameter control Parameters: Name Type Description name string Control identifier value * Initial value Inherited From: Layer#addControl Overrides: Layer#addControl Source: Layer.js, line 437 Throws: If control already exists Type Error addShaderFilter(filter) Adds a filter to the current shader Parameters: Name Type Description filter Object Filter specification Inherited From: Layer#addShaderFilter Overrides: Layer#addShaderFilter Source: Layer.js, line 170 Throws: If no shader is set Type Error clearShaderFilters(name) Removes all filters from the current shader Parameters: Name Type Description name Object Filter name Inherited From: Layer#clearShaderFilters Overrides: Layer#clearShaderFilters Source: Layer.js, line 190 Throws: If no shader is set Type Error getControl(name) Gets the shader parameter control corresponding to name Parameters: Name Type Description name * The name of the control. return {*} The control Inherited From: Layer#getControl Overrides: Layer#getControl Source: Layer.js, line 422 getMode() Gets the current shader visualization mode Inherited From: Layer#getMode Overrides: Layer#getMode Source: Layer.js, line 289 Returns: Current mode or null if no shader Type string | null getModes() Gets available shader modes Inherited From: Layer#getModes Overrides: Layer#getModes Source: Layer.js, line 299 Returns: Array of available modes Type Array.&lt;string&gt; getState( [stateMask]) Gets the current layer state Parameters: Name Type Argument Default Description stateMask Object &lt;optional&gt; null Optional mask to filter returned state properties Inherited From: Layer#getState Overrides: Layer#getState Source: Layer.js, line 216 Returns: Current state object Type Object interpolateControls() Updates control interpolation Inherited From: Layer#interpolateControls Overrides: Layer#interpolateControls Source: Layer.js, line 472 Returns: Whether all interpolations are complete Type boolean pixelSizePerMM() Gets pixel size in millimeters Inherited From: Layer#pixelSizePerMM Overrides: Layer#pixelSizePerMM Source: Layer.js, line 372 Returns: Size of one pixel in mm Type number removeShaderFilter(name) Removes a filter from the current shader Parameters: Name Type Description name Object Filter name Inherited From: Layer#removeShaderFilter Overrides: Layer#removeShaderFilter Source: Layer.js, line 180 Throws: If no shader is set Type Error setControl(name, value [, dt] [, easing]) Sets a shader control value with optional animation Parameters: Name Type Argument Default Description name string Control identifier value * New value dt number &lt;optional&gt; Animation duration in ms easing string &lt;optional&gt; 'linear' Easing function Inherited From: Layer#setControl Overrides: Layer#setControl Source: Layer.js, line 452 Fires: Layer#event:update setMode(mode) Sets shader visualization mode Parameters: Name Type Description mode string Mode to set Inherited From: Layer#setMode Overrides: Layer#setMode Source: Layer.js, line 310 Fires: Layer#event:update setShader(id) Sets the active shader Parameters: Name Type Description id string Shader identifier from registered shaders Inherited From: Layer#setShader Overrides: Layer#setShader Source: Layer.js, line 277 Fires: Layer#event:update Throws: If shader ID is not found Type Error setState(state [, dt] [, easing]) Sets the layer state with optional animation Parameters: Name Type Argument Default Description state Object State object with controls and mode dt number &lt;optional&gt; Animation duration in ms easing string &lt;optional&gt; 'linear' Easing function ('linear'|'ease-out'|'ease-in-out') Inherited From: Layer#setState Overrides: Layer#setState Source: Layer.js, line 201 setTransform(tx) Sets the layer's transform Parameters: Name Type Description tx Transform New transform Inherited From: Layer#setTransform Overrides: Layer#setTransform Source: Layer.js, line 266 Fires: Layer#event:updateSize setViewport(view) Sets the layer's viewport Parameters: Name Type Description view Object Viewport specification Properties Name Type Description x number X position y number Y position dx number Width dy number Height Inherited From: Layer#setViewport Overrides: Layer#setViewport Source: Layer.js, line 160 Fires: Layer#event:update setVisible(visible) Sets layer visibility Parameters: Name Type Description visible boolean Whether layer should be visible Inherited From: Layer#setVisible Overrides: Layer#setVisible Source: Layer.js, line 320 Fires: Layer#event:update setZindex(zindex) Sets layer rendering order Parameters: Name Type Description zindex number Stack order value Inherited From: Layer#setZindex Overrides: Layer#setZindex Source: Layer.js, line 331 Fires: Layer#event:update Events ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"LayerDstretch.html":{"id":"LayerDstretch.html","title":"Class: LayerDstretch","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: LayerDstretch LayerDstretch LayerDStretch implements the DStretch (Decorrelation Stretch) algorithm for image enhancement. This technique is particularly useful in archaeology and rock art documentation for revealing faint pictographs and petroglyphs. DStretch works by: Converting RGB colors to a decorrelated color space Equalizing and stretching the color distributions Converting back to RGB for display Features: Real-time image enhancement Interactive control of enhancement parameters Automatic color statistics computation Support for large images through tiling GPU-accelerated processing Light direction control Technical Implementation: Uses Principal Component Analysis (PCA) for color decorrelation Supports custom transformation matrices Implements dynamic sampling for color statistics Handles WebGL texture management Supports progressive loading new LayerDstretch(options) Creates a new LayerDStretch instance Parameters: Name Type Description options LayerDStretchOptions Configuration options Source: LayerDstretch.js, line 57 Throws: If url option is not provided Type Error Example ```javascript // Create DStretch layer const dstretchLayer = new OpenLIME.Layer({ type: 'dstretch', url: 'image.jpg', visible: true }); // Add to viewer viewer.addLayer('enhanced', dstretchLayer); // Adjust enhancement parameters dstretchLayer.setLight([0.5, 0.3], 500); // Animate to new enhancement ``` Extends LayerImage Methods addControl(name, value) Adds a shader parameter control Parameters: Name Type Description name string Control identifier value * Initial value Inherited From: Layer#addControl Overrides: LayerImage#addControl Source: Layer.js, line 437 Throws: If control already exists Type Error addShaderFilter(filter) Adds a filter to the current shader Parameters: Name Type Description filter Object Filter specification Inherited From: Layer#addShaderFilter Overrides: LayerImage#addShaderFilter Source: Layer.js, line 170 Throws: If no shader is set Type Error boundingBox() Gets layer bounding box in scene coordinates Inherited From: Layer#boundingBox Overrides: LayerImage#boundingBox Source: Layer.js, line 381 Returns: Bounding box Type BoundingBox clearShaderFilters(name) Removes all filters from the current shader Parameters: Name Type Description name Object Filter name Inherited From: Layer#clearShaderFilters Overrides: LayerImage#clearShaderFilters Source: Layer.js, line 190 Throws: If no shader is set Type Error getControl(name) Gets the shader parameter control corresponding to name Parameters: Name Type Description name * The name of the control. return {*} The control Inherited From: Layer#getControl Overrides: LayerImage#getControl Source: Layer.js, line 422 getMode() Gets the current shader visualization mode Inherited From: Layer#getMode Overrides: LayerImage#getMode Source: Layer.js, line 289 Returns: Current mode or null if no shader Type string | null getModes() Gets available shader modes Inherited From: Layer#getModes Overrides: LayerImage#getModes Source: Layer.js, line 299 Returns: Array of available modes Type Array.&lt;string&gt; getState( [stateMask]) Gets the current layer state Parameters: Name Type Argument Default Description stateMask Object &lt;optional&gt; null Optional mask to filter returned state properties Inherited From: Layer#getState Overrides: LayerImage#getState Source: Layer.js, line 216 Returns: Current state object Type Object interpolateControls() Updates control interpolation Inherited From: Layer#interpolateControls Overrides: LayerImage#interpolateControls Source: Layer.js, line 472 Returns: Whether all interpolations are complete Type boolean pixelSizePerMM() Gets pixel size in millimeters Inherited From: Layer#pixelSizePerMM Overrides: LayerImage#pixelSizePerMM Source: Layer.js, line 372 Returns: Size of one pixel in mm Type number removeShaderFilter(name) Removes a filter from the current shader Parameters: Name Type Description name Object Filter name Inherited From: Layer#removeShaderFilter Overrides: LayerImage#removeShaderFilter Source: Layer.js, line 180 Throws: If no shader is set Type Error scale() Gets layer scale Inherited From: Layer#scale Overrides: LayerImage#scale Source: Layer.js, line 362 Returns: Current scale value Type number setControl(name, value [, dt] [, easing]) Sets a shader control value with optional animation Parameters: Name Type Argument Default Description name string Control identifier value * New value dt number &lt;optional&gt; Animation duration in ms easing string &lt;optional&gt; 'linear' Easing function Inherited From: Layer#setControl Overrides: LayerImage#setControl Source: Layer.js, line 452 Fires: Layer#event:update setLight(value [, dt]) Sets the enhancement parameters through a light-like interface Parameters: Name Type Argument Description value Array.&lt;number&gt; Two values controlling the enhancement transformation dt number &lt;optional&gt; Animation duration in milliseconds Source: LayerDstretch.js, line 85 Fires: Layer#event:update setMode(mode) Sets shader visualization mode Parameters: Name Type Description mode string Mode to set Inherited From: Layer#setMode Overrides: LayerImage#setMode Source: Layer.js, line 310 Fires: Layer#event:update setShader(id) Sets the active shader Parameters: Name Type Description id string Shader identifier from registered shaders Inherited From: Layer#setShader Overrides: LayerImage#setShader Source: Layer.js, line 277 Fires: Layer#event:update Throws: If shader ID is not found Type Error setState(state [, dt] [, easing]) Sets the layer state with optional animation Parameters: Name Type Argument Default Description state Object State object with controls and mode dt number &lt;optional&gt; Animation duration in ms easing string &lt;optional&gt; 'linear' Easing function ('linear'|'ease-out'|'ease-in-out') Inherited From: Layer#setState Overrides: LayerImage#setState Source: Layer.js, line 201 setTransform(tx) Sets the layer's transform Parameters: Name Type Description tx Transform New transform Inherited From: Layer#setTransform Overrides: LayerImage#setTransform Source: Layer.js, line 266 Fires: Layer#event:updateSize setViewport(view) Sets the layer's viewport Parameters: Name Type Description view Object Viewport specification Properties Name Type Description x number X position y number Y position dx number Width dy number Height Inherited From: Layer#setViewport Overrides: LayerImage#setViewport Source: Layer.js, line 160 Fires: Layer#event:update setVisible(visible) Sets layer visibility Parameters: Name Type Description visible boolean Whether layer should be visible Inherited From: Layer#setVisible Overrides: LayerImage#setVisible Source: Layer.js, line 320 Fires: Layer#event:update setZindex(zindex) Sets layer rendering order Parameters: Name Type Description zindex number Stack order value Inherited From: Layer#setZindex Overrides: LayerImage#setZindex Source: Layer.js, line 331 Fires: Layer#event:update Events ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: LayerImage#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: LayerImage#event:update Source: Layer.js, line 235 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"LayerImage.html":{"id":"LayerImage.html","title":"Class: LayerImage","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: LayerImage LayerImage LayerImage provides fundamental image rendering capabilities in OpenLIME. It serves as both a standalone layer for basic image display and a foundation for more complex image-based layers. Features: Single image rendering WebGL-based display Automatic format handling Layout system integration Shader-based processing Technical Details: Uses WebGL textures for image data Supports various color formats (vec3, vec4) Integrates with OpenLIME layout system Manages raster data automatically Provides standard RGB shader by default new LayerImage(options) Creates a new LayerImage instance Parameters: Name Type Description options LayerImageOptions Configuration options Source: LayerImage.js, line 54 Throws: If rasters options is not empty (should be auto-configured) Type Error If no URL is provided and layout has no URLs Type Error Example ```javascript // Direct instantiation const imageLayer = new OpenLIME.LayerImage({ url: 'image.jpg', layout: 'image', format: 'vec4' }); viewer.addLayer('main', imageLayer); // Using Layer factory const factoryLayer = new OpenLIME.Layer({ type: 'image', url: 'image.jpg', layout: 'image' }); viewer.addLayer('factory', factoryLayer); ``` Extends Layer Methods addControl(name, value) Adds a shader parameter control Parameters: Name Type Description name string Control identifier value * Initial value Inherited From: Layer#addControl Overrides: Layer#addControl Source: Layer.js, line 437 Throws: If control already exists Type Error addShaderFilter(filter) Adds a filter to the current shader Parameters: Name Type Description filter Object Filter specification Inherited From: Layer#addShaderFilter Overrides: Layer#addShaderFilter Source: Layer.js, line 170 Throws: If no shader is set Type Error boundingBox() Gets layer bounding box in scene coordinates Inherited From: Layer#boundingBox Overrides: Layer#boundingBox Source: Layer.js, line 381 Returns: Bounding box Type BoundingBox clearShaderFilters(name) Removes all filters from the current shader Parameters: Name Type Description name Object Filter name Inherited From: Layer#clearShaderFilters Overrides: Layer#clearShaderFilters Source: Layer.js, line 190 Throws: If no shader is set Type Error getControl(name) Gets the shader parameter control corresponding to name Parameters: Name Type Description name * The name of the control. return {*} The control Inherited From: Layer#getControl Overrides: Layer#getControl Source: Layer.js, line 422 getMode() Gets the current shader visualization mode Inherited From: Layer#getMode Overrides: Layer#getMode Source: Layer.js, line 289 Returns: Current mode or null if no shader Type string | null getModes() Gets available shader modes Inherited From: Layer#getModes Overrides: Layer#getModes Source: Layer.js, line 299 Returns: Array of available modes Type Array.&lt;string&gt; getState( [stateMask]) Gets the current layer state Parameters: Name Type Argument Default Description stateMask Object &lt;optional&gt; null Optional mask to filter returned state properties Inherited From: Layer#getState Overrides: Layer#getState Source: Layer.js, line 216 Returns: Current state object Type Object interpolateControls() Updates control interpolation Inherited From: Layer#interpolateControls Overrides: Layer#interpolateControls Source: Layer.js, line 472 Returns: Whether all interpolations are complete Type boolean pixelSizePerMM() Gets pixel size in millimeters Inherited From: Layer#pixelSizePerMM Overrides: Layer#pixelSizePerMM Source: Layer.js, line 372 Returns: Size of one pixel in mm Type number removeShaderFilter(name) Removes a filter from the current shader Parameters: Name Type Description name Object Filter name Inherited From: Layer#removeShaderFilter Overrides: Layer#removeShaderFilter Source: Layer.js, line 180 Throws: If no shader is set Type Error scale() Gets layer scale Inherited From: Layer#scale Overrides: Layer#scale Source: Layer.js, line 362 Returns: Current scale value Type number setControl(name, value [, dt] [, easing]) Sets a shader control value with optional animation Parameters: Name Type Argument Default Description name string Control identifier value * New value dt number &lt;optional&gt; Animation duration in ms easing string &lt;optional&gt; 'linear' Easing function Inherited From: Layer#setControl Overrides: Layer#setControl Source: Layer.js, line 452 Fires: Layer#event:update setMode(mode) Sets shader visualization mode Parameters: Name Type Description mode string Mode to set Inherited From: Layer#setMode Overrides: Layer#setMode Source: Layer.js, line 310 Fires: Layer#event:update setShader(id) Sets the active shader Parameters: Name Type Description id string Shader identifier from registered shaders Inherited From: Layer#setShader Overrides: Layer#setShader Source: Layer.js, line 277 Fires: Layer#event:update Throws: If shader ID is not found Type Error setState(state [, dt] [, easing]) Sets the layer state with optional animation Parameters: Name Type Argument Default Description state Object State object with controls and mode dt number &lt;optional&gt; Animation duration in ms easing string &lt;optional&gt; 'linear' Easing function ('linear'|'ease-out'|'ease-in-out') Inherited From: Layer#setState Overrides: Layer#setState Source: Layer.js, line 201 setTransform(tx) Sets the layer's transform Parameters: Name Type Description tx Transform New transform Inherited From: Layer#setTransform Overrides: Layer#setTransform Source: Layer.js, line 266 Fires: Layer#event:updateSize setViewport(view) Sets the layer's viewport Parameters: Name Type Description view Object Viewport specification Properties Name Type Description x number X position y number Y position dx number Width dy number Height Inherited From: Layer#setViewport Overrides: Layer#setViewport Source: Layer.js, line 160 Fires: Layer#event:update setVisible(visible) Sets layer visibility Parameters: Name Type Description visible boolean Whether layer should be visible Inherited From: Layer#setVisible Overrides: Layer#setVisible Source: Layer.js, line 320 Fires: Layer#event:update setZindex(zindex) Sets layer rendering order Parameters: Name Type Description zindex number Stack order value Inherited From: Layer#setZindex Overrides: Layer#setZindex Source: Layer.js, line 331 Fires: Layer#event:update Events ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"LayerLens.html":{"id":"LayerLens.html","title":"Class: LayerLens","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: LayerLens LayerLens LayerLens implements a magnifying lens effect that can display content from one or two layers. It provides an interactive lens that can be moved and resized, showing different layer content inside and outside the lens area. Features: Interactive lens positioning and sizing Support for base and overlay layers Animated transitions Customizable border appearance Dashboard UI integration Optimized viewport rendering Technical Details: Uses framebuffer composition for layer blending Implements viewport optimization for performance Handles coordinate transformations between systems Supports animated parameter changes Manages WebGL resources efficiently new LayerLens(options) Creates a new LayerLens instance Parameters: Name Type Description options LayerLensOptions Configuration options Source: LayerLens.js, line 61 Throws: If camera is not provided Type Error Example ```javascript // Create lens with base layer const lens = new OpenLIME.LayerLens({ camera: viewer.camera, radius: 150, borderEnable: true, borderColor: [0, 0, 0, 1] }); // Set layers lens.setBaseLayer(baseLayer); lens.setOverlayLayer(overlayLayer); // Animate lens position lens.setCenter(500, 500, 1000, 'ease-out'); // Add to viewer viewer.addLayer('lens', lens); ``` Extends LayerCombiner Methods addControl(name, value) Adds a shader parameter control Parameters: Name Type Description name string Control identifier value * Initial value Inherited From: Layer#addControl Overrides: LayerCombiner#addControl Source: Layer.js, line 437 Throws: If control already exists Type Error addShaderFilter(filter) Adds a filter to the current shader Parameters: Name Type Description filter Object Filter specification Inherited From: Layer#addShaderFilter Overrides: LayerCombiner#addShaderFilter Source: Layer.js, line 170 Throws: If no shader is set Type Error clearShaderFilters(name) Removes all filters from the current shader Parameters: Name Type Description name Object Filter name Inherited From: Layer#clearShaderFilters Overrides: LayerCombiner#clearShaderFilters Source: Layer.js, line 190 Throws: If no shader is set Type Error getBorderColor() Gets current border color Source: LayerLens.js, line 213 Returns: RGBA color array Type Array.&lt;number&gt; getBorderWidth() Gets current border width Source: LayerLens.js, line 221 Returns: Border width in pixels Type number getControl(name) Gets the shader parameter control corresponding to name Parameters: Name Type Description name * The name of the control. return {*} The control Inherited From: Layer#getControl Overrides: LayerCombiner#getControl Source: Layer.js, line 422 getCurrentCenter() Gets current lens center position Source: LayerLens.js, line 195 Returns: Center position in scene coordinates Type Object getMode() Gets the current shader visualization mode Inherited From: Layer#getMode Overrides: LayerCombiner#getMode Source: Layer.js, line 289 Returns: Current mode or null if no shader Type string | null getModes() Gets available shader modes Inherited From: Layer#getModes Overrides: LayerCombiner#getModes Source: Layer.js, line 299 Returns: Array of available modes Type Array.&lt;string&gt; getRadius() Gets current lens radius Source: LayerLens.js, line 176 Returns: Current radius in pixels Type number getState( [stateMask]) Gets the current layer state Parameters: Name Type Argument Default Description stateMask Object &lt;optional&gt; null Optional mask to filter returned state properties Inherited From: Layer#getState Overrides: LayerCombiner#getState Source: Layer.js, line 216 Returns: Current state object Type Object getTargetCenter() Gets target lens position for ongoing animation Source: LayerLens.js, line 204 Returns: Target position in scene coordinates Type Object interpolateControls() Updates control interpolation Inherited From: Layer#interpolateControls Overrides: LayerCombiner#interpolateControls Source: Layer.js, line 472 Returns: Whether all interpolations are complete Type boolean pixelSizePerMM() Gets pixel size in millimeters Inherited From: Layer#pixelSizePerMM Overrides: LayerCombiner#pixelSizePerMM Source: Layer.js, line 372 Returns: Size of one pixel in mm Type number regenerateFrameBuffers(layer) Sets the overlay layer (shown inside lens) Parameters: Name Type Description layer Layer Overlay layer instance Source: LayerLens.js, line 152 removeOverlayLayer() Removes the overlay layer, returning to single layer mode Source: LayerLens.js, line 121 removeShaderFilter(name) Removes a filter from the current shader Parameters: Name Type Description name Object Filter name Inherited From: Layer#removeShaderFilter Overrides: LayerCombiner#removeShaderFilter Source: Layer.js, line 180 Throws: If no shader is set Type Error setBaseLayer(layer) Sets the base layer (shown outside lens) Parameters: Name Type Description layer Layer Base layer instance Source: LayerLens.js, line 131 Fires: Layer#event:update setCenter(x, y [, delayms] [, easing]) Sets lens center position with optional animation Parameters: Name Type Argument Default Description x number X coordinate in scene space y number Y coordinate in scene space delayms number &lt;optional&gt; 100 Animation duration easing string &lt;optional&gt; 'linear' Animation easing function Source: LayerLens.js, line 187 setControl(name, value [, dt] [, easing]) Sets a shader control value with optional animation Parameters: Name Type Argument Default Description name string Control identifier value * New value dt number &lt;optional&gt; Animation duration in ms easing string &lt;optional&gt; 'linear' Easing function Inherited From: Layer#setControl Overrides: LayerCombiner#setControl Source: Layer.js, line 452 Fires: Layer#event:update setMode(mode) Sets shader visualization mode Parameters: Name Type Description mode string Mode to set Inherited From: Layer#setMode Overrides: LayerCombiner#setMode Source: Layer.js, line 310 Fires: Layer#event:update setOverlayLayer(layer) Sets the overlay layer (shown inside lens) Parameters: Name Type Description layer Layer Overlay layer instance Source: LayerLens.js, line 140 setRadius(radius [, delayms] [, easing]) Sets lens radius with optional animation Parameters: Name Type Argument Default Description radius number New radius in pixels delayms number &lt;optional&gt; 100 Animation duration easing string &lt;optional&gt; 'linear' Animation easing function Source: LayerLens.js, line 168 setShader(id) Sets the active shader Parameters: Name Type Description id string Shader identifier from registered shaders Inherited From: Layer#setShader Overrides: LayerCombiner#setShader Source: Layer.js, line 277 Fires: Layer#event:update Throws: If shader ID is not found Type Error setState(state [, dt] [, easing]) Sets the layer state with optional animation Parameters: Name Type Argument Default Description state Object State object with controls and mode dt number &lt;optional&gt; Animation duration in ms easing string &lt;optional&gt; 'linear' Easing function ('linear'|'ease-out'|'ease-in-out') Inherited From: Layer#setState Overrides: LayerCombiner#setState Source: Layer.js, line 201 setTransform(tx) Sets the layer's transform Parameters: Name Type Description tx Transform New transform Inherited From: Layer#setTransform Overrides: LayerCombiner#setTransform Source: Layer.js, line 266 Fires: Layer#event:updateSize setViewport(view) Sets the layer's viewport Parameters: Name Type Description view Object Viewport specification Properties Name Type Description x number X position y number Y position dx number Width dy number Height Inherited From: Layer#setViewport Overrides: LayerCombiner#setViewport Source: Layer.js, line 160 Fires: Layer#event:update setVisible(visible) Sets layer visibility and updates dashboard if present Parameters: Name Type Description visible boolean Whether layer should be visible Inherited From: Layer#setVisible Overrides: LayerCombiner#setVisible Source: LayerLens.js, line 107 Fires: Layer#event:update setZindex(zindex) Sets layer rendering order Parameters: Name Type Description zindex number Stack order value Inherited From: Layer#setZindex Overrides: LayerCombiner#setZindex Source: Layer.js, line 331 Fires: Layer#event:update Events ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: LayerCombiner#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: LayerCombiner#event:update Source: Layer.js, line 235 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"LayerMaskedImage.html":{"id":"LayerMaskedImage.html","title":"Class: LayerMaskedImage","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: LayerMaskedImage LayerMaskedImage LayerMaskedImage provides specialized handling for masked scalar images with bilinear interpolation. It implements custom texture sampling and masking operations through WebGL shaders. Features: Custom scalar image handling Bilinear interpolation with masking WebGL shader-based processing Support for both WebGL 1 and 2 Nearest-neighbor texture filtering Masked value visualization Technical Details: Uses LUMINANCE format for single-channel data Implements custom bilinear sampling in shader Handles mask values through alpha channel Supports value rescaling (255.0/254.0 scale with -1.0/254.0 bias) Uses custom texture parameters for proper sampling Shader Implementation: Performs bilinear interpolation in shader Handles masked values (0 = masked) Implements value rescaling Provides visualization of masked areas (in red) Uses texelFetch for precise sampling new LayerMaskedImage(options) Creates a new LayerMaskedImage instance Parameters: Name Type Description options LayerMaskedImageOptions Configuration options Source: LayerMaskedImage.js, line 54 Throws: If rasters options is not empty Type Error If url is not provided and layout has no URLs Type Error Example ```javascript // Create masked image layer const maskedLayer = new OpenLIME.Layer({ type: 'maskedimage', url: 'masked-data.png', format: 'vec4' }); // Add to viewer viewer.addLayer('masked', maskedLayer); ``` Extends Layer Methods addControl(name, value) Adds a shader parameter control Parameters: Name Type Description name string Control identifier value * Initial value Inherited From: Layer#addControl Overrides: Layer#addControl Source: Layer.js, line 437 Throws: If control already exists Type Error addShaderFilter(filter) Adds a filter to the current shader Parameters: Name Type Description filter Object Filter specification Inherited From: Layer#addShaderFilter Overrides: Layer#addShaderFilter Source: Layer.js, line 170 Throws: If no shader is set Type Error boundingBox() Gets layer bounding box in scene coordinates Inherited From: Layer#boundingBox Overrides: Layer#boundingBox Source: Layer.js, line 381 Returns: Bounding box Type BoundingBox clearShaderFilters(name) Removes all filters from the current shader Parameters: Name Type Description name Object Filter name Inherited From: Layer#clearShaderFilters Overrides: Layer#clearShaderFilters Source: Layer.js, line 190 Throws: If no shader is set Type Error getControl(name) Gets the shader parameter control corresponding to name Parameters: Name Type Description name * The name of the control. return {*} The control Inherited From: Layer#getControl Overrides: Layer#getControl Source: Layer.js, line 422 getMode() Gets the current shader visualization mode Inherited From: Layer#getMode Overrides: Layer#getMode Source: Layer.js, line 289 Returns: Current mode or null if no shader Type string | null getModes() Gets available shader modes Inherited From: Layer#getModes Overrides: Layer#getModes Source: Layer.js, line 299 Returns: Array of available modes Type Array.&lt;string&gt; getState( [stateMask]) Gets the current layer state Parameters: Name Type Argument Default Description stateMask Object &lt;optional&gt; null Optional mask to filter returned state properties Inherited From: Layer#getState Overrides: Layer#getState Source: Layer.js, line 216 Returns: Current state object Type Object interpolateControls() Updates control interpolation Inherited From: Layer#interpolateControls Overrides: Layer#interpolateControls Source: Layer.js, line 472 Returns: Whether all interpolations are complete Type boolean pixelSizePerMM() Gets pixel size in millimeters Inherited From: Layer#pixelSizePerMM Overrides: Layer#pixelSizePerMM Source: Layer.js, line 372 Returns: Size of one pixel in mm Type number removeShaderFilter(name) Removes a filter from the current shader Parameters: Name Type Description name Object Filter name Inherited From: Layer#removeShaderFilter Overrides: Layer#removeShaderFilter Source: Layer.js, line 180 Throws: If no shader is set Type Error scale() Gets layer scale Inherited From: Layer#scale Overrides: Layer#scale Source: Layer.js, line 362 Returns: Current scale value Type number setControl(name, value [, dt] [, easing]) Sets a shader control value with optional animation Parameters: Name Type Argument Default Description name string Control identifier value * New value dt number &lt;optional&gt; Animation duration in ms easing string &lt;optional&gt; 'linear' Easing function Inherited From: Layer#setControl Overrides: Layer#setControl Source: Layer.js, line 452 Fires: Layer#event:update setMode(mode) Sets shader visualization mode Parameters: Name Type Description mode string Mode to set Inherited From: Layer#setMode Overrides: Layer#setMode Source: Layer.js, line 310 Fires: Layer#event:update setShader(id) Sets the active shader Parameters: Name Type Description id string Shader identifier from registered shaders Inherited From: Layer#setShader Overrides: Layer#setShader Source: Layer.js, line 277 Fires: Layer#event:update Throws: If shader ID is not found Type Error setState(state [, dt] [, easing]) Sets the layer state with optional animation Parameters: Name Type Argument Default Description state Object State object with controls and mode dt number &lt;optional&gt; Animation duration in ms easing string &lt;optional&gt; 'linear' Easing function ('linear'|'ease-out'|'ease-in-out') Inherited From: Layer#setState Overrides: Layer#setState Source: Layer.js, line 201 setTransform(tx) Sets the layer's transform Parameters: Name Type Description tx Transform New transform Inherited From: Layer#setTransform Overrides: Layer#setTransform Source: Layer.js, line 266 Fires: Layer#event:updateSize setViewport(view) Sets the layer's viewport Parameters: Name Type Description view Object Viewport specification Properties Name Type Description x number X position y number Y position dx number Width dy number Height Inherited From: Layer#setViewport Overrides: Layer#setViewport Source: Layer.js, line 160 Fires: Layer#event:update setVisible(visible) Sets layer visibility Parameters: Name Type Description visible boolean Whether layer should be visible Inherited From: Layer#setVisible Overrides: Layer#setVisible Source: Layer.js, line 320 Fires: Layer#event:update setZindex(zindex) Sets layer rendering order Parameters: Name Type Description zindex number Stack order value Inherited From: Layer#setZindex Overrides: Layer#setZindex Source: Layer.js, line 331 Fires: Layer#event:update Events ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"LayerNeuralRTI.html":{"id":"LayerNeuralRTI.html","title":"Class: LayerNeuralRTI","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: LayerNeuralRTI LayerNeuralRTI LayerNeuralRTI implements real-time Neural Reflectance Transformation Imaging. This layer uses a neural network to perform real-time relighting of images, offering improved quality and performance compared to traditional RTI approaches. Features: Neural network-based relighting Adaptive quality scaling Frame rate optimization Progressive refinement Multi-plane texture support WebGL acceleration Technical Details: Uses 3-layer neural network Supports multiple color spaces Implements adaptive tile processing Handles dynamic quality adjustment Manages frame buffer operations Coordinates light transformations Performance Optimizations: Dynamic resolution scaling FPS-based quality adjustment Progressive refinement system Tile caching Batch processing new LayerNeuralRTI(options) Creates a new LayerNeuralRTI instance Parameters: Name Type Description options LayerNeuralRTIOptions Configuration options Source: LayerNeuralRTI.js, line 66 Example ```javascript // Create Neural RTI layer const neuralRTI = new OpenLIME.Layer({ type: 'neural', url: 'config.json', layout: 'deepzoom', convergenceSpeed: 1.2, maxTiles: 40 }); // Add to viewer viewer.addLayer('rti', neuralRTI); // Change light direction neuralRTI.setLight([0.5, 0.3], 1000); ``` Extends Layer Methods addControl(name, value) Adds a shader parameter control Parameters: Name Type Description name string Control identifier value * Initial value Inherited From: Layer#addControl Overrides: Layer#addControl Source: Layer.js, line 437 Throws: If control already exists Type Error addShaderFilter(filter) Adds a filter to the current shader Parameters: Name Type Description filter Object Filter specification Inherited From: Layer#addShaderFilter Overrides: Layer#addShaderFilter Source: Layer.js, line 170 Throws: If no shader is set Type Error boundingBox() Gets layer bounding box in scene coordinates Inherited From: Layer#boundingBox Overrides: Layer#boundingBox Source: Layer.js, line 381 Returns: Bounding box Type BoundingBox clearShaderFilters(name) Removes all filters from the current shader Parameters: Name Type Description name Object Filter name Inherited From: Layer#clearShaderFilters Overrides: Layer#clearShaderFilters Source: Layer.js, line 190 Throws: If no shader is set Type Error getControl(name) Gets the shader parameter control corresponding to name Parameters: Name Type Description name * The name of the control. return {*} The control Inherited From: Layer#getControl Overrides: Layer#getControl Source: Layer.js, line 422 getMode() Gets the current shader visualization mode Inherited From: Layer#getMode Overrides: Layer#getMode Source: Layer.js, line 289 Returns: Current mode or null if no shader Type string | null getModes() Gets available shader modes Inherited From: Layer#getModes Overrides: Layer#getModes Source: Layer.js, line 299 Returns: Array of available modes Type Array.&lt;string&gt; getState( [stateMask]) Gets the current layer state Parameters: Name Type Argument Default Description stateMask Object &lt;optional&gt; null Optional mask to filter returned state properties Inherited From: Layer#getState Overrides: Layer#getState Source: Layer.js, line 216 Returns: Current state object Type Object pixelSizePerMM() Gets pixel size in millimeters Inherited From: Layer#pixelSizePerMM Overrides: Layer#pixelSizePerMM Source: Layer.js, line 372 Returns: Size of one pixel in mm Type number removeShaderFilter(name) Removes a filter from the current shader Parameters: Name Type Description name Object Filter name Inherited From: Layer#removeShaderFilter Overrides: Layer#removeShaderFilter Source: Layer.js, line 180 Throws: If no shader is set Type Error scale() Gets layer scale Inherited From: Layer#scale Overrides: Layer#scale Source: Layer.js, line 362 Returns: Current scale value Type number setControl(name, value [, dt] [, easing]) Sets a shader control value with optional animation Parameters: Name Type Argument Default Description name string Control identifier value * New value dt number &lt;optional&gt; Animation duration in ms easing string &lt;optional&gt; 'linear' Easing function Inherited From: Layer#setControl Overrides: Layer#setControl Source: Layer.js, line 452 Fires: Layer#event:update setLight(light [, dt]) Sets light direction with optional animation Parameters: Name Type Argument Description light Array.&lt;number&gt; Light direction vector [x, y] dt number &lt;optional&gt; Animation duration in milliseconds Source: LayerNeuralRTI.js, line 114 setMode(mode) Sets shader visualization mode Parameters: Name Type Description mode string Mode to set Inherited From: Layer#setMode Overrides: Layer#setMode Source: Layer.js, line 310 Fires: Layer#event:update setShader(id) Sets the active shader Parameters: Name Type Description id string Shader identifier from registered shaders Inherited From: Layer#setShader Overrides: Layer#setShader Source: Layer.js, line 277 Fires: Layer#event:update Throws: If shader ID is not found Type Error setState(state [, dt] [, easing]) Sets the layer state with optional animation Parameters: Name Type Argument Default Description state Object State object with controls and mode dt number &lt;optional&gt; Animation duration in ms easing string &lt;optional&gt; 'linear' Easing function ('linear'|'ease-out'|'ease-in-out') Inherited From: Layer#setState Overrides: Layer#setState Source: Layer.js, line 201 setTransform(tx) Sets the layer's transform Parameters: Name Type Description tx Transform New transform Inherited From: Layer#setTransform Overrides: Layer#setTransform Source: Layer.js, line 266 Fires: Layer#event:updateSize setViewport(view) Sets the layer's viewport Parameters: Name Type Description view Object Viewport specification Properties Name Type Description x number X position y number Y position dx number Width dy number Height Inherited From: Layer#setViewport Overrides: Layer#setViewport Source: Layer.js, line 160 Fires: Layer#event:update setVisible(visible) Sets layer visibility Parameters: Name Type Description visible boolean Whether layer should be visible Inherited From: Layer#setVisible Overrides: Layer#setVisible Source: Layer.js, line 320 Fires: Layer#event:update setZindex(zindex) Sets layer rendering order Parameters: Name Type Description zindex number Stack order value Inherited From: Layer#setZindex Overrides: Layer#setZindex Source: Layer.js, line 331 Fires: Layer#event:update Events ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"LayerRTI.html":{"id":"LayerRTI.html","title":"Class: LayerRTI","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: LayerRTI LayerRTI LayerRTI implements Reflectance Transformation Imaging (RTI) visualization. RTI is an imaging technique that captures surface reflectance data to enable interactive relighting of an object from different directions. The layer handles the 'relight' data format, which consists of: info.json: Contains RTI parameters and configuration plane_*.jpg: Series of coefficient images normals.jpg: Optional normal map (when using normals=true) Features: Interactive relighting Multiple layout support Normal map integration Light direction control Animation support World rotation handling Technical Details: Uses coefficient-based relighting Supports multiple image planes Handles various tiling schemes Manages WebGL resources Coordinates light transformations Data Format Support: Relight JSON configuration Multiple layout systems JPEG coefficient planes Optional normal maps IIP image protocol new LayerRTI(options) Creates a new LayerRTI instance Parameters: Name Type Description options LayerRTIOptions Configuration options Source: LayerRTI.js, line 70 See: Relight on GitHub Throws: If rasters options is not empty Type Error If url is not provided Type Error Example ```javascript // Create RTI layer with deepzoom layout const rtiLayer = new OpenLIME.Layer({ type: 'rti', url: 'path/to/info.json', layout: 'deepzoom', normals: true }); // Add to viewer viewer.addLayer('rti', rtiLayer); // Change light direction with animation rtiLayer.setLight([0.5, 0.5], 1000); ``` Extends Layer Methods addControl(name, value) Adds a shader parameter control Parameters: Name Type Description name string Control identifier value * Initial value Inherited From: Layer#addControl Overrides: Layer#addControl Source: Layer.js, line 437 Throws: If control already exists Type Error addShaderFilter(filter) Adds a filter to the current shader Parameters: Name Type Description filter Object Filter specification Inherited From: Layer#addShaderFilter Overrides: Layer#addShaderFilter Source: Layer.js, line 170 Throws: If no shader is set Type Error boundingBox() Gets layer bounding box in scene coordinates Inherited From: Layer#boundingBox Overrides: Layer#boundingBox Source: Layer.js, line 381 Returns: Bounding box Type BoundingBox clearShaderFilters(name) Removes all filters from the current shader Parameters: Name Type Description name Object Filter name Inherited From: Layer#clearShaderFilters Overrides: Layer#clearShaderFilters Source: Layer.js, line 190 Throws: If no shader is set Type Error getControl(name) Gets the shader parameter control corresponding to name Parameters: Name Type Description name * The name of the control. return {*} The control Inherited From: Layer#getControl Overrides: Layer#getControl Source: Layer.js, line 422 getMode() Gets the current shader visualization mode Inherited From: Layer#getMode Overrides: Layer#getMode Source: Layer.js, line 289 Returns: Current mode or null if no shader Type string | null getModes() Gets available shader modes Inherited From: Layer#getModes Overrides: Layer#getModes Source: Layer.js, line 299 Returns: Array of available modes Type Array.&lt;string&gt; getState( [stateMask]) Gets the current layer state Parameters: Name Type Argument Default Description stateMask Object &lt;optional&gt; null Optional mask to filter returned state properties Inherited From: Layer#getState Overrides: Layer#getState Source: Layer.js, line 216 Returns: Current state object Type Object pixelSizePerMM() Gets pixel size in millimeters Inherited From: Layer#pixelSizePerMM Overrides: Layer#pixelSizePerMM Source: Layer.js, line 372 Returns: Size of one pixel in mm Type number removeShaderFilter(name) Removes a filter from the current shader Parameters: Name Type Description name Object Filter name Inherited From: Layer#removeShaderFilter Overrides: Layer#removeShaderFilter Source: Layer.js, line 180 Throws: If no shader is set Type Error scale() Gets layer scale Inherited From: Layer#scale Overrides: Layer#scale Source: Layer.js, line 362 Returns: Current scale value Type number setControl(name, value [, dt] [, easing]) Sets a shader control value with optional animation Parameters: Name Type Argument Default Description name string Control identifier value * New value dt number &lt;optional&gt; Animation duration in ms easing string &lt;optional&gt; 'linear' Easing function Inherited From: Layer#setControl Overrides: Layer#setControl Source: Layer.js, line 452 Fires: Layer#event:update setLight(light [, dt]) Sets the light direction with optional animation Parameters: Name Type Argument Description light Array.&lt;number&gt; Light direction vector [x, y] dt number &lt;optional&gt; Animation duration in milliseconds Source: LayerRTI.js, line 122 setMode(mode) Sets shader visualization mode Parameters: Name Type Description mode string Mode to set Inherited From: Layer#setMode Overrides: Layer#setMode Source: Layer.js, line 310 Fires: Layer#event:update setShader(id) Sets the active shader Parameters: Name Type Description id string Shader identifier from registered shaders Inherited From: Layer#setShader Overrides: Layer#setShader Source: Layer.js, line 277 Fires: Layer#event:update Throws: If shader ID is not found Type Error setState(state [, dt] [, easing]) Sets the layer state with optional animation Parameters: Name Type Argument Default Description state Object State object with controls and mode dt number &lt;optional&gt; Animation duration in ms easing string &lt;optional&gt; 'linear' Easing function ('linear'|'ease-out'|'ease-in-out') Inherited From: Layer#setState Overrides: Layer#setState Source: Layer.js, line 201 setTransform(tx) Sets the layer's transform Parameters: Name Type Description tx Transform New transform Inherited From: Layer#setTransform Overrides: Layer#setTransform Source: Layer.js, line 266 Fires: Layer#event:updateSize setViewport(view) Sets the layer's viewport Parameters: Name Type Description view Object Viewport specification Properties Name Type Description x number X position y number Y position dx number Width dy number Height Inherited From: Layer#setViewport Overrides: Layer#setViewport Source: Layer.js, line 160 Fires: Layer#event:update setVisible(visible) Sets layer visibility Parameters: Name Type Description visible boolean Whether layer should be visible Inherited From: Layer#setVisible Overrides: Layer#setVisible Source: Layer.js, line 320 Fires: Layer#event:update setZindex(zindex) Sets layer rendering order Parameters: Name Type Description zindex number Stack order value Inherited From: Layer#setZindex Overrides: Layer#setZindex Source: Layer.js, line 331 Fires: Layer#event:update Events ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"LayerSvgAnnotation.html":{"id":"LayerSvgAnnotation.html","title":"Class: LayerSvgAnnotation","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: LayerSvgAnnotation LayerSvgAnnotation LayerSvgAnnotation provides SVG-based annotation capabilities in OpenLIME. It renders SVG elements directly on the canvas overlay, outside the WebGL context, enabling rich vector graphics annotations with interactive features. Features: SVG-based vector annotations Custom styling per annotation class Interactive selection Shadow DOM isolation Dynamic SVG transformation Event handling Custom update callbacks Technical Details: Uses SVG overlay for rendering Handles coordinate system transformations Manages DOM element lifecycle Supports custom class styling Implements visibility management Provides selection mechanisms new LayerSvgAnnotation( [options]) Creates a new LayerSvgAnnotation instance Parameters: Name Type Argument Description options LayerSvgAnnotationOptions &lt;optional&gt; Configuration options Source: LayerSvgAnnotation.js, line 72 Example ```javascript // Create SVG annotation layer with custom classes const annotationLayer = new OpenLIME.Layer({ type: 'svg_annotations', classes: { 'highlight': { stroke: '#ff0', label: 'Highlight' }, 'comment': { stroke: '#0f0', label: 'Comment' } }, onClick: (annotation) =&gt; { console.log('Clicked:', annotation.label); }, shadow: true }); // Add to viewer viewer.addLayer('annotations', annotationLayer); ``` Extends LayerAnnotation Methods addControl(name, value) Adds a shader parameter control Parameters: Name Type Description name string Control identifier value * Initial value Inherited From: Layer#addControl Overrides: LayerAnnotation#addControl Source: Layer.js, line 437 Throws: If control already exists Type Error addShaderFilter(filter) Adds a filter to the current shader Parameters: Name Type Description filter Object Filter specification Inherited From: Layer#addShaderFilter Overrides: LayerAnnotation#addShaderFilter Source: Layer.js, line 170 Throws: If no shader is set Type Error boundingBox() Gets layer bounding box in scene coordinates Inherited From: Layer#boundingBox Overrides: LayerAnnotation#boundingBox Source: Layer.js, line 381 Returns: Bounding box Type BoundingBox clearSelected() Clears all annotation selections Overrides: LayerAnnotation#clearSelected Source: LayerSvgAnnotation.js, line 156 clearShaderFilters(name) Removes all filters from the current shader Parameters: Name Type Description name Object Filter name Inherited From: Layer#clearShaderFilters Overrides: LayerAnnotation#clearShaderFilters Source: Layer.js, line 190 Throws: If no shader is set Type Error getAnnotationById(id) Retrieves an annotation by its ID Parameters: Name Type Description id string Annotation identifier Inherited From: LayerAnnotation#getAnnotationById Overrides: LayerAnnotation#getAnnotationById Source: LayerAnnotation.js, line 214 Returns: The found annotation or null if not found Type Annotation | null getControl(name) Gets the shader parameter control corresponding to name Parameters: Name Type Description name * The name of the control. return {*} The control Inherited From: Layer#getControl Overrides: LayerAnnotation#getControl Source: Layer.js, line 422 getMode() Gets the current shader visualization mode Inherited From: Layer#getMode Overrides: LayerAnnotation#getMode Source: Layer.js, line 289 Returns: Current mode or null if no shader Type string | null getModes() Gets available shader modes Inherited From: Layer#getModes Overrides: LayerAnnotation#getModes Source: Layer.js, line 299 Returns: Array of available modes Type Array.&lt;string&gt; getState( [stateMask]) Gets the current layer state Parameters: Name Type Argument Default Description stateMask Object &lt;optional&gt; null Optional mask to filter returned state properties Inherited From: Layer#getState Overrides: LayerAnnotation#getState Source: Layer.js, line 216 Returns: Current state object Type Object getSvgGroupTransform(transform [, inverse]) Calculates SVG group transform string Parameters: Name Type Argument Default Description transform Transform Current view transform inverse boolean &lt;optional&gt; false Whether to return inverse transform Source: LayerSvgAnnotation.js, line 212 Returns: SVG transform attribute value Type string interpolateControls() Updates control interpolation Inherited From: Layer#interpolateControls Overrides: LayerAnnotation#interpolateControls Source: Layer.js, line 472 Returns: Whether all interpolations are complete Type boolean pixelSizePerMM() Gets pixel size in millimeters Inherited From: Layer#pixelSizePerMM Overrides: LayerAnnotation#pixelSizePerMM Source: Layer.js, line 372 Returns: Size of one pixel in mm Type number removeShaderFilter(name) Removes a filter from the current shader Parameters: Name Type Description name Object Filter name Inherited From: Layer#removeShaderFilter Overrides: LayerAnnotation#removeShaderFilter Source: Layer.js, line 180 Throws: If no shader is set Type Error scale() Gets layer scale Inherited From: Layer#scale Overrides: LayerAnnotation#scale Source: Layer.js, line 362 Returns: Current scale value Type number setControl(name, value [, dt] [, easing]) Sets a shader control value with optional animation Parameters: Name Type Argument Default Description name string Control identifier value * New value dt number &lt;optional&gt; Animation duration in ms easing string &lt;optional&gt; 'linear' Easing function Inherited From: Layer#setControl Overrides: LayerAnnotation#setControl Source: Layer.js, line 452 Fires: Layer#event:update setMode(mode) Sets shader visualization mode Parameters: Name Type Description mode string Mode to set Inherited From: Layer#setMode Overrides: LayerAnnotation#setMode Source: Layer.js, line 310 Fires: Layer#event:update setSelected(anno [, on]) Sets selection state of an annotation Parameters: Name Type Argument Default Description anno Annotation The annotation to select/deselect on boolean &lt;optional&gt; true Whether to select (true) or deselect (false) Overrides: LayerAnnotation#setSelected Source: LayerSvgAnnotation.js, line 168 setShader(id) Sets the active shader Parameters: Name Type Description id string Shader identifier from registered shaders Inherited From: Layer#setShader Overrides: LayerAnnotation#setShader Source: Layer.js, line 277 Fires: Layer#event:update Throws: If shader ID is not found Type Error setState(state [, dt] [, easing]) Sets the layer state with optional animation Parameters: Name Type Argument Default Description state Object State object with controls and mode dt number &lt;optional&gt; Animation duration in ms easing string &lt;optional&gt; 'linear' Easing function ('linear'|'ease-out'|'ease-in-out') Inherited From: Layer#setState Overrides: LayerAnnotation#setState Source: Layer.js, line 201 setTransform(tx) Sets the layer's transform Parameters: Name Type Description tx Transform New transform Inherited From: Layer#setTransform Overrides: LayerAnnotation#setTransform Source: Layer.js, line 266 Fires: Layer#event:updateSize setViewport(view) Sets the layer's viewport Parameters: Name Type Description view Object Viewport specification Properties Name Type Description x number X position y number Y position dx number Width dy number Height Inherited From: Layer#setViewport Overrides: LayerAnnotation#setViewport Source: Layer.js, line 160 Fires: Layer#event:update setVisible(visible) Sets visibility of the annotation layer Updates both SVG display and underlying layer visibility Parameters: Name Type Description visible boolean Whether layer should be visible Inherited From: Layer#setVisible Overrides: LayerAnnotation#setVisible Source: LayerSvgAnnotation.js, line 147 Fires: Layer#event:update setZindex(zindex) Sets layer rendering order Parameters: Name Type Description zindex number Stack order value Inherited From: Layer#setZindex Overrides: LayerAnnotation#setZindex Source: Layer.js, line 331 Fires: Layer#event:update Events ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: LayerAnnotation#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: LayerAnnotation#event:update Source: Layer.js, line 235 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"Layout.html":{"id":"Layout.html","title":"Class: Layout","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: Layout Layout Layout manages image formats and tiling schemes in OpenLIME. This class is responsible for: Managing different image formats Handling tiling schemes Coordinating tile loading Converting between coordinate systems Managing tile priorities Format Support: Single-resolution images: Direct URL to image file Supports all standard web formats (jpg, png, etc) Tiled formats: DeepZoom (Microsoft): Uses .dzi config file Google Maps: Direct directory structure Zoomify: Uses ImageProperties.xml IIIF: Standard server interface TarZoom: OpenLIME's optimized format new Layout(url, type [, options]) Creates a new Layout instance Parameters: Name Type Argument Description url string URL to image or configuration file type LayoutType Type of image layout options LayoutOptions &lt;optional&gt; Additional configuration Source: Layout.js, line 84 Fires: Layout#event:ready - When layout is initialized and ready for use Layout#event:updateSize - When layout dimensions change Throws: If layout type is unknown or module not loaded Type Error Example ```javascript // Single image const imageLayout = new Layout('image.jpg', 'image'); // Deep Zoom const dzLayout = new Layout('tiles.dzi', 'deepzoom'); // Google Maps format const googleLayout = new Layout('tiles/', 'google', { width: 2000, height: 1500 }); ``` Methods available(viewport, transform, layerTransform, border, bias, tiles) Gets tiles available for rendering Parameters: Name Type Description viewport Object Current viewport transform Transform Current transform layerTransform Transform Layer transform border number Border size bias number Mipmap bias tiles Map Existing tiles Source: Layout.js, line 260 Returns: Map of available tiles Type Object.&lt;number, Tile&gt; boundingBox() Gets layout bounds Source: Layout.js, line 194 Returns: Layout boundaries Type BoundingBox getTileSize() Gets tile dimensions Source: Layout.js, line 113 Returns: [width, height] of tiles Type Array.&lt;number&gt; &lt;abstract&gt; getTileURL(id, tile) Gets URL for specific tile Parameters: Name Type Description id number Channel identifier tile Tile Tile object Source: Layout.js, line 186 Returns: Tile URL Type string getViewportBox(viewport, transform, layerT) Calculates viewport bounding box Parameters: Name Type Description viewport Object Viewport parameters transform Transform Current transform layerT Transform Layer transform Source: Layout.js, line 276 Returns: Viewport bounds in image space Type BoundingBox imageUrl(url, plane) Constructs URL for specific image plane Parameters: Name Type Description url string Base URL plane string Plane identifier Source: Layout.js, line 174 Returns: Complete URL Type string needed(viewport, transform, layerTransform, border, bias, tiles [, maxtiles]) Determines required tiles for rendering Parameters: Name Type Argument Default Description viewport Object Current viewport transform Transform Current transform layerTransform Transform Layer transform border number Border size bias number Mipmap bias tiles Map Existing tiles maxtiles number &lt;optional&gt; 8 Maximum tiles to return Source: Layout.js, line 239 Returns: Array of needed tiles Type Array.&lt;Tile&gt; tileCoords(tile) Calculates tile coordinates Parameters: Name Type Description tile Tile Tile to calculate coordinates for Source: Layout.js, line 204 Returns: Image and texture coordinates Type Object Type Definitions Type Supported image layout types including both single-resolution and multi-resolution formats. image: Standard web image formats (jpg, png, gif, etc.) deepzoom: Microsoft Deep Zoom format with root tile &gt; 1px deepzoom1px: Microsoft Deep Zoom format with 1px root tile google: Google Maps tiling scheme zoomify: Zoomify tiling format iiif: International Image Interoperability Framework iip: Internet Imaging Protocol tarzoom: OpenLIME custom format (single TAR of DeepZoom pyramid) itarzoom: OpenLIME custom interleaved TAR format Type: 'image' | 'deepzoom' | 'deepzoom1px' | 'google' | 'zoomify' | 'iiif' | 'iip' | 'tarzoom' | 'itarzoom' Source: LayoutTiles.js, line 26 Events ready The event is fired when a layout is ready to be drawn(the single-resolution image is downloaded or the multi-resolution structure has been initialized). Source: Layout.js, line 158 ready The event is fired when a layout is ready to be drawn(the single-resolution image is downloaded or the multi-resolution structure has been initialized). Source: LayoutTiles.js, line 138 updateSize The event is fired when a layout size is modified (and the scene extension must be recomputed at canvas level). Source: LayoutTiles.js, line 234 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"LayoutTileImages.html":{"id":"LayoutTileImages.html","title":"Class: LayoutTileImages","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: LayoutTileImages LayoutTileImages LayoutTileImages class manages collections of image tiles with associated regions. Each tile represents an independent image with its own position and dimensions in the layout space. Tiles can be individually shown or hidden and are loaded from annotation files or external descriptors. new LayoutTileImages(url, type [, options]) Creates a new LayoutTileImages instance. Parameters: Name Type Argument Description url string | null URL to the annotation file containing tile descriptors, or null if descriptors will be set later type string The layout type (should be 'tile_images') options Object &lt;optional&gt; Configuration options inherited from Layout Source: LayoutTileImages.js, line 31 Extends Layout Methods available(viewport, transform, layerTransform, border, bias, tiles) Gets tiles currently available for rendering. Parameters: Name Type Description viewport Viewport Current viewport transform Transform Current transform layerTransform Transform Layer-specific transform border number Border size in viewport units bias number Resolution bias (unused in this layout) tiles Map.&lt;number, Tile&gt; Available tiles Overrides: Layout#available Source: LayoutTileImages.js, line 269 Returns: Map of tile index to tile object for visible, loaded tiles Type Object.&lt;number, Tile&gt; boundingBox() Gets the layout's bounding box. Overrides: Layout#boundingBox Source: LayoutTileImages.js, line 117 Returns: The bounding box containing all tile regions Type BoundingBox getTileSize() Gets the tile size. For this layout, tiles don't have a fixed size. Overrides: Layout#getTileSize Source: LayoutTileImages.js, line 58 Returns: Returns [0, 0] as tiles have variable sizes Type Array.&lt;number&gt; getTileURL(id, tile) Gets the URL for a specific tile. Parameters: Name Type Description id number Channel/raster ID tile Tile Tile object Overrides: Layout#getTileURL Source: LayoutTileImages.js, line 159 Returns: URL to fetch tile image Type string getViewportBox(viewport, transform, layerT) Calculates viewport bounding box Parameters: Name Type Description viewport Object Viewport parameters transform Transform Current transform layerT Transform Layer transform Inherited From: Layout#getViewportBox Overrides: Layout#getViewportBox Source: Layout.js, line 276 Returns: Viewport bounds in image space Type BoundingBox imageUrl(url, plane) Constructs URL for specific image plane Parameters: Name Type Description url string Base URL plane string Plane identifier Inherited From: Layout#imageUrl Overrides: Layout#imageUrl Source: Layout.js, line 174 Returns: Complete URL Type string index(level, x, y) Maps tile coordinates to a linear index. In this layout, x directly maps to the index as tiles are stored in a flat list. Parameters: Name Type Description level number Zoom level (unused in this layout) x number X coordinate (used as index) y number Y coordinate (unused in this layout) Source: LayoutTileImages.js, line 193 Returns: Linear index of the tile Type number needed(viewport, transform, layerTransform, border, bias, tiles [, maxtiles]) Determines which tiles are needed for the current view. Parameters: Name Type Argument Default Description viewport Viewport Current viewport transform Transform Current transform layerTransform Transform Layer-specific transform border number Border size in viewport units bias number Resolution bias (unused in this layout) tiles Map.&lt;number, Tile&gt; Currently available tiles maxtiles number &lt;optional&gt; 8 Maximum number of tiles to return Overrides: Layout#needed Source: LayoutTileImages.js, line 231 Returns: Array of needed tiles sorted by distance to viewport center Type Array.&lt;Tile&gt; newTile(index) Creates a new tile instance with properties from its descriptor. Parameters: Name Type Description index number Index of the tile descriptor Overrides: Layout#newTile Source: LayoutTileImages.js, line 299 Returns: New tile instance with region and image properties Type Tile setAllTilesVisible(visible) Sets visibility for all tiles. Parameters: Name Type Description visible boolean Visibility state to set for all tiles Source: LayoutTileImages.js, line 177 setTileDescriptors(tileDescriptors) Sets tile descriptors programmatically instead of loading from a file. Parameters: Name Type Description tileDescriptors Array.&lt;Annotation&gt; Array of tile descriptors Source: LayoutTileImages.js, line 146 Fires: Layout#event:ready setTileVisible(index, visible) Sets visibility for a specific tile. Parameters: Name Type Description index number Index of the tile visible boolean Visibility state to set Source: LayoutTileImages.js, line 169 tileCoords(tile) Gets coordinates for a tile in both image space and texture space. Parameters: Name Type Description tile Tile The tile to get coordinates for Overrides: Layout#tileCoords Source: LayoutTileImages.js, line 205 Returns: Coordinate data Type Object .coords - Image space coordinates [x,y,z, x,y,z, x,y,z, x,y,z] Type Float32Array .tcoords - Texture coordinates [u,v, u,v, u,v, u,v] Type Float32Array tileCount() Gets the total number of tiles in the layout. Source: LayoutTileImages.js, line 333 Returns: Number of tile descriptors Type number Type Definitions Type Supported image layout types including both single-resolution and multi-resolution formats. image: Standard web image formats (jpg, png, gif, etc.) deepzoom: Microsoft Deep Zoom format with root tile &gt; 1px deepzoom1px: Microsoft Deep Zoom format with 1px root tile google: Google Maps tiling scheme zoomify: Zoomify tiling format iiif: International Image Interoperability Framework iip: Internet Imaging Protocol tarzoom: OpenLIME custom format (single TAR of DeepZoom pyramid) itarzoom: OpenLIME custom interleaved TAR format Type: 'image' | 'deepzoom' | 'deepzoom1px' | 'google' | 'zoomify' | 'iiif' | 'iip' | 'tarzoom' | 'itarzoom' Inherited From: Layout#Type Overrides: Layout#Type Source: LayoutTiles.js, line 26 Events ready The event is fired when a layout is ready to be drawn(the single-resolution image is downloaded or the multi-resolution structure has been initialized). Inherited From: Layout#event:ready Overrides: Layout#event:ready Source: Layout.js, line 158 updateSize The event is fired when a layout size is modified (and the scene extension must be recomputed at canvas level). Inherited From: Layout#event:updateSize Overrides: Layout#event:updateSize Source: LayoutTiles.js, line 234 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"LayoutTiles.html":{"id":"LayoutTiles.html","title":"Class: LayoutTiles","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: LayoutTiles LayoutTiles The Layout class is responsible for specifying the data formats (images) managed by OpenLIME. All web single-resolution image types (jpg, png, gif, etc...) are supported as well as the most common tiled image formats (deepzoom, zoomify, IIIF, google maps), which are suitable for large images. Single-resolution images The URL is the address of the file (for instance, 'https://my.example/image.jpg'). Tiled images They can be specified in a variety of ways depending on the format chosen. deepzoom - The root tile of the image pyramid has a size &gt; 1px (typical value is 254px). It is defined by the URL of the .dzi file (for instance, 'https://my.example/image.dzi'). See: DeepZoom deepzoom1px - The root tile of the image pyramid has a size = 1px. It is defined by the URL of the .dzi file (for instance, 'https://my.example/image.dzi'). See: DeepZoom google - The URL points directly to the directory containing the pyramid of images (for instance, 'https://my.example/image'). The standard does not require any configuration file, so it is mandatory to indicate in the options the width and height in pixels of the original image. See: Google Maps zoomify - The URL indicates the location of Zoomify configuration file (for instance, 'https://my.example/image/ImageProperties.xml'). See: Zoomify iip - The server parameter (optional) indicates the URL of the IIPImage endpoint (for example '/fcgi-bin/iipsrv.fcgi'). The URL parameter indicates either just the name of the path and image file (for instance 'image.tif') if the server parameter has been set or the full IIP URL if not (for instance '/fcgi-bin/iipsrv.fcgi?FIF=image.tif' or 'https://you.server//fcgi-bin/iipsrv.fcgi?FIF=image.tif' if image is hosted elsewhere) See: IIPImage Server iiif - According to the standard, the URL is the address of a IIIF server (for instance, 'https://myiiifserver.example/'). See: IIIF tarzoom and itarzoom - This is a custom format of the OpenLIME framework. It can be described as the TAR of a DeepZoom (all the DeepZoom image pyramid is stored in a single file). It takes advantage of the fact that current web servers are able to handle partial-content HTTP requests. Tarzoom facilitates the work of the server, which is not penalised by having to manage a file system with many small files. The URL is the address of the .tzi file (for instance, 'https://my.example/image.tzi'). Warning: tarzoom|itarzoom may not work on older web servers. new LayoutTiles(url, type [, options]) Creates a new LayoutTiles instance. Parameters: Name Type Argument Description url string URL to the image or tile configuration type Layout#Type The type of image layout options Object &lt;optional&gt; Configuration options Properties Name Type Argument Default Description width number &lt;optional&gt; Width of original image (required for 'google' type) height number &lt;optional&gt; Height of original image (required for 'google' type) suffix string &lt;optional&gt; 'jpg' Tile file extension subdomains string &lt;optional&gt; 'abc' Available subdomains for Google URL template cachelevels number &lt;optional&gt; 10 Number of levels above current to cache server string &lt;optional&gt; IIP server URL (for IIP type only) Source: LayoutTiles.js, line 91 Fires: Layout#event:ready - When layout initialization is complete Layout#event:updateSize - When layout dimensions change Example ```javascript // DeepZoom layout const dzLayout = new LayoutTiles('image.dzi', 'deepzoom', { cachelevels: 8 }); // Google Maps layout const googleLayout = new LayoutTiles('tiles/', 'google', { width: 4096, height: 3072, suffix: 'png' }); // IIIF layout const iiifLayout = new LayoutTiles('https://server/image', 'iiif'); ``` Extends Layout Methods available(viewport, transform, layerTransform, border, bias, tiles) Gets tiles currently available for rendering. Parameters: Name Type Description viewport Viewport Current viewport transform Transform Current transform layerTransform Transform Layer-specific transform border number Border size in tile units bias number Resolution bias tiles Map.&lt;number, Tile&gt; Available tiles Overrides: Layout#available Source: LayoutTiles.js, line 392 Returns: Map of tile index to tile object with additional 'complete' property Type Object.&lt;number, Tile&gt; boundingBox() Gets layout bounds Inherited From: Layout#boundingBox Overrides: Layout#boundingBox Source: Layout.js, line 194 Returns: Layout boundaries Type BoundingBox getTileSize() Gets the tile size for the layout. Overrides: Layout#getTileSize Source: LayoutTiles.js, line 187 Returns: Array containing [width, height] of tiles Type Array.&lt;number&gt; getTileURL(id, tile) Gets URL for a specific tile. Parameters: Name Type Description id number Channel/raster ID tile Tile Tile to get URL for Overrides: Layout#getTileURL Source: LayoutTiles.js, line 474 Throws: If layout not defined or ready Type Error Returns: URL to fetch tile data Type string getViewportBox(viewport, transform, layerT) Calculates viewport bounding box Parameters: Name Type Description viewport Object Viewport parameters transform Transform Current transform layerT Transform Layer transform Inherited From: Layout#getViewportBox Overrides: Layout#getViewportBox Source: Layout.js, line 276 Returns: Viewport bounds in image space Type BoundingBox index(level, x, y) Generates unique index for a tile based on its position and level. Parameters: Name Type Description level number Zoom level x number X coordinate y number Y coordinate Source: LayoutTiles.js, line 198 Returns: Unique tile index Type number needed(viewport, transform, layerTransform, border, bias, tiles [, maxtiles]) Determines which tiles are needed for the current view. Parameters: Name Type Argument Default Description viewport Viewport Current viewport transform Transform Current transform layerTransform Transform Layer-specific transform border number Border size in tile units for prefetching bias number Resolution bias (0-1, affects mipmap level selection) tiles Map.&lt;number, Tile&gt; Currently available tiles maxtiles number &lt;optional&gt; 8 Maximum number of tiles to return Overrides: Layout#needed Source: LayoutTiles.js, line 348 Returns: Array of needed tiles sorted by priority Type Array.&lt;Tile&gt; neededBox(viewport, transform, layerTransform, border, bias) Computes required tiles at each pyramid level for the current view. Parameters: Name Type Description viewport Viewport Current viewport transform Transform Current transform layerTransform Transform Layer-specific transform border number Border size in tile units for prefetching bias number Resolution bias (0-1) Source: LayoutTiles.js, line 439 Returns: Tile requirements Type Object .level - Optimal pyramid level Type number .pyramid - Array of tile bounding boxes per level Type Array.&lt;BoundingBox&gt; newTile(index) Creates a new tile instance with computed properties. Parameters: Name Type Description index number Unique tile identifier Overrides: Layout#newTile Source: LayoutTiles.js, line 330 Returns: New tile instance Type Tile reverseIndex(index) Converts tile index back to level, x, y coordinates. Parameters: Name Type Description index number Tile index Source: LayoutTiles.js, line 210 Returns: Position object containing level, x, y Type Object tileCoords(tile) Gets coordinates for a tile in both image space and texture space. Parameters: Name Type Description tile Tile The tile to get coordinates for Overrides: Layout#tileCoords Source: LayoutTiles.js, line 273 Returns: Coordinate data Type Object .coords - Image space coordinates [x,y,z, x,y,z, x,y,z, x,y,z] Type Float32Array .tcoords - Texture coordinates [u,v, u,v, u,v, u,v] Type Float32Array Type Definitions Type Supported image layout types including both single-resolution and multi-resolution formats. image: Standard web image formats (jpg, png, gif, etc.) deepzoom: Microsoft Deep Zoom format with root tile &gt; 1px deepzoom1px: Microsoft Deep Zoom format with 1px root tile google: Google Maps tiling scheme zoomify: Zoomify tiling format iiif: International Image Interoperability Framework iip: Internet Imaging Protocol tarzoom: OpenLIME custom format (single TAR of DeepZoom pyramid) itarzoom: OpenLIME custom interleaved TAR format Type: 'image' | 'deepzoom' | 'deepzoom1px' | 'google' | 'zoomify' | 'iiif' | 'iip' | 'tarzoom' | 'itarzoom' Inherited From: Layout#Type Overrides: Layout#Type Source: LayoutTiles.js, line 26 Events ready The event is fired when a layout is ready to be drawn(the single-resolution image is downloaded or the multi-resolution structure has been initialized). Inherited From: Layout#event:ready Overrides: Layout#event:ready Source: Layout.js, line 158 updateSize The event is fired when a layout size is modified (and the scene extension must be recomputed at canvas level). Inherited From: Layout#event:updateSize Overrides: Layout#event:updateSize Source: LayoutTiles.js, line 234 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"LensDashboard.html":{"id":"LensDashboard.html","title":"Class: LensDashboard","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: LensDashboard LensDashboard LensDashboard class creates an interactive container for a lens interface. It provides: A square HTML container that moves with the lens SVG-based circular lens border with drag interaction for resizing Masking capabilities for controlling content visibility inside/outside the lens Ability to add HTML elements positioned relative to the lens new LensDashboard(viewer [, options]) Creates a new LensDashboard instance. Parameters: Name Type Argument Description viewer Viewer The OpenLIME viewer instance options Object &lt;optional&gt; Configuration options Properties Name Type Argument Default Description containerSpace number &lt;optional&gt; 80 Extra space around the lens for dashboard elements (in pixels) borderColor Array.&lt;number&gt; &lt;optional&gt; [0.078, 0.078, 0.078, 1] RGBA color for lens border borderWidth number &lt;optional&gt; 12 Width of the lens border (in pixels) layerSvgAnnotation LayerSvgAnnotation &lt;optional&gt; null Associated SVG annotation layer Source: LensDashboard.js, line 35 Methods append(elm) Adds an HTML element to the dashboard container. The element should use absolute positioning relative to the container. Example: const button = document.createElement('button'); button.style = 'position: absolute; left: 10px; top: 10px;'; lensDashboard.append(button); Parameters: Name Type Description elm HTMLElement The HTML element to add Source: LensDashboard.js, line 249 removeMaskFromSvgLayer(svg) Removes the lens mask from an SVG element. Returns the element to its normal, unmasked rendering. Parameters: Name Type Description svg SVGElement The SVG element to unmask Source: LensDashboard.js, line 234 setBackgroundRenderingMode(mode) Sets the rendering mode for the background (area outside the lens). Controls whether content outside the lens is shown or hidden. Parameters: Name Type Description mode RenderingMode The rendering mode to use Source: LensDashboard.js, line 267 setLayerSvgAnnotation(layer) Associates a LayerSvgAnnotation with the dashboard. This enables proper masking of SVG annotations within the lens area. Parameters: Name Type Description layer LayerSvgAnnotation The SVG annotation layer to associate Source: LensDashboard.js, line 146 setLensRenderingMode(mode) Sets the rendering mode for the lens area. Controls whether content inside the lens is shown or hidden. Parameters: Name Type Description mode RenderingMode The rendering mode to use Source: LensDashboard.js, line 258 setMaskOnSvgLayer(svg) Applies the lens mask to an SVG element. Elements with the mask will only be visible within the lens area (or outside, depending on mask configuration). Parameters: Name Type Description svg SVGElement The SVG element to mask Source: LensDashboard.js, line 225 toggle() Toggles the visibility of the dashboard UI elements. Uses CSS classes to show/hide the interface. Source: LensDashboard.js, line 136 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"LensDashboardNavigator.html":{"id":"LensDashboardNavigator.html","title":"Class: LensDashboardNavigator","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: LensDashboardNavigator LensDashboardNavigator LensDashboardNavigator class creates an interactive lens dashboard with navigation controls. Provides: Camera movement control Light direction control Annotation switching and navigation Toolbar UI elements positioned around the lens new LensDashboardNavigator(viewer [, options]) Creates a new LensDashboardNavigator instance. Parameters: Name Type Argument Description viewer Viewer The OpenLIME viewer instance options Object &lt;optional&gt; Configuration options Properties Name Type Argument Default Description toolboxHeight number &lt;optional&gt; 22 Height of the toolbox UI elements in pixels angleToolbar number &lt;optional&gt; 30 Angle of toolbar position in degrees actions Object &lt;optional&gt; Configuration for toolbar actions Properties Name Type Argument Description camera Object &lt;optional&gt; Camera control action Properties Name Type Description label string Action identifier task function Callback for camera action light Object &lt;optional&gt; Light control action Properties Name Type Description label string Action identifier task function Callback for light action annoswitch Object &lt;optional&gt; Annotation toggle action Properties Name Type Description label string Action identifier type string Action type ('toggle') toggleClass string CSS class for toggle element task function Callback for annotation toggle prev Object &lt;optional&gt; Previous annotation action Properties Name Type Description label string Action identifier task function Callback for previous action down Object &lt;optional&gt; Download annotation action Properties Name Type Description label string Action identifier task function Callback for download action next Object &lt;optional&gt; Next annotation action Properties Name Type Description label string Action identifier task function Callback for next action updateCb function &lt;optional&gt; Callback fired during lens updates updateEndCb function &lt;optional&gt; Callback fired when lens movement ends Source: LensDashboardNavigator.js, line 19 Extends LensDashboard Methods append(elm) Adds an HTML element to the dashboard container. The element should use absolute positioning relative to the container. Example: const button = document.createElement('button'); button.style = 'position: absolute; left: 10px; top: 10px;'; lensDashboard.append(button); Parameters: Name Type Description elm HTMLElement The HTML element to add Inherited From: LensDashboard#append Overrides: LensDashboard#append Source: LensDashboard.js, line 249 removeMaskFromSvgLayer(svg) Removes the lens mask from an SVG element. Returns the element to its normal, unmasked rendering. Parameters: Name Type Description svg SVGElement The SVG element to unmask Inherited From: LensDashboard#removeMaskFromSvgLayer Overrides: LensDashboard#removeMaskFromSvgLayer Source: LensDashboard.js, line 234 setActionEnabled(label [, enable]) Enables or disables a specific action button. Parameters: Name Type Argument Default Description label string The action label to modify enable boolean &lt;optional&gt; true Whether to enable or disable the action Source: LensDashboardNavigator.js, line 548 setBackgroundRenderingMode(mode) Sets the rendering mode for the background (area outside the lens). Controls whether content outside the lens is shown or hidden. Parameters: Name Type Description mode RenderingMode The rendering mode to use Inherited From: LensDashboard#setBackgroundRenderingMode Overrides: LensDashboard#setBackgroundRenderingMode Source: LensDashboard.js, line 267 setLayerSvgAnnotation(layer) Associates a LayerSvgAnnotation with the dashboard. This enables proper masking of SVG annotations within the lens area. Parameters: Name Type Description layer LayerSvgAnnotation The SVG annotation layer to associate Inherited From: LensDashboard#setLayerSvgAnnotation Overrides: LensDashboard#setLayerSvgAnnotation Source: LensDashboard.js, line 146 setLensRenderingMode(mode) Sets the rendering mode for the lens area. Controls whether content inside the lens is shown or hidden. Parameters: Name Type Description mode RenderingMode The rendering mode to use Inherited From: LensDashboard#setLensRenderingMode Overrides: LensDashboard#setLensRenderingMode Source: LensDashboard.js, line 258 setMaskOnSvgLayer(svg) Applies the lens mask to an SVG element. Elements with the mask will only be visible within the lens area (or outside, depending on mask configuration). Parameters: Name Type Description svg SVGElement The SVG element to mask Inherited From: LensDashboard#setMaskOnSvgLayer Overrides: LensDashboard#setMaskOnSvgLayer Source: LensDashboard.js, line 225 toggle() Toggles the visibility of the dashboard UI elements. Uses CSS classes to show/hide the interface. Inherited From: LensDashboard#toggle Overrides: LensDashboard#toggle Source: LensDashboard.js, line 136 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"LensDashboardNavigatorRadial.html":{"id":"LensDashboardNavigatorRadial.html","title":"Class: LensDashboardNavigatorRadial","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: LensDashboardNavigatorRadial LensDashboardNavigatorRadial LensDashboardNavigatorRadial class creates a circular lens dashboard with radially arranged controls. Provides: Circular arrangement of controls around the lens Grouped tool positioning Animated visibility transitions Background arc for visual grouping new LensDashboardNavigatorRadial(viewer [, options]) Creates a new LensDashboardNavigatorRadial instance. Parameters: Name Type Argument Description viewer Viewer The OpenLIME viewer instance options Object &lt;optional&gt; Configuration options Properties Name Type Argument Default Description toolSize number &lt;optional&gt; 34 Size of tool buttons in pixels toolPadding number &lt;optional&gt; 0 Padding between tool buttons group Array.&lt;number&gt; &lt;optional&gt; [-65, 0] Angle positions for tool groups in degrees actions Object &lt;optional&gt; Configuration for toolbar actions Properties Name Type Argument Description camera Object &lt;optional&gt; Camera control action Properties Name Type Description label string Action identifier group number Group index for positioning angle number Angle offset within group task function Callback for camera action light Object &lt;optional&gt; Light control action (same properties as camera) annoswitch Object &lt;optional&gt; Annotation toggle action Properties Name Type Description type string Action type ('toggle') toggleClass string CSS class for toggle element prev Object &lt;optional&gt; Previous annotation action (same properties as camera) down Object &lt;optional&gt; Download annotation action (same properties as camera) next Object &lt;optional&gt; Next annotation action (same properties as camera) updateCb function &lt;optional&gt; Callback fired during lens updates updateEndCb function &lt;optional&gt; Callback fired when lens movement ends Source: LensDashboardNavigatorRadial.js, line 19 Extends LensDashboard Methods append(elm) Adds an HTML element to the dashboard container. The element should use absolute positioning relative to the container. Example: const button = document.createElement('button'); button.style = 'position: absolute; left: 10px; top: 10px;'; lensDashboard.append(button); Parameters: Name Type Description elm HTMLElement The HTML element to add Inherited From: LensDashboard#append Overrides: LensDashboard#append Source: LensDashboard.js, line 249 getAction(label) Retrieves an action configuration by its label. Parameters: Name Type Description label string The action label to find Source: LensDashboardNavigatorRadial.js, line 602 Returns: The action configuration object or null if not found Type Object | null removeMaskFromSvgLayer(svg) Removes the lens mask from an SVG element. Returns the element to its normal, unmasked rendering. Parameters: Name Type Description svg SVGElement The SVG element to unmask Inherited From: LensDashboard#removeMaskFromSvgLayer Overrides: LensDashboard#removeMaskFromSvgLayer Source: LensDashboard.js, line 234 setActionEnabled(label [, enable]) Enables or disables a specific action button. Parameters: Name Type Argument Default Description label string The action label to modify enable boolean &lt;optional&gt; true Whether to enable or disable the action Source: LensDashboardNavigatorRadial.js, line 618 setBackgroundRenderingMode(mode) Sets the rendering mode for the background (area outside the lens). Controls whether content outside the lens is shown or hidden. Parameters: Name Type Description mode RenderingMode The rendering mode to use Inherited From: LensDashboard#setBackgroundRenderingMode Overrides: LensDashboard#setBackgroundRenderingMode Source: LensDashboard.js, line 267 setLayerSvgAnnotation(layer) Associates a LayerSvgAnnotation with the dashboard. This enables proper masking of SVG annotations within the lens area. Parameters: Name Type Description layer LayerSvgAnnotation The SVG annotation layer to associate Inherited From: LensDashboard#setLayerSvgAnnotation Overrides: LensDashboard#setLayerSvgAnnotation Source: LensDashboard.js, line 146 setLensRenderingMode(mode) Sets the rendering mode for the lens area. Controls whether content inside the lens is shown or hidden. Parameters: Name Type Description mode RenderingMode The rendering mode to use Inherited From: LensDashboard#setLensRenderingMode Overrides: LensDashboard#setLensRenderingMode Source: LensDashboard.js, line 258 setMaskOnSvgLayer(svg) Applies the lens mask to an SVG element. Elements with the mask will only be visible within the lens area (or outside, depending on mask configuration). Parameters: Name Type Description svg SVGElement The SVG element to mask Inherited From: LensDashboard#setMaskOnSvgLayer Overrides: LensDashboard#setMaskOnSvgLayer Source: LensDashboard.js, line 225 toggle() Toggles the visibility of the dashboard UI elements. Uses CSS classes to show/hide the interface. Inherited From: LensDashboard#toggle Overrides: LensDashboard#toggle Source: LensDashboard.js, line 136 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"LightSphereController.html":{"id":"LightSphereController.html","title":"Class: LightSphereController","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: LightSphereController LightSphereController LightSphereController creates an interactive sphere UI for light direction control. Features: Circular interface with gradient background Pointer-based interaction for light direction Configurable size, position, and colors Minimum theta angle constraint Visual feedback with gradient and marker new LightSphereController(parent [, options]) Creates a new LightSphereController instance. Parameters: Name Type Argument Description parent HTMLElement | string Parent element or selector where the controller will be mounted options Object &lt;optional&gt; Configuration options Properties Name Type Argument Default Description width number &lt;optional&gt; 128 Width of the controller in pixels height number &lt;optional&gt; 128 Height of the controller in pixels top number &lt;optional&gt; 60 Top position offset in pixels right number &lt;optional&gt; 0 Right position offset in pixels thetaMin number &lt;optional&gt; 0 Minimum theta angle in degrees (constrains interaction radius) colorSpot string &lt;optional&gt; '#ffffff' Color of the central spot in the gradient colorBkg string &lt;optional&gt; '#0000ff' Color of the outer edge of the gradient colorMark string &lt;optional&gt; '#ff0000' Color of the position marker Source: LightSphereController.js, line 17 Methods addLayer(layer) Adds a layer to be controlled by this light sphere. The layer must support light control operations. Parameters: Name Type Description layer Layer Layer to be controlled Source: LightSphereController.js, line 113 hide() Hides the controller. Source: LightSphereController.js, line 129 Returns: The visibility style value Type string show() Makes the controller visible. Source: LightSphereController.js, line 121 Returns: The visibility style value Type string × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"module-PointerManager.html":{"id":"module-PointerManager.html","title":"Module: PointerManager","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Module: PointerManager The PointerManager class is a high-level event manager that interprets low-level pointer interactions (mouse, touch, and stylus) into higher-level gestures such as taps, holds, panning, and pinching. It simplifies the process of handling user interactions on devices with touch screens or trackpads by converting raw pointer events (e.g., pointerdown, pointermove, pointerup) into easy-to-use gestures. Key features include: Event Management: Registers, unregisters, and broadcasts event handlers for gestures like single/double tap, hold, panning, and pinching. Gesture Recognition: Automatically detects and handles gestures such as finger taps, holds (long press), panning (drag), and pinch (zoom). Idle Detection: Detects periods of inactivity and can trigger events based on user idleness. Multiple Pointer Support: Manages multiple pointers simultaneously, supporting interactions like pinch-to-zoom. Utility Methods: Includes helper methods for tasks like calculating device pixels per millimeter (useful for different screen densities). Common use cases for PointerManager include applications that require touch gestures, such as image or map manipulation, or any interactive web application that benefits from handling complex pointer-based interactions. Source: PointerManager.js, line 1 Classes PointerManager × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"module-PointerManager-PointerManager.html":{"id":"module-PointerManager-PointerManager.html","title":"Class: PointerManager","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: PointerManager PointerManager~ PointerManager High-level event manager for handling pointer interactions. Captures and classifies PointerEvents (mouse/touch) into higher-level gestures. new PointerManager(target [, options]) Creates a new PointerManager instance. Parameters: Name Type Argument Description target HTMLElement DOM element to attach event listeners to options Object &lt;optional&gt; Configuration options Properties Name Type Argument Default Description pinchMaxInterval number &lt;optional&gt; 250 Maximum time (ms) between touches to trigger pinch idleTime number &lt;optional&gt; 60 Seconds of inactivity before idle event Source: PointerManager.js, line 51 Fires: PointerManager#event:fingerHover - When pointer moves over target PointerManager#event:fingerSingleTap - On quick press/touch PointerManager#event:fingerDoubleTap - On two quick presses/touches PointerManager#event:fingerHold - When press/touch held for &gt;600ms PointerManager#event:mouseWheel - On mouse wheel rotation PointerManager#event:panStart - When pan gesture begins PointerManager#event:panMove - During pan gesture PointerManager#event:panEnd - When pan gesture ends PointerManager#event:pinchStart - When pinch gesture begins PointerManager#event:pinchMove - During pinch gesture PointerManager#event:pinchEnd - When pinch gesture ends Example // Create manager and attach event handler const canvas = document.querySelector('canvas'); const pointerManager = new PointerManager(canvas); const handler = { priority: 10, fingerSingleTap: (e) =&gt; { console.log(\"SINGLE TAP at\", e.clientX, e.clientY); }, fingerHold: (e) =&gt; { console.log(\"HOLD at\", e.clientX, e.clientY); } }; pointerManager.onEvent(handler); Members &lt;static, readonly&gt; ANYPOINTER :number Constant for targeting all pointers. Type: number Source: PointerManager.js, line 91 Methods &lt;static&gt; splitStr(str) Splits a string into an array based on whitespace. Parameters: Name Type Description str string The input string to split. Source: PointerManager.js, line 101 Returns: An array of strings split by whitespace. Type Array.&lt;string&gt; off(eventTypes, callback [, idx]) Unregisters event handlers. Parameters: Name Type Argument Default Description eventTypes string Space-separated list of event types callback Object | function Handler to remove idx number &lt;optional&gt; ANYPOINTER Pointer index to target Source: PointerManager.js, line 173 on(eventTypes, obj [, idx]) Registers event handlers. Parameters: Name Type Argument Default Description eventTypes string Space-separated list of event types obj Object | function Handler object or function idx number &lt;optional&gt; ANYPOINTER Pointer index to target, or ANYPOINTER for all Source: PointerManager.js, line 145 Returns: Handler object Type Object onEvent(handler) Registers a complete event handler with multiple callbacks. Parameters: Name Type Description handler Object Handler object Properties Name Type Argument Description priority number Handler priority (higher = earlier execution) fingerHover function &lt;optional&gt; Hover callback fingerSingleTap function &lt;optional&gt; Single tap callback fingerDoubleTap function &lt;optional&gt; Double tap callback fingerHold function &lt;optional&gt; Hold callback mouseWheel function &lt;optional&gt; Mouse wheel callback panStart function &lt;optional&gt; Pan start callback panMove function &lt;optional&gt; Pan move callback panEnd function &lt;optional&gt; Pan end callback pinchStart function &lt;optional&gt; Pinch start callback pinchMove function &lt;optional&gt; Pinch move callback pinchEnd function &lt;optional&gt; Pinch end callback Source: PointerManager.js, line 204 Throws: If handler lacks priority or required callbacks Type Error onPan(handler) Registers pan gesture callbacks. Parameters: Name Type Description handler Object The handler object with pan callbacks. Source: PointerManager.js, line 228 Throws: If the handler is missing any required pan callbacks. Type Error onPinch(handler) Registers pinch gesture callbacks. Parameters: Name Type Description handler Object The handler object with pinch callbacks. Source: PointerManager.js, line 255 Throws: If the handler is missing any required pinch callbacks. Type Error × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:25+00:00 using the DocStrap template. "},"Raster.html":{"id":"Raster.html","title":"Class: Raster","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: Raster Raster Raster is a provider of image and/or plane of coefficients. It support all file formats supported by Layout. An object literal with Raster options can be specified. @param {Object} [options] An object literal describing the raster content. new Raster() Parameters: Name Type Default Description options.format Raster#Format 'vec3' The color format of the image. Source: Raster.js, line 18 Methods &lt;async&gt; loadImage(tile, gl) Gets a tile. Parameters: Name Type Description tile Tile A tile. gl WebGLRenderingContext The WebGL rendering context . Source: Raster.js, line 35 Returns: A pair (tex,size). Type '[tex, size]' Type Definitions Format An Raster Format describes the way that the images in textures and renderbuffers store their data. 'vec3' format must be specified if the image is RGB (without alpha). 'vec4' is related to RGBA images. 'float' is for file containg coefficients. Type: 'vec3' | 'vec4' | 'float' Source: Raster.js, line 1 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:26+00:00 using the DocStrap template. "},"Shader.html":{"id":"Shader.html","title":"Class: Shader","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: Shader Shader The Shader class allows shader programs to be linked and used. This class supports shader programs written in the OpenGL/ES Shading Language (GLSL/ES) with 2.0 amd 3.0 specifications. The Shader class keeps the programmer away from the details of compiling and linking vertex and fragment shaders. The following example creates a fragment shader program using the supplied source code. Once compiled and linked, the shader program is activated in the current WebGLContext. const shader = new OpenLIME.Shader({ 'label': 'Rgb', 'samplers': [{ id: 0, name: 'kd' }] }); // The fragment shader script shader.fragShaderSrc = function (gl) { let gl2 = !(gl instanceof WebGLRenderingContext); let str = `${gl2 ? '#version 300 es' : ''} precision highp float; precision highp int; uniform sampler2D kd; uniform float u_colorFactor; ... return str; }; // Declares a uniform. shader.uniforms = { u_colorFactor: { type: 'float', needsUpdate: true, size: 1, value: 0.0 }, }; // Adds the shader to the Layer and set it as the current one. this.shaders['bw'] = shader; this.setShader('bw'); new Shader( [options]) Instantiates a Shader class. An object literal with Shader options can be specified. Parameters: Name Type Argument Description options Object &lt;optional&gt; An object literal describing the shader content. Properties Name Type Description samplers Array.&lt;Shader#Sampler&gt; An array of pointers to 2D textures. modes Array.&lt;string&gt; An optional array of labels that identify different shader behaviors. Source: Shader.js, line 56 Methods fragShaderSrc(gl) Gets the fragment shader script. This is a virtual function and MUST be redefined in derived classes. Parameters: Name Type Description gl * Thegl context. Source: Shader.js, line 336 Returns: The vertex shader script. Type string setMode(mode) Sets the current mode of the shader Parameters: Name Type Description mode string The mode identifier Source: Shader.js, line 107 setUniform(name, value) Sets the value of a uniform variable. Parameters: Name Type Description name string The name of the uniform variable. value * The value to assign. Source: Shader.js, line 129 vertShaderSrc(gl) Gets the vertex shader script. By default it only applies the view matrix and passes the texture coordinates to the fragment shader. Parameters: Name Type Description gl * Thegl context. Source: Shader.js, line 310 Returns: The vertex shader script. Type string Type Definitions Sampler A reference to a 2D texture. Type: Object Properties: Name Type Description id number A sampler unique identifier. name string The sampler name (the texture reference name in the shader program). label string used for menu samplers array array of rasters {id:, type: } color, normals, etc. * samplers: array of rasters {id:, type: } color, normals, etc. bind: false will not used in preparegl load: false will not be loaded from raster both options are used in neural where the coefficients are loaded, but used by tf uniforms: array type = &lt;vec4|vec3|vec2|float|int&gt;, needsUpdate controls when updated in gl, size is unused, value is and array or a float, we also want to support interpolation: source (value is the target), start, end are the timing (same as camera interpolation) Source: Shader.js, line 4 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:26+00:00 using the DocStrap template. "},"ShaderBRDF.html":{"id":"ShaderBRDF.html","title":"Class: ShaderBRDF","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: ShaderBRDF ShaderBRDF new ShaderBRDF(options) Parameters: Name Type Description options object mode: default is color, can be [color, diffuse, specular, normals] color implements ward Source: ShaderBRDF.js, line 9 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:26+00:00 using the DocStrap template. "},"ShaderCombiner.html":{"id":"ShaderCombiner.html","title":"Class: ShaderCombiner","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: ShaderCombiner ShaderCombiner The ShaderCombiner class specifies a shader that computes an output texture as a combination of two input textures. It defines four modes (shader behaviors): 'first' assigns the first texture as output (draws the first texture). The color of each fragment is cout=c1 'second' assigns the second texture as output (draws the second texture). The color of each fragment is cout=c2 'mean' calculates the average color of the two textures. The color of each fragment is cout=(c1+c2)/2.0 'diff' calculates the difference between the color of the textures. Color of each fragment is cout=c2.rgb-c1.rgb Extends Shader. new ShaderCombiner( [options]) Instantiates a ShaderCombiner class. An object literal with ShaderCombiner options can be specified. Parameters: Name Type Argument Description options Object &lt;optional&gt; An object literal with options that inherits from Shader. Source: ShaderCombiner.js, line 13 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:26+00:00 using the DocStrap template. "},"ShaderNeural.html":{"id":"ShaderNeural.html","title":"Class: ShaderNeural","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: ShaderNeural ShaderNeural Extends Shader, initialized with a Neural .json ( new ShaderNeural() Source: ShaderNeural.js, line 7 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:26+00:00 using the DocStrap template. "},"ShaderRTI.html":{"id":"ShaderRTI.html","title":"Class: ShaderRTI","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: ShaderRTI ShaderRTI Extends Shader, initialized with a relight .json (see: relight on github for details). Supported modes are light: relightable images depending on light direction normals: shows a normal map diffuse: remove albedo and display only the geometry with a white material. specular: specular enhancement From the .json configuration the type of basis used: ('ptm', 'hsh', rbf', 'bln'), and the colorspace ('lrgb', 'rgb', 'mrgb', 'mycc') along with all the other parameters. new ShaderRTI(options) Parameters: Name Type Description options object compose: compose operation: add, subtract, multiply, etc. Source: ShaderRTI.js, line 20 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:26+00:00 using the DocStrap template. "},"Skin.html":{"id":"Skin.html","title":"Class: Skin","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: Skin Skin The static class Skin implements some utilities for handling the skin file. A skin file is a SVG file containing SVG icons that are used by *UIBasic for customizing the visual appearance of the user interface (i.e., icons for buttons, menu, toolbar, dialog...). Each SVG drawing element must be tagged with a 'class' attribute whose name must begin with openlime-: for instance, the HOME icon is a SVG element tagged with class=\"openlime-home\". new Skin() Source: Skin.js, line 13 Methods &lt;async, static&gt; appendIcon(container, elm) Appends the selected SVG element to the container. Parameters: Name Type Description container HTMLElement A HTML DOM node. elm SVGElement | string An SVGElement or a CSS selector (e.g. a class name). Source: Skin.js, line 52 Returns: A pointer to the SVG icon referenced by the elm. Type SVGElement &lt;async, static&gt; getElement(selector) Gets the SVG element with a specific CSS selector. Parameters: Name Type Description selector string A CSS selector (e.g. a class name). Source: Skin.js, line 40 Returns: The SVGElement referenced by the selector. Type SVGElement &lt;async, static&gt; loadSvg() Loads the SVG skin file and converts it into a global DOM SVGElement ready for use in a web page. Source: Skin.js, line 23 &lt;static&gt; setUrl(u) Sets the URL of the SVG skin file. By default it is 'skin/skin.svg'; Parameters: Name Type Description u string The URL of the SVG skin file. Source: Skin.js, line 18 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:26+00:00 using the DocStrap template. "},"TextToSpeechPlayer.html":{"id":"TextToSpeechPlayer.html","title":"Class: TextToSpeechPlayer","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: TextToSpeechPlayer TextToSpeechPlayer The TextToSpeechPlayer class is responsible for text-to-speech functionality in the application. It handles voice selection, speech synthesis, and various audio controls. new TextToSpeechPlayer( [options]) Creates an TextToSpeechPlayer. Additionally, an object literal with TextToSpeechPlayer options can be specified. Parameters: Name Type Argument Description options Object &lt;optional&gt; Properties Name Type Argument Default Description language string &lt;optional&gt; 'it-IT' The language for speech synthesis. rate number &lt;optional&gt; 1.12 The speech rate. volume number &lt;optional&gt; 1.0 The speech volume. cleanText boolean &lt;optional&gt; true Whether to clean the text before speech synthesis. voiceSelected number &lt;optional&gt; -1 The index of the selected voice. Source: TextToSpeechPlayer.js, line 5 Methods activate() Activates the TextToSpeechPlayer. Source: TextToSpeechPlayer.js, line 73 &lt;async&gt; initialize() Initializes the TextToSpeechPlayer by loading the voice and checking offline capability. Source: TextToSpeechPlayer.js, line 39 Returns: Type Promise.&lt;void&gt; mute(enable) Mutes or unmutes the audio playback. Parameters: Name Type Description enable boolean True to mute, false to unmute. Source: TextToSpeechPlayer.js, line 271 pauseSpeaking(enable) Pauses or resumes the current speech synthesis. Parameters: Name Type Description enable boolean True to pause, false to resume. Source: TextToSpeechPlayer.js, line 243 &lt;async&gt; speakText(text) Speaks the provided text using speech synthesis. Parameters: Name Type Description text string The text to speak. Source: TextToSpeechPlayer.js, line 163 Returns: Type Promise.&lt;void&gt; stopSpeaking() Stops the current speech synthesis. Source: TextToSpeechPlayer.js, line 283 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:26+00:00 using the DocStrap template. "},"Transform.html":{"id":"Transform.html","title":"Class: Transform","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: Transform Transform The class Transform implements a 2D affine map to convert coordinates between two systems. The map is internally represented by four values: x the x-component of the translation vector y the y-component of the translation vector a the rotation angle around the z-axis (in degrees) z the scale factor A transformation between a point P to P' is defined by P' = z*rot(a)*P + t where z is the scale factor, a is the rotation angle, and t(x,y) is the translation vector. The class implements a set of geometric transformations useful to position the camera, create animations, etc... new Transform( [options]) Instantiates a Transform object. Parameters: Name Type Argument Description options Object &lt;optional&gt; An object literal with Transform parameters. Properties Name Type Default Description x number 0 The x-component of the translation vector. y number 0 The y-component of the translation vector. a number 0 The rotation angle (in degrees). z number 1 The scale factor. t time 0 The current time. Source: Transform.js, line 34 Methods &lt;static&gt; interpolate(source, target, time, easing) Computes the interpolated transform at time time between source and target Parameters: Name Type Description source Transform The source transform. target Transform The target transform. time time The time at which to compute the interpolation. easing Transform#Easing The easing function. Source: Transform.js, line 179 Returns: The interpolated transform. Type Transform &lt;static&gt; normalizeAngle(a) Maps an angle a to range from 0 to 360 degrees. Parameters: Name Type Description a number The angle (in degrees). Source: Transform.js, line 92 Returns: The normalized angle. Type number &lt;static&gt; rotate(x, y, a) Computes the rotation of a point P(x,y) by an angle a around the z-axis to get P'(x',y'). Parameters: Name Type Description x * x-coordinate of the point P. y * y-coordinate of the point P. a * The rotation angle (in degrees) Source: Transform.js, line 105 Returns: The point P'. Type Object apply(x, y) Applies this Transform to a point P(x,y) to get P'(x',y'). Parameters: Name Type Description x number x-coordinate of the point P. y number y-coordinate of the point P. Source: Transform.js, line 69 Returns: The point P'. Type Object compose(transform) Composes (multiplies) this Transform with an other transform. Parameters: Name Type Description transform Transform Source: Transform.js, line 118 Returns: The result of the composition. Type Transform copy() Gets a copy of this Transform. Source: Transform.js, line 57 Returns: The copy of the Transform. Type Transform getInverseBox(viewport) Gets the bounding box (in image coordinate space) of the vieport. The viewport y-axis points up. The image and screen transform has y pointing down. Parameters: Name Type Description viewport Viewport Source: Transform.js, line 150 Returns: The bounding box. Type BoundingBox inverse() Computes the inverse of this Transform. Source: Transform.js, line 82 Returns: The inverse Transform. Type Transform projectionMatrix(viewport) Combines this Transform with the viewport to get the WebGL projection matrix. Parameters: Name Type Description viewport Viewport The viewport. Source: Transform.js, line 207 Returns: The result. Type Array.&lt;number&gt; sceneToViewportCoords(viewport, p) Transforms the point p from scene (0 at image center) to [0,wh] . Parameters: Name Type Description viewport Viewport The viewport. p APoint The point in scene (0,0 at image center) Source: Transform.js, line 237 Returns: The point in range [0..w-1,0..h-1] Type APoint transformBox(lbox) Applyes this Transform to a bounding box. Parameters: Name Type Description lbox BoundingBox Source: Transform.js, line 134 Returns: The result. Type BoundingBox viewportToSceneCoords(viewport, p) Transforms the point p from [0,wh] to scene (0 at image center). Parameters: Name Type Description viewport Viewport The viewport. p APoint The point in range [0..w-1,0..h-1] Source: Transform.js, line 249 Returns: The point in scene (0,0 at image center) Type APoint Type Definitions Easing The type Easing defines the function that regulates the movement of the camera Type: 'linear' | 'ease-out' | 'ease-in-out' Source: Transform.js, line 166 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:26+00:00 using the DocStrap template. "},"UIBasic.html":{"id":"UIBasic.html","title":"Class: UIBasic","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: UIBasic UIBasic UIBasic is a flexible and easy-to-use class that implements a complete user interface to bind to the viewer The interface is associated with a CSS file (skin.css) that defines the style of the HTML DOM and a graphic file (skin.svg) that specifies the geometric characteristics of the tool buttons. The class provides a set of default ready-to-use tools (called actions): home resets the camera. fullscreen enables the fullscreen mode. layers displays the layer menu. zoomin performs a camera zoom-in. zoomout performs a camera zoom-out. rotate rotates the camera around the z-axis (by 45-degs steps). light enables light manipulation. help displays a help dialog box. In the following example a UIBasic interface is created and binded to the lime viewer. The light action is disabled, and the zoomin and zoomout actions are enabled. // Creates an User Interface const ui = new OpenLIME.UIBasic(lime); // Removes light from the toolbar ui.actions.light.display=false; // Adds zoomin and zoomout to the toolbar ui.actions.zoomin.display=true; ui.actions.zoomout.display=true; new UIBasic(viewer [, options]) Instantiates a UIBasic object. Parameters: Name Type Argument Description viewer Viewer The OpenLIME viewer. options Object &lt;optional&gt; An object literal with UIBasic parameters. Properties Name Type Default Description skin string 'skin/skin.svg' The file name of the vector image defining the tool buttons. autofit bool true Whether the initial position of the camera is set to fit the scene model. priority number 0 Higher priority controllers are invoked first. actions Object An Object of UIBasic#Action. A set of default actions are ready to be used. pixelSize number Spatial resolution: physical size represented by a single pixel in mm attribution string Some information related to data attribution or credits. menu Array.&lt;UIBasic#MenuEntry&gt; The interface menu structure. enableTooltip bool true Whether to enable tool button tooltip. showLightDirections bool false Whether to draw light direction vectors. Source: UIBasic.js, line 85 Type Definitions Action An Action describes the behaviour of a tool button. Type: Object Properties: Name Type Description title string The nameof the action. display bool Whether to show the action in the toolbar. key string The shortcut key. task callback The callback executed by the action. Source: UIBasic.js, line 9 Action A MenuEntry describes an entry for the menu. Type: Object Properties: Name Type Description title string The menu title. section string The section title. html string A HTML text. task callback The callback executed by the action. Source: UIBasic.js, line 18 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:26+00:00 using the DocStrap template. "},"UIDialog.html":{"id":"UIDialog.html","title":"Class: UIDialog","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: UIDialog UIDialog A UIDialog is a top-level window used for communications with the user. It may be modal or modeless. The content of the dialog can be either an HTML text or a pre-built DOM element. When hidden, a dialog emits a 'closed' event. new UIDialog(container [, options]) Instatiates a UIDialog object. Parameters: Name Type Argument Description container HTMLElement The HTMLElement on which the dialog is focused options Object &lt;optional&gt; An object literal with UIDialog parameters. Properties Name Type Description modal bool Whether the dialog is modal. Source: UIBasic.js, line 689 Methods fade(on) Adds fading effect to the dialog. Parameters: Name Type Description on bool Whether the fading effect is enabled. Source: UIBasic.js, line 786 hide() Hides the dialog. Source: UIBasic.js, line 772 setContent(html) Sets the content of the dialog. Parameters: Name Type Description html string | HTMLElement The content of the dialog (a HTML text or element). Source: UIBasic.js, line 754 show() Shows the dialog. Source: UIBasic.js, line 764 toggle(force) Toggles the display of the dialog. Parameters: Name Type Description force bool Whether to turn the dialog into a one way-only operation. Source: UIBasic.js, line 794 Events closed The event is fired when the dialog is closed. Source: UIBasic.js, line 773 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:26+00:00 using the DocStrap template. "},"Viewer.html":{"id":"Viewer.html","title":"Class: Viewer","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: Viewer Viewer Viewer* is the central class of the OpenLIME framework. It is used to create a viewer on a web page and manipulate it. In the following example, after instantiating a Viewer, a LayerImage is added to it. // Create an OpenLIME canvas into .openlime const lime = new OpenLIME.Viewer('.openlime'); // Create an image layer and add it to the canvans const layer = new OpenLIME.Layer({ layout: 'image', type: 'image', url: '../../assets/lime/image/lime.jpg' }); lime.addLayer('Base', layer); // Access to internal structures const camera = lime.camera; const canvas = lime.canvas; const layers = canvas.layers; new Viewer(div [, options]) Instantiates a viewer object given the div element or a DOM selector of a div element. Additionally, an object literal with Viewer options can be specified. The class creates the canvas, enables the WebGL context and takes care of the content redrawing when needed. Viewer is the main class of the OpenLIME framework. It allows access to all the internal structures that make up the system. Parameters: Name Type Argument Description div HTMLElement | string A DOM element or a selector (es. '#openlime' or '.openlime'). options Object &lt;optional&gt; An object literal describing the viewer content. Properties Name Type Default Description background color CSS style for background (it overwrites CSS if present). autofit bool true Whether the initial position of the camera is set to fit the scene model. Source: Viewer.js, line 28 Methods addController(controller) Adds a device event controller to the viewer. Parameters: Name Type Description controller Controller An OpenLIME controller. Source: Viewer.js, line 97 addLayer(id, layer) Adds the given layer to the Viewer. Parameters: Name Type Description id string A label to identify the layer. layer Layer An OpenLIME Layer object. Source: Viewer.js, line 105 redraw() Schedules a redrawing. Source: Viewer.js, line 148 removeLayer(layer) Remove the given layer from the Viewer. Parameters: Name Type Description layer Layer | string An OpenLIME Layer or a Layer identifier. Source: Viewer.js, line 113 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:26+00:00 using the DocStrap template. "},"tutorial-getting-started.html":{"id":"tutorial-getting-started.html","title":"Tutorial: Getting started with OpenLIME","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Getting started with OpenLIME The OpenLIME framework is designed to make image viewers easy to use, even for inexperienced users. A very simple interface allows you to create visualisation tools without having to deal with the complexity of the application. Here is how to get a complete viewer in a few lines of code! const lime = new OpenLIME('#openlime', { background: 'black', canvas: { preserveDrawingBuffer: true} }); const layer0 = new Layer({layout: 'deepzoom1px', type: 'image', url: './img/duck.dzi'}); lime.canvas.addLayer('img', layer0); const ui = new UIBasic(lime); lime.draw(); Useful videos × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:46:26+00:00 using the DocStrap template. "}}
+    {"Cache.js.html":{"id":"Cache.js.html","title":"Source: Cache.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: Cache.js /** * Implements a singleton cache system for efficient tile management and retrieval in layers. * Handles tile loading, prefetching, and memory management with rate limiting capabilities. * @private */ class _Cache { /** * Creates a new Cache instance. * @param {Object} [options] - Configuration options for the cache * @param {number} [options.capacity=536870912] - Total cache capacity in bytes (default: 512MB) * @param {number} [options.maxRequest=6] - Maximum concurrent HTTP requests * @param {number} [options.maxRequestsRate=0] - Maximum requests per second (0 for unlimited) * @param {number} [options.maxPrefetch=8388608] - Maximum prefetch size in bytes (default: 8MB) */ constructor(options) { Object.assign(this, { capacity: 512 * (1 &lt;&lt; 20), //256 MB total capacity available size: 0, //amount of GPU ram used maxRequest: 6, //max number of concurrent HTTP requests requested: 0, maxRequestsRate: 0, //max number of requests per second, 0 means no rate. requestRateTimeout: null, //calls update when a new slot is available due to request rate. lastRequestTimestamp: performance.now(), //holdls last requests timestamps. maxPrefetch: 8 * (1 &lt;&lt; 20), //max amount of prefetched tiles. prefetched: 0 //amount of currently prefetched GPU ram. }); Object.assign(this, options); this.layers = []; //map on layer. } /** * Registers a layer's tiles as candidates for downloading and initiates the update process. * @param {Layer} layer - The layer whose tiles should be considered for caching */ setCandidates(layer) { if (!this.layers.includes(layer)) this.layers.push(layer); setTimeout(() =&gt; { this.update(); }, 0); //ensure all the queues are set before updating. } /** * Checks if the cache is currently rate limited based on request count and timing. * @private * @returns {boolean} True if rate limited, false otherwise */ rateLimited() { if (this.requested &gt; this.maxRequest) return true; if (this.maxRequestsRate == 0) return false; let now = performance.now(); let period = 1000 / this.maxRequestsRate; let diff = now - this.lastRequestTimestamp; if (diff &gt; period) return false; if (!this.requestRateTimeout) { this.requestRateTimeout = setTimeout(() =&gt; { this.requestRateTimeout = null; this.update(); }, period - diff + 10); } return true; } /** * Updates the cache state by processing the download queue while respecting capacity and rate limits. * @private */ update() { if (this.rateLimited()) return; let best = this.findBestCandidate(); if (!best) return; while (this.size &gt; this.capacity) { //we need to make room. let worst = this.findWorstTile(); if (!worst) { console.log(\"BIG problem in the cache\"); break; } if (worst.tile.time &lt; best.tile.time) this.dropTile(worst.layer, worst.tile) else return; } console.assert(best != best.layer.queue[0]); best.layer.queue.shift(); this.lastRequestTimestamp = performance.now(); this.loadTile(best.layer, best.tile); } /** * Identifies the highest priority tile that should be downloaded next. * @private * @returns {Object|null} Object containing the best candidate layer and tile, or null if none found */ findBestCandidate() { let best = null; for (let layer of this.layers) { while (layer.queue.length &gt; 0 &amp;&amp; layer.tiles.has(layer.queue[0].index)) { layer.queue.shift(); } if (!layer.queue.length) continue; let tile = layer.queue[0]; if (!best || tile.time &gt; best.tile.time + 1.0 || //old requests ignored tile.priority &gt; best.tile.priority) best = { layer, tile } } return best; } /** * Identifies the lowest priority tile that should be removed from cache if space is needed. * @private * @returns {Object|null} Object containing the worst candidate layer and tile, or null if none found */ findWorstTile() { let worst = null; for (let layer of this.layers) { for (let tile of layer.tiles.values()) { //TODO might be some are present when switching shaders. if (tile.missing != 0) continue; if (!worst || tile.time &lt; worst.tile.time || (tile.time == worst.tile.time &amp;&amp; tile.priority &lt; worst.tile.priority)) { worst = { layer, tile }; } } } return worst; } /** * Initiates the loading of a tile for a specific layer. * @private * @param {Layer} layer - The layer the tile belongs to * @param {Object} tile - The tile to be loaded */ loadTile(layer, tile) { this.requested++; (async () =&gt; { layer.loadTile(tile, (size) =&gt; { this.size += size; this.requested--; this.update(); }); })(); } /** * Removes a tile from the cache and updates the cache size. * @private * @param {Layer} layer - The layer the tile belongs to * @param {Object} tile - The tile to be removed */ dropTile(layer, tile) { this.size -= tile.size; layer.dropTile(tile); } /** * Removes all tiles associated with a specific layer from the cache. * @param {Layer} layer - The layer whose tiles should be flushed */ flushLayer(layer) { if (!this.layers.includes(layer)) return; for (let tile of layer.tiles.values()) this.dropTile(layer, tile); } } /** * Singleton cache instance for managing tile loading and caching across layers. * Provides efficient tile retrieval and memory management with configurable capacity * and request rate limiting. * * @namespace * @property {number} capacity - Total cache capacity in bytes (default: 512MB) * @property {number} size - Current amount of GPU RAM used * @property {number} maxRequest - Maximum concurrent HTTP requests (default: 6) * @property {number} requested - Current number of active requests * @property {number} maxRequestsRate - Maximum requests per second (0 for unlimited) * @property {number} maxPrefetch - Maximum size of prefetched tiles in bytes * @property {number} prefetched - Current amount of prefetched GPU RAM * @property {Layer[]} layers - Array of layers being managed by the cache */ const Cache = new _Cache; export { Cache } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"Annotation.js.html":{"id":"Annotation.js.html","title":"Source: Annotation.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: Annotation.js import { BoundingBox } from './BoundingBox.js' /** * Represents an annotation that can be drawn as an overlay on a canvas. * An annotation is a decoration (text, graphics element, glyph) that provides * additional information for interpreting underlying drawings. * Each annotation has a unique identifier and can contain various properties * such as description, category, drawing style, labels, etc. */ class Annotation { /** * Creates a new Annotation instance. * @param {Object} [options] - Configuration options for the annotation. * @param {string} [options.id] - Unique identifier for the annotation. If not provided, a UUID will be generated. * @param {string} [options.code] - A code identifier for the annotation. * @param {string} [options.label=''] - Display label for the annotation. * @param {string} [options.description] - HTML text containing a comprehensive description. * @param {string} [options.class] - Category or classification of the annotation. * @param {string} [options.target] - Target element or area this annotation refers to. * @param {string} [options.svg] - SVG content for the annotation. * @param {Object} [options.image] - Image data associated with the annotation. * @param {Object} [options.region] - Region coordinates {x, y, w, h} for the annotation. * @param {Object} [options.data={}] - Additional custom data for the annotation. * @param {Object} [options.style] - Style configuration for rendering. * @param {BoundingBox} [options.bbox] - Bounding box of the annotation. * @param {boolean} [options.visible=true] - Visibility state of the annotation. * @param {Object} [options.state] - State variables for the annotation. * @param {boolean} [options.ready=false] - Indicates if SVG conversion is complete. * @param {boolean} [options.needsUpdate=true] - Indicates if annotation needs updating. * @param {boolean} [options.editing=false] - Indicates if annotation is being edited. */ constructor(options) { Object.assign( this, { id: Annotation.UUID(), code: null, label: null, description: null, class: null, target: null, svg: null, image: null, region: null, data: {}, style: null, bbox: null, visible: true, state: null, ready: false, //already: converted to svg needsUpdate: true, editing: false, }, options); //TODO label as null is problematic, sort this issue. if (!this.label) this.label = ''; this.elements = []; //assign options is not recursive!!! } /** * Generates a UUID (Universally Unique Identifier) for annotation instances. * @returns {string} A newly generated UUID. * @private */ static UUID() { return 'axxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r &amp; 0x3 | 0x8); return v.toString(16); }); } /** * Calculates and returns the bounding box of the annotation based on its elements or region. * The coordinates are always relative to the top-left corner of the canvas. * @returns {BoundingBox} The calculated bounding box of the annotation. * If the annotation has no elements and no region, returns an empty bounding box. * If the annotation has a region but no elements, returns a bounding box based on the region. * If the annotation has elements, calculates the bounding box that encompasses all elements. */ getBBoxFromElements() { let box = null; if (!this.elements.length) { if (this.region == null) { box = new BoundingBox(); } else { const r = this.region; box = new BoundingBox({ xLow: r.x, yLow: r.y, xHigh: r.x + r.w, yHigh: r.y + r.h }); } } else { let { x, y, width, height } = this.elements[0].getBBox(); for (let shape of this.elements) { const { sx, sy, swidth, sheight } = shape.getBBox(); x = Math.min(x, sx); y = Math.min(x, sy); width = Math.max(width + x, sx + swidth) - x; height = Math.max(height + y, sy + sheight) - y; } box = new BoundingBox({ xLow: x, yLow: y, xHigh: x + width, yHigh: y + width }); } return box; } ///////////////////////////////// /** * Creates an Annotation instance from a JSON-LD format string. * @param {Object} entry - The JSON-LD object representing an annotation. * @returns {Annotation} A new Annotation instance. * @throws {Error} If the entry is not a valid JSON-LD annotation or contains unsupported selectors. */ static fromJsonLd(entry) { if (entry.type != 'Annotation') throw \"Not a jsonld annotation.\"; let options = { id: entry.id }; let rename = { 'identifying': 'code', 'identifying': 'label', 'describing': 'description', 'classifying': 'class' }; for (let item of entry.body) { let field = rename[item.purpose]; if (field) options[field] = item.value; } let selector = entry.target &amp;&amp; entry.target.selector; if (selector) { switch (selector.type) { case 'SvgSelector': options.svg = selector.value; options.elements = []; break; default: throw \"Unsupported selector: \" + selector.type; } } return new Annotation(options); } /** * Converts the annotation to a JSON-LD format object. * @returns {Object} A JSON-LD representation of the annotation including context, * id, type, body (with code, class, and description), and target selector information. */ toJsonLd() { let body = []; if (this.code !== null) body.push({ type: 'TextualBody', value: this.code, purpose: 'indentifying' }); if (this.class !== null) body.push({ type: 'TextualBody', value: this.class, purpose: 'classifying' }); if (this.description !== null) body.push({ type: 'TextualBody', value: this.description, purpose: 'describing' }); let obj = { \"@context\": \"http://www.w3.org/ns/anno.jsonld\", id: this.id, type: \"Annotation\", body: body, target: { selector: {} } } if (this.target) target.selector.source = this.target; if (this.element) { var s = new XMLSerializer(); obj.target.selector.type = 'SvgSelector'; obj.target.selector.value = s.serializeToString(this.element); } } } export { Annotation } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"EditorSvgAnnotation.js.html":{"id":"EditorSvgAnnotation.js.html","title":"Source: EditorSvgAnnotation.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: EditorSvgAnnotation.js import { Skin } from './Skin.js'; import { Util } from './Util.js'; import { simplify, smooth, smoothToPath } from './Simplify.js' import { LayerSvgAnnotation } from './LayerSvgAnnotation.js' import { CoordinateSystem } from './CoordinateSystem.js' /** * @typedef {Object} Annotation * @property {string} id - Unique identifier * @property {string} label - Annotation title * @property {string} description - Detailed description * @property {string} class - Class name for styling/categorization * @property {number} publish - Publication status (0 or 1) * @property {Object} data - Custom data object * @property {Array&lt;SVGElement&gt;} elements - SVG elements composing the annotation * @property {Object} [state] - Camera and viewer state */ /** * @callback crudCallback * @param {Annotation} annotation - The annotation being operated on * @returns {boolean} Success status of the operation * @description Callback for create/update/delete operations on annotations */ /** * @callback customStateCallback * @param {Annotation} annotation - The annotation being modified * @description Callback to customize state information saved with annotations */ /** * @callback customDataCallback * @param {Annotation} annotation - The annotation being modified * @description Callback to customize the annotation data object */ /** * @callback selectedCallback * @param {Annotation} annotation - The selected annotation * @description Callback executed when an annotation is selected in the UI */ /** * EditorSvgAnnotation enables creation and editing of SVG annotations in OpenLIME. * It provides tools for drawing various shapes and managing annotations through a user interface. * * Features: * - Drawing tools: point, pin, line, box, circle * - Annotation editing and management * - Custom state and data storage * - Integration with annotation databases through callbacks * - Undo/redo functionality * - SVG export capabilities * * @example * ```javascript * // Create annotation layer * const anno = new OpenLIME.Layer(options); * viewer.addLayer('annotations', anno); * * // Initialize editor * const editor = new OpenLIME.EditorSvgAnnotation(viewer, anno, { * classes: { * 'default': { stroke: '#000', label: 'Default' }, * 'highlight': { stroke: '#ff0', label: 'Highlight' } * } * }); * * // Setup callbacks * editor.createCallback = (anno) =&gt; { * console.log(\"Created:\", anno); * return saveToDatabase(anno); * }; * ``` */ class EditorSvgAnnotation { /** * Creates an EditorSvgAnnotation instance * @param {Viewer} viewer - The OpenLIME viewer instance * @param {LayerSvgAnnotation} layer - The annotation layer to edit * @param {Object} [options] - Configuration options * @param {Object.&lt;string, {stroke: string, label: string}&gt;} options.classes - Annotation classes with colors and labels * @param {crudCallback} [options.createCallback] - Called when creating annotations * @param {crudCallback} [options.updateCallback] - Called when updating annotations * @param {crudCallback} [options.deleteCallback] - Called when deleting annotations * @param {boolean} [options.enableState=false] - Whether to save viewer state with annotations * @param {customStateCallback} [options.customState] - Customize saved state data * @param {customDataCallback} [options.customData] - Customize annotation data * @param {selectedCallback} [options.selectedCallback] - Called when annotation is selected * @param {Object} [options.tools] - Custom tool configurations * @param {number} [options.priority=20000] - Event handling priority */ constructor(viewer, layer, options) { this.layer = layer; Object.assign(this, { viewer: viewer, panning: false, tool: null, //doing nothing, could: ['line', 'polygon', 'point', 'box', 'circle'] startPoint: null, //starting point for box and circle currentLine: [], annotation: null, priority: 20000, classes: { '': { stroke: '#000', label: '' }, 'class1': { stroke: '#770', label: '' }, 'class2': { stroke: '#707', label: '' }, 'class3': { stroke: '#777', label: '' }, 'class4': { stroke: '#070', label: '' }, 'class5': { stroke: '#007', label: '' }, 'class6': { stroke: '#077', label: '' }, }, tools: { point: { img: '&lt;svg width=24 height=24&gt;&lt;circle cx=12 cy=12 r=3 fill=\"red\" stroke=\"gray\"/&gt;&lt;/svg&gt;', tooltip: 'New point', tool: Point, }, pin: { template: (x, y) =&gt; { return `&lt;svg xmlns='http://www.w3.org/2000/svg' x='${x}' y='${y}' width='4%' height='4%' class='pin' viewBox='0 0 18 18'&gt;&lt;path d='M 0,0 C 0,0 4,0 8,0 12,0 16,4 16,8 16,12 12,16 8,16 4,16 0,12 0,8 0,4 0,0 0,0 Z'/&gt;&lt;text class='pin-text' x='7' y='8'&gt;${this.annotation.idx}&lt;/text&gt;&lt;/svg&gt;`; }, //pin di alcazar 1. url a svg 2. txt (stringa con svg) 3. funzione(x,y) ritorna svg 4. dom (da skin). tooltip: 'New pin', tool: Pin }, pen: { img: '&lt;svg width=24 height=24&gt;&lt;circle cx=12 cy=12 r=3 fill=\"red\" stroke=\"gray\"/&gt;&lt;/svg&gt;', tooltip: 'New polyline', tool: Pen, }, line: { img: `&lt;svg width=24 height=24&gt; &lt;path d=\"m 4.7,4.5 c 0.5,4.8 0.8,8.5 3.1,11 2.4,2.6 4.2,-4.8 6.3,-5 2.7,-0.3 5.1,9.3 5.1,9.3\" stroke-width=\"3\" fill=\"none\" stroke=\"grey\"/&gt; &lt;path d=\"m 4.7,4.5 c 0.5,4.8 0.8,8.5 3.1,11 2.4,2.6 4.2,-4.8 6.3,-5 2.7,-0.3 5.1,9.3 5.1,9.3\" stroke-width=\"1\" fill=\"none\" stroke=\"red\"/&gt;&lt;/svg&gt;`, tooltip: 'New line', tool: Line, }, erase: { img: '', tooltip: 'Erase lines', tool: Erase, }, box: { img: '&lt;svg width=24 height=24&gt;&lt;rect x=5 y=5 width=14 height=14 fill=\"red\" stroke=\"gray\"/&gt;&lt;/svg&gt;', tooltip: 'New box', tool: Box, }, circle: { img: '&lt;svg width=24 height=24&gt;&lt;circle cx=12 cy=12 r=7 fill=\"red\" stroke=\"gray\"/&gt;&lt;/svg&gt;', tooltip: 'New circle', tool: Circle, }, /* colorpick: { img: '', tooltip: 'Pick a color', tool: Colorpick, } */ }, annotation: null, //not null only when editWidget is shown. enableState: false, customState: null, customData: null, editWidget: null, selectedCallback: null, createCallback: null, //callbacks for backend updateCallback: null, deleteCallback: null }, options); layer.style += Object.entries(this.classes).map((g) =&gt; { console.assert(g[1].hasOwnProperty('stroke'), \"Classes needs a stroke property\"); return `[data-class=${g[0]}] { stroke:${g[1].stroke}; }`; }).join('\\n'); //at the moment is not really possible to unregister the events registered here. viewer.pointerManager.onEvent(this); document.addEventListener('keyup', (e) =&gt; this.keyUp(e), false); layer.addEvent('selected', (anno) =&gt; { if (!anno || anno == this.annotation) return; if (this.selectedCallback) this.selectedCallback(anno); this.showEditWidget(anno); }); layer.annotationsEntry = () =&gt; { let entry = { html: `&lt;div class=\"openlime-tools\"&gt;&lt;/div&gt;`, list: [], //will be filled later. classes: 'openlime-annotations', status: () =&gt; 'active', oncreate: () =&gt; { if (Array.isArray(layer.annotations)) layer.createAnnotationsList(); let tools = { 'add': { action: () =&gt; { this.createAnnotation(); }, title: \"New annotation\" }, 'edit': { action: () =&gt; { this.toggleEditWidget(); }, title: \"Edit annotations\" }, 'export': { action: () =&gt; { this.exportAnnotations(); }, title: \"Export annotations\" }, 'trash': { action: () =&gt; { this.deleteSelected(); }, title: \"Delete selected annotations\" }, }; (async () =&gt; { for (const [label, tool] of Object.entries(tools)) { let icon = await Skin.appendIcon(entry.element.firstChild, '.openlime-' + label); // TODO pass entry.element.firstChild as parameter in onCreate icon.setAttribute('title', tool.title); icon.addEventListener('click', tool.action); } })(); } } layer.annotationsListEntry = entry; return entry; } } /** * Creates a new annotation * @returns {void} */ createAnnotation() { let anno = this.layer.newAnnotation(); if (this.customData) this.customData(anno); if (this.enableState) this.setAnnotationCurrentState(anno); anno.idx = this.layer.annotations.length; anno.publish = 1; anno.label = anno.description = anno.class = ''; let post = { id: anno.id, idx: anno.idx, label: anno.label, description: anno.description, 'class': anno.class, svg: null, publish: anno.publish, data: anno.data }; if (this.enableState) post = { ...post, state: anno.state }; if (this.createCallback) { let result = this.createCallback(post); if (!result) alert(\"Failed to create annotation!\"); } this.layer.setSelected(anno); } /** @ignore */ toggleEditWidget() { if (this.annotation) return this.hideEditWidget(); let id = this.layer.selected.values().next().value; if (!id) return; let anno = this.layer.getAnnotationById(id); this.showEditWidget(anno); } /** @ignore */ updateEditWidget() { let anno = this.annotation; let edit = this.editWidget; if (!anno.class) anno.class = ''; edit.querySelector('[name=label]').value = anno.label || ''; edit.querySelector('[name=description]').value = anno.description || ''; edit.querySelector('[name=idx]').value = anno.idx || ''; Object.entries(anno.data).map(k =&gt; { edit.querySelector(`[name=data-data-${k[0]}]`).value = k[1] || ''; }); edit.querySelector('[name=classes]').value = anno.class; edit.querySelector('[name=publish]').checked = anno.publish == 1; edit.classList.remove('hidden'); let button = edit.querySelector('.openlime-select-button'); button.textContent = this.classes[anno.class].label; button.style.background = this.classes[anno.class].stroke; } /** * Shows the annotation editor widget * @param {Annotation} annotation - Annotation to edit * @private */ showEditWidget(anno) { this.annotation = anno; this.setTool(null); this.setActiveTool(); this.layer.annotationsListEntry.element.querySelector('.openlime-edit').classList.add('active'); (async () =&gt; { await this.createEditWidget(); this.updateEditWidget(); })(); } /** @ignore */ hideEditWidget() { this.annotation = null; this.setTool(null); this.editWidget.classList.add('hidden'); this.layer.annotationsListEntry.element.querySelector('.openlime-edit').classList.remove('active'); } //TODO this should actually be in the html. /** @ignore */ async createEditWidget() { if (this.editWidget) return; let html = ` &lt;div class=\"openlime-annotation-edit\"&gt; &lt;label for=\"label\"&gt;Title:&lt;/label&gt; &lt;input name=\"label\" type=\"text\"&gt;&lt;br&gt; &lt;label for=\"description\"&gt;Description:&lt;/label&gt;&lt;br&gt; &lt;textarea name=\"description\" cols=\"30\" rows=\"5\"&gt;&lt;/textarea&gt;&lt;br&gt; &lt;span&gt;Class:&lt;/span&gt; &lt;div class=\"openlime-select\"&gt; &lt;input type=\"hidden\" name=\"classes\" value=\"\"/&gt; &lt;div class=\"openlime-select-button\"&gt;&lt;/div&gt; &lt;ul class=\"openlime-select-menu\"&gt; ${Object.entries(this.classes).map((c) =&gt; `&lt;li data-class=\"${c[0]}\" style=\"background:${c[1].stroke};\"&gt;${c[1].label}&lt;/li&gt;`).join('\\n')} &lt;/ul&gt; &lt;/div&gt; &lt;label for=\"idx\"&gt;Index:&lt;/label&gt; &lt;input name=\"idx\" type=\"text\"&gt;&lt;br&gt; ${Object.entries(this.annotation.data).map(k =&gt; { let label = k[0]; let str = `&lt;label for=\"data-data-${k[0]}\"&gt;${label}:&lt;/label&gt; &lt;input name=\"data-data-${k[0]}\" type=\"text\"&gt;&lt;br&gt;` return str; }).join('\\n')} &lt;br&gt; &lt;span&gt;&lt;button class=\"openlime-state\"&gt;SAVE&lt;/button&gt;&lt;/span&gt; &lt;span&gt;&lt;input type=\"checkbox\" name=\"publish\" value=\"\"&gt; Publish&lt;/span&gt;&lt;br&gt; &lt;div class=\"openlime-annotation-edit-tools\"&gt;&lt;/div&gt; &lt;/div&gt;`; let template = document.createElement('template'); template.innerHTML = html.trim(); let edit = template.content.firstChild; let select = edit.querySelector('.openlime-select'); let button = edit.querySelector('.openlime-select-button'); let ul = edit.querySelector('ul'); let options = edit.querySelectorAll('li'); let input = edit.querySelector('[name=classes]'); let state = edit.querySelector('.openlime-state'); state.addEventListener('click', (e) =&gt; { if (this.enableState) this.setAnnotationCurrentState(this.annotation); this.saveCurrent(); this.saveAnnotation(); }); button.addEventListener('click', (e) =&gt; { e.stopPropagation(); for (let o of options) o.classList.remove('selected'); select.classList.toggle('active'); }); ul.addEventListener('click', (e) =&gt; { e.stopPropagation(); input.value = e.srcElement.getAttribute('data-class'); input.dispatchEvent(new Event('change')); button.style.background = this.classes[input.value].stroke; button.textContent = e.srcElement.textContent; select.classList.toggle('active'); }); document.addEventListener('click', (e) =&gt; { select.classList.remove('active'); }); document.querySelector('.openlime-layers-menu').appendChild(edit); let tools = edit.querySelector('.openlime-annotation-edit-tools'); let pin = await Skin.appendIcon(tools, '.openlime-pin'); pin.addEventListener('click', (e) =&gt; { this.setTool('pin'); this.setActiveTool(pin); }); let draw = await Skin.appendIcon(tools, '.openlime-draw'); draw.addEventListener('click', (e) =&gt; { this.setTool('line'); this.setActiveTool(draw); }); // let pen = await Skin.appendIcon(tools, '.openlime-pen'); // pen.addEventListener('click', (e) =&gt; { this.setTool('pen'); setActive(pen); }); let erase = await Skin.appendIcon(tools, '.openlime-erase'); erase.addEventListener('click', (e) =&gt; { this.setTool('erase'); this.setActiveTool(erase); }); let undo = await Skin.appendIcon(tools, '.openlime-undo'); undo.addEventListener('click', (e) =&gt; { this.undo(); }); let redo = await Skin.appendIcon(tools, '.openlime-redo'); redo.addEventListener('click', (e) =&gt; { this.redo(); }); /* let colorpick = await Skin.appendIcon(tools, '.openlime-colorpick'); undo.addEventListener('click', (e) =&gt; { this.pickColor(); }); */ let label = edit.querySelector('[name=label]'); label.addEventListener('blur', (e) =&gt; { if (this.annotation.label != label.value) this.saveCurrent(); this.saveAnnotation(); }); let descr = edit.querySelector('[name=description]'); descr.addEventListener('blur', (e) =&gt; { if (this.annotation.description != descr.value) this.saveCurrent(); this.saveAnnotation(); }); let idx = edit.querySelector('[name=idx]'); idx.addEventListener('blur', (e) =&gt; { if (this.annotation.idx != idx.value) { const svgPinIdx = this.annotation.elements[0]; if (svgPinIdx) { const txt = svgPinIdx.querySelector(\".pin-text\"); if (txt) { txt.textContent = idx.value; } } this.saveCurrent(); } this.saveAnnotation(); }); Object.entries(this.annotation.data).map(k =&gt; { let dataElm = edit.querySelector(`[name=data-data-${k[0]}]`); dataElm.addEventListener('blur', (e) =&gt; { if (this.annotation.data[k[0]] != dataElm.value) this.saveCurrent(); this.saveAnnotation(); }); }); let classes = edit.querySelector('[name=classes]'); classes.addEventListener('change', (e) =&gt; { if (this.annotation.class != classes.value) this.saveCurrent(); this.saveAnnotation(); }); let publish = edit.querySelector('[name=publish]'); publish.addEventListener('change', (e) =&gt; { if (this.annotation.publish != publish.value) this.saveCurrent(); this.saveAnnotation(); }); edit.classList.add('hidden'); this.editWidget = edit; } /** @ignore */ setAnnotationCurrentState(anno) { anno.state = window.structuredClone(this.viewer.canvas.getState()); // Callback to add light/lens params or other data if (this.customState) this.customState(anno); } /** * Saves annotation changes and triggers update callback * @private */ saveAnnotation() { let edit = this.editWidget; let anno = this.annotation; anno.label = edit.querySelector('[name=label]').value || ''; anno.description = edit.querySelector('[name=description]').value || ''; anno.idx = edit.querySelector('[name=idx]').value || '0'; Object.entries(anno.data).map(k =&gt; { anno.data[k[0]] = edit.querySelector(`[name=data-data-${k[0]}]`).value || ''; }); anno.publish = edit.querySelector('[name=publish]').checked ? 1 : 0; let select = edit.querySelector('[name=classes]'); anno.class = select.value || ''; let button = edit.querySelector('.openlime-select-button'); button.style.background = this.classes[anno.class].stroke; for (let e of this.annotation.elements) e.setAttribute('data-class', anno.class); let post = { id: anno.id, idx: anno.idx, label: anno.label, description: anno.description, class: anno.class, publish: anno.publish, data: anno.data }; if (this.enableState) post = { ...post, state: anno.state }; // if (anno.light) post = { ...post, light: anno.light }; FIXME // if (anno.lens) post = { ...post, lens: anno.lens }; //anno.bbox = anno.getBBoxFromElements(); let serializer = new XMLSerializer(); post.svg = `&lt;svg xmlns=\"http://www.w3.org/2000/svg\"&gt; ${anno.elements.map((s) =&gt; { s.classList.remove('selected'); return serializer.serializeToString(s) }).join(\"\\n\")} &lt;/svg&gt;`; if (this.updateCallback) { let result = this.updateCallback(post); if (!result) { alert(\"Failed to update annotation\"); return; } } //for (let c of element.children) // a.elements.push(c); //update the entry let template = document.createElement('template'); template.innerHTML = this.layer.createAnnotationEntry(anno); let entry = template.content.firstChild; //TODO find a better way to locate the entry! this.layer.annotationsListEntry.element.parentElement.querySelector(`[data-annotation=\"${anno.id}\"]`).replaceWith(entry); this.layer.setSelected(anno); } /** * Deletes the selected annotation * @returns {void} */ deleteSelected() { let id = this.layer.selected.values().next().value; if (id) this.deleteAnnotation(id); } /** @ignore */ deleteAnnotation(id) { let anno = this.layer.getAnnotationById(id); if (this.deleteCallback) { if (!confirm(`Deleting annotation ${anno.label}, are you sure?`)) return; let result = this.deleteCallback(anno); if (!result) { alert(\"Failed to delete this annotation.\"); return; } } //remove svg elements from the canvas this.layer.svgGroup.querySelectorAll(`[data-annotation=\"${anno.id}\"]`).forEach(e =&gt; e.remove()); //remove entry from the list let list = this.layer.annotationsListEntry.element.parentElement.querySelector('.openlime-list'); list.querySelectorAll(`[data-annotation=\"${anno.id}\"]`).forEach(e =&gt; e.remove()); this.layer.annotations = this.layer.annotations.filter(a =&gt; a !== anno); this.layer.clearSelected(); this.hideEditWidget(); } /** * Exports all annotations as SVG * @returns {void} */ exportAnnotations() { let svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); const bBox = this.layer.boundingBox(); svgElement.setAttribute('viewBox', `0 0 ${bBox.xHigh - bBox.xLow} ${bBox.yHigh - bBox.yLow}`); let style = Util.createSVGElement('style'); style.textContent = this.layer.style; svgElement.appendChild(style); let serializer = new XMLSerializer(); //let svg = `&lt;svg xmlns=\"http://www.w3.org/2000/svg\"&gt; for (let anno of this.layer.annotations) { for (let e of anno.elements) { if (e.tagName == 'path') { //Inkscape nitpicks on the commas in svg path. let d = e.getAttribute('d'); e.setAttribute('d', d.replaceAll(',', ' ')); } svgElement.appendChild(e.cloneNode()); } } let svg = serializer.serializeToString(svgElement); /*(${this.layer.annotations.map(anno =&gt; { return `&lt;group id=\"${anno.id}\" title=\"${anno.label}\" data-description=\"${anno.description}\"&gt; ${anno.elements.map((s) =&gt; { s.classList.remove('selected'); return serializer.serializeToString(s) }).join(\"\\n\")} &lt;/group&gt;`; })} &lt;/svg&gt;`; */ ///console.log(svg); var e = document.createElement('a'); e.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(svg)); e.setAttribute('download', 'annotations.svg'); e.style.display = 'none'; document.body.appendChild(e); e.click(); document.body.removeChild(e); } /** @ignore */ setActiveTool(e) { if (!this.editWidget) return; let tools = this.editWidget.querySelector('.openlime-annotation-edit-tools'); tools.querySelectorAll('svg').forEach(a =&gt; a.classList.remove('active')); if (e) e.classList.add('active'); } /** * Sets the active drawing tool * @param {string} tool - Tool name ('point', 'pin', 'line', 'box', 'circle', 'erase', or null) * @private */ setTool(tool) { this.tool = tool; if (this.factory &amp;&amp; this.factory.quit) this.factory.quit(); if (tool) { if (!tool in this.tools) throw \"Unknown editor tool: \" + tool; this.factory = new this.tools[tool].tool(this.tools[tool]); this.factory.annotation = this.annotation; this.factory.layer = this.layer; } document.querySelector('.openlime-overlay').classList.toggle('erase', tool == 'erase'); document.querySelector('.openlime-overlay').classList.toggle('crosshair', tool &amp;&amp; tool != 'erase'); } // UNDO STUFF /** * Performs an undo operation * @returns {void} */ undo() { let anno = this.annotation; //current annotation. if (!anno) return; if (this.factory &amp;&amp; this.factory.undo &amp;&amp; this.factory.undo()) { anno.needsUpdate = true; this.viewer.redraw(); return; } if (anno.history &amp;&amp; anno.history.length) { //FIXME TODO history will be more complicated if it has to manage multiple tools. anno.future.push(this.annoToData(anno)); let data = anno.history.pop(); this.dataToAnno(data, anno); anno.needsUpdate = true; this.viewer.redraw(); this.updateEditWidget(); } } /** * Performs a redo operation * @returns {void} */ redo() { let anno = this.annotation; //current annotation. if (!anno) return; if (this.factory &amp;&amp; this.factory.redo &amp;&amp; this.factory.redo()) { anno.needsUpdate = true; this.viewer.redraw(); return; } if (anno.future &amp;&amp; anno.future.length) { anno.history.push(this.annoToData(anno)); let data = anno.future.pop(); this.dataToAnno(data, anno); anno.needsUpdate = true; this.viewer.redraw(); this.updateEditWidget(); } } /** * Saves current annotation state to history * @private */ saveCurrent() { let anno = this.annotation; //current annotation. if (!anno.history) anno.history = []; anno.history.push(this.annoToData(anno)); anno.future = []; } /** @ignore */ annoToData(anno) { let data = {}; for (let i of ['id', 'label', 'description', 'class', 'publish', 'data']) data[i] = `${anno[i] || ''}`; data.elements = anno.elements.map(e =&gt; { let n = e.cloneNode(); n.points = e.points; return n; }); return data; } /** @ignore */ dataToAnno(data, anno) { for (let i of ['id', 'label', 'description', 'class', 'publish', 'data']) anno[i] = `${data[i]}`; anno.elements = data.elements.map(e =&gt; { let n = e.cloneNode(); n.points = e.points; return n; }); } // TOOLS STUFF /** @ignore */ keyUp(e) { if (e.defaultPrevented) return; switch (e.key) { case 'Escape': if (this.tool) { this.setActiveTool(); this.setTool(null); e.preventDefault(); } break; case 'Delete': this.deleteSelected(); break; case 'Backspace': break; case 'z': if (e.ctrlKey) this.undo(); break; case 'Z': if (e.ctrlKey) this.redo(); break; } } /** @ignore */ panStart(e) { if (e.buttons != 1 || e.ctrlKey || e.altKey || e.shiftKey || e.metaKey) return; if (!['line', 'erase', 'box', 'circle'].includes(this.tool)) return; this.panning = true; e.preventDefault(); this.saveCurrent(); const pos = this.mapToSvg(e); let shape = this.factory.create(pos, e); this.annotation.needsUpdate = true; this.viewer.redraw(); } /** @ignore */ panMove(e) { if (!this.panning) return false; const pos = this.mapToSvg(e); this.factory.adjust(pos, e); } /** @ignore */ panEnd(e) { if (!this.panning) return false; this.panning = false; const pos = this.mapToSvg(e); let changed = this.factory.finish(pos, e); if (!changed) //nothing changed no need to keep current situation in history. this.annotation.history.pop(); else this.saveAnnotation(); this.annotation.needsUpdate = true; this.viewer.redraw(); } /** @ignore */ fingerHover(e) { if (this.tool != 'line') return; e.preventDefault(); const pos = this.mapToSvg(e); let changed = this.factory.hover(pos, e); this.annotation.needsUpdate = true; this.viewer.redraw(); } /** @ignore */ fingerSingleTap(e) { if (!['point', 'pin', 'line', 'erase'].includes(this.tool)) return; e.preventDefault(); this.saveCurrent(); const pos = this.mapToSvg(e); let changed = this.factory.tap(pos, e) if (!changed) //nothing changed no need to keep current situation in history. this.annotation.history.pop(); else this.saveAnnotation(); this.annotation.needsUpdate = true; this.viewer.redraw(); } /** @ignore */ fingerDoubleTap(e) { if (!['line'].includes(this.tool)) return; e.preventDefault(); this.saveCurrent(); const pos = this.mapToSvg(e); let changed = this.factory.doubleTap(pos, e) if (!changed) //nothing changed no need to keep current situation in history. this.annotation.history.pop(); else this.saveAnnotation(); this.annotation.needsUpdate = true; this.viewer.redraw(); } /** * Converts viewer coordinates to SVG coordinates * @param {PointerEvent} event - Pointer event * @returns {Object} Position in SVG coordinates with pixel size information * @private */ mapToSvg(e) { const p = { x: e.offsetX, y: e.offsetY }; const layerT = this.layer.transform; const useGL = false; const layerbb = this.layer.boundingBox(); const layerSize = { w: layerbb.width(), h: layerbb.height() }; //compute also size of an image pixel on screen and store in pixelSize. let pos = CoordinateSystem.fromCanvasHtmlToImage(p, this.viewer.camera, layerT, layerSize, useGL); p.x += 1; let pos1 = CoordinateSystem.fromCanvasHtmlToImage(p, this.viewer.camera, layerT, layerSize, useGL); pos.pixelSize = Math.abs(pos1.x - pos.x); return pos; } } /** @ignore */ class Point { tap(pos) { let point = Util.createSVGElement('circle', { cx: pos.x, cy: pos.y, r: 10, class: 'point' }); this.annotation.elements.push(point); return true; } } /** @ignore */ class Pin { constructor(options) { Object.assign(this, options); } tap(pos) { const str = this.template(pos.x, pos.y); let parser = new DOMParser(); let point = parser.parseFromString(str, \"image/svg+xml\").documentElement; // this.annotation.elements.push(point); this.annotation.elements[0] = point; return true; } } /** @ignore */ class Pen { constructor() { //TODO Use this.path.points as in line, instead. this.points = []; } create(pos) { this.points.push(pos); if (this.points.length == 1) { saveCurrent this.path = Util.createSVGElement('path', { d: `M${pos.x} ${pos.y}`, class: 'line' }); return this.path; } let p = this.path.getAttribute('d'); this.path.setAttribute('d', p + ` L${pos.x} ${pos.y}`); this.path.points = this.points; } undo() { if (!this.points.length) return; this.points.pop(); let d = this.points.map((p, i) =&gt; `${i == 0 ? 'M' : 'L'}${p.x} ${p.y}`).join(' '); this.path.setAttribute('d', d); if (this.points.length &lt; 2) { this.points = []; this.annotation.elements = this.annotation.elements.filter((e) =&gt; e != this.path); } } } /** @ignore */ class Box { constructor() { this.origin = null; this.box = null; } create(pos) { this.origin = pos; this.box = Util.createSVGElement('rect', { x: pos.x, y: pos.y, width: 0, height: 0, class: 'rect' }); return this.box; } adjust(pos) { let p = this.origin; this.box.setAttribute('x', Math.min(p.x, pos.x)); this.box.setAttribute('width', Math.abs(pos.x - p.x)); this.box.setAttribute('y', Math.min(p.y, pos.y)); this.box.setAttribute('height', Math.abs(pos.y - p.y)); } finish(pos) { return this.box; } } /** @ignore */ class Circle { constructor() { this.origin = null; this.circle = null; } create(pos) { this.origin = pos; this.circle = Util.createSVGElement('circle', { cx: pos.x, cy: pos.y, r: 0, class: 'circle' }); return this.circle; } adjust(pos) { let p = this.origin; let r = Math.hypot(pos.x - p.x, pos.y - p.y); this.circle.setAttribute('r', r); } finish() { return this.circle; } } /** @ignore */ class Line { constructor() { this.history = [] } create(pos) { /*if(this.segment) { this.layer.svgGroup.removeChild(this.segment); this.segment = null; }*/ for (let e of this.annotation.elements) { if (!e.points || e.points.length &lt; 2) continue; if (Line.distance(e.points[0], pos) / pos.pixelSize &lt; 5) { e.points.reverse(); this.path = e; this.path.setAttribute('d', Line.svgPath(e.points)); //reverse points! this.history = [this.path.points.length]; return; } if (Line.distanceToLast(e.points, pos) &lt; 5) { this.path = e; this.adjust(pos); this.history = [this.path.points.length]; return; } } this.path = Util.createSVGElement('path', { d: `M${pos.x} ${pos.y}`, class: 'line' }); this.path.points = [pos]; this.history = [this.path.points.length]; this.annotation.elements.push(this.path); } tap(pos) { if (!this.path) { this.create(pos); return false; } else { if (this.adjust(pos)) this.history = [this.path.points.length - 1]; return true; } } doubleTap(pos) { if (!this.path) return false; if (this.adjust(pos)) { this.history = [this.path.points.length - 1]; this.path = null; } return false; } hover(pos, event) { return; if (!this.path) return false; let s = this.path.points[this.path.points.length - 1]; if (!this.segment) { this.segment = Util.createSVGElement('path', { class: 'line' }); this.layer.svgGroup.appendChild(this.segment); } pos.x = pos.x - s.x; pos.y = pos.y - s.y; let len = Math.sqrt(pos.x * pos.x + pos.y * pos.y); if (len &gt; 30) { pos.x *= 30 / len; pos.y *= 30 / len; } this.segment.setAttribute('d', `M${s.x} ${s.y} l${pos.x} ${pos.y}`); return true; } quit() { return; if (this.segment) { this.layer.svgGroup.removeChild(this.segment); this.segment = null; } } adjust(pos) { let gap = Line.distanceToLast(this.path.points, pos); if (gap / pos.pixelSize &lt; 4) return false; this.path.points.push(pos); let d = this.path.getAttribute('d'); this.path.setAttribute('d', Line.svgPath(this.path.points));//d + `L${pos.x} ${pos.y}`); return true; } finish() { this.path.setAttribute('d', Line.svgPath(this.path.points)); return true; //some changes where made! } undo() { if (!this.path || !this.history.length) return false; this.path.points = this.path.points.slice(0, this.history.pop()); this.path.setAttribute('d', Line.svgPath(this.path.points)); return true; } redo() { return false; } //TODO: smooth should be STABLE, if possible. static svgPath(points) { //return points.map((p, i) =&gt; `${(i == 0? \"M\" : \"L\")}${p.x} ${p.y}`).join(' '); let tolerance = 1.5 * points[0].pixelSize; let tmp = simplify(points, tolerance); let smoothed = smooth(tmp, 90, true); return smoothToPath(smoothed); } static distanceToLast(line, point) { let last = line[line.length - 1]; return Line.distance(last, point); } static distance(a, b) { let dx = a.x - b.x; let dy = a.y - b.y; return Math.sqrt(dx * dx + dy * dy); } } /** @ignore */ class Erase { create(pos, event) { this.erased = false; this.erase(pos, event); } adjust(pos, event) { this.erase(pos, event); } finish(pos, event) { return this.erase(pos, event); } //true if some points where removed. tap(pos, event) { return this.erase(pos, event); } erase(pos, event) { for (let e of this.annotation.elements) { if (e == event.originSrc) { e.points = []; this.erased = true; continue; } let points = e.points; if (!points || !points.length) continue; if (Line.distanceToLast(points, pos) &lt; 10) this.erased = true, points.pop(); else if (Line.distance(points[0], pos) &lt; 10) this.erased = true, points.shift(); else continue; if (points.length &lt;= 2) { e.points = []; e.setAttribute('d', ''); this.annotation.needsUpdate = true; this.erased = true; continue; } e.setAttribute('d', Line.svgPath(points)); } this.annotation.elements = this.annotation.elements.filter(e =&gt; { return !e.points || e.points.length &gt; 2; }); return this.erased; } } export { EditorSvgAnnotation } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"LayerSvgAnnotation.js.html":{"id":"LayerSvgAnnotation.js.html","title":"Source: LayerSvgAnnotation.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: LayerSvgAnnotation.js import { Util } from './Util' import { Layer } from './Layer' import { Annotation } from './Annotation' import { LayerAnnotation } from './LayerAnnotation' import { CoordinateSystem } from './CoordinateSystem'; /** * @typedef {Object} AnnotationClass * @property {string} stroke - CSS color for SVG elements (lines, text, outlines) * @property {string} label - Display name for the class */ /** * @typedef {Object.&lt;string, AnnotationClass&gt;} AnnotationClasses * @description Map of class names to their visual properties */ /** * @typedef {Object} LayerSvgAnnotationOptions * @property {AnnotationClasses} classes - Annotation class definitions with styles * @property {Function} [onClick] - Callback for annotation click events (param: selected annotation) * @property {boolean} [shadow=true] - Whether to use Shadow DOM for SVG elements * @property {HTMLElement} [overlayElement] - Container for SVG overlay * @property {string} [style] - Additional CSS styles for annotations * @property {Function} [annotationUpdate] - Custom update function for annotations * @extends LayerAnnotationOptions */ /** * LayerSvgAnnotation provides SVG-based annotation capabilities in OpenLIME. * It renders SVG elements directly on the canvas overlay, outside the WebGL context, * enabling rich vector graphics annotations with interactive features. * * Features: * - SVG-based vector annotations * - Custom styling per annotation class * - Interactive selection * - Shadow DOM isolation * - Dynamic SVG transformation * - Event handling * - Custom update callbacks * * Technical Details: * - Uses SVG overlay for rendering * - Handles coordinate system transformations * - Manages DOM element lifecycle * - Supports custom class styling * - Implements visibility management * - Provides selection mechanisms * * @extends LayerAnnotation * * @example * ```javascript * // Create SVG annotation layer with custom classes * const annotationLayer = new OpenLIME.Layer({ * type: 'svg_annotations', * classes: { * 'highlight': { stroke: '#ff0', label: 'Highlight' }, * 'comment': { stroke: '#0f0', label: 'Comment' } * }, * onClick: (annotation) =&gt; { * console.log('Clicked:', annotation.label); * }, * shadow: true * }); * * // Add to viewer * viewer.addLayer('annotations', annotationLayer); * ``` */ class LayerSvgAnnotation extends LayerAnnotation { /** * Creates a new LayerSvgAnnotation instance * @param {LayerSvgAnnotationOptions} [options] - Configuration options */ constructor(options) { options = Object.assign({ overlayElement: null, //reference to canvas overlayElement. TODO: check if really needed. shadow: true, //svg attached as shadow node (so style apply only the svg layer) svgElement: null, //the svg layer svgGroup: null, onClick: null, //callback function classes: { '': { stroke: '#000', label: '' }, }, annotationUpdate: null }, options); super(options); for (const [key, value] of Object.entries(this.classes)) { this.style += `[data-class=${key}] { ` + Object.entries(value).map(g =&gt; `${g[0]}: ${g[1]};`).join('\\n') + '}'; } this.style += `.openlime-svgoverlay { position:absolute; top:0px; left:0px;}`; //this.createOverlaySVGElement(); //this.setLayout(this.layout); } /** * Creates the SVG overlay element and initializes the shadow DOM if enabled * @private */ createOverlaySVGElement() { this.svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); this.svgElement.classList.add('openlime-svgoverlay'); this.svgGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); this.svgElement.append(this.svgGroup); // Check if the shadow root already exists before attaching let root = this.overlayElement; if (this.shadow) { if (!this.overlayElement.shadowRoot) { root = this.overlayElement.attachShadow({ mode: \"open\" }); } else { root = this.overlayElement.shadowRoot; // Use existing shadow root } } if (this.style) { const style = document.createElement('style'); style.textContent = this.style; root.append(style); } root.appendChild(this.svgElement); } /* unused for the moment!!! async loadSVG(url) { var response = await fetch(url); if (!response.ok) { this.status = \"Failed loading \" + this.url + \": \" + response.statusText; return; } let text = await response.text(); let parser = new DOMParser(); this.svgXML = parser.parseFromString(text, \"image/svg+xml\").documentElement; throw \"if viewbox is set in svgURL should it overwrite options.viewbox or viceversa?\" } */ /** * Sets visibility of the annotation layer * Updates both SVG display and underlying layer visibility * @param {boolean} visible - Whether layer should be visible * @override */ setVisible(visible) { if (this.svgElement) this.svgElement.style.display = visible ? 'block' : 'none'; super.setVisible(visible); } /** * Clears all annotation selections */ clearSelected() { if (!this.svgElement) this.createOverlaySVGElement(); // return; this.svgGroup.querySelectorAll('[data-annotation]').forEach((e) =&gt; e.classList.remove('selected')); super.clearSelected(); } /** * Sets selection state of an annotation * @param {Annotation} anno - The annotation to select/deselect * @param {boolean} [on=true] - Whether to select (true) or deselect (false) */ setSelected(anno, on = true) { for (let a of this.svgElement.querySelectorAll(`[data-annotation=\"${anno.id}\"]`)) a.classList.toggle('selected', on); super.setSelected(anno, on); } /** * Creates a new SVG annotation * @param {Annotation} [annotation] - Optional existing annotation to use * @returns {Annotation} The created annotation * @private */ newAnnotation(annotation) { let svg = Util.createSVGElement('svg'); if (!annotation) annotation = new Annotation({ element: svg, selector_type: 'SvgSelector' }); return super.newAnnotation(annotation) } /** * Renders the SVG annotations * Updates SVG viewBox and transformation to match current view * @param {Transform} transform - Current view transform * @param {Object} viewport - Current viewport * @returns {boolean} Whether render completed successfully * @override */ draw(transform, viewport) { if (!this.svgElement) return true; this.svgElement.setAttribute('viewBox', `${-viewport.w / 2} ${-viewport.h / 2} ${viewport.w} ${viewport.h}`); const svgTransform = this.getSvgGroupTransform(transform); this.svgGroup.setAttribute(\"transform\", svgTransform); return true; } /** * Calculates SVG group transform string * @param {Transform} transform - Current view transform * @param {boolean} [inverse=false] - Whether to return inverse transform * @returns {string} SVG transform attribute value */ getSvgGroupTransform(transform, inverse = false) { let t = this.transform.compose(transform); let c = this.boundingBox().corner(0); // FIXME CHECK IT: Convert from GL to SVG, but without any scaling. It just needs to reflect around 0, t = CoordinateSystem.reflectY(t); return inverse ? `translate(${-c.x} ${-c.y}) scale(${1 / t.z} ${1 / t.z}) rotate(${t.a} 0 0) translate(${-t.x} ${-t.y})` : `translate(${t.x} ${t.y}) rotate(${-t.a} 0 0) scale(${t.z} ${t.z}) translate(${c.x} ${c.y})`; } /** * Prepares annotations for rendering * Handles SVG element creation and updates * @param {Transform} transform - Current view transform * @private */ prefetch(transform) { if (!this.svgElement) this.createOverlaySVGElement(); if (!this.visible) return; if (this.status != 'ready') return; if (typeof (this.annotations) == \"string\") return; //FIXME Is it right? Should we use this.status? const bBox = this.boundingBox(); //this.svgElement.setAttribute('viewBox', `${bBox.xLow} ${bBox.yLow} ${bBox.xHigh - bBox.xLow} ${bBox.yHigh - bBox.yLow}`); //find which annotations needs to be added to the ccanvas, some //indexing whould be used, for the moment we just iterate all of them. for (let anno of this.annotations) { //TODO check for class visibility and bbox culling (or maybe should go to prefetch?) if (!anno.ready &amp;&amp; typeof anno.svg == 'string') { let parser = new DOMParser(); let element = parser.parseFromString(anno.svg, \"image/svg+xml\").documentElement; anno.elements = [...element.children] anno.ready = true; /* } else if(this.svgXML) { a.svgElement = this.svgXML.querySelector(`#${a.id}`); if(!a.svgElement) throw Error(`Could not find element with id: ${id} in svg`); } */ } if (this.annotationUpdate) this.annotationUpdate(anno, transform); if (!anno.needsUpdate) continue; anno.needsUpdate = false; for (let e of this.svgGroup.querySelectorAll(`[data-annotation=\"${anno.id}\"]`)) e.remove(); if (!anno.visible) continue; //second time will be 0 elements, but we need to //store somewhere knowledge of which items in the scene and which still not. for (let child of anno.elements) { let c = child; //.cloneNode(true); c.setAttribute('data-annotation', anno.id); c.setAttribute('data-class', anno.class); //c.setAttribute('data-layer', this.id); c.classList.add('openlime-annotation'); if (this.selected.has(anno.id)) c.classList.add('selected'); this.svgGroup.appendChild(c); c.onpointerdown = (e) =&gt; { if (e.button == 0) { e.preventDefault(); e.stopPropagation(); if (this.onClick &amp;&amp; this.onClick(anno)) return; if (this.selected.has(anno.id)) return; this.clearSelected(); this.setSelected(anno, true); } } } } } } /** * Register this layer type with the Layer factory * @type {Function} * @private */ Layer.prototype.types['svg_annotations'] = (options) =&gt; { return new LayerSvgAnnotation(options); } export { LayerSvgAnnotation } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"Transform.js.html":{"id":"Transform.js.html","title":"Source: Transform.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: Transform.js import { BoundingBox } from \"./BoundingBox\"; /** * A [x, y] point. * @typedef APoint * @property {number} p.0 The x-coordinate. * @property {number} p.1 The y-coordinate. */ /** * A {x, y} point. * @typedef {Object} Point * @property {number} x The x-coordinate. * @property {number} y The y-coordinate. */ /** * The class **Transform** implements a 2D affine map to convert coordinates between two systems. * The map is internally represented by four values: * * `x` the x-component of the translation vector * * `y` the y-component of the translation vector * * `a` the rotation angle around the z-axis (in degrees) * * `z` the scale factor * * A transformation between a point P to P' is defined by * ``` * P' = z*rot(a)*P + t * ``` * where `z` is the scale factor, `a` is the rotation angle, and `t(x,y)` is the translation vector. * * The class implements a set of geometric transformations useful to position the camera, create animations, etc... */ class Transform { //FIXME Add translation to P? /** * Instantiates a Transform object. * @param {Object} [options] An object literal with Transform parameters. * @param {number} options.x=0 The x-component of the translation vector. * @param {number} options.y=0 The y-component of the translation vector. * @param {number} options.a=0 The rotation angle (in degrees). * @param {number} options.z=1 The scale factor. * @param {time} options.t=0 The current time. */ constructor(options) { Object.assign(this, { x:0, y:0, z:1, a:0, t:0 }); if(!this.t) this.t = performance.now(); if(typeof(options) == 'object') Object.assign(this, options); } /** * Gets a copy of `this` Transform. * @returns {Transform} The copy of the Transform. */ copy() { let transform = new Transform(); Object.assign(transform, this); return transform; } /** * Applies `this` Transform to a point P(x,y) to get P'(x',y'). * @param {number} x x-coordinate of the point P. * @param {number} y y-coordinate of the point P. * @returns {{x, y}} The point P'. */ apply(x, y) { //TODO! ROTATE let r = Transform.rotate(x, y, this.a); return { x: r.x*this.z + this.x, y: r.y*this.z + this.y } } /** * Computes the inverse of `this` Transform. * @returns {Transform} The inverse Transform. */ inverse() { let r = Transform.rotate(this.x/this.z, this.y/this.z, -this.a); return new Transform({x:-r.x, y:-r.y, z:1/this.z, a:-this.a, t:this.t}); } /** * Maps an angle `a` to range from 0 to 360 degrees. * @param {number} a The angle (in degrees). * @returns {number} The normalized angle. */ static normalizeAngle(a) { while(a &gt; 360) a -= 360; while(a &lt; 0) a += 360; return a; } /** * Computes the rotation of a point P(x,y) by an angle `a` around the z-axis to get P'(x',y'). * @param {*} x x-coordinate of the point P. * @param {*} y y-coordinate of the point P. * @param {*} a The rotation angle (in degrees) * @returns {{x,y}} The point P'. */ static rotate(x, y, a) { a = Math.PI*(a/180); let ex = Math.cos(a)*x - Math.sin(a)*y; let ey = Math.sin(a)*x + Math.cos(a)*y; return {x:ex, y:ey}; } // first get applied this (a) then transform (b). /** * Composes (multiplies) `this` Transform with an other `transform`. * @param {Transform} transform * @returns {Transform} The result of the composition. */ compose(transform) { let a = this.copy(); let b = transform; a.z *= b.z; a.a += b.a; var r = Transform.rotate(a.x, a.y, b.a); a.x = r.x*b.z + b.x; a.y = r.y*b.z + b.y; return a; } /** * Applyes `this` Transform to a bounding box. * @param {BoundingBox} lbox * @returns {BoundingBox} The result. */ transformBox(lbox) { let box = new BoundingBox(); for(let i = 0; i &lt; 4; i++) { let c = lbox.corner(i); let p = this.apply(c.x, c.y); box.mergePoint(p); } return box; } /** * Gets the bounding box (in image coordinate space) of the vieport. The viewport y-axis points up. * The image and screen transform has y pointing down. * @param {Viewport} viewport * @returns {BoundingBox} The bounding box. */ getInverseBox(viewport) { let inverse = this.inverse(); let corners = [ {x:viewport.x, y:viewport.y}, {x:viewport.x + viewport.dx, y:viewport.y}, {x:viewport.x, y:viewport.y + viewport.dy}, {x:viewport.x + viewport.dx, y:viewport.y + viewport.dy} ]; let box = new BoundingBox(); for(let corner of corners) { let p = inverse.apply(corner.x -viewport.w/2, -corner.y + viewport.h/2); box.mergePoint(p); } return box; } /** * The type Easing defines the function that regulates the movement of the camera * @typedef {('linear'|'ease-out'|'ease-in-out')} Transform#Easing */ /** * Computes the interpolated transform at time `time` between `source` and `target` * @param {Transform} source The source transform. * @param {Transform} target The target transform. * @param {time} time The time at which to compute the interpolation. * @param {Transform#Easing} easing The easing function. * @returns {Transform} The interpolated transform. */ static interpolate(source, target, time, easing) { //FIXME STATIC console.assert(!isNaN(source.x)); console.assert(!isNaN(target.x)); const pos = new Transform(); let dt = (target.t - source.t); if (time &lt; source.t) { Object.assign(pos, source); } else if (time &gt; target.t || dt &lt; 0.001) { Object.assign(pos, target); } else { let tt = (time - source.t) / dt; switch (easing) { case 'ease-out': tt = 1 - Math.pow(1 - tt, 2); break; case 'ease-in-out': tt = tt &lt; 0.5 ? 2 * tt * tt : 1 - Math.pow(-2 * tt + 2, 2) / 2; break; } let st = 1 - tt; for (let i of ['x', 'y', 'z', 'a']) pos[i] = (st * source[i] + tt * target[i]); } pos.t = time; return pos; } /** * Combines `this` Transform with the viewport to get the WebGL projection matrix. * @param {Viewport} viewport The viewport. * @returns {number[]} The result. */ projectionMatrix(viewport) { let z = this.z; // In coords with 0 in lower left corner map x0 to -1, and x0+v.w to 1 // In coords with 0 at screen center and x0 at 0, map -v.w/2 -&gt; -1, v.w/2 -&gt; 1 // With x0 != 0: x0 -&gt; x0-v.w/2 -&gt; -1, and x0+dx -&gt; x0+v.dx-v.w/2 -&gt; 1 // Where dx is viewport width, while w is window width //0, 0 &lt;-&gt; viewport.x + viewport.dx/2 (if x, y = let zx = 2/viewport.dx; let zy = 2/viewport.dy; let dx = zx * this.x + (2/viewport.dx)*(viewport.w/2-viewport.x)-1; let dy = zy * this.y + (2/viewport.dy)*(viewport.h/2-viewport.y)-1; let a = Math.PI *this.a/180; let matrix = [ Math.cos(a)*zx*z, Math.sin(a)*zy*z, 0, 0, -Math.sin(a)*zx*z, Math.cos(a)*zy*z, 0, 0, 0, 0, 1, 0, dx, dy, 0, 1]; return matrix; } /** * Transforms the point `p` from scene (0 at image center) to [0,wh] . * @param {Viewport} viewport The viewport. * @param {APoint} p The point in scene (0,0 at image center) * @returns {APoint} The point in range [0..w-1,0..h-1] */ sceneToViewportCoords(viewport, p) { //FIXME Point is an array, but in other places it is an Object... return [p[0] * this.z + this.x - viewport.x + viewport.w/2, p[1] * this.z - this.y + viewport.y + viewport.h/2 ]; } /** * Transforms the point `p` from [0,wh] to scene (0 at image center). * * @param {Viewport} viewport The viewport. * @param {APoint} p The point in range [0..w-1,0..h-1] * @returns {APoint} The point in scene (0,0 at image center) */ viewportToSceneCoords(viewport, p) { return [(p[0] + viewport.x - viewport.w/2 - this.x) / this.z, (p[1] - viewport.y - viewport.h/2 + this.y) / this.z]; } print(str=\"\", precision=0) { const p = precision; console.log(str + \" x:\" + this.x.toFixed(p) + \", y:\" + this.y.toFixed(p) + \", z:\" + this.z.toFixed(p) + \", a:\" + this.a.toFixed(p) + \", t:\" + this.t.toFixed(p)); } } export { Transform } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"AudioPlayer.js.html":{"id":"AudioPlayer.js.html","title":"Source: AudioPlayer.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: AudioPlayer.js import { addSignals } from './Signals.js' /** * Class representing an audio player with playback control capabilities. * Supports playing, pausing, resuming, and stopping audio files with volume control * and playback speed adjustment. */ class AudioPlayer { /** * Creates an instance of AudioPlayer. * Initializes the player with default settings and sets up signal handling for the 'ended' event. */ constructor() { this.audio = null; this.isPlaying = false; this.isPaused = false; this.isMuted = false; this.previousVolume = 1.0; this.playStartTime = null; this.playDuration = 0; addSignals(AudioPlayer, 'ended'); } /** * Plays an audio file with optional playback speed adjustment. * If audio is paused, it will resume playback instead of starting a new file. * * @param {string} audioFile - The path or URL to the audio file. * @param {number} [speed=1.0] - Playback speed multiplier (1.0 is normal speed). * @returns {Promise&lt;void&gt;} Resolves when the audio playback completes. */ async play(audioFile, speed = 1.0) { if (!this.isPlaying &amp;&amp; !this.isPaused) { this.audio = new Audio(audioFile); this.audio.playbackRate = speed; this.audio.volume = this.previousVolume; this.isPlaying = true; this.isPaused = false; this.playStartTime = Date.now(); this.playDuration = 0; this.onEndedListener = () =&gt; { this.isPlaying = false; this.updatePlayDuration(); this.emit('ended'); // Remove the listener this.audio.removeEventListener('ended', this.onEndedListener); this.onEndedListener = null; }; this.audio.addEventListener('ended', this.onEndedListener); await this.audio.play(); return new Promise((resolve) =&gt; { this.audio.onended = () =&gt; { this.isPlaying = false; resolve(); }; }); } else if (this.isPaused) { await this.continue(); } } /** * Pauses the currently playing audio. * Updates play duration when pausing. */ pause() { if (!this.isPaused &amp;&amp; this.audio) { this.audio.pause(); this.isPaused = true; this.updatePlayDuration(); } } /** * Resumes playback of a paused audio file. * * @returns {Promise&lt;void&gt;} Resolves when the resumed audio playback completes. */ async continue() { if (this.isPaused &amp;&amp; this.audio) { this.isPaused = false; this.playStartTime = Date.now(); await this.audio.play(); return new Promise((resolve) =&gt; { this.audio.onended = () =&gt; { this.isPlaying = false; resolve(); }; }); } else { console.log(\"No paused audio to continue.\"); } } /** * Stops the current audio playback and resets all player states. * Removes event listeners and updates final play duration. */ stop() { if (this.audio) { this.audio.pause(); this.audio.currentTime = 0; if (this.onEndedListener) { this.audio.removeEventListener('ended', this.onEndedListener); this.onEndedListener = null; } this.isPlaying = false; this.isPaused = false; this.isMuted = false; this.updatePlayDuration(); } } /** * Updates the total play duration based on the current session. * Called internally when playback is paused, stopped, or ends. * @private */ updatePlayDuration() { if (this.playStartTime) { const now = Date.now(); this.playDuration += now - this.playStartTime; this.playStartTime = null; } } /** * Returns the total play duration in milliseconds. * * @returns {number} Total play duration in milliseconds. */ getPlayDuration() { return this.playDuration; } /** * Sets the audio volume level. * * @param {number} volume - Volume level between 0.0 and 1.0. */ setVolume(volume) { if (this.audio) { if (volume &gt;= 0 &amp;&amp; volume &lt;= 1) { this.audio.volume = volume; this.previousVolume = volume; } else { console.log(\"Volume must be between 0.0 and 1.0\"); } } else { console.log(\"No audio loaded.\"); } } /** * Creates a delay in the execution flow. * * @param {number} ms - Number of milliseconds to wait. * @returns {Promise&lt;void&gt;} Resolves after the specified delay. */ async silence(ms) { return new Promise((resolve) =&gt; setTimeout(resolve, ms)); } /** * Toggles the mute state of the audio player. * Stores the previous volume level when muting and restores it when unmuting. */ toggleMute() { if (this.audio) { if (this.isMuted) { this.audio.volume = this.previousVolume; this.isMuted = false; } else { this.previousVolume = this.audio.volume; this.audio.volume = 0; this.isMuted = true; } } else { console.log(\"No audio loaded.\"); } } } export { AudioPlayer } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"Simplify.js.html":{"id":"Simplify.js.html","title":"Source: Simplify.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: Simplify.js /* FROM: https://stackoverflow.com/questions/40650306/how-to-draw-a-smooth-continuous-line-with-mouse-using-html-canvas-and-javascript */ /** * A [x, y, xc, yc] point. * @typedef BezierPoint * @property {number} p.0 The x-coordinate. * @property {number} p.1 The y-coordinate. * @property {number} p.2 The x-coordinate of the control point. * @property {number} p.3 The y-coordinate of the control point. */ /** * Simplifies a polyline via the Douglas-Peucker algorithm. * @param {Array&lt;Point&gt;} points A polyline. * @param {*} tolerance The tolerance is the maximum distance between the original polyline and the simplified polyline. * It has the same metric as the point coordinates. * @returns {Array&lt;Point&gt;} The simplified polyline. */ function simplify(points, tolerance) { let tolerance2 = Math.pow(tolerance, 2); var simplify1 = function(start, end) { // recursize simplifies points from start to end var index, i, xx , yy, dx, dy, ddx, ddy, t, dist, dist1; let p1 = points[start]; let p2 = points[end]; xx = p1.x; yy = p1.y; ddx = p2.x - xx; ddy = p2.y - yy; dist1 = ddx * ddx + ddy * ddy; let maxDist = tolerance2; for (var i = start + 1; i &lt; end; i++) { let p = points[i]; if (ddx !== 0 || ddy !== 0) { t = ((p.x - xx) * ddx + (p.y - yy) * ddy) / dist1; if (t &gt; 1) { dx = p.x - p2.x; dy = p.y - p2.y; } else if (t &gt; 0) { dx = p.x - (xx + ddx * t); dy = p.y - (yy + ddy * t); } else { dx = p.x - xx; dy = p.y - yy; } } else{ dx = p.x - xx; dy = p.y - yy; } dist = dx * dx + dy * dy if (dist &gt; maxDist) { index = i; maxDist = dist; } } if (maxDist &gt; tolerance2) { if (index - start &gt; 1){ simplify1(start, index); } newLine.push(points[index]); if (end - index &gt; 1){ simplify1(index, end); } } } var end = points.length - 1; var newLine = [points[0]]; simplify1(0, end); newLine.push(points[end]); return newLine; } /** * Uses Bezier Curve to smooth a polyline * @param {Array&lt;Point&gt;} points A polyline. * @param {number} cornerThres The angular threshold (in degrees). Two segments are smoothed if their angle is less then the threshold. * @param {bool} match Whether the smoothed curve should traverse the original points or approximate them. * @returns {Array&lt;BezierPoint&gt;} The smoothed polyline. */ function smooth(points, cornerThres, match) { cornerThres *= 3.1415/180; let newPoints = []; // array for new points if(points.length &lt;= 2) return points.map((p) =&gt; [p.x, p.y]); let nx1, ny1, nx2, ny2, dist1, dist2; function dot(x, y, xx, yy) { // get do product // dist1,dist2,nx1,nx2,ny1,ny2 are the length and normals and used outside function // normalise both vectors dist1 = Math.sqrt(x * x + y * y); // get length if (dist1 &gt; 0) { // normalise nx1 = x / dist1 ; ny1 = y / dist1 ; } else { nx1 = 1; // need to have something so this will do as good as anything ny1 = 0; } dist2 = Math.sqrt(xx * xx + yy * yy); if (dist2 &gt; 0) { nx2 = xx / dist2; ny2 = yy / dist2; } else { nx2 = 1; ny2 = 0; } return Math.acos(nx1 * nx2 + ny1 * ny2 ); // dot product } let p1 = points[0]; let endP = points[points.length-1]; let i = 0; // start from second poitn if line not closed let closed = false; let len = Math.hypot(p1.x- endP.x, p1.y-endP.y); if(len &lt; Math.SQRT2){ // end points are the same. Join them in coordinate space endP = p1; i = 0; // start from first point if line closed p1 = points[points.length-2]; closed = true; } newPoints.push([points[i].x,points[i].y]) for(; i &lt; points.length-1; i++){ let p2 = points[i]; let p3 = points[i + 1]; let angle = Math.abs(dot(p2.x - p1.x, p2.y - p1.y, p3.x - p2.x, p3.y - p2.y)); if(dist1 !== 0){ // dist1 and dist2 come from dot function if( angle &lt; cornerThres){ // bend it if angle between lines is small if(match){ dist1 = Math.min(dist1,dist2); dist2 = dist1; } // use the two normalized vectors along the lines to create the tangent vector let x = (nx1 + nx2) / 2; let y = (ny1 + ny2) / 2; len = Math.sqrt(x * x + y * y); // normalise the tangent if(len === 0){ newPoints.push([p2.x,p2.y]); } else { x /= len; y /= len; if(newPoints.length &gt; 0){ var np = newPoints[newPoints.length-1]; np.push(p2.x-x*dist1*0.25); np.push(p2.y-y*dist1*0.25); } newPoints.push([ // create the new point with the new bezier control points. p2.x, p2.y, p2.x+x*dist2*0.25, p2.y+y*dist2*0.25 ]); } } else { newPoints.push([p2.x,p2.y]); } } p1 = p2; } if(closed){ // if closed then copy first point to last. p1 = []; for(i = 0; i &lt; newPoints[0].length; i++){ p1.push(newPoints[0][i]); } newPoints.push(p1); }else{ newPoints.push([points[points.length-1].x,points[points.length-1].y]); } return newPoints; } /** * Converts a smoothed polyline into an SVG path. * @param {Array&lt;BezierPoint&gt;} smoothed The smoothed polyline. * @returns {Array&lt;String&gt;} The SVG path. */ function smoothToPath(smoothed) { let p = smoothed[0]; let d = [`M${p[0].toFixed(1)} ${p[1].toFixed(1)}`]; let p1; for(let i = 0; i &lt; smoothed.length-1; i++) { p = smoothed[i]; p1 = smoothed[i+1]; if(p.length == 2) d.push(`l${(p1[0]-p[0]).toFixed(1)} ${(p1[1]-p[1]).toFixed(1)}`) else if(p.length == 4) d.push(`q${(p[2]-p[0]).toFixed(1)} ${(p[3]-p[1]).toFixed(1)} ${(p1[0]-p[0]).toFixed(1)} ${(p1[1]-p[1]).toFixed(1)}`) else d.push(`c${(p[2]-p[0]).toFixed(1)} ${(p[3]-p[1]).toFixed(1)} ${(p[4]-p[0]).toFixed(1)} ${(p[5]-p[1]).toFixed(1)} ${(p1[0]-p[0]).toFixed(1)} ${(p1[1]-p[1]).toFixed(1)}`); } return d.join(' '); } export { simplify, smooth, smoothToPath } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"BoundingBox.js.html":{"id":"BoundingBox.js.html","title":"Source: BoundingBox.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: BoundingBox.js /** * Represents an axis-aligned rectangular bounding box that can be wrapped tightly around geometric elements. * The box is defined by two opposite vertices (low and high corners) and provides a comprehensive set of * utility methods for manipulating and analyzing bounding boxes. */ class BoundingBox { /** * Creates a new BoundingBox instance. * @param {Object} [options] - Configuration options for the bounding box * @param {number} [options.xLow=1e20] - X coordinate of the lower corner * @param {number} [options.yLow=1e20] - Y coordinate of the lower corner * @param {number} [options.xHigh=-1e20] - X coordinate of the upper corner * @param {number} [options.yHigh=-1e20] - Y coordinate of the upper corner */ constructor(options) { Object.assign(this, { xLow: 1e20, yLow: 1e20, xHigh: -1e20, yHigh: -1e20 }); Object.assign(this, options); } /** * Initializes the bounding box from an array of coordinates. * @param {number[]} x - Array containing coordinates in order [xLow, yLow, xHigh, yHigh] */ fromArray(x) { this.xLow = x[0]; this.yLow = x[1]; this.xHigh = x[2]; this.yHigh = x[3]; } /** * Resets the bounding box to an empty state by setting coordinates to extreme values. */ toEmpty() { this.xLow = 1e20; this.yLow = 1e20; this.xHigh = -1e20; this.yHigh = -1e20; } /** * Checks if the bounding box is empty (has no valid area). * A box is considered empty if its low corner coordinates are greater than its high corner coordinates. * @returns {boolean} True if the box is empty, false otherwise */ isEmpty() { return this.xLow &gt; this.xHigh || this.yLow &gt; this.yHigh; } /** * Converts the bounding box coordinates to an array. * @returns {number[]} Array of coordinates in order [xLow, yLow, xHigh, yHigh] */ toArray() { return [this.xLow, this.yLow, this.xHigh, this.yHigh]; } /** * Creates a space-separated string representation of the bounding box coordinates. * @returns {string} String in format \"xLow yLow xHigh yHigh\" */ toString() { return this.xLow.toString() + \" \" + this.yLow.toString() + \" \" + this.xHigh.toString() + \" \" + this.yHigh.toString(); } /** * Enlarges this bounding box to include another bounding box. * If this box is empty, it will adopt the dimensions of the input box. * If the input box is null, no changes are made. * @param {BoundingBox|null} box - The bounding box to merge with this one */ mergeBox(box) { if (box == null) return; if (this.isEmpty()) Object.assign(this, box); else { this.xLow = Math.min(this.xLow, box.xLow); this.yLow = Math.min(this.yLow, box.yLow); this.xHigh = Math.max(this.xHigh, box.xHigh); this.yHigh = Math.max(this.yHigh, box.yHigh); } } /** * Enlarges this bounding box to include a point. * @param {{x: number, y: number}} p - The point to include in the bounding box */ mergePoint(p) { this.xLow = Math.min(this.xLow, p.x); this.yLow = Math.min(this.yLow, p.y); this.xHigh = Math.max(this.xHigh, p.x); this.yHigh = Math.max(this.yHigh, p.y); } /** * Moves the bounding box by the specified displacement. * @param {number} dx - Displacement along the x-axis * @param {number} dy - Displacement along the y-axis */ shift(dx, dy) { this.xLow += dx; this.yLow += dy; this.xHigh += dx; this.yHigh += dy; } /** * Quantizes the bounding box coordinates by dividing by a specified value and rounding down. * This creates a grid-aligned bounding box. * @param {number} side - The value to divide coordinates by */ quantize(side) { this.xLow = Math.floor(this.xLow / side); this.yLow = Math.floor(this.yLow / side); this.xHigh = Math.floor((this.xHigh - 1) / side) + 1; this.yHigh = Math.floor((this.yHigh - 1) / side) + 1; } /** * Calculates the width of the bounding box. * @returns {number} The difference between xHigh and xLow */ width() { return this.xHigh - this.xLow; } /** * Calculates the height of the bounding box. * @returns {number} The difference between yHigh and yLow */ height() { return this.yHigh - this.yLow; } /** * Calculates the center point of the bounding box. * @returns {{x: number, y: number}} The coordinates of the center point */ center() { return { x: (this.xLow + this.xHigh) / 2, y: (this.yLow + this.yHigh) / 2 }; } /** * Gets the coordinates of a specific corner of the bounding box. * @param {number} i - Corner index (0: bottom-left, 1: bottom-right, 2: top-left, 3: top-right) * @returns {{x: number, y: number}} The coordinates of the specified corner */ corner(i) { // To avoid the switch let v = this.toArray(); return { x: v[0 + (i &amp; 0x1) &lt;&lt; 1], y: v[1 + (i &amp; 0x2)] }; } /** * Checks if this bounding box intersects with another bounding box. * @param {BoundingBox} box - The other bounding box to check intersection with * @returns {boolean} True if the boxes intersect, false otherwise */ intersects(box) { return xLow &lt;= box.xHigh &amp;&amp; xHigh &gt;= box.xLow &amp;&amp; yLow &lt;= box.yHigh &amp;&amp; yHigh &gt;= box.yLow; } /** * Prints the bounding box coordinates to the console in a formatted string. * Output format: \"BOX=xLow, yLow, xHigh, yHigh\" with values rounded to 2 decimal places */ print() { console.log(\"BOX=\" + this.xLow.toFixed(2) + \", \" + this.yLow.toFixed(2) + \", \" + this.xHigh.toFixed(2) + \", \" + this.yHigh.toFixed(2)) } } export { BoundingBox } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"Camera.js.html":{"id":"Camera.js.html","title":"Source: Camera.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: Camera.js import { Transform } from './Transform.js' import { BoundingBox } from './BoundingBox.js' import { addSignals } from './Signals.js' /** * Defines a rectangular viewing region inside a canvas area. * @typedef {Object} Viewport * @property {number} x - X-coordinate of the lower-left corner * @property {number} y - Y-coordinate of the lower-left corner * @property {number} dx - Width of the viewport * @property {number} dy - Height of the viewport * @property {number} w - Total canvas width * @property {number} h - Total canvas height */ /** * Camera class that manages viewport parameters and camera transformations. * Acts as a container for parameters needed to define the viewport and camera position, * supporting smooth animations between positions using source and target transforms. * * The camera maintains two Transform objects: * - source: represents current position * - target: represents destination position * * Animation between positions is handled automatically by the OpenLIME system * unless manually interrupted by user input. */ class Camera { /** * Creates a new Camera instance. * @param {Object} [options] - Configuration options * @param {boolean} [options.bounded=true] - Whether to limit camera translation to scene boundaries * @param {number} [options.maxFixedZoom=2] - Maximum allowed pixel size * @param {number} [options.minScreenFraction=1] - Minimum portion of screen to show when zoomed in * @param {Transform} [options.target] - Initial target transform * @fires Camera#update */ constructor(options) { Object.assign(this, { viewport: null, bounded: true, minScreenFraction: 1, maxFixedZoom: 2, maxZoom: 2, minZoom: 1, boundingBox: new BoundingBox, }); Object.assign(this, options); this.target = new Transform(this.target); this.source = this.target.copy(); this.easing = 'linear'; } /** * Creates a deep copy of the camera instance. * @returns {Camera} A new Camera instance with copied properties */ copy() { let camera = new Camera(); Object.assign(camera, this); return camera; } /** * Updates the viewport while maintaining the camera position as close as possible to the previous one. * @param {Viewport} view - The new viewport in CSS coordinates */ setViewport(view) { if (this.viewport) { let rz = Math.sqrt((view.w / this.viewport.w) * (view.h / this.viewport.h)); this.viewport = view; const { x, y, z, a } = this.target; this.setPosition(0, x, y, z * rz, a); } else { this.viewport = view; } } /** * Returns the current viewport in device coordinates (accounting for device pixel ratio). * @returns {Viewport} The current viewport scaled for device pixels */ glViewport() { let d = window.devicePixelRatio; let viewport = {}; for (let i in this.viewport) viewport[i] = this.viewport[i] * d; return viewport; } /** * Converts canvas coordinates to scene coordinates using the specified transform. * @param {number} x - X coordinate relative to canvas * @param {number} y - Y coordinate relative to canvas * @param {Transform} transform - Transform to use for conversion * @returns {{x: number, y: number}} Coordinates in scene space relative to viewport center */ mapToScene(x, y, transform) { //compute coords relative to the center of the viewport. x -= this.viewport.w / 2; y -= this.viewport.h / 2; x -= transform.x; y -= transform.y; x /= transform.z; y /= transform.z; let r = Transform.rotate(x, y, -transform.a); return { x: r.x, y: r.y }; } /** * Converts scene coordinates to canvas coordinates using the specified transform. * @param {number} x - X coordinate in scene space * @param {number} y - Y coordinate in scene space * @param {Transform} transform - Transform to use for conversion * @returns {{x: number, y: number}} Coordinates in canvas space */ sceneToCanvas(x, y, transform) { let r = Transform.rotate(x, y, transform.a); x = r.x * transform.z + transform.x - this.viewport.x + this.viewport.w / 2; y = r.y * transform.z - transform.y + this.viewport.y + this.viewport.h / 2; return { x: x, y: y }; } /** * Sets the camera target parameters for a new position. * @param {number} dt - Animation duration in milliseconds * @param {number} x - X component of translation * @param {number} y - Y component of translation * @param {number} z - Zoom factor * @param {number} a - Rotation angle in degrees * @param {string} [easing] - Easing function name for animation * @fires Camera#update */ setPosition(dt, x, y, z, a, easing) { /** * The event is fired when the camera target is changed. * @event Camera#update */ // Discard events due to cursor outside window //if (Math.abs(x) &gt; 64000 || Math.abs(y) &gt; 64000) return; this.easing = easing || this.easing; if (this.bounded) { const sw = this.viewport.dx; const sh = this.viewport.dy; // let xform = new Transform({ x: x, y: y, z: z, a: a, t: 0 }); let tbox = xform.transformBox(this.boundingBox); const bw = tbox.width(); const bh = tbox.height(); // Screen space offset between image boundary and screen boundary // Do not let transform offet go beyond this limit. // if (scaled-image-size &lt; screen) it remains fully contained // else the scaled-image boundary closest to the screen cannot enter the screen. const dx = Math.abs(bw - sw) / 2;// + this.boundingBox.center().x- tbox.center().x; x = Math.min(Math.max(-dx, x), dx); const dy = Math.abs(bh - sh) / 2;// + this.boundingBox.center().y - tbox.center().y; y = Math.min(Math.max(-dy, y), dy); } let now = performance.now(); this.source = this.getCurrentTransform(now); //the angle needs to be interpolated in the shortest direction. //target it is kept between 0 and +360, source is kept relative. a = Transform.normalizeAngle(a); this.source.a = Transform.normalizeAngle(this.source.a); if (a - this.source.a &gt; 180) this.source.a += 360; if (this.source.a - a &gt; 180) this.source.a -= 360; Object.assign(this.target, { x: x, y: y, z: z, a: a, t: now + dt }); console.assert(!isNaN(this.target.x)); this.emit('update'); } /** * Pans the camera by a specified amount in canvas coordinates. * @param {number} dt - Animation duration in milliseconds * @param {number} dx - Horizontal displacement * @param {number} dy - Vertical displacement */ pan(dt, dx, dy) { let now = performance.now(); let m = this.getCurrentTransform(now); m.x += dx; m.y += dy; this.setPosition(dt, m.x, m.y, m.z, m.a); } /** * Zooms the camera to a specific point in canvas coordinates. * @param {number} dt - Animation duration in milliseconds * @param {number} z - Target zoom level * @param {number} [x=0] - X coordinate to zoom towards * @param {number} [y=0] - Y coordinate to zoom towards */ zoom(dt, z, x, y) { if (!x) x = 0; if (!y) y = 0; let now = performance.now(); let m = this.getCurrentTransform(now); if (this.bounded) { z = Math.min(Math.max(z, this.minZoom), this.maxZoom); } //x, an y should be the center of the zoom. m.x += (m.x + x) * (m.z - z) / m.z; m.y += (m.y + y) * (m.z - z) / m.z; this.setPosition(dt, m.x, m.y, z, m.a); } /** * Rotates the camera around its z-axis. * @param {number} dt - Animation duration in milliseconds * @param {number} a - Rotation angle in degrees */ rotate(dt, a) { let now = performance.now(); let m = this.getCurrentTransform(now); this.setPosition(dt, m.x, m.y, m.z, this.target.a + a); } /** * Applies a relative zoom change at a specific point. * @param {number} dt - Animation duration in milliseconds * @param {number} dz - Relative zoom change factor * @param {number} [x=0] - X coordinate to zoom around * @param {number} [y=0] - Y coordinate to zoom around */ deltaZoom(dt, dz, x = 0, y = 0) { let now = performance.now(); let m = this.getCurrentTransform(now); //rapid firing wheel event need to compound. //but the x, y in input are relative to the current transform. dz *= this.target.z / m.z; if (this.bounded) { if (m.z * dz &lt; this.minZoom) dz = this.minZoom / m.z; if (m.z * dz &gt; this.maxZoom) dz = this.maxZoom / m.z; } //transform is x*z + dx = X , there x is positrion in scene, X on screen //we want x*z*dz + dx1 = X (stay put, we need to find dx1. let r = Transform.rotate(x, y, m.a); m.x += r.x * m.z * (1 - dz); m.y += r.y * m.z * (1 - dz); this.setPosition(dt, m.x, m.y, m.z * dz, m.a); } /** * Gets the camera transform at a specific time. * @param {number} time - Current time in milliseconds (from performance.now()) * @returns {Transform} The interpolated transform at the specified time */ getCurrentTransform(time) { if (time &gt; this.target.t) this.easing = 'linear'; return Transform.interpolate(this.source, this.target, time, this.easing); } /** * Gets the camera transform at a specific time in device coordinates. * @param {number} time - Current time in milliseconds (from performance.now()) * @returns {Transform} The interpolated transform scaled for device pixels */ getGlCurrentTransform(time) { const pos = this.getCurrentTransform(time); pos.x *= window.devicePixelRatio; pos.y *= window.devicePixelRatio; pos.z *= window.devicePixelRatio; return pos; } /** * Adjusts the camera to frame a specified bounding box. * @param {BoundingBox} box - The box to frame in canvas coordinates * @param {number} [dt=0] - Animation duration in milliseconds */ fit(box, dt) { if (box.isEmpty()) return; if (!dt) dt = 0; //find if we align the topbottom borders or the leftright border. let w = this.viewport.dx; let h = this.viewport.dy; let bw = box.width(); let bh = box.height(); let c = box.center(); let z = Math.min(w / bw, h / bh); this.setPosition(dt, -c.x * z, -c.y * z, z, 0); } /** * Resets the camera to show the entire scene. * @param {number} dt - Animation duration in milliseconds */ fitCameraBox(dt) { this.fit(this.boundingBox, dt); } /** * Updates the camera's boundary constraints and zoom limits. * @private * @param {BoundingBox} box - New bounding box for constraints * @param {number} minScale - Minimum scale factor */ updateBounds(box, minScale) { this.boundingBox = box; const w = this.viewport.dx; const h = this.viewport.dy; let bw = this.boundingBox.width(); let bh = this.boundingBox.height(); this.minZoom = Math.min(w / bw, h / bh) * this.minScreenFraction; this.maxZoom = minScale &gt; 0 ? this.maxFixedZoom / minScale : this.maxFixedZoom; this.maxZoom = Math.max(this.minZoom, this.maxZoom); } } addSignals(Camera, 'update'); export { Camera } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"Shader.js.html":{"id":"Shader.js.html","title":"Source: Shader.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: Shader.js import { addSignals } from './Signals.js' import { Util } from './Util.js' /** * A reference to a 2D texture. * @typedef {Object} Shader#Sampler * @property {number} id A sampler unique identifier. * @property {string} name The sampler name (the texture reference name in the shader program). * @property {string} label used for menu * @property {array} samplers array of rasters {id:, type: } color, normals, etc. * *samplers*: array of rasters {id:, type: } color, normals, etc. * bind: false will not used in preparegl * load: false will not be loaded from raster * both options are used in neural where the coefficients are loaded, but used by tf * @property {array} uniforms: * type = &lt;vec4|vec3|vec2|float|int&gt;, * needsUpdate controls when updated in gl, * size is unused, * value is and array or a float, * we also want to support interpolation: source (value is the target), start, end are the timing (same as camera interpolation) */ /** * The `Shader` class allows shader programs to be linked and used. * This class supports shader programs written in the OpenGL/ES Shading Language (GLSL/ES) with 2.0 amd 3.0 specifications. * * The `Shader` class keeps the programmer away from the details of compiling and linking vertex and fragment shaders. * The following example creates a fragment shader program using the supplied source code. Once compiled and linked, * the shader program is activated in the current WebGLContext. * ``` * const shader = new OpenLIME.Shader({ * 'label': 'Rgb', * 'samplers': [{ id: 0, name: 'kd' }] * }); * // The fragment shader script * shader.fragShaderSrc = function (gl) { * let gl2 = !(gl instanceof WebGLRenderingContext); * let str = `${gl2 ? '#version 300 es' : ''} * precision highp float; * precision highp int; * * uniform sampler2D kd; * uniform float u_colorFactor; * ... * * return str; * }; * // Declares a uniform. * shader.uniforms = { * u_colorFactor: { type: 'float', needsUpdate: true, size: 1, value: 0.0 }, * }; * // Adds the shader to the Layer and set it as the current one. * this.shaders['bw'] = shader; * this.setShader('bw'); * ``` */ class Shader { /** * Instantiates a Shader class. An object literal with Shader `options` can be specified. * @param {Object} [options] An object literal describing the shader content. * @param {Array&lt;Shader#Sampler&gt;} options.samplers An array of pointers to 2D textures. * @param {Array&lt;string&gt;} options.modes An optional array of labels that identify different shader behaviors. */ constructor(options) { Object.assign(this, { version: 100, //check for webglversion. debug: false, samplers: [], uniforms: {}, label: null, program: null, //webgl program modes: [], mode: null, // The current mode needsUpdate: true, tileSize: [0, 0] }); addSignals(Shader, 'update'); Object.assign(this, options); this.filters = []; } clearFilters() { this.filters = []; this.needsUpdate = true; this.emit('update'); } addFilter(f) { f.shader = this; this.filters.push(f); this.needsUpdate = true; f.needsUpdate = true; this.emit('update'); } removeFilter(name) { this.filters = this.filters.filter((v) =&gt; { return v.name != name; }); this.needsUpdate = true; this.emit('update'); } /** * Sets the current mode of the shader * @param {string} mode The mode identifier */ setMode(mode) { if (this.modes.indexOf(mode) == -1) throw Error(\"Unknown mode: \" + mode); this.mode = mode; this.needsUpdate = true; } /** @ignore */ restoreWebGL(gl) { this.createProgram(gl); } setTileSize(sz) { this.tileSize = sz; this.needsUpdate = true; } /** * Sets the value of a uniform variable. * @param {string} name The name of the uniform variable. * @param {*} value The value to assign. */ setUniform(name, value) { /** * The event is fired when a uniform shader variable is changed. * @event Camera#update */ let u = this.getUniform(name); if (!u) throw new Error(`Unknown '${name}'. It is not a registered uniform.`); if ((typeof (value) == \"number\" || typeof (value) == \"boolean\") &amp;&amp; u.value == value) return; if (Array.isArray(value) &amp;&amp; Array.isArray(u.value) &amp;&amp; value.length == u.value.length) { let equal = true; for (let i = 0; i &lt; value.length; i++) if (value[i] != u.value[i]) { equal = false; break; } if (equal) return; } u.value = value; u.needsUpdate = true; this.emit('update'); } completeFragShaderSrc(gl) { let gl2 = !(gl instanceof WebGLRenderingContext); let src = `${gl2 ? '#version 300 es' : ''}\\n`; src += `precision highp float;\\n`; src += `precision highp int;\\n`; src += `const vec2 tileSize = vec2(${this.tileSize[0]}.0, ${this.tileSize[1]}.0);\\n`; src += this.fragShaderSrc() + '\\n'; for (let f of this.filters) { src += ` // Filter: ${f.name}\\n`; src += f.fragModeSrc() + '\\n'; src += f.fragSamplerSrc() + '\\n'; src += f.fragUniformSrc() + '\\n'; src += f.fragDataSrc() + '\\n\\n'; } src += ` ${gl2 ? 'out' : ''} vec4 color; void main() { color = data(); `; for (let f of this.filters) { src += `color=${f.functionName()}(color);\\n` } src += `${gl2 ? '' : 'gl_FragColor = color;'} }`; return src; } /** @ignore */ createProgram(gl) { let vert = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vert, this.vertShaderSrc(gl)); gl.compileShader(vert); let compiled = gl.getShaderParameter(vert, gl.COMPILE_STATUS); if (!compiled) { Util.printSrcCode(this.vertShaderSrc(gl)) console.log(gl.getShaderInfoLog(vert)); throw Error(\"Failed vertex shader compilation: see console log and ask for support.\"); } else if (this.debug) { Util.printSrcCode(this.vertShaderSrc(gl)) } let frag = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(frag, this.completeFragShaderSrc(gl)); gl.compileShader(frag); if (this.program) gl.deleteProgram(this.program); let program = gl.createProgram(); gl.getShaderParameter(frag, gl.COMPILE_STATUS); compiled = gl.getShaderParameter(frag, gl.COMPILE_STATUS); if (!compiled) { Util.printSrcCode(this.completeFragShaderSrc(gl)); console.log(gl.getShaderInfoLog(frag)); throw Error(\"Failed fragment shader compilation: see console log and ask for support.\"); } else if (this.debug) { Util.printSrcCode(this.completeFragShaderSrc(gl)); } gl.attachShader(program, vert); gl.attachShader(program, frag); gl.linkProgram(program); if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { var info = gl.getProgramInfoLog(program); throw new Error('Could not compile WebGL program. \\n\\n' + info); } //sampler units; for (let sampler of this.samplers) sampler.location = gl.getUniformLocation(program, sampler.name); // filter samplers for (let f of this.filters) for (let sampler of f.samplers) sampler.location = gl.getUniformLocation(program, sampler.name); this.coordattrib = gl.getAttribLocation(program, \"a_position\"); gl.vertexAttribPointer(this.coordattrib, 3, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(this.coordattrib); this.texattrib = gl.getAttribLocation(program, \"a_texcoord\"); gl.vertexAttribPointer(this.texattrib, 2, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(this.texattrib); this.matrixlocation = gl.getUniformLocation(program, \"u_matrix\"); this.program = program; this.needsUpdate = false; for (let uniform of Object.values(this.allUniforms())) { uniform.location = null; uniform.needsUpdate = true; } for (let f of this.filters) f.prepare(gl); } getUniform(name) { let u = this.uniforms[name]; if (u) return u; for (let f of this.filters) { u = f.uniforms[name]; if (u) return u; } return u; } allUniforms() { const result = this.uniforms; for (let f of this.filters) { Object.assign(result, f.uniforms); } return result; } /** @ignore */ updateUniforms(gl) { for (const [name, uniform] of Object.entries(this.allUniforms())) { if (!uniform.location) uniform.location = gl.getUniformLocation(this.program, name); if (!uniform.location) //uniform not used in program continue; if (uniform.needsUpdate) { let value = uniform.value; switch (uniform.type) { case 'vec4' : gl.uniform4fv(uniform.location, value); break; case 'vec3' : gl.uniform3fv(uniform.location, value); break; case 'vec2' : gl.uniform2fv(uniform.location, value); break; case 'float': gl.uniform1f(uniform.location, value); break; case 'int' : gl.uniform1i(uniform.location, value); break; case 'bool' : gl.uniform1i(uniform.location, value); break; case 'mat3' : gl.uniformMatrix3fv(uniform.location, false, value); break; case 'mat4' : gl.uniformMatrix4fv(uniform.location, false, value); break; default: throw Error('Unknown uniform type: ' + u.type); } uniform.needsUpdate = false; } } } /** * Gets the vertex shader script. By default it only applies the view matrix and passes the texture coordinates to the fragment shader. * @param {*} gl Thegl context. * @returns {string} The vertex shader script. */ vertShaderSrc(gl) { let gl2 = !(gl instanceof WebGLRenderingContext); return `${gl2 ? '#version 300 es' : ''} precision highp float; precision highp int; uniform mat4 u_matrix; ${gl2 ? 'in' : 'attribute'} vec4 a_position; ${gl2 ? 'in' : 'attribute'} vec2 a_texcoord; ${gl2 ? 'out' : 'varying'} vec2 v_texcoord; void main() { gl_Position = u_matrix * a_position; v_texcoord = a_texcoord; } `; } /** * Gets the fragment shader script. This is a virtual function and MUST be redefined in derived classes. * @param {*} gl Thegl context. * @returns {string} The vertex shader script. */ fragShaderSrc(gl) { let gl2 = !(gl instanceof WebGLRenderingContext); let str = ` uniform sampler2D kd; ${gl2? 'in' : 'varying'} vec2 v_texcoord; vec4 data() { return texture${gl2?'':'2D'}(kd, v_texcoord); } `; return str; } } export { Shader } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"Canvas.js.html":{"id":"Canvas.js.html","title":"Source: Canvas.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: Canvas.js import { Util } from './Util' import { Camera } from './Camera' import { Layer } from './Layer' import { Cache } from './Cache' import { addSignals } from './Signals' //// HELPERS window.structuredClone = typeof (structuredClone) == \"function\" ? structuredClone : function (value) { return JSON.parse(JSON.stringify(value)); }; /** * Canvas class that manages WebGL context, layers, and scene rendering. * Handles layer management, WebGL context creation/restoration, and render timing. */ class Canvas { /** * Creates a new Canvas instance with WebGL context and overlay support. * @param {HTMLCanvasElement|string} canvas - Canvas DOM element or selector * @param {HTMLElement|string} overlay - Overlay DOM element or selector for decorations (annotations, glyphs) * @param {Camera} camera - Scene camera instance * @param {Object} [options] - Configuration options * @param {Object} [options.layers] - Layer configurations mapping layer IDs to Layer instances * @param {boolean} [options.preserveDrawingBuffer=false] - Whether to preserve WebGL buffers until manually cleared * @param {number} [options.targetfps=30] - Target frames per second for rendering * @fires Canvas#update * @fires Canvas#updateSize * @fires Canvas#ready */ constructor(canvas, overlay, camera, options) { Object.assign(this, { canvasElement: null, preserveDrawingBuffer: false, gl: null, overlayElement: null, camera: camera, layers: {}, targetfps: 30, fps: 0, timing: [16], //records last 30 frames time from request to next draw, rolling, primed to avoid /0 timingLength: 5, //max number of timings. overBudget: 0, //fraction of frames that took too long to render. signals: { 'update': [], 'updateSize': [], 'ready': [] } }); Object.assign(this, options); this.init(canvas, overlay); for (let id in this.layers) this.addLayer(id, new Layer(this.layers[id])); this.camera.addEvent('update', () =&gt; this.emit('update')); } /** * Records render timing information and updates FPS statistics. * @param {number} elapsed - Time elapsed since last frame in milliseconds * @private */ addRenderTiming(elapsed) { this.timing.push(elapsed); while (this.timing.length &gt; this.timingLength) this.timing.shift(); this.overBudget = this.timing.filter(t =&gt; t &gt; 1000 / this.targetfps).length / this.timingLength; this.fps = 1000 / (this.timing.reduce((sum, a) =&gt; sum + a, 0) / this.timing.length); } /** * Initializes WebGL context and sets up event listeners. * @param {HTMLCanvasElement|string} canvas - Canvas element or selector * @param {HTMLElement|string} overlay - Overlay element or selector * @throws {Error} If canvas or overlay elements cannot be found or initialized * @private */ init(canvas, overlay) { if (!canvas) throw \"Missing element parameter\" if (typeof (canvas) == 'string') { canvas = document.querySelector(canvas); if (!canvas) throw \"Could not find dom element.\"; } if (!overlay) throw \"Missing element parameter\" if (typeof (overlay) == 'string') { overlay = document.querySelector(overlay); if (!overlay) throw \"Could not find dom element.\"; } if (!canvas.tagName) throw \"Element is not a DOM element\" if (canvas.tagName != \"CANVAS\") throw \"Element is not a canvas element\"; this.canvasElement = canvas; this.overlayElement = overlay; /* test context loss */ /* canvas = WebGLDebugUtils.makeLostContextSimulatingCanvas(canvas); canvas.loseContextInNCalls(1000); */ let glopt = { antialias: false, depth: false, preserveDrawingBuffer: this.preserveDrawingBuffer }; this.gl = this.gl || canvas.getContext(\"webgl2\", glopt) || canvas.getContext(\"webgl\", glopt) || canvas.getContext(\"experimental-webgl\", glopt); if (!this.gl) throw \"Could not create a WebGL context\"; canvas.addEventListener(\"webglcontextlost\", (event) =&gt; { console.log(\"Context lost.\"); event.preventDefault(); }, false); canvas.addEventListener(\"webglcontextrestored\", () =&gt; { this.restoreWebGL(); }, false); document.addEventListener(\"visibilitychange\", (event) =&gt; { if (this.gl.isContextLost()) { this.restoreWebGL(); } }); } /** * Updates the state of the canvas and its components. * @param {Object} state - State object containing updates * @param {Object} [state.camera] - Camera state updates * @param {Object} [state.layers] - Layer state updates * @param {number} dt - Animation duration in milliseconds * @param {string} [easing='linear'] - Easing function for animations */ setState(state, dt, easing = 'linear') { if ('camera' in state) { const m = state.camera; this.camera.setPosition(dt, m.x, m.y, m.z, m.a, easing); } if ('layers' in state) for (const [k, layerState] of Object.entries(state.layers)) if (k in this.layers) { const layer = this.layers[k]; layer.setState(layerState, dt, easing); } } /** * Retrieves current state of the canvas and its components. * @param {Object} [stateMask=null] - Optional mask to filter returned state properties * @returns {Object} Current state object */ getState(stateMask = null) { let state = {}; if (!stateMask || stateMask.camera) { let now = performance.now(); let m = this.camera.getCurrentTransform(now); state.camera = { 'x': m.x, 'y': m.y, 'z': m.z, 'a': m.a }; } state.layers = {}; for (let layer of Object.values(this.layers)) { const layerMask = window.structuredClone(stateMask); if (stateMask &amp;&amp; stateMask.layers) Object.assign(layerMask, stateMask.layers[layer.id]); state.layers[layer.id] = layer.getState(layerMask); } return state; } /** * Restores WebGL context after loss. * Reinitializes shaders and textures for all layers. * @private */ restoreWebGL() { let glopt = { antialias: false, depth: false, preserveDrawingBuffer: this.preserveDrawingBuffer }; this.gl = this.gl || this.canvasElement.getContext(\"webgl2\", glopt) || this.canvasElement.getContext(\"webgl\", glopt) || this.canvasElement.getContext(\"experimental-webgl\", glopt); for (let layer of Object.values(this.layers)) { layer.gl = this.gl; layer.clear(); if (layer.shader) layer.shader.restoreWebGL(this.gl); } this.prefetch(); this.emit('update'); } /** * Adds a layer to the canvas. * @param {string} id - Unique identifier for the layer * @param {Layer} layer - Layer instance to add * @fires Canvas#update * @fires Canvas#ready * @throws {Error} If layer ID already exists */ addLayer(id, layer) { console.assert(!(id in this.layers), \"Duplicated layer id\"); layer.id = id; layer.addEvent('ready', () =&gt; { if (Object.values(this.layers).every(l =&gt; l.status == 'ready')) this.emit('ready'); this.prefetch(); }); layer.addEvent('update', () =&gt; { this.emit('update'); }); layer.addEvent('updateSize', () =&gt; { this.updateSize(); }); layer.gl = this.gl; layer.canvas = this; layer.overlayElement = this.overlayElement; this.layers[id] = layer; this.prefetch(); } /** * Removes a layer from the canvas. * @param {Layer} layer - Layer instance to remove * @example * const layer = new Layer(options); * canvas.addLayer('map', layer); * // ... later ... * canvas.removeLayer(layer); */ removeLayer(layer) { layer.clear(); //order is important. delete this.layers[layer.id]; delete Cache.layers[layer]; this.prefetch(); } /** * Updates canvas size and camera bounds based on layers. * @fires Canvas#updateSize * @private */ updateSize() { const discardHidden = false; let sceneBBox = Layer.computeLayersBBox(this.layers, discardHidden); let minScale = Layer.computeLayersMinScale(this.layers, discardHidden); if (sceneBBox != null &amp;&amp; this.camera.viewport) this.camera.updateBounds(sceneBBox, minScale); this.emit('updateSize'); } /** * Renders a frame at the specified time. * @param {number} time - Current time in milliseconds * @returns {boolean} True if all animations are complete * @private */ draw(time) { let gl = this.gl; let view = this.camera.glViewport(); gl.viewport(view.x, view.y, view.dx, view.dy); var b = [0, 0, 0, 0]; gl.clearColor(b[0], b[1], b[2], b[3], b[4]); gl.clear(gl.COLOR_BUFFER_BIT); gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA); gl.enable(gl.BLEND); //TODO: getCurren shoudl redurn {position, done} let pos = this.camera.getGlCurrentTransform(time); //todo we could actually prefetch toward the future a little bit this.prefetch(pos); //pos layers using zindex. let ordered = Object.values(this.layers).sort((a, b) =&gt; a.zindex - b.zindex); //NOTICE: camera(pos) must be relative to the WHOLE canvas let done = true; for (let layer of ordered) { if (layer.visible) done = layer.draw(pos, view) &amp;&amp; done; } //TODO not really an elegant solution to tell if we have reached the target, the check should be in getCurrentTransform. return done &amp;&amp; pos.t &gt;= this.camera.target.t; } /** * Schedules tile downloads based on current view. * @param {Object} [transform] - Optional transform override, defaults to current camera transform * @private */ prefetch(transform) { if (!transform) transform = this.camera.getGlCurrentTransform(performance.now()); for (let id in this.layers) { let layer = this.layers[id]; //console.log(layer); //console.log(layer.layout.status); if (layer.visible &amp;&amp; layer.status == 'ready') { layer.prefetch(transform, this.camera.glViewport()); } } } } /** * Fired when canvas content is updated (layer changes, camera moves). * @event Canvas#update */ /** * Fired when canvas or layout size changes. * @event Canvas#updateSize */ /** * Fired when all layers are initialized and ready to display. * @event Canvas#ready */ addSignals(Canvas, 'update', 'updateSize', 'ready'); export { Canvas } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"Colormap.js.html":{"id":"Colormap.js.html","title":"Source: Colormap.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: Colormap.js /** * Represents a cubic spline interpolation for smooth color transitions. * @private */ class Spline { /** * Creates a new Spline instance. * @param {number[]} xs - X coordinates array * @param {number[]} ys - Y coordinates array */ constructor(xs, ys) { this.xs = xs; this.ys = ys; this.ks = this.getNaturalKs(new Float64Array(this.xs.length)); } getNaturalKs(ks) { const n = this.xs.length - 1; const A = Spline.zerosMat(n + 1, n + 2); for (let i = 1; i &lt; n; i++ // rows ) { A[i][i - 1] = 1 / (this.xs[i] - this.xs[i - 1]); A[i][i] = 2 * (1 / (this.xs[i] - this.xs[i - 1]) + 1 / (this.xs[i + 1] - this.xs[i])); A[i][i + 1] = 1 / (this.xs[i + 1] - this.xs[i]); A[i][n + 1] = 3 * ((this.ys[i] - this.ys[i - 1]) / ((this.xs[i] - this.xs[i - 1]) * (this.xs[i] - this.xs[i - 1])) + (this.ys[i + 1] - this.ys[i]) / ((this.xs[i + 1] - this.xs[i]) * (this.xs[i + 1] - this.xs[i]))); } A[0][0] = 2 / (this.xs[1] - this.xs[0]); A[0][1] = 1 / (this.xs[1] - this.xs[0]); A[0][n + 1] = (3 * (this.ys[1] - this.ys[0])) / ((this.xs[1] - this.xs[0]) * (this.xs[1] - this.xs[0])); A[n][n - 1] = 1 / (this.xs[n] - this.xs[n - 1]); A[n][n] = 2 / (this.xs[n] - this.xs[n - 1]); A[n][n + 1] = (3 * (this.ys[n] - this.ys[n - 1])) / ((this.xs[n] - this.xs[n - 1]) * (this.xs[n] - this.xs[n - 1])); return Spline.solve(A, ks); } /** * Finds index of the point before the target value using binary search. * Inspired by https://stackoverflow.com/a/40850313/4417327 * @param {number} target - Value to search for * @returns {number} Index of the point before target * @private */ getIndexBefore(target) { let low = 0; let high = this.xs.length; let mid = 0; while (low &lt; high) { mid = Math.floor((low + high) / 2); if (this.xs[mid] &lt; target &amp;&amp; mid !== low) { low = mid; } else if (this.xs[mid] &gt;= target &amp;&amp; mid !== high) { high = mid; } else { high = low; } } if (low === this.xs.length - 1) { return this.xs.length - 1; } return low + 1; } /** * Calculates interpolated value at given point. * @param {number} x - Point to interpolate at * @returns {number} Interpolated value */ at(x) { let i = this.getIndexBefore(x); const t = (x - this.xs[i - 1]) / (this.xs[i] - this.xs[i - 1]); const a = this.ks[i - 1] * (this.xs[i] - this.xs[i - 1]) - (this.ys[i] - this.ys[i - 1]); const b = -this.ks[i] * (this.xs[i] - this.xs[i - 1]) + (this.ys[i] - this.ys[i - 1]); const q = (1 - t) * this.ys[i - 1] + t * this.ys[i] + t * (1 - t) * (a * (1 - t) + b * t); return q; } // Utilities static solve(A, ks) { const m = A.length; let h = 0; let k = 0; while (h &lt; m &amp;&amp; k &lt;= m) { let i_max = 0; let max = -Infinity; for (let i = h; i &lt; m; i++) { const v = Math.abs(A[i][k]); if (v &gt; max) { i_max = i; max = v; } } if (A[i_max][k] === 0) { k++; } else { Spline.swapRows(A, h, i_max); for (let i = h + 1; i &lt; m; i++) { const f = A[i][k] / A[h][k]; A[i][k] = 0; for (let j = k + 1; j &lt;= m; j++) A[i][j] -= A[h][j] * f; } h++; k++; } } for (let i = m - 1; i &gt;= 0; i-- // rows = columns ) { var v = 0; if (A[i][i]) { v = A[i][m] / A[i][i]; } ks[i] = v; for (let j = i - 1; j &gt;= 0; j-- // rows ) { A[j][m] -= A[j][i] * v; A[j][i] = 0; } } return ks; } static zerosMat(r, c) { const A = []; for (let i = 0; i &lt; r; i++) A.push(new Float64Array(c)); return A; } static swapRows(m, k, l) { let p = m[k]; m[k] = m[l]; m[l] = p; } } /** * Represents a color in RGBA format with values normalized between 0 and 1. */ class Color { /** * Creates a new Color instance. * @param {number|string} r - Red component [0.0, 1.0] or color string ('#RGB', '#RGBA', '#RRGGBB', '#RRGGBBAA', 'rgb()', 'rgba()') * @param {number} [g] - Green component [0.0, 1.0] * @param {number} [b] - Blue component [0.0, 1.0] * @param {number} [a] - Alpha component [0.0, 1.0] * @throws {Error} If string value is not a valid color format */ constructor(r, g = undefined, b = undefined, a = undefined) { if (typeof (r) == 'string') { if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(r)) { let c = r.substring(1).split(''); if (c.length == 3) { c = [c[0], c[0], c[1], c[1], c[2], c[2]]; } c = '0x' + c.join('') + 'FF'; r = Color.normalizedRGBA(c &gt;&gt; 24); g = Color.normalizedRGBA(c &gt;&gt; 16); b = Color.normalizedRGBA(c &gt;&gt; 8); a = Color.normalizedRGBA(c); } else if (/^#([A-Fa-f0-9]{4}){1,2}$/.test(r)) { let c = r.substring(1).split(''); c = '0x' + c.join(''); r = Color.normalizedRGBA(c &gt;&gt; 24); g = Color.normalizedRGBA(c &gt;&gt; 16); b = Color.normalizedRGBA(c &gt;&gt; 8); a = Color.normalizedRGBA(c); } else if (/^rgb\\(/.test(r)) { let c = r.split(\"(\")[1].split(\")\")[0]; c = c.split(','); r = Color.clamp(c[0] / 255); g = Color.clamp(c[1] / 255); b = Color.clamp(c[2] / 255); a = 1.0; } else if (/^rgba\\(/.test(r)) { let c = r.split(\"(\")[1].split(\")\")[0]; c = c.split(','); r = Color.clamp(c[0] / 255); g = Color.clamp(c[1] / 255); b = Color.clamp(c[2] / 255); a = Color.clamp(c[3] / 255); } else { throw Error(\"Value is not a color\"); } } this.r = r; this.g = g; this.b = b; this.a = a; } static clamp = (num, min = 0.0, max = 1.0) =&gt; Math.min(Math.max(num, min), max); static hex(c) { var hex = c.toString(16).toUpperCase(); return hex.length == 1 ? \"0\" + hex : hex; } static normalizedRGBA(c) { return Color.clamp((c &amp; 255) / 255); } static rgbToHex(r, g, b) { const rgb = b | (g &lt;&lt; 8) | (r &lt;&lt; 16); return '#' + ((0x1000000 | rgb).toString(16).substring(1)).toUpperCase(); } static rgbToHexa(r, g, b, a) { return '#' + Color.hex(r) + Color.hex(g) + Color.hex(b) + Color.hex(a); } /** * Gets color components as an array. * @returns {number[]} Array of [r, g, b, a] values */ value() { return [this.r, this.g, this.b, this.a]; } /** * Converts color to RGB values [0, 255]. * @returns {number[]} Array of [r, g, b] values */ toRGB() { const rgb = [this.r * 255, this.g * 255, this.b * 255]; rgb.forEach((e, idx, arr) =&gt; { arr[idx] = Color.clamp(Math.round(e), 0, 255); }); return rgb; } /** * Converts color to hexadecimal string. * @returns {string} Color in '#RRGGBB' format */ toHex() { const rgb = this.toRGB(); return Color.rgbToHex(rgb[0], rgb[1], rgb[2]); } /** * Converts color to hexadecimal string with alpha. * @returns {string} Color in '#RRGGBBAA' format */ toHexa() { const rgba = this.toRGBA(); return Color.rgbToHexa(rgba[0], rgba[1], rgba[2], rgba[3]); } /** * Converts color to RGBA values [0-255]. * @returns {number[]} Array of [r, g, b, a] values */ toRGBA() { const rgba = [this.r * 255, this.g * 255, this.b * 255, this.a * 255]; rgba.forEach((e, idx, arr) =&gt; { arr[idx] = Color.clamp(Math.round(e), 0, 255); }); return rgba; } } /** * Creates a colormap for mapping numerical values to colors. * Supports linear, spline, and bar interpolation between colors. */ class Colormap { /** * Creates a new Colormap instance. * @param {Color[]} [colors=[black, white]] - Array of colors to interpolate between * @param {Object} [options] - Configuration options * @param {number[]} [options.domain=[0,1]] - Domain range for mapping * @param {Color} [options.lowColor] - Color for values below domain (defaults to first color) * @param {Color} [options.highColor] - Color for values above domain (defaults to last color) * @param {string} [options.description=''] - Description of the colormap * @param {('linear'|'spline'|'bar')} [options.type='linear'] - Interpolation type * @throws {Error} If colors/domain format is invalid */ constructor(colors = [new Color(0, 0, 0, 1), new Color(1, 1, 1, 1)], options = '') { options = Object.assign({ domain: [0.0, 1.0], lowColor: null, highColor: null, description: '', type: 'linear' }, options); Object.assign(this, options); const nval = colors.length; if (!this.lowColor) this.lowColor = colors[0]; if (!this.highColor) this.highColor = colors[nval - 1]; const nd = this.domain.length; if (nval &lt; 2 &amp;&amp; nd != 2 &amp;&amp; this.nval != nd &amp;&amp; this.domain[nd - 1] &lt;= this.domain[0]) { throw Error(\"Colormap colors/domain bad format\"); } const delta = (this.domain[nd - 1] - this.domain[0]) / (nval - 1); this.xarr = []; this.rarr = []; this.garr = []; this.barr = []; this.aarr = []; for (let i = 0; i &lt; nval; i++) { if (nd == 2) this.xarr.push(this.domain[0] + i * delta); else this.xarr.push(this.domain[i]); this.rarr.push(colors[i].r); this.garr.push(colors[i].g); this.barr.push(colors[i].b); this.aarr.push(colors[i].a); } this.rspline = new Spline(this.xarr, this.rarr); this.gspline = new Spline(this.xarr, this.garr); this.bspline = new Spline(this.xarr, this.barr); this.aspline = new Spline(this.xarr, this.aarr); } static clamp = (num, min, max) =&gt; Math.min(Math.max(num, min), max); /** * Gets the domain range of the colormap. * @returns {number[]} Array containing [min, max] of domain */ rangeDomain() { return [this.domain[0], this.domain[this.domain.length - 1]]; } /** * Gets color for a value using bar interpolation. * @param {number} x - Value to get color for * @returns {Color} Corresponding color * @private */ bar(x) { if (x &lt; this.xarr[0]) return this.lowColor; if (x &gt; this.xarr[this.xarr.length - 1]) return this.highColor; const c = new Color(this.rarr[0], this.garr[0], this.barr[0], this.aarr[0]); for (let i = 0; i &lt; this.xarr.length - 1; i++) { if (x &gt; this.xarr[i] &amp;&amp; x &lt;= this.xarr[i + 1]) { c.r = this.rarr[i]; c.g = this.garr[i]; c.b = this.barr[i]; c.a = this.aarr[i]; } } return c; } /** * Gets color for a value using linear interpolation. * @param {number} x - Value to get color for * @returns {Color} Corresponding color * @private */ linear(x) { if (x &lt; this.xarr[0]) return this.lowColor; if (x &gt; this.xarr[this.xarr.length - 1]) return this.highColor; const c = new Color(this.rarr[0], this.garr[0], this.barr[0], this.aarr[0]); for (let i = 0; i &lt; this.xarr.length - 1; i++) { if (x &gt; this.xarr[i] &amp;&amp; x &lt;= this.xarr[i + 1]) { c.r = (this.rarr[i + 1] - this.rarr[i]) * (x - this.xarr[i]) / (this.xarr[i + 1] - this.xarr[i]) + this.rarr[i]; c.g = (this.garr[i + 1] - this.garr[i]) * (x - this.xarr[i]) / (this.xarr[i + 1] - this.xarr[i]) + this.garr[i]; c.b = (this.barr[i + 1] - this.barr[i]) * (x - this.xarr[i]) / (this.xarr[i + 1] - this.xarr[i]) + this.barr[i]; c.a = (this.aarr[i + 1] - this.aarr[i]) * (x - this.xarr[i]) / (this.xarr[i + 1] - this.xarr[i]) + this.aarr[i]; } } return c; } /** * Gets color for a value using spline interpolation. * @param {number} x - Value to get color for * @returns {Color} Corresponding color * @private */ spline(x) { if (x &lt; this.xarr[0]) return this.lowColor; if (x &gt; this.xarr[this.xarr.length - 1]) return this.highColor; return new Color(this.rspline.at(x), this.gspline.at(x), this.bspline.at(x), this.aspline.at(x)); } /** * Gets color for a value using configured interpolation type. * @param {number} x - Value to get color for * @returns {Color} Corresponding color * @throws {Error} If interpolation type is invalid */ at(x) { let result = null; switch (this.type) { case 'linear': result = this.linear(x); break; case 'spline': result = this.spline(x); break; case 'bar': result = this.bar(x); break; default: throw Error(\"Interpolant type not exist\"); break; } return result; } /** * Samples the colormap into a buffer. * @param {number} maxSteps - Number of samples to generate * @returns {{min: number, max: number, buffer: Uint8Array}} Sample data and buffer */ sample(maxSteps) { let min = this.xarr[0]; let max = this.xarr[this.xarr.length - 1]; //if (this.domain.length == 2) maxSteps = this.xarr.length; let buffer = new Uint8Array(maxSteps * 4); let delta = (max - min) / maxSteps; for (let i = 0; i &lt; maxSteps; i++) { let c = this.at(min + i * delta).toRGBA(); buffer[i * 4 + 0] = c[0]; buffer[i * 4 + 1] = c[1]; buffer[i * 4 + 2] = c[2]; buffer[i * 4 + 3] = c[3]; } return { min, max, buffer }; } } /** * Creates a visual legend for a colormap. */ class ColormapLegend { /** * Creates a new ColormapLegend instance. * @param {Object} viewer - Viewer instance to attach legend to * @param {Colormap} colorscale - Colormap to create legend for * @param {Object} [options] - Configuration options * @param {number} [options.nticks=6] - Number of ticks/divisions in legend * @param {number} [options.legendWidth=25] - Width of legend as percentage * @param {string} [options.textColor='#fff'] - Color of text labels * @param {string} [options.class='openlime-legend'] - CSS class for legend container */ constructor(viewer, colorscale, options) { options = Object.assign({ nticks: 6, legendWidth: 25, textColor: '#fff', class: 'openlime-legend' }, options); Object.assign(this, options); this.viewer = viewer; this.colorscale = colorscale; this.container = document.querySelector(`.${this.class}`); if (!this.container) { this.container = document.createElement('div'); this.container.classList.add(this.class); } this.scale = document.createElement('div'); this.scale.style = `display: flex; border-radius: 20px; height: 22px; color: ${this.textColor}; font-weight: bold; overflow: hidden; margin: 0px 2px 4px 0px; background-color: #7c7c7c; font-family: Arial,Helvetica,sans-serif; font-size:12px; border: 1px solid #000;`; this.container.appendChild(this.scale); this.viewer.containerElement.appendChild(this.container); const domain = colorscale.rangeDomain(); const legend = document.createElement('div'); legend.style = `display: flex; align-items: center; justify-content: center; background: ${colorscale.linear(domain[0]).toHex()}; width: ${this.legendWidth}%; margin: 0`; legend.textContent = colorscale.description; this.scale.appendChild(legend); if (this.colorscale.type == 'linear') this.legendLinear(); if (this.colorscale.type == 'bar') this.legendBar(); } /** * Creates legend for linear interpolation. * @private */ legendLinear() { const domain = this.colorscale.rangeDomain(); const delta = (domain[1] - domain[0]) / this.nticks; const deltaWidth = (100 - this.legendWidth) / this.nticks; let vl = domain[0]; for (let i = 0; i &lt; this.nticks; i++) { let v = domain[0] + delta * i; let vr = i &lt; (this.nticks - 1) ? domain[0] + delta * (i + 0.5) : v; const c = this.colorscale.at(v); const cl = this.colorscale.at(vl); const cr = this.colorscale.at(vr); const value = document.createElement('div'); const bkg = `background: linear-gradient(to right, ${cl.toHex()}, ${c.toHex()}, ${cr.toHex()})` value.style = `display: flex; align-items: center; justify-content: center; ${bkg}; width: ${deltaWidth}%; margin: 0`; value.textContent = v.toFixed(1); this.scale.appendChild(value); vl = vr; } } /** * Creates legend for bar interpolation. * @private */ legendBar() { const deltaWidth = (100 - this.legendWidth) / this.colorscale.domain.length; for (let i = 0; i &lt; this.colorscale.xarr.length; i++) { const c = new Color(this.colorscale.rarr[i], this.colorscale.garr[i], this.colorscale.barr[i], this.colorscale.aarr[i]); const v = this.colorscale.xarr[i]; const value = document.createElement('div'); const bkg = `background: ${c.toHex()}`; value.style = `display: flex; align-items: center; justify-content: center; ${bkg}; width: ${deltaWidth}%; margin: 0`; value.textContent = v.toFixed(1); this.scale.appendChild(value); } } } export { Color, Colormap, ColormapLegend } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"Controller.js.html":{"id":"Controller.js.html","title":"Source: Controller.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: Controller.js /** * Base class that handles user interaction via device events (mouse/touch events). * Provides an abstract user interface to define interaction actions such as panning, pinching, tapping, etc... * The actions are implemented by pre-defined callback functions: * * `panStart(e)` intercepts the initial pan event (movement of the mouse after pressing a mouse button or moving a finger). * The event is captured calling `e.preventDefault()`. * * `panMove(e)` receives and handles the pan event. * * `panEnd(e)` intercepts the final pan event (the user releases the left mouse button or removes his finger from the screen). * * `pinchStart(e1, e2)` intercepts the initial pinch event (a continuous gesture that tracks the positions between the first two fingers that touch the screen). * The event is captured calling `e1.preventDefault()`. * * `pinchMove(e1,e2)` receives and handles the pinch event. * * `pinchEnd(e1,e2)` intercepts the final pinch event (the user removes one of their two fingers from the screen). * * `mouseWheel(e)` receives and handles the mouse wheel event (the user rotates the mouse wheel button). * * `fingerSingleTap(e)` receives and handles the single-tap event (the user presses a mouse button quickly or touches the screen shortly with a finger). * * `fingerDoubleTap(e)` receives and handles the double-tap event (the user quickly presses a mouse button twice or shortly touches the screen with a finger twice). * * `e.preventDefault()` will capture the event and wont be propagated to other controllers. * * This class only describes user interactions by implementing actions or callbacks. A **Controller** works in concert with a **PointerManager** object * that emits events and links them to actions. * * @abstract * @example * // Create a pan-zoom controller and associate it with the viewer's pointer manager * const panzoom = new OpenLIME.ControllerPanZoom(viewer.camera, { * priority: -1000, * activeModifiers: [0, 1] * }); * viewer.pointerManager.onEvent(panzoom); */ class Controller { /** * Creates a new Controller instance. * @param {Object} [options] - Configuration options * @param {boolean} [options.active=true] - Whether the controller is initially active * @param {boolean} [options.debug=false] - Enable debug logging * @param {number} [options.panDelay=50] - Inertial value for panning movements in milliseconds * @param {number} [options.zoomDelay=200] - Delay for smoothing zoom events in milliseconds * @param {number} [options.priority=0] - Controllers with higher priority are invoked first * @param {number[]} [options.activeModifiers=[0]] - Array of modifier states that activate this controller */ constructor(options) { Object.assign(this, { active: true, debug: false, panDelay: 50, zoomDelay: 200, priority: 0, activeModifiers: [0] }); Object.assign(this, options); } /** * Gets the modifier state from an event. * @param {Event} e - The event to check * @returns {number} Modifier state bitmask where: * - 0 = No modifiers * - 1 = Ctrl key * - 2 = Shift key * - 4 = Alt key * Multiple modifiers combine their values (e.g., Ctrl+Shift = 3) */ modifierState(e) { let state = 0; if (e.ctrlKey) state += 1; if (e.shiftKey) state += 2; if (e.altKey) state += 4; return state; } /** * Captures all events, preventing them from reaching other controllers. * @private */ captureEvents() { this.capture = true; } /** * Releases event capture, allowing events to reach other controllers. * @private */ releaseEvents() { this.capture = false; } /** * Handles the start of a pan gesture. * @virtual * @param {Event} e - The pan start event * @description Called when user starts panning (mouse down or finger touch). * Call e.preventDefault() to capture the event. */ panStart(e) { } /** * Handles pan movement. * @virtual * @param {Event} e - The pan move event * @description Called continuously during panning. */ panMove(e) { } /** * Handles the end of a pan gesture. * @virtual * @param {Event} e - The pan end event * @description Called when panning ends (mouse up or finger lift). */ panEnd(e) { } /** * Handles the start of a pinch gesture. * @virtual * @param {Event} e1 - First finger event * @param {Event} e2 - Second finger event * @description Called when user starts a two-finger pinch. * Call e1.preventDefault() to capture the event. */ pinchStart(e1, e2) { } /** * Handles pinch movement. * @virtual * @param {Event} e1 - First finger event * @param {Event} e2 - Second finger event * @description Called continuously during pinching. */ pinchMove(e1, e2) { } /** * Handles the end of a pinch gesture. * @virtual * @param {Event} e1 - First finger event * @param {Event} e2 - Second finger event * @description Called when pinch ends (finger lift). */ pinchEnd(e1, e2) { } /** * Handles mouse wheel events. * @virtual * @param {WheelEvent} e - The wheel event * @description Called when user rotates mouse wheel. */ mouseWheel(e) { } /** * Handles single tap/click events. * @virtual * @param {Event} e - The tap event * @description Called for quick mouse press or short finger touch. */ fingerSingleTap(e) { } /** * Handles double tap/click events. * @virtual * @param {Event} e - The double tap event * @description Called for quick double mouse press or double finger touch. */ fingerDoubleTap(e) { } } export { Controller } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"Controller2D.js.html":{"id":"Controller2D.js.html","title":"Source: Controller2D.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: Controller2D.js import { BoundingBox } from './BoundingBox.js'; import { Controller } from './Controller.js' /** * Callback for position updates. * @callback updatePosition * @param {number} x - X coordinate in the range [-1, 1] * @param {number} y - Y coordinate in the range [-1, 1] */ /** * Clamps a value between a minimum and maximum. * @param {number} value - Value to clamp * @param {number} min - Minimum allowed value * @param {number} max - Maximum allowed value * @returns {number} Clamped value * @private */ function clamp(value, min, max) { return Math.max(min, Math.min(max, value)); } /** * Controller for handling 2D position updates based on pan and tap events. * Extends the base Controller to track a 2D position (x, y) of the device pointer. * * Supports two coordinate systems: * - Absolute: Coordinates mapped to [-1, 1] with origin at bottom-left of canvas * - Relative: Coordinates based on distance from initial pan position, scaled by speed * * @extends Controller */ class Controller2D extends Controller { /** * Creates a new Controller2D instance. * @param {updatePosition} callback - Function called when position is updated * @param {Object} [options] - Configuration options * @param {boolean} [options.relative=false] - Whether to use relative coordinate system * @param {number} [options.speed=2.0] - Scaling factor for relative coordinates * @param {BoundingBox} [options.box] - Bounding box for coordinate constraints * @param {updatePosition} [options.onPanStart] - Callback for pan start event * @param {updatePosition} [options.onPanEnd] - Callback for pan end event * @param {boolean} [options.active=true] - Whether the controller is active * @param {number[]} [options.activeModifiers=[0]] - Array of active modifier states */ constructor(callback, options) { super(options); Object.assign(this, { relative: false, speed: 2.0, start_x: 0, start_y: 0, current_x: 0, current_y: 0, onPanStart: null, onPanEnd: null }, options); //By default the controller is active only with no modifiers. //you can select which subsets of the modifiers are active. this.callback = callback; if (!this.box) { //FIXME What is that? Is it used? this.box = new BoundingBox({ xLow: -0.99, yLow: -0.99, xHigh: 0.99, yHigh: 0.99 }); } this.panning = false; } /** * Updates the stored position for relative coordinate system. * This is a convenience method typically used within callbacks. * @param {number} x - New X coordinate in range [-1, 1] * @param {number} y - New Y coordinate in range [-1, 1] */ setPosition(x, y) { this.current_x = x; this.current_y = y; this.callback(x, y); } /** * Maps canvas pixel coordinates to normalized coordinates [-1, 1]. * @param {MouseEvent|TouchEvent} e - Mouse or touch event * @returns {number[]} Array containing [x, y] in normalized coordinates * @private */ project(e) { let rect = e.target.getBoundingClientRect(); let x = 2 * e.offsetX / rect.width - 1; let y = 2 * (1 - e.offsetY / rect.height) - 1; return [x, y] } /** * Converts event coordinates to the appropriate coordinate system (absolute or relative). * @param {MouseEvent|TouchEvent} e - Mouse or touch event * @returns {number[]} Array containing [x, y] in the chosen coordinate system * @private */ rangeCoords(e) { let [x, y] = this.project(e); if (this.relative) { x = clamp(this.speed * (x - this.start_x) + this.current_x, -1, 1); y = clamp(this.speed * (y - this.start_y) + this.current_y, -1, 1); } return [x, y]; } /** * Handles start of pan gesture. * @param {MouseEvent|TouchEvent} e - Pan start event * @override */ panStart(e) { if (!this.active || !this.activeModifiers.includes(this.modifierState(e))) return; if (this.relative) { let [x, y] = this.project(e); this.start_x = x; this.start_y = y; } if (this.onPanStart) this.onPanStart(...this.rangeCoords(e)); this.callback(...this.rangeCoords(e)); this.panning = true; e.preventDefault(); } /** * Handles pan movement. * @param {MouseEvent|TouchEvent} e - Pan move event * @returns {boolean} False if not currently panning * @override */ panMove(e) { if (!this.panning) return false; this.callback(...this.rangeCoords(e)); } /** * Handles end of pan gesture. * @param {MouseEvent|TouchEvent} e - Pan end event * @returns {boolean} False if not currently panning * @override */ panEnd(e) { if (!this.panning) return false; this.panning = false; if (this.relative) { let [x, y] = this.project(e); this.current_x = clamp(this.speed * (x - this.start_x) + this.current_x, -1, 1); this.current_y = clamp(this.speed * (y - this.start_y) + this.current_y, -1, 1); } if (this.onPanEnd) this.onPanEnd(...this.rangeCoords(e)); } /** * Handles single tap/click events. * Only processes events in absolute coordinate mode. * @param {MouseEvent|TouchEvent} e - Tap event * @override */ fingerSingleTap(e) { if (!this.active || !this.activeModifiers.includes(this.modifierState(e))) return; if (this.relative) return; this.callback(...this.rangeCoords(e)); e.preventDefault(); } } export { Controller2D } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"ControllerFocusContext.js.html":{"id":"ControllerFocusContext.js.html","title":"Source: ControllerFocusContext.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: ControllerFocusContext.js import { ControllerLens } from './ControllerLens.js' import { CoordinateSystem } from './CoordinateSystem.js'; import { FocusContext } from './FocusContext.js'; /** * Controller for handling Focus+Context visualization interactions. * Manages lens-based focus region and context region interactions including * panning, zooming, and lens radius adjustments. * @extends ControllerLens */ class ControllerFocusContext extends ControllerLens { /** * Helper method to trigger updates. * @param {Object} param - Object containing update method * @private */ static callUpdate(param) { param.update(); } /** * Creates a new ControllerFocusContext instance. * @param {Object} options - Configuration options * @param {number} [options.updateTimeInterval=50] - Time interval for position updates in ms * @param {number} [options.updateDelay=100] - Delay for position updates in ms * @param {number} [options.zoomDelay=150] - Delay for zoom animations in ms * @param {number} [options.zoomAmount=1.5] - Scale factor for zoom operations * @param {number} [options.priority=-100] - Controller priority * @param {boolean} [options.enableDirectContextControl=true] - Enable direct manipulation of context region * @param {Layer} options.lensLayer - Layer to use for lens visualization * @param {Camera} options.camera - Camera instance to control * @param {Canvas} options.canvas - Canvas instance to monitor * @throws {Error} If required options (lensLayer, camera, canvas) are missing */ constructor(options) { super(options); Object.assign(this, { updateTimeInterval: 50, updateDelay: 100, zoomDelay: 150, zoomAmount: 1.5, priority: -100, enableDirectContextControl: true }, options); if (!options.lensLayer) { console.log(\"ControllerFocusContext lensLayer option required\"); throw \"ControllerFocusContext lensLayer option required\"; } if (!options.camera) { console.log(\"ControllerFocusContext camera option required\"); throw \"ControllerFocusContext camera option required\"; } if (!options.canvas) { console.log(\"ControllerFocusContext canvas option required\"); throw \"ControllerFocusContext canvas option required\"; } let callback = () =&gt; { const discardHidden = true; const bbox = this.camera.boundingBox; this.maxDatasetSize = Math.max(bbox.width(), bbox.height()); this.minDatasetSize = Math.min(bbox.width(), bbox.height()); this.setDatasetDimensions(bbox.width(), bbox.height()); }; this.canvas.addEvent('updateSize', callback); this.imageSize = { w: 1, h: 1 }; this.FocusContextEnabled = true; this.centerToClickOffset = { x: 0, y: 0 }; this.previousClickPos = { x: 0, y: 0 }; this.currentClickPos = { x: 0, y: 0 }; this.insideLens = { inside: false, border: false }; this.panning = false; this.zooming = false; this.panningCamera = false; // Handle only camera panning this.startPos = { x: 0, y: 0 }; this.initialTransform = this.camera.getCurrentTransform(performance.now()); // Handle pinchZoom this.initialPinchDistance = 1; this.initialPinchRadius = 1; this.initialPinchPos = { x: 0, y: 0 }; } /** * Handles start of pan operation. * @param {PointerEvent} e - Pan start event * @override */ panStart(e) { if (!this.active) return; const p = this.getScenePosition(e); this.panning = false; this.insideLens = this.isInsideLens(p); const startPos = this.getPixelPosition(e); if (this.lensLayer.visible &amp;&amp; this.insideLens.inside) { const lc = CoordinateSystem.fromSceneToViewport(this.getFocus().position, this.camera, this.useGL); this.centerToClickOffset = { x: startPos.x - lc.x, y: startPos.y - lc.y }; this.currentClickPos = { x: startPos.x, y: startPos.y }; this.panning = true; } else { if (this.enableDirectContextControl) { this.startPos = startPos; this.initialTransform = this.camera.getCurrentTransform(performance.now()); this.camera.target = this.initialTransform.copy(); //stop animation. this.panningCamera = true; } } e.preventDefault(); // Activate a timeout to call update() in order to update position also when mouse is clicked but steady // Stop the time out on panEnd this.timeOut = setInterval(this.update.bind(this), 50); } /** * Handles pan movement. * @param {PointerEvent} e - Pan move event * @override */ panMove(e) { if (Math.abs(e.offsetX) &gt; 64000 || Math.abs(e.offsetY) &gt; 64000) return; this.currentClickPos = this.getPixelPosition(e); if (this.panning) { // Update is performed within update() function } else if (this.panningCamera) { let m = this.initialTransform; let dx = (this.currentClickPos.x - this.startPos.x); let dy = (this.currentClickPos.y - this.startPos.y); this.camera.setPosition(this.updateDelay, m.x + dx, m.y + dy, m.z, m.a); } } /** * Handles start of pinch operation. * @param {PointerEvent} e1 - First finger event * @param {PointerEvent} e2 - Second finger event * @override */ pinchStart(e1, e2) { if (!this.active) return; const p0 = this.getScenePosition(e1); const p1 = this.getScenePosition(e2); const p = { x: (p0.x + p1.x) * 0.5, y: (p0.y + p1.y) * 0.5 }; this.initialPinchPos = { x: (e1.offsetX + e2.offsetX) * 0.5, y: (e1.offsetY + e2.offsetY) * 0.5 }; this.insideLens = this.isInsideLens(p); this.zooming = true; this.initialPinchDistance = this.distance(e1, e2); this.initialPinchRadius = this.lensLayer.getRadius(); e1.preventDefault(); } /** * Handles pinch movement. * @param {PointerEvent} e1 - First finger event * @param {PointerEvent} e2 - Second finger event * @override */ pinchMove(e1, e2) { if (this.zooming) { const d = this.distance(e1, e2); const scale = d / (this.initialPinchDistance + 0.00001); if (this.lensLayer.visible &amp;&amp; this.insideLens.inside) { const newRadius = scale * this.initialPinchRadius; const currentRadius = this.lensLayer.getRadius(); const dz = newRadius / currentRadius; // Zoom around initial pinch pos, and not current center to avoid unwanted drifts this.updateRadiusAndScale(dz); //this.initialPinchDistance = d; } else { if (this.enableDirectContextControl) { this.updateScale(this.initialPinchPos.x, this.initialPinchPos.y, scale); this.initialPinchDistance = d; } } } } /** * Handles end of pinch operation. * @param {PointerEvent} e - End event * @param {number} x - X coordinate * @param {number} y - Y coordinate * @param {number} scale - Final scale value * @override */ pinchEnd(e, x, y, scale) { this.zooming = false; } /** * Starts zoom operation when clicking on lens border. * @param {PointerEvent} pe - Pointer event */ zoomStart(pe) { if (this.lensLayer.visible) { super.zoomStart(pe); // Ask to call zoomUpdate at regular interval during zoommovement this.timeOut = setInterval(this.zoomUpdate.bind(this), 50); } } /** * Handles zoom movement when dragging lens border. * @param {PointerEvent} pe - Pointer event */ zoomMove(pe) { if (this.zooming) { this.oldCursorPos = pe; let t = this.camera.getCurrentTransform(performance.now()); // let p = t.viewportToSceneCoords(this.camera.viewport, pe); const p = this.getScenePosition(pe); const lens = this.getFocus(); const c = lens.position; let v = { x: p.x - c.x, y: p.y - c.y }; let d = Math.sqrt(v.x * v.x + v.y * v.y); //Set as new radius |Click-LensCenter|(now) - |Click-LensCenter|(start) const radiusRange = FocusContext.getRadiusRangeCanvas(this.camera.viewport); const newRadius = Math.max(radiusRange.min / t.z, d - this.deltaR); const dz = newRadius / lens.radius; this.updateRadiusAndScale(dz); } } /** * Updates zoom during continuous operation. * @private */ zoomUpdate() { // Give continuity to zoom scale also when user is steady. // If lens border is able to reach user pointer zoom stops. // If this is not possible due to camera scale update, // zoom will continue with a speed proportional to the radius/cursor distance if (this.zooming) { const p = this.getScenePosition(this.oldCursorPos); const lens = this.getFocus(); const c = lens.position; let v = { x: p.x - c.x, y: p.y - c.y }; let d = Math.sqrt(v.x * v.x + v.y * v.y); //Set as new radius |Click-LensCenter|(now) - |Click-LensCenter|(start) const radiusRange = FocusContext.getRadiusRangeCanvas(this.camera.viewport); let t = this.camera.getCurrentTransform(performance.now()); const newRadius = Math.max(radiusRange.min / t.z, d - this.deltaR); const dz = newRadius / lens.radius; this.updateRadiusAndScale(dz); } } /** * Handles end of zoom operation. */ zoomEnd() { if (this.lensLayer.visible) { super.zoomEnd(); // Stop calling zoomUpdate clearTimeout(this.timeOut); } } /** * Handles mouse wheel events to simulate a pinch event. * @param {WheelEvent} e - Wheel event * @override */ mouseWheel(e) { const p = this.getScenePosition(e); this.insideLens = this.isInsideLens(p); const dz = e.deltaY &gt; 0 ? this.zoomAmount : 1 / this.zoomAmount; if (this.lensLayer.visible &amp;&amp; this.insideLens.inside) { this.updateRadiusAndScale(dz); } else { if (this.enableDirectContextControl) { // Invert scale when updating scale instead of lens radius, to obtain the same zoom direction const p = this.getPixelPosition(e); this.updateScale(p.x, p.y, 1 / dz); } } e.preventDefault(); } /** * Updates lens radius and adjusts camera to maintain Focus+Context condition. * @param {number} dz - Scale factor for radius adjustment */ updateRadiusAndScale(dz) { let focus = this.getFocus(); const now = performance.now(); let context = this.camera.getCurrentTransform(now); // Subdivide zoom between focus and context FocusContext.scale(this.camera, focus, context, dz); // Bring focus within context constraints FocusContext.adaptContextPosition(this.camera.viewport, focus, context); // Set new focus and context in camera and lens this.camera.setPosition(this.zoomDelay, context.x, context.y, context.z, context.a); this.lensLayer.setRadius(focus.radius, this.zoomDelay); } /** * Updates camera scale around a specific point. * @param {number} x - X coordinate of zoom center * @param {number} y - Y coordinate of zoom center * @param {number} dz - Scale factor * @private */ updateScale(x, y, dz) { const now = performance.now(); let context = this.camera.getCurrentTransform(now); const pos = this.camera.mapToScene(x, y, context); const maxDeltaZoom = this.camera.maxZoom / context.z; const minDeltaZoom = this.camera.minZoom / context.z; dz = Math.min(maxDeltaZoom, Math.max(minDeltaZoom, dz)); // Zoom around cursor position this.camera.deltaZoom(this.updateDelay, dz, pos.x, pos.y); } /** * Handles end of pan operation. * @override */ panEnd() { if (this.panning) { clearTimeout(this.timeOut); } this.panning = false; this.panningCamera = false; this.zooming = false; } /** * Updates lens and camera positions based on current interaction. * @private */ update() { if (this.panning) { let context = this.camera.getCurrentTransform(performance.now()); let lensDeltaPosition = this.lastInteractionDelta(); lensDeltaPosition.x /= context.z; lensDeltaPosition.y /= context.z; let focus = this.getFocus(); if (this.FocusContextEnabled) { FocusContext.pan(this.camera.viewport, focus, context, lensDeltaPosition, this.imageSize); this.camera.setPosition(this.updateDelay, context.x, context.y, context.z, context.a); } else { focus.position.x += lensDeltaPosition.x; focus.position.y += lensDeltaPosition.y; } this.lensLayer.setCenter(focus.position.x, focus.position.y, this.updateDelay); this.previousClickPos = [this.currentClickPos.x, this.currentClickPos.y]; } } /** * Calculates movement delta since last interaction. * @returns {{x: number, y: number}} Position delta * @private */ lastInteractionDelta() { let result = { x: 0, y: 0 }; // Compute delta with respect to previous position if (this.panning &amp;&amp; this.insideLens.inside) { // For lens pan Compute delta wrt previous lens position const lc = CoordinateSystem.fromSceneToViewport(this.getFocus().position, this.camera, this.useGL); result = { x: this.currentClickPos.x - lc.x - this.centerToClickOffset.x, y: this.currentClickPos.y - lc.y - this.centerToClickOffset.y }; } else { // For camera pan Compute delta wrt previous click position result = { x: this.currentClickPos.x - this.previousClickPos.x, y: this.currentClickPos.y - this.previousClickPos.y }; } return result; } /** * Sets the dimensions of the dataset (image) being visualized. * @param {number} width - Dataset width * @param {number} height - Dataset height * @private */ setDatasetDimensions(width, height) { this.imageSize = { w: width, h: height }; } /** * Initializes lens position and size. */ initLens() { const t = this.camera.getCurrentTransform(performance.now()); const imageRadius = 100 / t.z; this.lensLayer.setRadius(imageRadius); this.lensLayer.setCenter(this.imageSize.w * 0.5, this.imageSize.h * 0.5); } } export { ControllerFocusContext } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"ControllerLens.js.html":{"id":"ControllerLens.js.html","title":"Source: ControllerLens.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: ControllerLens.js import { Controller } from './Controller.js' import { CoordinateSystem } from './CoordinateSystem.js' import { FocusContext } from './FocusContext.js'; /** * Controller for handling lens-based interactions. * Manages user interactions with a lens overlay including panning, zooming, * and lens radius adjustments through mouse/touch events. * @extends Controller */ class ControllerLens extends Controller { /** * Creates a new ControllerLens instance. * @param {Object} options - Configuration options * @param {Object} options.lensLayer - Layer used for lens visualization * @param {Camera} options.camera - Camera instance to control * @param {boolean} [options.useGL=false] - Whether to use WebGL coordinates * @param {boolean} [options.active=true] - Whether the controller is initially active * @throws {Error} If required options (lensLayer, camera) are missing */ constructor(options) { super(options); if (!options.lensLayer) { console.log(\"ControllerLens lensLayer option required\"); throw \"ControllerLens lensLayer option required\"; } if (!options.camera) { console.log(\"ControllerLens camera option required\"); throw \"ControllerLens camera option required\"; } this.panning = false; this.zooming = false; this.initialDistance = 0; this.startPos = { x: 0, y: 0 }; this.oldCursorPos = { x: 0, y: 0 }; this.useGL = false; } /** * Handles start of pan operation. * @param {PointerEvent} e - Pan start event * @override */ panStart(e) { if (!this.active) return; const p = this.getScenePosition(e); this.panning = false; const hit = this.isInsideLens(p); if (this.lensLayer.visible &amp;&amp; hit.inside) { // if (hit.border) { // this.zooming = true; // const p = this.getPixelPosition(e); // this.zoomStart(p); // } else { // this.panning = true; // } this.panning = true; this.startPos = p; e.preventDefault(); } } /** * Handles pan movement. * @param {PointerEvent} e - Pan move event * @override */ panMove(e) { // Discard events due to cursor outside window const p = this.getPixelPosition(e); if (Math.abs(e.offsetX) &gt; 64000 || Math.abs(e.offsetY) &gt; 64000) return; if (this.panning) { const p = this.getScenePosition(e); const dx = p.x - this.startPos.x; const dy = p.y - this.startPos.y; const c = this.lensLayer.getTargetCenter(); this.lensLayer.setCenter(c.x + dx, c.y + dy); this.startPos = p; e.preventDefault(); } } /** * Handles end of pan operation. * @param {PointerEvent} e - Pan end event * @override */ panEnd(e) { this.panning = false; this.zooming = false; } /** * Handles start of pinch operation. * @param {PointerEvent} e1 - First finger event * @param {PointerEvent} e2 - Second finger event * @override */ pinchStart(e1, e2) { if (!this.active) return; const p0 = this.getScenePosition(e1); const p1 = this.getScenePosition(e2); const pc = { x: (p0.x + p1.x) * 0.5, y: (p0.y + p1.y) * 0.5 }; if (this.lensLayer.visible &amp;&amp; this.isInsideLens(pc).inside) { this.zooming = true; this.initialDistance = this.distance(e1, e2); this.initialRadius = this.lensLayer.getRadius(); this.startPos = pc; e1.preventDefault(); } } /** * Handles pinch movement. * @param {PointerEvent} e1 - First finger event * @param {PointerEvent} e2 - Second finger event * @override */ pinchMove(e1, e2) { if (!this.zooming) return; const d = this.distance(e1, e2); const scale = d / (this.initialDistance + 0.00001); const newRadius = scale * this.initialRadius; this.lensLayer.setRadius(newRadius); } /** * Handles end of pinch operation. * @param {PointerEvent} e - End event * @param {number} x - X coordinate * @param {number} y - Y coordinate * @param {number} scale - Final scale value * @override */ pinchEnd(e, x, y, scale) { this.zooming = false; } /** * Handles mouse wheel events. * @param {WheelEvent} e - Wheel event * @returns {boolean} True if event was handled * @override */ mouseWheel(e) { const p = this.getScenePosition(e); let result = false; if (this.lensLayer.visible &amp;&amp; this.isInsideLens(p).inside) { const delta = e.deltaY &gt; 0 ? 1 : -1; const factor = delta &gt; 0 ? 1.2 : 1 / 1.2; const r = this.lensLayer.getRadius(); this.lensLayer.setRadius(r * factor); this.startPos = p; result = true; e.preventDefault(); } return result; } /** * Initiates zoom operation when clicking on lens border. * @param {Object} pe - Pixel position in canvas coordinates * @param {number} pe.offsetX - X offset from canvas left * @param {number} pe.offsetY - Y offset from canvas top */ zoomStart(pe) { if (!this.lensLayer.visible) return; this.zooming = true; this.oldCursorPos = pe; // Used by derived class const p = this.getScenePosition(pe); const lens = this.getFocus(); const r = lens.radius; const c = lens.position; let v = { x: p.x - c.x, y: p.y - c.y }; let d = Math.sqrt(v.x * v.x + v.y * v.y); // Difference between radius and |Click-LensCenter| will be used by zoomMove this.deltaR = d - r; } /** * Updates zoom when dragging lens border. * @param {Object} pe - Pixel position in canvas coordinates * @param {number} pe.offsetX - X offset from canvas left * @param {number} pe.offsetY - Y offset from canvas top */ zoomMove(pe) { if (this.zooming) { const p = this.getScenePosition(pe); const lens = this.getFocus(); const c = lens.position; let v = { x: p.x - c.x, y: p.y - c.y }; let d = Math.sqrt(v.x * v.x + v.y * v.y); // Set as new radius |Click-LensCenter|(now) - |Click-LensCenter|(start) const scale = this.camera.getCurrentTransform(performance.now()).z; const radiusRange = FocusContext.getRadiusRangeCanvas(this.camera.viewport); const newRadius = Math.max(radiusRange.min / scale, d - this.deltaR); this.lensLayer.setRadius(newRadius, this.zoomDelay); } } /** * Ends zoom operation. */ zoomEnd() { this.zooming = false; } /** * Gets current focus state. * @returns {{position: {x: number, y: number}, radius: number}} Focus state object */ getFocus() { const p = this.lensLayer.getCurrentCenter(); const r = this.lensLayer.getRadius(); return { position: p, radius: r } } /** * Checks if a point is inside the lens. * @param {Object} p - Point to check in scene coordinates * @param {number} p.x - X coordinate * @param {number} p.y - Y coordinate * @returns {{inside: boolean, border: boolean}} Whether point is inside lens and/or on border */ isInsideLens(p) { const c = this.lensLayer.getCurrentCenter(); const dx = p.x - c.x; const dy = p.y - c.y; const d = Math.sqrt(dx * dx + dy * dy); const r = this.lensLayer.getRadius(); const inside = d &lt; r; const t = this.camera.getCurrentTransform(performance.now()); const b = this.lensLayer.getBorderWidth() / t.z; const border = inside &amp;&amp; d &gt; r - b; //console.log(\"IsInside \" + d.toFixed(0) + \" r \" + r.toFixed(0) + \", b \" + b.toFixed(0) + \" IN \" + inside + \" B \" + border); return { inside: inside, border: border }; } /** * Converts position from canvas HTML coordinates to viewport coordinates. * @param {PointerEvent} e - event * @returns {{x: number, y: number}} Position in viewport coordinates (origin at bottom-left, y up) */ getPixelPosition(e) { const p = { x: e.offsetX, y: e.offsetY }; return CoordinateSystem.fromCanvasHtmlToViewport(p, this.camera, this.useGL); } /** * Converts position from canvas HTML coordinates to scene coordinates. * @param {PointerEvent} e - event * @returns {{x: number, y: number}} Position in scene coordinates (origin at center, y up) */ getScenePosition(e) { const p = { x: e.offsetX, y: e.offsetY }; return CoordinateSystem.fromCanvasHtmlToScene(p, this.camera, this.useGL); } /** * Calculates distance between two points. * @param {PointerEvent} e1 - event * @param {PointerEvent} e2 - event * @returns {number} Distance between points * @private */ distance(e1, e2) { return Math.sqrt(Math.pow(e1.x - e2.x, 2) + Math.pow(e1.y - e2.y, 2)); } } export { ControllerLens } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"ControllerPanZoom.js.html":{"id":"ControllerPanZoom.js.html","title":"Source: ControllerPanZoom.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: ControllerPanZoom.js import { Controller } from './Controller.js' import { CoordinateSystem } from './CoordinateSystem.js'; import { addSignals } from './Signals.js' /** * ControllerPanZoom handles pan, zoom, and interaction events in a canvas element to manipulate camera parameters. * It supports multiple interaction methods including: * - Mouse drag for panning * - Mouse wheel for zooming * - Touch gestures (pinch to zoom) * - Double tap to zoom * * The controller maintains state for ongoing pan and zoom operations and can be configured * to use different coordinate systems (HTML or GL) for calculations. * * @extends Controller * @fires ControllerPanZoom#nowheel - Emitted when a wheel event is received but ctrl key is required and not pressed */ class ControllerPanZoom extends Controller { /** * Creates a new ControllerPanZoom instance. * @param {Camera} camera - The camera object to control * @param {Object} [options] - Configuration options * @param {number} [options.zoomAmount=1.2] - The zoom multiplier for wheel/double-tap events * @param {boolean} [options.controlZoom=false] - If true, requires Ctrl key to be pressed for zoom operations * @param {boolean} [options.useGLcoords=false] - If true, uses WebGL coordinate system instead of HTML * @param {number} [options.panDelay] - Delay for pan animations * @param {number} [options.zoomDelay] - Delay for zoom animations */ constructor(camera, options) { super(options); this.camera = camera; this.zoomAmount = 1.2; //for wheel or double tap event this.controlZoom = false; //require control+wheel to zoom this.panning = false; //true if in the middle of a pan this.initialTransform = null; this.startMouse = null; this.zooming = false; //true if in the middle of a pinch this.initialDistance = 0.0; this.useGLcoords = false; if (options) Object.assign(this, options); } /** * Handles the start of a pan operation * @private * @param {PointerEvent} e - The pointer event that initiated the pan */ panStart(e) { if (!this.active || this.panning || !this.activeModifiers.includes(this.modifierState(e))) return; this.panning = true; this.startMouse = CoordinateSystem.fromCanvasHtmlToViewport({ x: e.offsetX, y: e.offsetY }, this.camera, this.useGLcoords); let now = performance.now(); this.initialTransform = this.camera.getCurrentTransform(now); this.camera.target = this.initialTransform.copy(); //stop animation. e.preventDefault(); } /** * Updates camera position during a pan operation * @private * @param {PointerEvent} e - The pointer event with new coordinates */ panMove(e) { if (!this.panning) return; let m = this.initialTransform; const p = CoordinateSystem.fromCanvasHtmlToViewport({ x: e.offsetX, y: e.offsetY }, this.camera, this.useGLcoords); let dx = (p.x - this.startMouse.x); let dy = (p.y - this.startMouse.y); this.camera.setPosition(this.panDelay, m.x + dx, m.y + dy, m.z, m.a); } /** * Ends the current pan operation * @private * @param {PointerEvent} e - The pointer event that ended the pan */ panEnd(e) { this.panning = false; } /** * Calculates the Euclidean distance between two points * @private * @param {Object} e1 - First point with x, y coordinates * @param {Object} e2 - Second point with x, y coordinates * @returns {number} The distance between the points */ distance(e1, e2) { return Math.sqrt(Math.pow(e1.x - e2.x, 2) + Math.pow(e1.y - e2.y, 2)); } /** * Initializes a pinch zoom operation * @private * @param {TouchEvent} e1 - First touch point * @param {TouchEvent} e2 - Second touch point */ pinchStart(e1, e2) { this.zooming = true; this.initialDistance = Math.max(30, this.distance(e1, e2)); e1.preventDefault(); //e2.preventDefault(); //TODO this is optional? } /** * Updates zoom level during a pinch operation * @private * @param {TouchEvent} e1 - First touch point * @param {TouchEvent} e2 - Second touch point */ pinchMove(e1, e2) { if (!this.zooming) return; let rect1 = e1.target.getBoundingClientRect(); let offsetX1 = e1.clientX - rect1.left; let offsetY1 = e1.clientY - rect1.top; let rect2 = e2.target.getBoundingClientRect(); let offsetX2 = e2.clientX - rect2.left; let offsetY2 = e2.clientY - rect2.top; const scale = this.distance(e1, e2); // FIXME CHECK ON TOUCH SCREEN //const pos = this.camera.mapToScene((offsetX1 + offsetX2)/2, (offsetY1 + offsetY2)/2, this.camera.getCurrentTransform(performance.now())); const pos = CoordinateSystem.fromCanvasHtmlToScene({ x: (offsetX1 + offsetX2) / 2, y: (offsetY1 + offsetY2) / 2 }, this.camera, this.useGLcoords); const dz = scale / this.initialDistance; this.camera.deltaZoom(this.zoomDelay, dz, pos.x, pos.y); this.initialDistance = scale; e1.preventDefault(); } /** * Ends the current pinch zoom operation * @private * @param {TouchEvent} e - The touch event that ended the pinch * @param {number} x - The x coordinate of the pinch center * @param {number} y - The y coordinate of the pinch center * @param {number} scale - The final scale factor */ pinchEnd(e, x, y, scale) { this.zooming = false; e.preventDefault(); } /** * Handles mouse wheel events for zooming * @private * @param {WheelEvent} e - The wheel event * @fires ControllerPanZoom#nowheel */ mouseWheel(e) { if (this.controlZoom &amp;&amp; !e.ctrlKey) { this.emit('nowheel'); return; } let delta = -e.deltaY / 53; //const pos = this.camera.mapToScene(e.offsetX, e.offsetY, this.camera.getCurrentTransform(performance.now())); const pos = CoordinateSystem.fromCanvasHtmlToScene({ x: e.offsetX, y: e.offsetY }, this.camera, this.useGLcoords); const dz = Math.pow(this.zoomAmount, delta); this.camera.deltaZoom(this.zoomDelay, dz, pos.x, pos.y); e.preventDefault(); } /** * Handles double tap events for zooming * @private * @param {PointerEvent} e - The pointer event representing the double tap */ fingerDoubleTap(e) { } fingerDoubleTap(e) { if (!this.active || !this.activeModifiers.includes(this.modifierState(e))) return; //const pos = this.camera.mapToScene(e.offsetX, e.offsetY, this.camera.getCurrentTransform(performance.now())); const pos = CoordinateSystem.fromCanvasHtmlToScene({ x: e.offsetX, y: e.offsetY }, this.camera, this.useGLcoords); const dz = this.zoomAmount; this.camera.deltaZoom(this.zoomDelay, dz, pos.x, pos.y); } } addSignals(ControllerPanZoom, 'nowheel'); export { ControllerPanZoom } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"CoordinateSystem.js.html":{"id":"CoordinateSystem.js.html","title":"Source: CoordinateSystem.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: CoordinateSystem.js import { BoundingBox } from './BoundingBox.js'; import { Transform } from './Transform.js' /** * Contain functions to pass between different coordinate system. * Here described the coordinate system in sequence * - CanvasHTML: Html coordinates: 0,0 left,top to width height at bottom right (y Down) * - CanvasContext: Same as Html, but scaled by devicePixelRatio (y Down) (required for WebGL, not for SVG) * - Viewport: 0,0 left,bottom to (width,height) at top right (y Up) * - Center: 0,0 at viewport center (y Up) * - Scene: 0,0 at dataset center (y Up). The dataset is placed here through the camera transform * - Layer: 0,0 at Layer center (y Up). Layer is placed over the dataset by the layer transform * - Image: 0,0 at left,top (y Down) * - Layout: 0,0 at left,top (y Down). Depends on layout */ class CoordinateSystem { /** * Transform point from Viewport to CanvasHTML * @param {*} p point in Viewport: 0,0 at left,bottom * @param {Camera} camera Camera which contains viewport information * @param {bool} useGL True to work with WebGL, false for SVG. When true, it uses devPixelRatio scale * @returns point in CanvasHtml: 0,0 left,top */ static fromViewportToCanvasHtml(p, camera, useGL) { const viewport = this.getViewport(camera, useGL); let result = this.invertY(p, viewport); return useGL ? this.scale(result, 1/window.devicePixelRatio) : result; } /** * Transform point from CanvasHTML to GLViewport * @param {*} p point in CanvasHtml: 0,0 left,top y Down * @param {Camera} camera Camera * @param {bool} useGL True to work with WebGL, false for SVG. When true, it uses devPixelRatio scale * @returns point in GLViewport: 0,0 left,bottom, scaled by devicePixelRatio */ static fromCanvasHtmlToViewport(p, camera, useGL) { let result = useGL ? this.scale(p, window.devicePixelRatio) : p; const viewport = this.getViewport(camera, useGL); return this.invertY(result, viewport); } /** * Transform a point from Viewport to Layer coordinates * @param {*} p point {x,y} in Viewport (0,0 left,bottom, y Up) * @param {Camera} camera camera * @param {Transform} layerT layer transform * @param {bool} useGL True to work with WebGL, false for SVG. When true, it uses devPixelRatio scale * @returns point in Layer coordinates (0, 0 at layer center, y Up) */ static fromViewportToLayer(p, camera, layerT, useGL) { // M = InvLayerT * InvCameraT * Tr(-Vw/2, -Vh/2) const cameraT = this.getCurrentTransform(camera, useGL); const invCameraT = cameraT.inverse(); const invLayerT = layerT.inverse(); const v2c = this.getFromViewportToCenterTransform(camera, useGL); const M = v2c.compose(invCameraT.compose(invLayerT)); // First apply v2c, then invCamera, then invLayer return M.apply(p.x, p.y); } /** * Transform a point from Layer to Viewport coordinates * @param {*} p point {x,y} Layer (0,0 at Layer center y Up) * @param {Camera} camera * @param {Transform} layerT layer transform * @param {bool} useGL True to work with WebGL, false for SVG. When true, it uses devPixelRatio scale * @returns point in viewport coordinates (0,0 at left,bottom y Up) */ static fromLayerToViewport(p, camera, layerT, useGL) { const M = this.getFromLayerToViewportTransform(camera, layerT, useGL); return M.apply(p.x, p.y); } /** * Transform a point from Layer to Center * @param {*} p point {x,y} in Layer coordinates (0,0 at Layer center) * @param {Camera} camera camera * @param {Transform} layerT layer transform * @returns point in Center (0, 0 at glViewport center) coordinates. */ static fromLayerToCenter(p, camera, layerT, useGL) { // M = cameraT * layerT const cameraT = this.getCurrentTransform(camera, useGL); const M = layerT.compose(cameraT); return M.apply(p.x, p.y); } ////////////// CHECKED UP TO HERE //////////////////// /** * Transform a point from Layer to Image coordinates * @param {*} p point {x, y} Layer coordinates (0,0 at Layer center) * @param {*} layerSize {w, h} Size in pixel of the Layer * @returns Point in Image coordinates (0,0 at left,top, y Down) */ static fromLayerToImage(p, layerSize) { // InvertY * Tr(Lw/2, Lh/2) let result = {x: p.x + layerSize.w/2, y: p.y + layerSize.h/2}; return this.invertY(result, layerSize); } /** * Transform a point from CanvasHtml to Scene * @param {*} p point {x, y} in CanvasHtml (0,0 left,top, y Down) * @param {Camera} camera camera * @param {bool} useGL True to work with WebGL, false for SVG. When true, it uses devPixelRatio scale * @returns Point in Scene coordinates (0,0 at scene center, y Up) */ static fromCanvasHtmlToScene(p, camera, useGL) { // invCameraT * Tr(-Vw/2, -Vh/2) * InvertY * [Scale(devPixRatio)] let result = this.fromCanvasHtmlToViewport(p, camera, useGL); const v2c = this.getFromViewportToCenterTransform(camera, useGL); const invCameraT = this.getCurrentTransform(camera, useGL).inverse(); const M = v2c.compose(invCameraT); return M.apply(result.x, result.y); } /** * Transform a point from Scene to CanvasHtml * @param {*} p point {x, y} Scene coordinates (0,0 at scene center, y Up) * @param {Camera} camera camera * @param {bool} useGL True to work with WebGL, false for SVG. When true, it uses devPixelRatio scale * @returns Point in CanvasHtml (0,0 left,top, y Down) */ static fromSceneToCanvasHtml(p, camera, useGL) { // invCameraT * Tr(-Vw/2, -Vh/2) * InvertY * [Scale(devPixRatio)] let result = this.fromSceneToViewport(p, camera, useGL) return this.fromViewportToCanvasHtml(result, camera, useGL); } /** * Transform a point from Scene to Viewport * @param {*} p point {x, y} Scene coordinates (0,0 at scene center, y Up) * @param {Camera} camera camera * @param {bool} useGL True to work with WebGL, false for SVG. When true, it uses devPixelRatio scale * @returns Point in Viewport (0,0 left,bottom, y Up) */ static fromSceneToViewport(p, camera, useGL) { // FromCenterToViewport * CamT const c2v = this.getFromViewportToCenterTransform(camera, useGL).inverse(); const CameraT = this.getCurrentTransform(camera, useGL); const M = CameraT.compose(c2v); return M.apply(p.x, p.y); } /** * Transform a point from Scene to Viewport, using given transform and viewport * @param {*} p point {x, y} Scene coordinates (0,0 at scene center, y Up) * @param {Transform} cameraT camera transform * @param {*} viewport viewport {x,y,dx,dy,w,h} * @returns Point in Viewport (0,0 left,bottom, y Up) */ static fromSceneToViewportNoCamera(p, cameraT, viewport) { // invCameraT * Tr(-Vw/2, -Vh/2) * InvertY * [Scale(devPixRatio)] const c2v = this.getFromViewportToCenterTransformNoCamera(viewport).inverse(); const M = cameraT.compose(c2v); return M.apply(p.x, p.y); } /** * Transform a point from Viewport to Scene. * @param {*} p point {x, y} Viewport coordinates (0,0 at left,bottom, y Up) * @param {Camera} camera camera * @param {bool} useGL True to work with WebGL, false for SVG. When true, it uses devPixelRatio scale * @returns Point in Viewport (0,0 at scene center, y Up) */ static fromViewportToScene(p, camera, useGL) { // invCamT * FromViewportToCenter const v2c = this.getFromViewportToCenterTransform(camera, useGL); const invCameraT = this.getCurrentTransform(camera, useGL).inverse(); const M = v2c.compose(invCameraT); return M.apply(p.x, p.y); } /** * Transform a point from Viewport to Scene, using given transform and viewport * @param {*} p point {x, y} Viewport coordinates (0,0 at left,bottom, y Up) * @param {Transform} cameraT camera transform * @param {*} viewport viewport {x,y,dx,dy,w,h} * @returns Point in Viewport (0,0 at scene center, y Up) */ static fromViewportToSceneNoCamera(p, cameraT, viewport) { // invCamT * FromViewportToCenter const v2c = this.getFromViewportToCenterTransformNoCamera(viewport); const invCameraT = cameraT.inverse(); const M = v2c.compose(invCameraT); return M.apply(p.x, p.y); } /** * Transform a point from CanvasHtml to Image * @param {*} p point {x, y} in CanvasHtml (0,0 left,top, y Down) * @param {Camera} camera camera * @param {Transform} layerT layer transform * @param {*} layerSize {w, h} Size in pixel of the Layer * @param {bool} applyGLScale if true apply devPixelRatio scale. Keep it false when working with SVG * @returns Point in Image space (0,0 left,top of the image, y Down) */ static fromCanvasHtmlToImage(p, camera, layerT, layerSize, useGL) { // Translate(Lw/2, Lh/2) * InvLayerT * InvCameraT * Translate(-Vw/2, -Vh/2) * invertY * [Scale(devicePixelRatio)] // in other words... fromLayerToImage * invLayerT * fromCanvasHtmlToScene let result = this.fromCanvasHtmlToScene(p, camera, useGL); const invLayerT = layerT.inverse(); result = invLayerT.apply(result.x, result.y); result = this.fromLayerToImage(result, layerSize); return result; } /** * Transform a box from Viewport to Image coordinates * @param {BoundingBox} box in Viewport coordinates (0,0 at left,bottom, y Up) * @param {Transform} cameraT camera Transform * @param {*} viewport {x,y,dx,dy,w,h} * @param {Transform} layerT layer transform * @param {*} layerSize {w,h} layer pixel size * @returns box in Image coordinates (0,0 left,top, y Dowm) */ static fromViewportBoxToImageBox(box, cameraT, viewport, layerT, layerSize) { // InvertYonImage * T(Lw/2, Lh/2) * InvL * InvCam * T(-Vw/2,-Vh/2) let V2C = new Transform({x:-viewport.w/2, y:-viewport.h/2}); let C2S = cameraT.inverse(); let S2L = layerT.inverse(); let L2I = new Transform({x:layerSize.w/2, y:layerSize.h/2}); let M = V2C.compose(C2S.compose(S2L.compose(L2I))); let resultBox = new BoundingBox(); for(let i = 0; i &lt; 4; ++i) { let p = box.corner(i); p = M.apply(p.x, p.y); p = CoordinateSystem.invertY(p, layerSize); resultBox.mergePoint(p); } return resultBox; } /** * Transform a box from Layer to Scene * @param {BoundingBox} box box in Layer coordinates (0,0 at layer center) * @param {Transform} layerT layer transform * @returns box in Scene coordinates (0,0 at scene center) */ static fromLayerBoxToSceneBox(box, layerT) { return layerT.transformBox(box); } /** * Transform a box from Scene to Layer * @param {BoundingBox} box box in Layer coordinates (0,0 at layer center) * @param {Transform} layerT layer transform * @returns box in Scene coordinates (0,0 at scene center) */ static fromSceneBoxToLayerBox(box, layerT) { return layerT.inverse().transformBox(box); } /** * Transform a box from Layer to Viewport coordinates * @param {BoundingBox} box box in Layer coordinates (0,0 at Layer center y Up) * @param {Camera} camera * @param {Transform} layerT layer transform * @param {bool} useGL True to work with WebGL, false for SVG. When true, it uses devPixelRatio scale * @returns Box in Viewport coordinates (0,0 at left, bottom y Up) */ static fromLayerBoxToViewportBox(box, camera, layerT, useGL) { const M = this.getFromLayerToViewportTransform(camera, layerT, useGL); return M.transformBox(box); } /** * Transform a box from Layer to Viewport coordinates * @param {BoundingBox} box box in Layer coordinates (0,0 at Layer center y Up) * @param {Camera} camera * @param {Transform} layerT layer transform * @param {bool} useGL True to work with WebGL, false for SVG. When true, it uses devPixelRatio scale * @returns Box in Viewport coordinates (0,0 at left, bottom y Up) */ static fromViewportBoxToLayerBox(box, camera, layerT, useGL) { const M = this.getFromLayerToViewportTransform(camera, layerT, useGL).inverse(); return M.transformBox(box); } /** * Get a transform to go from viewport 0,0 at left, bottom y Up, to Center 0,0 at viewport center * @param {Camera} camera camera * @param {bool} useGL True to work with WebGL, false for SVG. When true, it uses devPixelRatio scale * @returns transform from Viewport to Center */ static getFromViewportToCenterTransform(camera, useGL) { const viewport = this.getViewport(camera, useGL); return this.getFromViewportToCenterTransformNoCamera(viewport); } /** * Get a transform to go from viewport 0,0 at left, bottom y Up, to Center 0,0 at viewport center * from explicit viewport param. (Not using camera parameter here) * @param {*} viewport viewport * @returns transform from Viewport to Center */ static getFromViewportToCenterTransformNoCamera(viewport) { return new Transform({x:viewport.x-viewport.w/2, y:viewport.y-viewport.h/2, z:1, a:0, t:0}); } /** * Return transform with y reflected wrt origin (y=-y) * @param {Transform} t * @returns {Transform} transform, with y reflected (around 0) */ static reflectY(t) { return new Transform({x:t.x, y:-t.y, z:t.z, a:t.a, t:t.t}); } /** * Get a transform to go from Layer (0,0 at Layer center y Up) to Viewport (0,0 at left,bottom y Up) * @param {Camera} camera * @param {Transform} layerT layer transform * @param {bool} useGL True to work with WebGL, false for SVG. When true, it uses devPixelRatio scale * @returns transform from Layer to Viewport */ static getFromLayerToViewportTransform(camera, layerT, useGL) { // M = Center2Viewport * CameraT * LayerT const cameraT = this.getCurrentTransform(camera, useGL); const c2v = this.getFromViewportToCenterTransform(camera, useGL).inverse(); const M = layerT.compose(cameraT.compose(c2v)); return M; } /** * Get a transform to go from Layer (0,0 at Layer center y Up) to Viewport (0,0 at left,bottom y Up) * @param {Transform} CameraT camera transform * @param {viewport} viewport {x,y,dx,dy,w,h} viewport * @param {Transform} layerT layer transform * @returns transform from Layer to Viewport */ static getFromLayerToViewportTransformNoCamera(cameraT, viewport, layerT) { // M = Center2Viewport * CameraT * LayerT const c2v = this.getFromViewportToCenterTransformNoCamera(viewport).inverse(); const M = layerT.compose(cameraT.compose(c2v)); return M; } /** * Scale x applying f scale factor * @param {*} p Point to be scaled * @param {Number} f Scale factor * @returns Point in CanvasContext (Scaled by devicePixelRation) */ static scale(p, f) { return { x:p.x * f, y:p.y * f}; } /** * Invert y with respect to viewport.h * @param {*} p Point to be transformed * @param {*} viewport current viewport * @returns Point with y inverted with respect to viewport.h */ static invertY(p, viewport) { return {x:p.x, y:viewport.h - p.y}; } /** * Return the camera viewport: scaled by devicePixelRatio if useGL is true. * @param {bool} useGL True to work with WebGL, false for SVG. When true viewport scaled by devPixelRatio * @returns Viewport */ static getViewport(camera, useGL) { return useGL ? camera.glViewport() : camera.viewport; } static getCurrentTransform(camera, useGL) { let cameraT = useGL ? camera.getGlCurrentTransform(performance.now()) : camera.getCurrentTransform(performance.now()); return cameraT; } } export { CoordinateSystem } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"Draggable.js.html":{"id":"Draggable.js.html","title":"Source: Draggable.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: Draggable.js /** * The Draggable class enables an element to be dragged and moved around within its parent element. * It creates a draggable container with a handle that can be used to initiate the dragging action. * The draggable element is positioned absolutely within its parent container and can be customized * through various options. * * The class requires either a top or bottom position and either a left or right position to be * specified through the options parameter. These determine the initial position of the draggable * element within its parent container. The default positioning is bottom=20 and right=20. * * Features: * - Flexible positioning using top/bottom and left/right coordinates * - Customizable handle size and appearance * - Automatic position updates on window resize * - Touch-enabled dragging support * - Configurable spacing between handle and content * * @class */ class Draggable { /** * Creates a new Draggable instance. * * @param {HTMLElement} element - The element to be made draggable * @param {HTMLElement|string} parent - The parent element where the draggable container will be appended. * Can be either an HTMLElement or a CSS selector string * @param {Object} [options] - Configuration options for the draggable element * @param {number} [options.top] - The initial top position in pixels. Mutually exclusive with bottom * @param {number} [options.bottom=20] - The initial bottom position in pixels. Mutually exclusive with top * @param {number} [options.left] - The initial left position in pixels. Mutually exclusive with right * @param {number} [options.right=20] - The initial right position in pixels. Mutually exclusive with left * @param {number} [options.handleSize=10] - The size of the drag handle in pixels * @param {number} [options.handleGap=5] - The gap between the handle and the draggable content in pixels * @param {number} [options.zindex=200] - The z-index of the draggable container * @param {string} [options.handleColor='#f0f0f0b3'] - The background color of the handle (supports rgba) */ constructor(element, parent, options) { options = Object.assign({ top: null, bottom: 20, left: null, right: 20, handleSize: 10, handleGap: 5, zindex: 200, handleColor: '#f0f0f0b3' // rgba(240, 240, 240, 0.7) }, options); Object.assign(this, options); this.element = element; this.parent = parent; if (typeof (this.parent) == 'string') this.parent = document.querySelector(this.parent); if (this.left) this.right = null; if (this.top) this.bottom = null; // Disable context menu if (!('setCtxMenu' in window)) { window.addEventListener(\"contextmenu\", e =&gt; e.preventDefault()); window.setCtxMenu = true; } this.container = document.createElement('div'); this.container.classList.add('openlime-draggable'); this.container.style = `display: flex; gap:${this.handleGap}px; position: absolute; z-index: ${this.zindex}; touch-action: none; visibility: visible;`; this.handle = document.createElement('div'); this.handle.style = `border-radius: 4px; background-color: ${this.handleColor}; padding: 0; width: ${this.handleSize}px; height: ${this.handleSize}px; z-index: 205;`; this.container.appendChild(this.handle); this.parent.appendChild(this.container); this.dragEvents(); this.element.style.position = 'unset'; this.appendChild(this.element); addEventListener(\"resize\", (event) =&gt; { this.updatePos(); }); } /** * Appends an HTML element to the draggable container and updates its position. * @param {HTMLElement} element - The element to append to the draggable container */ appendChild(e) { this.container.appendChild(e); this.updatePos(); } /** * Updates the position of the draggable container based on its current options and parent dimensions. * This method is called automatically on window resize and when elements are appended. * @private */ updatePos() { const w = this.container.offsetWidth; const h = this.container.offsetHeight; let t = 0; let l = 0; if (this.top) t = this.top; if (this.bottom) t = this.parent.offsetHeight - this.bottom - h; if (this.left) l = this.left; if (this.right) l = this.parent.offsetWidth - this.right - w; this.container.style.top = `${t}px`; this.container.style.left = `${l}px`; } /** * Sets up the drag event listeners for the handle. * Manages pointer events for drag start, drag, and drag end operations. * @private */ dragEvents() { let offsetX, offsetY; const self = this; this.handle.addEventListener(\"pointerdown\", dragStart); document.addEventListener(\"pointerup\", dragEnd); function dragStart(e) { e.preventDefault(); self.container.style.opacity = 0.6; offsetX = e.clientX - self.container.offsetLeft; offsetY = e.clientY - self.container.offsetTop; document.addEventListener(\"pointermove\", drag); } function drag(e) { e.preventDefault(); self.container.style.opacity = 0.6; self.container.style.left = e.clientX - offsetX + \"px\"; self.container.style.top = e.clientY - offsetY + \"px\"; } function dragEnd() { self.container.style.opacity = 1.0; document.removeEventListener(\"pointermove\", drag); } } } export { Draggable } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"FocusContext.js.html":{"id":"FocusContext.js.html","title":"Source: FocusContext.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: FocusContext.js import { Transform } from \"./Transform\"; import { CoordinateSystem } from \"./CoordinateSystem\"; /** * @typedef {Object} Viewport * @property {number} x - Viewport x position * @property {number} y - Viewport y position * @property {number} dx - Viewport horizontal offset * @property {number} dy - Viewport vertical offset * @property {number} w - Viewport width * @property {number} h - Viewport height */ /** * @typedef {Object} Focus * @property {Object} position - Lens center position in dataset coordinates * @property {number} position.x - X coordinate * @property {number} position.y - Y coordinate * @property {number} radius - Lens radius in dataset units */ /** * FocusContext manages the focus+context visualization technique for lens-based interaction. * It handles the distribution of user interactions between lens movement (focus) and camera * movement (context) to maintain optimal viewing conditions. * * Key responsibilities: * - Maintains proper spacing between lens and viewport boundaries * - Distributes pan and zoom operations between lens and camera * - Ensures lens stays within valid viewport bounds * - Adapts camera transform to accommodate lens position * - Manages lens radius constraints */ class FocusContext { /** * Distributes a pan operation between lens movement and camera transform to maintain focus+context * @param {Viewport} viewport - The current viewport * @param {Focus} focus - The lens object to be updated * @param {Transform} context - The camera transform to be updated * @param {Object} delta - Pan amount in dataset pixels * @param {number} delta.x - Horizontal pan amount * @param {number} delta.y - Vertical pan amount * @param {Object} imageSize - Dataset dimensions * @param {number} imageSize.w - Dataset width * @param {number} imageSize.h - Dataset height */ static pan(viewport, focus, context, delta, imageSize) { let txy = this.getAmountOfFocusContext(viewport, focus, context, delta); // When t is 1: already in focus&amp;context, move only the lens. // When t is 0.5: border situation, move both focus &amp; context to keep the lens steady on screen. // In this case the context should be moved of deltaFocus*scale to achieve steadyness. // Thus interpolate deltaContext between 0 and deltaFocus*s (with t ranging from 1 to 0.5) const deltaFocus = { x: delta.x * txy.x, y: delta.y * txy.y }; const deltaContext = { x: -deltaFocus.x * context.z * 2 * (1 - txy.x), y: -deltaFocus.y * context.z * 2 * (1 - txy.y) }; context.x += deltaContext.x; context.y += deltaContext.y; focus.position.x += deltaFocus.x; focus.position.y += deltaFocus.y; // Clamp lens position on dataset boundaries if (Math.abs(focus.position.x) &gt; imageSize.w / 2) { focus.position.x = imageSize.w / 2 * Math.sign(focus.position.x); } if (Math.abs(focus.position.y) &gt; imageSize.h / 2) { focus.position.y = imageSize.h / 2 * Math.sign(focus.position.y); } } /** * Distributes a scale operation between lens radius and camera zoom to maintain focus+context * @param {Camera} camera - The camera object containing viewport and zoom constraints * @param {Focus} focus - The lens object to be updated * @param {Transform} context - The camera transform to be updated * @param {number} dz - Scale factor to be applied (multiplier) */ static scale(camera, focus, context, dz) { const viewport = camera.viewport; const radiusRange = this.getRadiusRangeCanvas(viewport); const r = focus.radius * context.z; // Distribute lens scale between radius scale and context scale // When radius is going outside radius boundary, scale of the inverse amounts radius and zoom scale | screen size constant // When radius is changing from boundary condition to a valid one change only radius and no change to zoom scale. // From 0.5 to boundary condition, zoomScale vary is interpolated between 1 and 1/dz. const t = Math.max(0, Math.min(1, (r - radiusRange.min) / (radiusRange.max - radiusRange.min))); let zoomScaleAmount = 1; if (dz &gt; 1 &amp;&amp; t &gt; 0.5) { const t1 = (t - 0.5) * 2; zoomScaleAmount = 1 * (1 - t1) + t1 / dz; } else if (dz &lt; 1 &amp;&amp; t &lt; 0.5) { const t1 = 2 * t; zoomScaleAmount = (1 - t1) / dz + t1 * 1; } let radiusScaleAmount = dz; const newR = r * radiusScaleAmount; // Clamp radius if (newR &lt; radiusRange.min) { radiusScaleAmount = radiusRange.min / r; } else if (newR &gt; radiusRange.max) { radiusScaleAmount = radiusRange.max / r; } // Clamp scale if (context.z * zoomScaleAmount &lt; camera.minZoom) { zoomScaleAmount = camera.minZoom / context.z; } else if (context.z * zoomScaleAmount &gt; camera.maxZoom) { zoomScaleAmount = camera.maxZoom / context.z; } // Scale around lens center context.x += focus.position.x * context.z * (1 - zoomScaleAmount); context.y += focus.position.y * context.z * (1 - zoomScaleAmount); context.z = context.z * zoomScaleAmount; focus.radius *= radiusScaleAmount; } /** * Adjusts the camera transform to ensure focus+context conditions are met for a given lens * @param {Viewport} viewport - The current viewport * @param {Focus} focus - The lens object * @param {Transform} context - The camera transform to be updated * @param {number} desiredScale - Target scale for the camera transform */ static adaptContext(viewport, focus, context, desiredScale) { // Get current projected annotation center position //const pOld = context.sceneToViewportCoords(viewport, focus.position); const useGL = true; const pOld = CoordinateSystem.fromSceneToViewportNoCamera(focus.position, context, viewport, useGL); context.z = desiredScale; FocusContext.adaptContextScale(viewport, focus, context); // After scale, restore projected annotation position, in order to avoid // moving the annotation center outside the boundaries //const pNew = context.sceneToViewportCoords(viewport, focus.position); const pNew = CoordinateSystem.fromSceneToViewportNoCamera(focus.position, context, viewport, useGL); const delta = [pNew.x - pOld.x, pNew.y - pOld.y]; context.x -= delta.x; context.y += delta.y; // Force annotation inside the viewport FocusContext.adaptContextPosition(viewport, focus, context); } /** * Adjusts camera scale to ensure projected lens fits within viewport bounds * @param {Viewport} viewport - The current viewport * @param {Focus} focus - The lens object * @param {Transform} context - The camera transform to be updated * @private */ static adaptContextScale(viewport, focus, context) { const oldZ = context.z; const radiusRange = this.getRadiusRangeCanvas(viewport); const focusRadiusCanvas = focus.radius * context.z; let zoomScaleAmount = 1; if (focusRadiusCanvas &lt; radiusRange.min) { context.z = radiusRange.min / focus.radius; // zoomScaleAmount = (radiusRange.min / focus.radius) / context.z; } else if (focusRadiusCanvas &gt; radiusRange.max) { context.z = radiusRange.max / focus.radius; // zoomScaleAmount = (radiusRange.max / focus.radius) / context.z; } } /** * Adjusts camera position to maintain proper focus+context conditions * @param {Viewport} viewport - The current viewport * @param {Focus} focus - The lens object * @param {Transform} context - The camera transform to be updated * @private */ static adaptContextPosition(viewport, focus, context) { const delta = this.getCanvasBorder(focus, context); let box = this.getShrinkedBox(viewport, delta); const useGL = true; const screenP = CoordinateSystem.fromSceneToViewportNoCamera(focus.position, context, viewport, useGL); const deltaMinX = Math.max(0, (box.xLow - screenP.x)); const deltaMaxX = Math.min(0, (box.xHigh - screenP.x)); context.x += deltaMinX != 0 ? deltaMinX : deltaMaxX; const deltaMinY = Math.max(0, (box.yLow - screenP.y)); const deltaMaxY = Math.min(0, (box.yHigh - screenP.y)); context.y += deltaMinY != 0 ? deltaMinY : deltaMaxY; } /** * Calculates focus+context distribution factors for pan operations * @param {Viewport} viewport - The current viewport * @param {Focus} focus - The lens object * @param {Transform} context - The current camera transform * @param {Object} panDir - Pan direction vector * @param {number} panDir.x - Horizontal direction (-1 to 1) * @param {number} panDir.y - Vertical direction (-1 to 1) * @returns {Object} Distribution factors for x and y directions (0.5 to 1) * @private */ static getAmountOfFocusContext(viewport, focus, context, panDir) { // Returns a value t which is used to distribute pan between focus and context. // Return a value among 0.5 and 1. 1 is full focus and context, // 0.5 is borderline focus and context. const delta = this.getCanvasBorder(focus, context); const box = this.getShrinkedBox(viewport, delta); // const p = context.sceneToViewportCoords(viewport, focus.position); const useGL = true; const p = CoordinateSystem.fromSceneToViewportNoCamera(focus.position, context, viewport, useGL); const halfCanvasW = viewport.w / 2 - delta; const halfCanvasH = viewport.h / 2 - delta; let xDistance = (panDir.x &gt; 0 ? Math.max(0, Math.min(halfCanvasW, box.xHigh - p.x)) / (halfCanvasW) : Math.max(0, Math.min(halfCanvasW, p.x - box.xLow)) / ( /** * Distributes a pan operation between lens movement and camera transform to maintain focus+context * @param {Viewport} viewport - The current viewport * @param {Focus} focus - The lens object to be updated * @param {Transform} context - The camera transform to be updated * @param {Object} delta - Pan amount in dataset pixels * @param {number} delta.x - Horizontal pan amount * @param {number} delta.y - Vertical pan amount * @param {Object} imageSize - Dataset dimensions * @param {number} imageSize.w - Dataset width * @param {number} imageSize.h - Dataset height */halfCanvasW)); xDistance = this.smoothstep(xDistance, 0, 0.75); let yDistance = (panDir.y &gt; 0 ? Math.max(0, Math.min(halfCanvasH, box.yHigh - p.y)) / (halfCanvasH) : Math.max(0, Math.min(halfCanvasH, p.y - box.yLow)) / (halfCanvasH)); yDistance = this.smoothstep(yDistance, 0, 0.75); // Use d/2+05, because when d = 0.5 camera movement = lens movement // with the effect of the lens not moving from its canvas position. const txy = { x: xDistance / 2 + 0.5, y: yDistance / 2 + 0.5 }; return txy; } /** * Calculates minimum required distance between lens center and viewport boundary * @param {Focus} focus - The lens object * @param {Transform} context - The camera transform * @returns {number} Minimum distance in canvas pixels * @private */ static getCanvasBorder(focus, context) { // Return the min distance in canvas pixel of the lens center from the boundary. const radiusFactorFromBoundary = 1.5; return context.z * focus.radius * radiusFactorFromBoundary; // Distance Lens Center Canvas Border } /** * Creates a viewport box shrunk by specified padding * @param {Viewport} viewport - The current viewport * @param {number} delta - Padding amount in pixels * @returns {Object} Box with xLow, yLow, xHigh, yHigh coordinates * @private */ static getShrinkedBox(viewport, delta) { // Return the viewport box in canvas pixels, shrinked of delta pixels on the min,max corners const box = { xLow: delta, yLow: delta, xHigh: viewport.w - delta, yHigh: viewport.h - delta }; return box; } /** * Calculates acceptable lens radius range for current viewport * @param {Viewport} viewport - The current viewport * @returns {Object} Range object with min and max radius values in pixels * @private */ static getRadiusRangeCanvas(viewport) { // Returns the acceptable lens radius range in pixel for a certain viewport const maxMinRadiusRatio = 3; const minRadius = Math.min(viewport.w, viewport.h) * 0.1; const maxRadius = minRadius * maxMinRadiusRatio; return { min: minRadius, max: maxRadius }; } /** * Implements smoothstep interpolation between two values * @param {number} x - Input value * @param {number} x0 - Lower bound * @param {number} x1 - Upper bound * @returns {number} Smoothly interpolated value between 0 and 1 * @private */ static smoothstep(x, x0, x1) { // Return the smoothstep interpolation at x, between x0 and x1. if (x &lt; x0) { return 0; } else if (x &gt; x1) { return 1; } else { const t = (x - x0) / (x1 - x0); return t * t * (-2 * t + 3); } } } export { FocusContext } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"Layer.js.html":{"id":"Layer.js.html","title":"Source: Layer.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: Layer.js import { Transform } from './Transform.js' import { Layout } from './Layout.js' import { Cache } from './Cache.js' import { BoundingBox } from './BoundingBox.js' import { addSignals } from './Signals.js' /** * @typedef {Object} LayerOptions * @property {string|Layout} [layout='image'] - Layout/format of input raster images * @property {string} [type] - Identifier for specific derived layer class * @property {string} [id] - Unique layer identifier * @property {string} [label] - Display label for UI (defaults to id) * @property {Transform} [transform] - Transform from layer to canvas coordinates * @property {boolean} [visible=true] - Whether layer should be rendered * @property {number} [zindex=0] - Stack order for rendering (higher = on top) * @property {boolean} [overlay=false] - Whether layer renders in overlay mode * @property {number} [prefetchBorder=1] - Tile prefetch threshold in tile units * @property {number} [mipmapBias=0.4] - Texture resolution selection bias (0=highest, 1=lowest) * @property {Object.&lt;string, Shader&gt;} [shaders] - Map of available shaders * @property {Controller[]} [controllers] - Array of active UI controllers * @property {Layer} [sourceLayer] - Layer to share tiles with * @property {number} [pixelSize=0.0] - Physical size of a pixel in mm */ /** * Layer is the core class for rendering content in OpenLIME. * It manages raster data display, tile loading, and shader-based rendering. * * Features: * - Tile-based rendering with level-of-detail * - Shader-based visualization effects * - Automatic tile prefetching and caching * - Coordinate system transformations * - Animation and interpolation of shader parameters * - Support for multiple visualization modes * - Integration with layout systems for different data formats * * Layers can be used directly or serve as a base class for specialized layer types. * The class uses a registration system where derived classes register themselves, * allowing instantiation through the 'type' option. * * @fires Layer#ready - Fired when layer is initialized * @fires Layer#update - Fired when redraw is needed * @fires Layer#loaded - Fired when all tiles are loaded * @fires Layer#updateSize - Fired when layer size changes * * @example * ```javascript * // Create a basic image layer * const layer = new OpenLIME.Layer({ * layout: 'deepzoom', * type: 'image', * url: 'path/to/image.dzi', * label: 'Main Image' * }); * * // Add to viewer * viewer.addLayer('main', layer); * * // Listen for events * layer.addEvent('ready', () =&gt; { * console.log('Layer initialized'); * }); * ``` */ class Layer { /** * Creates a Layer. Additionally, an object literal with Layer `options` can be specified. * Signals are triggered when: * ready: the size and layout of the layer is known * update: some new tile is available, or some visualization parameters has changed * loaded: is fired when all the images needed have been downloaded * @param {Object} [options] * @param {(string|Layout)} options.layout='image' The layout (the format of the input raster images). * @param {string} options.type A string identifier to select the specific derived layer class to instantiate. * @param {string} options.id The layer unique identifier. * @param {string} options.label A string with a more comprehensive definition of the layer. If it exists, it is used in the UI layer menu, otherwise the `id` value is taken. * @param {Transform} options.transform The relative coords from layer to canvas. * @param {bool} options.visible=true Whether to render the layer. * @param {number} options.zindex Stack ordering value for the rendering of layers (higher zindex on top). * @param {bool} options.overlay=false Whether the layer must be rendered in overlay mode. * @param {number} options.prefetchBorder=1 The threshold (in tile units) around the current camera position for which to prefetch tiles. * @param {number} options.mipmapBias=0.2 Determine which texture is used when scale is not a power of 2. 0: use always the highest resulution, 1 the lowest, 0.5 switch halfway. * @param {Object} options.shaders A map (shadersId, shader) of the shaders usable for the layer rendering. See @link {Shader}. * @param {Controller[]} options.controllers An array of UI device controllers active on the layer. * @param {Layer} options.sourceLayer The layer from which to take the tiles (in order to avoid tile duplication). */ constructor(options) { //create from derived class if type specified if (options.type) { let type = options.type; delete options.type; if (type in this.types) { return this.types[type](options); } throw \"Layer type: \" + type + \" module has not been loaded\"; } this.init(options); } /** @ignore */ init(options) { Object.assign(this, { transform: new Transform(), viewport: null, debug: false, visible: true, zindex: 0, overlay: false, //in the GUI it won't affect the visibility of the other layers rasters: [], layers: [], controls: {}, controllers: [], shaders: {}, layout: 'image', shader: null, //current shader. gl: null, width: 0, height: 0, prefetchBorder: 1, mipmapBias: 0.4, pixelSize: 0.0, //signals: { update: [], ready: [], updateSize: [] }, //update callbacks for a redraw, ready once layout is known. //internal stuff, should not be passed as options. tiles: new Map(), //keep references to each texture (and status) indexed by level, x and y. //each tile is tex: [.. one for raster ..], missing: 3 missing tex before tile is ready. //only raster used by the shader will be loade. queue: [], //queue of tiles to be loaded. requested: new Map, //tiles requested. }); Object.assign(this, options); if (this.sourceLayer) this.tiles = this.sourceLayer.tiles; //FIXME avoid tiles duplication this.transform = new Transform(this.transform); if (typeof (this.layout) == 'string') { let size = { width: this.width, height: this.height }; if (this.server) size.server = this.server; this.setLayout(new Layout(null, this.layout, size)); } else { this.setLayout(this.layout); } } /** * Sets the layer's viewport * @param {Object} view - Viewport specification * @param {number} view.x - X position * @param {number} view.y - Y position * @param {number} view.dx - Width * @param {number} view.dy - Height * @fires Layer#update */ setViewport(view) { this.viewport = view; this.emit('update'); } /** * Adds a filter to the current shader * @param {Object} filter - Filter specification * @throws {Error} If no shader is set */ addShaderFilter(f) { if (!this.shader) throw \"Shader not implemented\"; this.shader.addFilter(f); } /** * Removes a filter from the current shader * @param {Object} name - Filter name * @throws {Error} If no shader is set */ removeShaderFilter(name) { if (!this.shader) throw \"Shader not implemented\"; this.shader.removeFilter(name); } /** * Removes all filters from the current shader * @param {Object} name - Filter name * @throws {Error} If no shader is set */ clearShaderFilters() { if (!this.shader) throw \"Shader not implemented\"; this.shader.clearFilters(); } /** * Sets the layer state with optional animation * @param {Object} state - State object with controls and mode * @param {number} [dt] - Animation duration in ms * @param {string} [easing='linear'] - Easing function ('linear'|'ease-out'|'ease-in-out') */ setState(state, dt, easing = 'linear') { if ('controls' in state) for (const [key, v] of Object.entries(state.controls)) { this.setControl(key, v, dt, easing); } if ('mode' in state &amp;&amp; state.mode) { this.setMode(state.mode); } } /** * Gets the current layer state * @param {Object} [stateMask] - Optional mask to filter returned state properties * @returns {Object} Current state object */ getState(stateMask = null) { const state = {}; state.controls = {}; for (const [key, v] of Object.entries(this.controls)) { if (!stateMask || ('controls' in stateMask &amp;&amp; key in stateMask.controls)) state.controls[key] = v.current.value; } if (!stateMask || 'mode' in stateMask) if (this.getMode()) state.mode = this.getMode(); return state; } /** @ignore */ setLayout(layout) { /** * The event is fired when a layer is initialized. * @event Layer#ready */ /** * The event is fired if a redraw is needed. * @event Layer#update */ this.layout = layout; let callback = () =&gt; { this.status = 'ready'; this.setupTiles(); //setup expect status to be ready! this.emit('ready'); this.emit('update'); }; if (layout.status == 'ready') //layout already initialized. callback(); else layout.addEvent('ready', callback); // Set signal to acknowledge change of bbox when it is known. Let this signal go up to canvas this.layout.addEvent('updateSize', () =&gt; { if (this.shader) this.shader.setTileSize(this.layout.getTileSize()); this.emit('updateSize'); }); } /** * Sets the layer's transform * @param {Transform} tx - New transform * @fires Layer#updateSize */ setTransform(tx) { //FIXME this.transform = tx; this.emit('updateSize'); } /** * Sets the active shader * @param {string} id - Shader identifier from registered shaders * @throws {Error} If shader ID is not found * @fires Layer#update */ setShader(id) { if (!id in this.shaders) throw \"Unknown shader: \" + id; this.shader = this.shaders[id]; this.setupTiles(); this.shader.addEvent('update', () =&gt; { this.emit('update'); }); } /** * Gets the current shader visualization mode * @returns {string|null} Current mode or null if no shader */ getMode() { if (this.shader) return this.shader.mode; return null; } /** * Gets available shader modes * @returns {string[]} Array of available modes */ getModes() { if (this.shader) return this.shader.modes; return []; } /** * Sets shader visualization mode * @param {string} mode - Mode to set * @fires Layer#update */ setMode(mode) { this.shader.setMode(mode); this.emit('update'); } /** * Sets layer visibility * @param {boolean} visible - Whether layer should be visible * @fires Layer#update */ setVisible(visible) { this.visible = visible; this.previouslyNeeded = null; this.emit('update'); } /** * Sets layer rendering order * @param {number} zindex - Stack order value * @fires Layer#update */ setZindex(zindex) { this.zindex = zindex; this.emit('update'); } /** * Computes minimum scale across layers * @param {Object.&lt;string, Layer&gt;} layers - Map of layers * @param {boolean} discardHidden - Whether to ignore hidden layers * @returns {number} Minimum scale value * @static */ static computeLayersMinScale(layers, discardHidden) { if (layers == undefined || layers == null) { console.log(\"ASKING SCALE INFO ON NO LAYERS\"); return 1; } let layersScale = 1; for (let layer of Object.values(layers)) { if (!discardHidden || layer.visible) { let s = layer.scale(); layersScale = Math.min(layersScale, s); } } return layersScale; } /** * Gets layer scale * @returns {number} Current scale value */ scale() { // FIXME: this do not consider children layers return this.transform.z; } /** * Gets pixel size in millimeters * @returns {number} Size of one pixel in mm */ pixelSizePerMM() { return this.pixelSize * this.transform.z; } /** * Gets layer bounding box in scene coordinates * @returns {BoundingBox} Bounding box */ boundingBox() { // FIXME: this do not consider children layers // Take layout bbox let result = this.layout.boundingBox(); // Apply layer transform to bbox if (this.transform != null &amp;&amp; this.transform != undefined) { result = this.transform.transformBox(result); } return result; } /** * Computes combined bounding box of multiple layers * @param {Object.&lt;string, Layer&gt;} layers - Map of layers * @param {boolean} discardHidden - Whether to ignore hidden layers * @returns {BoundingBox} Combined bounding box * @static */ static computeLayersBBox(layers, discardHidden) { if (layers == undefined || layers == null) { console.log(\"ASKING BBOX INFO ON NO LAYERS\"); let emptyBox = new BoundingBox(); return emptyBox; } let layersBbox = new BoundingBox(); for (let layer of Object.values(layers)) { if ((!discardHidden || layer.visible) &amp;&amp; layer.layout.width) { const bbox = layer.boundingBox(); layersBbox.mergeBox(bbox); } } return layersBbox; } /** * Gets the shader parameter control corresponding to `name` * @param {*} name The name of the control. * return {*} The control */ getControl(name) { let control = this.controls[name] ? this.controls[name] : null; if (control) { let now = performance.now(); this.interpolateControl(control, now); } return control; } /** * Adds a shader parameter control * @param {string} name - Control identifier * @param {*} value - Initial value * @throws {Error} If control already exists */ addControl(name, value) { if (this.controls[name]) throw new Error(`Control \"$name\" already exist!`); let now = performance.now(); this.controls[name] = { 'source': { 'value': value, 't': now }, 'target': { 'value': value, 't': now }, 'current': { 'value': value, 't': now }, 'easing': 'linear' }; } /** * Sets a shader control value with optional animation * @param {string} name - Control identifier * @param {*} value - New value * @param {number} [dt] - Animation duration in ms * @param {string} [easing='linear'] - Easing function * @fires Layer#update */ setControl(name, value, dt, easing = 'linear') { //When are created? let now = performance.now(); let control = this.controls[name]; this.interpolateControl(control, now); control.source.value = [...control.current.value]; control.source.t = now; control.target.value = [...value]; control.target.t = now + dt; control.easing = easing; this.emit('update'); } /** * Updates control interpolation * @returns {boolean} Whether all interpolations are complete */ interpolateControls() { let now = performance.now(); let done = true; for (let control of Object.values(this.controls)) done = this.interpolateControl(control, now) &amp;&amp; done; return done; } /** @ignore */ interpolateControl(control, time) { let source = control.source; let target = control.target; let current = control.current; current.t = time; if (time &lt; source.t) { current.value = [...source.value]; return false; } if (time &gt; target.t - 0.0001) { let done = current.value.every((e, i) =&gt; e === target.value[i]); current.value = [...target.value]; return done; } let dt = (target.t - source.t); let tt = (time - source.t) / dt; switch (control.easing) { case 'ease-out': tt = 1 - Math.pow(1 - tt, 2); break; case 'ease-in-out': tt = tt &lt; 0.5 ? 2 * tt * tt : 1 - Math.pow(-2 * tt + 2, 2) / 2; break; } let st = 1 - tt; current.value = []; for (let i = 0; i &lt; source.value.length; i++) current.value[i] = (st * source.value[i] + tt * target.value[i]); return false; } ///////////// /// CACHE HANDLING &amp; RENDERING /** @ignore */ dropTile(tile) { for (let i = 0; i &lt; tile.tex.length; i++) { if (tile.tex[i]) { this.gl.deleteTexture(tile.tex[i]); } } this.tiles.delete(tile.index); } /** * Clears layer resources and resets state * @private */ clear() { this.ibuffer = this.vbuffer = null; Cache.flushLayer(this); this.tiles = new Map(); //TODO We need to drop these tile textures before clearing Map this.setupTiles(); this.queue = []; this.previouslyNeeded = false; } /* * Renders the layer */ /** @ignore */ draw(transform, viewport) { //exception for layout image where we still do not know the image size //how linear or srgb should be specified here. // gl.pixelStorei(gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, gl.NONE); if (this.status != 'ready')// || this.tiles.size == 0) return true; if (!this.shader) throw \"Shader not specified!\"; let done = this.interpolateControls(); let parent_viewport = viewport; if (this.viewport) { viewport = this.viewport; this.gl.viewport(viewport.x, viewport.y, viewport.dx, viewport.dy); } this.prepareWebGL(); // find which quads to draw and in case request for them let available = this.layout.available(viewport, transform, this.transform, 0, this.mipmapBias, this.tiles); transform = this.transform.compose(transform); let matrix = transform.projectionMatrix(viewport); this.gl.uniformMatrix4fv(this.shader.matrixlocation, this.gl.FALSE, matrix); this.updateAllTileBuffers(available); // bind filter textures let iSampler = this.shader.samplers.length; for (const f of this.shader.filters) { for (let i = 0; i &lt; f.samplers.length; i++) { this.gl.uniform1i(f.samplers[i].location, iSampler); this.gl.activeTexture(this.gl.TEXTURE0 + iSampler); this.gl.bindTexture(this.gl.TEXTURE_2D, f.samplers[i].tex); iSampler++; } } let i = 0; for (let tile of Object.values(available)) { // if(tile.complete) this.drawTile(tile, i); ++i; } if (this.vieport) this.gl.viewport(parent_viewport.x, parent_viewport.y, parent_viewport.dx, parent_viewport.dy); return done; } /** @ignore */ drawTile(tile, index) { //let tiledata = this.tiles.get(tile.index); if (tile.missing != 0) throw \"Attempt to draw tile still missing textures\" //coords and texture buffers updated once for all tiles from main draw() call //bind textures let gl = this.gl; for (var i = 0; i &lt; this.shader.samplers.length; i++) { let id = this.shader.samplers[i].id; gl.uniform1i(this.shader.samplers[i].location, i); gl.activeTexture(gl.TEXTURE0 + i); gl.bindTexture(gl.TEXTURE_2D, tile.tex[id]); } // for (var i = 0; i &lt; this.shader.samplers.length; i++) { // let id = this.shader.samplers[i].id; // gl.uniform1i(this.shader.samplers[i].location, i); // gl.activeTexture(gl.TEXTURE0 + i); // gl.bindTexture(gl.TEXTURE_2D, tile.tex[id]); // } // FIXME - TO BE REMOVED? const byteOffset = this.getTileByteOffset(index); gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, byteOffset); } getTileByteOffset(index) { return index * 6 * 2; } /* given the full pyramid of needed tiles for a certain bounding box, * starts from the preferred levels and goes up in the hierarchy if a tile is missing. * complete is true if all of the 'brothers' in the hierarchy are loaded, * drawing incomplete tiles enhance the resolution early at the cost of some overdrawing and problems with opacity. */ /** @ignore */ /*toRender(needed) { let torender = {}; //array of minlevel, actual level, x, y (referred to minlevel) let brothers = {}; let minlevel = needed.level; let box = needed.pyramid[minlevel]; for (let y = box.yLow; y &lt; box.yHigh; y++) { for (let x = box.xLow; x &lt; box.xHigh; x++) { let level = minlevel; while (level &gt;= 0) { let d = minlevel - level; let index = this.layout.index(level, x &gt;&gt; d, y &gt;&gt; d); if (this.tiles.has(index) &amp;&amp; this.tiles.get(index).missing == 0) { torender[index] = this.tiles.get(index); //{ index: index, level: level, x: x &gt;&gt; d, y: y &gt;&gt; d, complete: true }; break; } else { let sx = (x &gt;&gt; (d + 1)) &lt;&lt; 1; let sy = (y &gt;&gt; (d + 1)) &lt;&lt; 1; brothers[this.layout.index(level, sx, sy)] = 1; brothers[this.layout.index(level, sx + 1, sy)] = 1; brothers[this.layout.index(level, sx + 1, sy + 1)] = 1; brothers[this.layout.index(level, sx, sy + 1)] = 1; } level--; } } } for (let index in brothers) { if (index in torender) torender[index].complete = false; } return torender; }*/ /** @ignore */ // Update tile vertex and texture coords. // Currently called by derived classes updateTileBuffers(coords, tcoords) { let gl = this.gl; //TODO to reduce the number of calls (probably not needed) we can join buffers, and just make one call per draw! (except the bufferData, which is per node) gl.bindBuffer(gl.ARRAY_BUFFER, this.vbuffer); gl.bufferData(gl.ARRAY_BUFFER, coords, gl.STATIC_DRAW); //FIXME this is not needed every time. gl.vertexAttribPointer(this.shader.coordattrib, 3, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(this.shader.coordattrib); gl.bindBuffer(gl.ARRAY_BUFFER, this.tbuffer); gl.bufferData(gl.ARRAY_BUFFER, tcoords, gl.STATIC_DRAW); gl.vertexAttribPointer(this.shader.texattrib, 2, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(this.shader.texattrib); } /** @ignore */ // Update tile vertex and texture coords of all the tiles in a single VBO updateAllTileBuffers(tiles) { let gl = this.gl; //use this.tiles instead. let N = Object.values(tiles).length; if (N == 0) return; const szV = 12; const szT = 8; const szI = 6; const iBuffer = new Uint16Array(szI * N); const vBuffer = new Float32Array(szV * N); const tBuffer = new Float32Array(szT * N); let i = 0; for (let tile of Object.values(tiles)) { let c = this.layout.tileCoords(tile); vBuffer.set(c.coords, i * szV); tBuffer.set(c.tcoords, i * szT); const off = i * 4; tile.indexBufferByteOffset = 2 * i * szI; iBuffer.set([off + 3, off + 2, off + 1, off + 3, off + 1, off + 0], i * szI); ++i; } gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.ibuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, iBuffer, gl.STATIC_DRAW); gl.bindBuffer(gl.ARRAY_BUFFER, this.vbuffer); gl.bufferData(gl.ARRAY_BUFFER, vBuffer, gl.STATIC_DRAW); gl.vertexAttribPointer(this.shader.coordattrib, 3, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(this.shader.coordattrib); gl.bindBuffer(gl.ARRAY_BUFFER, this.tbuffer); gl.bufferData(gl.ARRAY_BUFFER, tBuffer, gl.STATIC_DRAW); gl.vertexAttribPointer(this.shader.texattrib, 2, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(this.shader.texattrib); } /* * If layout is ready and shader is assigned, creates or update tiles to keep track of what is missing. */ /** @ignore */ setupTiles() { if (!this.shader || !this.layout || this.layout.status != 'ready') return; for (let tile of this.tiles) { tile.missing = this.shader.samplers.length; for (let sampler of this.shader.samplers) { if (tile.tex[sampler.id]) tile.missing--; } } } /** @ignore */ prepareWebGL() { let gl = this.gl; if (!this.ibuffer) { //this part might go into another function. this.ibuffer = gl.createBuffer(); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.ibuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array([3, 2, 1, 3, 1, 0]), gl.STATIC_DRAW); this.vbuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, this.vbuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0, 0, 0, 0, 1, 0, 1, 1, 0, 1, 0, 0]), gl.STATIC_DRAW); this.tbuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, this.tbuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0, 0, 0, 1, 1, 1, 1, 0]), gl.STATIC_DRAW); } if (this.shader.needsUpdate) { this.shader.debug = this.debug; this.shader.createProgram(gl); } gl.useProgram(this.shader.program); this.shader.updateUniforms(gl); } /** @ignore */ sameNeeded(a, b) { if (a.level != b.level) return false; for (let p of ['xLow', 'xHigh', 'yLow', 'yHigh']) if (a.pyramid[a.level][p] != b.pyramid[a.level][p]) return false; return true; } /** * Initiates tile prefetching based on viewport * @param {Transform} transform - Current view transform * @param {Object} viewport - Current viewport * @private */ prefetch(transform, viewport) { if (this.viewport) viewport = this.viewport; if (this.layers.length != 0) { //combine layers for (let layer of this.layers) layer.prefetch(transform, viewport); } if (this.rasters.length == 0) return; if (this.status != 'ready') return; if (typeof (this.layout) != 'object') throw \"AH!\"; /*let needed = this.layout.needed(viewport, transform, this.prefetchBorder, this.mipmapBias, this.tiles); this.queue = []; let now = performance.now(); let missing = this.shader.samplers.length; for(let tile of needed) { if(tile.missing === null) tile.missing = missing; if (tile.missing != 0 &amp;&amp; !this.requested[index]) tmp.push(tile); } */ this.queue = this.layout.needed(viewport, transform, this.transform, this.prefetchBorder, this.mipmapBias, this.tiles); /* let needed = this.layout.neededBox(viewport, transform, this.prefetchBorder, this.mipmapBias); if (this.previouslyNeeded &amp;&amp; this.sameNeeded(this.previouslyNeeded, needed)) return; this.previouslyNeeded = needed; this.queue = []; let now = performance.now(); //look for needed nodes and prefetched nodes (on the pos destination let missing = this.shader.samplers.length; for (let level = 0; level &lt;= needed.level; level++) { let box = needed.pyramid[level]; let tmp = []; for (let y = box.yLow; y &lt; box.yHigh; y++) { for (let x = box.xLow; x &lt; box.xHigh; x++) { let index = this.layout.index(level, x, y); let tile = this.tiles.get(index) || { index, x, y, missing, tex: [], level }; tile.time = now; tile.priority = needed.level - level; if (tile.missing != 0 &amp;&amp; !this.requested[index]) tmp.push(tile); } } let c = box.center(); //sort tiles by distance to the center TODO: check it's correct! tmp.sort(function (a, b) { return Math.abs(a.x - c[0]) + Math.abs(a.y - c[1]) - Math.abs(b.x - c[0]) - Math.abs(b.y - c[1]); }); this.queue = this.queue.concat(tmp); }*/ Cache.setCandidates(this); } /** * Loads a specific tile * @param {Object} tile - Tile specification * @param {Function} callback - Completion callback * @returns {Promise&lt;void&gt;} * @private */ async loadTile(tile, callback) { if (this.tiles.has(tile.index)) throw \"AAARRGGHHH double tile!\"; if (this.requested.has(tile.index)) { console.log(\"Warning: double request!\"); callback(\"Double tile request\"); return; } this.tiles.set(tile.index, tile); this.requested.set(tile.index, true); if (this.layout.type == 'itarzoom') { tile.url = this.layout.getTileURL(null, tile); let options = {}; if (tile.end) options.headers = { range: `bytes=${tile.start}-${tile.end}`, 'Accept-Encoding': 'indentity' } var response = await fetch(tile.url, options); if (!response.ok) { callback(\"Failed loading \" + tile.url + \": \" + response.statusText); return; } let blob = await response.blob(); let i = 0; for (let sampler of this.shader.samplers) { let raster = this.rasters[sampler.id]; let imgblob = blob.slice(tile.offsets[i], tile.offsets[i + 1]); const img = await raster.blobToImage(imgblob, this.gl); let tex = raster.loadTexture(this.gl, img); let size = img.width * img.height * 3; tile.size += size; tile.tex[sampler.id] = tex; tile.w = img.width; tile.h = img.height; i++; } tile.missing = 0; this.emit('update'); this.requested.delete(tile.index); if (callback) callback(tile.size); return; } tile.missing = this.shader.samplers.length; for (let sampler of this.shader.samplers) { let raster = this.rasters[sampler.id]; tile.url = this.layout.getTileURL(sampler.id, tile); const [tex, size] = await raster.loadImage(tile, this.gl); // TODO Parallelize request and url must be a parameter (implement request ques per url) if (this.layout.type == \"image\") { this.layout.width = raster.width; this.layout.height = raster.height; this.layout.emit('updateSize'); } tile.size += size; tile.tex[sampler.id] = tex; tile.missing--; if (tile.missing &lt;= 0) { this.emit('update'); this.requested.delete(tile.index); if (this.requested.size == 0) this.emit('loaded'); if (callback) callback(size); } } } } Layer.prototype.types = {} addSignals(Layer, 'ready', 'update', 'loaded', 'updateSize'); export { Layer } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"LayerAnnotation.js.html":{"id":"LayerAnnotation.js.html","title":"Source: LayerAnnotation.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: LayerAnnotation.js import { Annotation } from './Annotation.js'; import { Layer } from './Layer.js' import { addSignals } from './Signals.js'; /** * @typedef {Object} LayerAnnotationOptions * @property {string} [style] - CSS styles for annotation rendering * @property {string|Annotation[]} [annotations=[]] - URL of JSON annotation data or array of annotations * @property {boolean} [overlay=true] - Whether annotations render as overlay * @property {Set&lt;string&gt;} [selected=new Set()] - Set of selected annotation IDs * @property {Object} [annotationsListEntry=null] - UI entry for annotations list * @extends LayerOptions */ /** * LayerAnnotation provides functionality for displaying and managing annotations overlaid on other layers. * It supports both local and remote annotation data, selection management, and UI integration. * * Features: * - Display of text, graphics, and glyph annotations * - Remote annotation loading via JSON/HTTP * - Selection management * - Visibility toggling per annotation * - UI integration with annotation list * - Annotation event handling * * The layer automatically handles: * - Annotation data loading and parsing * - UI synchronization * - Visibility states * - Selection states * - Event propagation * * @extends Layer * @fires LayerAnnotation#selected - Fired when annotation selection changes, with selected annotation as parameter * @fires LayerAnnotation#loaded - Fired when annotations are loaded * @fires Layer#update - Inherited from Layer, fired when redraw needed * @fires Layer#ready - Inherited from Layer, fired when layer is ready * * @example * ```javascript * // Create annotation layer from remote JSON * const annoLayer = new OpenLIME.LayerAnnotation({ * annotations: 'https://example.com/annotations.json', * style: '.annotation { color: red; }', * overlay: true * }); * * // Listen for selection changes * annoLayer.addEvent('selected', (annotation) =&gt; { * console.log('Selected annotation:', annotation.label); * }); * * // Add to viewer * viewer.addLayer('annotations', annoLayer); * ``` */ class LayerAnnotation extends Layer { //FIXME CustomData Object template {name: { label: defaultValue: type:number,enum,string,boolean min: max: enum:[] }} /** * Instantiates a LayerAnnotation object. * @param {Object} [options] An object literal with options that inherits from {@link Layer}. * @param {string} options.style Properties to style annotations. * @param {(string|Array)} options.annotations The URL of the annotation data (JSON file or HTTP GET Request to an annotation server) or an array of annotations. */ constructor(options) { options = Object.assign({ // geometry: null, //unused, might want to store here the quads/shapes for opengl rendering style: null, //straightforward for svg annotations, to be defined or opengl rendering annotations: [], selected: new Set, overlay: true, annotationsListEntry: null, //TODO: horrible name for the interface list of annotations }, options); super(options); if (typeof (this.annotations) == \"string\") { //assumes it is an URL (async () =&gt; { await this.loadAnnotations(this.annotations); })(); } } /** * Loads annotations from a URL * @param {string} url - URL to fetch annotations from (JSON format) * @fires LayerAnnotation#loaded * @fires Layer#update * @fires Layer#ready * @private * @async */ async loadAnnotations(url) { const headers = new Headers(); headers.append('pragma', 'no-cache'); headers.append('cache-control', 'no-cache'); var response = await fetch(url, { method: 'GET', headers: headers, }); if (!response.ok) { this.status = \"Failed loading \" + this.url + \": \" + response.statusText; return; } this.annotations = await response.json(); if (this.annotations.status == 'error') { alert(\"Failed to load annotations: \" + this.annotations.msg); return; } //this.annotations = this.annotations.map(a =&gt; '@context' in a ? Annotation.fromJsonLd(a): a); this.annotations = this.annotations.map(a =&gt; new Annotation(a)); for (let a of this.annotations) if (a.publish != 1) a.visible = false; //this.annotations.sort((a, b) =&gt; a.label.localeCompare(b.label)); if (this.annotationsListEntry) this.createAnnotationsList(); this.emit('update'); this.status = 'ready'; this.emit('ready'); this.emit('loaded'); } /** * Creates a new annotation and adds it to the layer * @param {Annotation} [annotation] - Optional pre-configured annotation * @returns {Annotation} The newly created annotation * @private */ newAnnotation(annotation) { if (!annotation) annotation = new Annotation(); this.annotations.push(annotation); let html = this.createAnnotationEntry(annotation); let template = document.createElement('template'); template.innerHTML = html.trim(); let list = this.annotationsListEntry.element.parentElement.querySelector('.openlime-list'); list.appendChild(template.content.firstChild); this.clearSelected(); //this.setSelected(annotation); return annotation; } /** * Creates the UI entry for the annotations list * @returns {Object} Configuration object for annotations list UI * @private */ annotationsEntry() { return this.annotationsListEntry = { html: '', list: [], //will be filled later. classes: 'openlime-annotations', status: () =&gt; 'active', oncreate: () =&gt; { if (Array.isArray(this.annotations)) this.createAnnotationsList(); } } } /** * Creates the complete annotations list UI * @private */ createAnnotationsList() { let html = ''; for (let a of this.annotations) { html += this.createAnnotationEntry(a); } let list = this.annotationsListEntry.element.parentElement.querySelector('.openlime-list'); list.innerHTML = html; list.addEventListener('click', (e) =&gt; { let svg = e.srcElement.closest('svg'); if (svg) { let entry = svg.closest('[data-annotation]') entry.classList.toggle('hidden'); let id = entry.getAttribute('data-annotation'); let anno = this.getAnnotationById(id); anno.visible = !anno.visible; anno.needsUpdate = true; this.emit('update'); } let id = e.srcElement.getAttribute('data-annotation'); if (id) { this.clearSelected(); let anno = this.getAnnotationById(id); this.setSelected(anno, true); } }); } /** * Creates a single annotation entry for the UI * @param {Annotation} annotation - The annotation to create an entry for * @returns {string} HTML string for the annotation entry * @private */ createAnnotationEntry(a) { return `&lt;a href=\"#\" data-annotation=\"${a.id}\" class=\"openlime-entry ${a.visible == 0 ? 'hidden' : ''}\"&gt;${a.label || ''} &lt;svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"openlime-eye\"&gt;&lt;path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"&gt;&lt;/path&gt;&lt;circle cx=\"12\" cy=\"12\" r=\"3\"&gt;&lt;/circle&gt;&lt;/svg&gt; &lt;svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"openlime-eye-off\"&gt;&lt;path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24\"&gt;&lt;/path&gt;&lt;line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\"&gt;&lt;/line&gt;&lt;/svg&gt; &lt;/a&gt;`; } /** * Retrieves an annotation by its ID * @param {string} id - Annotation identifier * @returns {Annotation|null} The found annotation or null if not found */ getAnnotationById(id) { for (const anno of this.annotations) if (anno.id == id) return anno; return null; } /** * Clears all annotation selections * @private */ clearSelected() { this.annotationsListEntry.element.parentElement.querySelectorAll(`[data-annotation]`).forEach((e) =&gt; e.classList.remove('selected')); this.selected.clear(); } /** * Sets the selection state of an annotation * @param {Annotation} anno - The annotation to select/deselect * @param {boolean} [on=true] - Whether to select (true) or deselect (false) * @fires LayerAnnotation#selected */ setSelected(anno, on = true) { this.annotationsListEntry.element.parentElement.querySelector(`[data-annotation=\"${anno.id}\"]`).classList.toggle('selected', on); if (on) this.selected.add(anno.id); else this.selected.delete(anno.id); this.emit('selected', anno); } } addSignals(LayerAnnotation, 'selected', 'loaded'); export { LayerAnnotation } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"LayerAnnotationImage.js.html":{"id":"LayerAnnotationImage.js.html","title":"Source: LayerAnnotationImage.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: LayerAnnotationImage.js import { LayerAnnotation } from './LayerAnnotation.js' import { Layer } from './Layer.js' import { Raster } from './Raster.js' import { Shader } from './Shader.js' import { LayoutTileImages } from './LayoutTileImages.js'; /** * @typedef {Object} LayerAnnotationImageOptions * @property {string} [url] - URL to the annotations JSON file * @property {string} [path] - Base path for annotation image files * @property {string} [format='vec4'] - Raster format for image data * @extends LayerAnnotationOptions */ /** * LayerAnnotationImage extends LayerAnnotation to provide support for image-based annotations. * Each annotation corresponds to a single tile in the layer, with customizable visibility * and shader-based rendering. * * Features: * - Image-based annotation rendering * - Per-annotation visibility control * - Custom shader support for image processing * - Automatic texture management * - WebGL/WebGL2 compatibility * - Multi-format raster support * * The class handles: * - Image loading and caching * - Texture creation and binding * - Shader setup and compilation * - Tile visibility management * - WebGL state management * * @extends LayerAnnotation * * @example * ```javascript * // Create image annotation layer * const imageAnnoLayer = new OpenLIME.LayerAnnotationImage({ * url: 'annotations.json', * path: './annotation-images/', * format: 'vec4' * }); * * // Configure visibility * imageAnnoLayer.setAllTilesVisible(true); * imageAnnoLayer.setTileVisible(0, false); // Hide first annotation * * // Add to viewer * viewer.addLayer('imageAnnotations', imageAnnoLayer); * ``` */ class LayerAnnotationImage extends LayerAnnotation { /** * Creates a new LayerAnnotationImage instance * @param {LayerAnnotationImageOptions} options - Configuration options * @throws {Error} If path is not specified (warns in console) */ constructor(options) { const url = options.url; if (options.path == null) { console.log(\"WARNING MISSING ANNOTATION PATH, SET TO ./annot/\"); } super(options); const rasterFormat = this.format != null ? this.format : 'vec4'; let initCallback = () =&gt; { // Set Annotation Urls path if (options.path) { this.layout.path = options.path; } else if (url != null) { // Extract path from annotation.json path this.layout.setPathFromUrl(path); } for (let a of this.annotations) { let raster = new Raster({ format: rasterFormat }); this.rasters.push(raster); } console.log(\"Set \" + this.annotations.length + \" annotations into layout\"); this.setupShader(rasterFormat); this.layout.setTileDescriptors(this.annotations); } this.addEvent('loaded', initCallback); } /** * Gets the number of annotations in the layer * @returns {number} Number of annotations */ length() { return this.annotations.length; } /** * Sets visibility for a specific annotation/tile * @param {number} index - Index of the annotation * @param {boolean} visible - Whether the annotation should be visible */ setTileVisible(index, visible) { this.layout.setTileVisible(index, visible); //this.annotations[index].needsUpdate = true; //this.emit('update'); } /** * Sets visibility for all annotations/tiles * @param {boolean} visible - Whether all annotations should be visible */ setAllTilesVisible(visible) { this.layout.setAllTilesVisible(visible); // for(let a of this.annotations) { // a.needsUpdate = true; // } //this.emit('update'); } /** * Renders a specific tile/annotation * @param {Object} tile - Tile object containing texture information * @param {number} index - Index of the tile * @throws {Error} If tile is missing textures * @private */ drawTile(tile, index) { if (tile.missing != 0) throw \"Attempt to draw tile still missing textures\" const idx = tile.index; //coords and texture buffers updated once for all tiles from main draw() call //bind texture of this tile only (each tile corresponds to an image) let gl = this.gl; let id = this.shader.samplers[idx].id; gl.uniform1i(this.shader.samplers[idx].location, idx); gl.activeTexture(gl.TEXTURE0 + idx); gl.bindTexture(gl.TEXTURE_2D, tile.tex[id]); const byteOffset = this.getTileByteOffset(index); gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, byteOffset); } /** * Configures the shader for rendering annotations * @param {string} rasterFormat - Format of the raster data ('vec4', etc) * @private */ setupShader(rasterFormat) { let samplers = []; let N = this.rasters.length; for (let i = 0; i &lt; N; ++i) { samplers.push({ id: i, name: 'kd', type: rasterFormat }); } let shader = new Shader({ 'label': 'Rgb', 'samplers': samplers //[{ id:0, name:'kd', type: rasterFormat }] }); shader.fragShaderSrc = function (gl) { let gl2 = !(gl instanceof WebGLRenderingContext); let str = ` uniform sampler2D kd; ${gl2 ? 'in' : 'varying'} vec2 v_texcoord; vec4 data() { return texture${gl2 ? '' : '2D'}(kd, v_texcoord); } `; return str; }; this.shaders = { 'standard': shader }; this.setShader('standard'); } } Layer.prototype.types['annotation_image'] = (options) =&gt; { return new LayerAnnotationImage(options); } export { LayerAnnotationImage } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"LayerBRDF.js.html":{"id":"LayerBRDF.js.html","title":"Source: LayerBRDF.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: LayerBRDF.js import { Layer } from './Layer.js' import { Raster } from './Raster.js' import { ShaderBRDF } from './ShaderBRDF.js' /** * @typedef {Object} LayerBRDFOptions * @property {Object} channels - Required channels for BRDF rendering * @property {string} channels.kd - URL to diffuse color map (required) * @property {string} channels.ks - URL to specular color map (optional) * @property {string} channels.normals - URL to normal map (required) * @property {string} channels.gloss - URL to glossiness/roughness map (optional) * @property {Object} [colorspaces] - Color space definitions for material properties * @property {('linear'|'srgb')} [colorspaces.kd='linear'] - Color space for diffuse map * @property {('linear'|'srgb')} [colorspaces.ks='linear'] - Color space for specular map * @property {number} [brightness=1.0] - Overall brightness adjustment * @property {number} [gamma=2.2] - Gamma correction value * @property {number[]} [alphaLimits=[0.01, 0.5]] - Range for glossiness/roughness * @property {number[]} [monochromeMaterial=[0.80, 0.79, 0.75]] - RGB color for monochrome rendering * @property {number} [kAmbient=0.1] - Ambient light coefficient * @extends LayerOptions */ /** * LayerBRDF implements real-time BRDF (Bidirectional Reflectance Distribution Function) rendering. * * The BRDF model describes how light reflects off a surface, taking into account: * - Diffuse reflection (rough, matte surfaces) * - Specular reflection (mirror-like reflections) * - Surface normals (microscopic surface orientation) * - Glossiness/roughness (surface micro-structure) * * Features: * - Real-time light direction control * - Multiple material channels support * - Customizable material properties * - Interactive lighting model * - Gamma correction * - Ambient light component * * Technical implementation: * - Uses normal mapping for surface detail * - Supports both linear and sRGB color spaces * - Implements spherical light projection * - Handles multi-channel textures * - GPU-accelerated rendering * * @extends Layer * * @example * ```javascript * // Create BRDF layer with all channels * const brdfLayer = new OpenLIME.LayerBRDF({ * channels: { * kd: 'diffuse.jpg', * ks: 'specular.jpg', * normals: 'normals.jpg', * gloss: 'gloss.jpg' * }, * colorspaces: { * kd: 'srgb', * ks: 'linear' * }, * brightness: 1.2, * gamma: 2.2 * }); * * // Update light direction * brdfLayer.setLight([0.5, 0.5], 500, 'ease-out'); * ``` */ class LayerBRDF extends Layer { /** * Creates a new LayerBRDF instance * @param {LayerBRDFOptions} options - Configuration options * @throws {Error} If required channels (kd, normals) are not provided * @throws {Error} If rasters option is not empty */ constructor(options) { options = Object.assign({ brightness: 1.0, gamma: 2.2, alphaLimits: [0.01, 0.5], monochromeMaterial: [0.80, 0.79, 0.75], kAmbient: 0.1 }, options); super(options); if (Object.keys(this.rasters).length != 0) throw \"Rasters options should be empty!\"; if (!this.channels) throw \"channels option is required\"; if (!this.channels.kd || !this.channels.normals) throw \"kd and normals channels are required\"; if (!this.colorspaces) { console.log(\"LayerBRDF: missing colorspaces: force both to linear\"); this.colorspaces['kd'] = 'linear'; this.colorspaces['ks'] = 'linear'; } let id = 0; let urls = []; let samplers = []; let brdfSamplersMap = { kd: { format: 'vec3', name: 'uTexKd' }, ks: { format: 'vec3', name: 'uTexKs' }, normals: { format: 'vec3', name: 'uTexNormals' }, gloss: { format: 'float', name: 'uTexGloss' } }; for (let c in this.channels) { this.rasters.push(new Raster({ format: brdfSamplersMap[c].format })); samplers.push({ 'id': id, 'name': brdfSamplersMap[c].name }); urls[id] = this.channels[c]; id++; } this.layout.setUrls(urls); this.addControl('light', [0, 0]); // This is a projection to the z=0 plane. let shader = new ShaderBRDF({ 'label': 'Rgb', 'samplers': samplers, 'colorspaces': this.colorspaces, 'brightness': this.brightness, 'gamma': this.gamma, 'alphaLimits': this.alphaLimits, 'monochromeMaterial': this.monochromeMaterial, 'kAmbient': this.kAmbient }); this.shaders['brdf'] = shader; this.setShader('brdf'); } /** * Projects a 2D point onto a sphere surface * Used for converting 2D mouse/touch input to 3D light direction * @param {number[]} p - 2D point [x, y] in range [-1, 1] * @returns {number[]} 3D normalized vector [x, y, z] on sphere surface * @static */ static projectToSphere(p) { let px = p[0]; let py = p[1]; let r2 = px * px + py * py; if (r2 &gt; 1.0) { let r = Math.sqrt(r2); px /= r; py /= r; r2 = 1.0; } let z = Math.sqrt(1 - r2); return [px, py, z]; } /** * Projects a 2D point onto a flattened sphere using SGI trackball algorithm. * This provides more intuitive light control by avoiding acceleration near edges. * Based on SIGGRAPH 1988 paper on SGI trackball implementation. * * @param {number[]} p - 2D point [x, y] in range [-1, 1] * @returns {number[]} 3D normalized vector [x, y, z] on flattened sphere * @static */ static projectToFlattenedSphere(p) { const R = 0.8; const R2 = R * R; const RR = R * Math.SQRT1_2; const RR2 = RR * RR; let px = Math.min(Math.max(p[0], -1.0), 1.0); let py = Math.min(Math.max(p[1], -1.0), 1.0); let z = 0.0; let d2 = px * px + py * py; if (d2 &lt; RR2) { // Inside sphere z = Math.sqrt(R2 - d2); } else { // On hyperbola z = RR2 / Math.sqrt(d2); } let r = Math.sqrt(d2 + z * z); return [px / r, py / r, z / r]; } /** * Sets the light direction with optional animation * @param {number[]} light - 2D vector [x, y] representing light direction * @param {number} [dt] - Animation duration in milliseconds * @param {string} [easing='linear'] - Animation easing function */ setLight(light, dt, easing = 'linear') { this.setControl('light', light, dt, easing); } /** * Updates light control interpolation and shader uniforms * @returns {boolean} Whether all interpolations are complete * @override * @private */ interpolateControls() { // FIXME Wrong normalization let done = super.interpolateControls(); // let light = LayerBRDF.projectToSphere(this.controls['light'].current.value); let light = LayerBRDF.projectToFlattenedSphere(this.controls['light'].current.value); this.shader.setLight([light[0], light[1], light[2], 0]); return done; } } /** * Register this layer type with the Layer factory * @type {Function} * @private */ Layer.prototype.types['brdf'] = (options) =&gt; { return new LayerBRDF(options); } export { LayerBRDF } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"LayerCombiner.js.html":{"id":"LayerCombiner.js.html","title":"Source: LayerCombiner.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: LayerCombiner.js import { Layer } from './Layer.js' /** * @typedef {Object} LayerCombinerOptions * @property {Layer[]} layers - Array of layers to be combined (required) * @property {Object.&lt;string, Shader&gt;} [shaders] - Map of available shaders * @property {string} [type='combiner'] - Must be 'combiner' when using Layer factory * @property {boolean} [visible=true] - Whether combined output is visible * @extends LayerOptions */ /** * LayerCombiner provides functionality to combine multiple layers using framebuffer operations * and custom shaders. It enables complex visual effects by compositing layers in real-time * using GPU-accelerated rendering. * * Features: * - Real-time layer composition * - Custom shader-based effects * - Framebuffer management * - Dynamic texture allocation * - Resolution-independent rendering * - GPU-accelerated compositing * * Use Cases: * - Layer blending and mixing * - Image comparison tools * - Lens effects (see {@link LayerLens}) * - Custom visual effects * - Multi-layer compositing * * Technical Details: * - Creates framebuffers for each input layer * - Manages WebGL textures and resources * - Supports dynamic viewport resizing * - Handles shader-based composition * - Maintains proper resource cleanup * * @extends Layer * * @example * ```javascript * // Create two base layers * const baseLayer = new OpenLIME.Layer({ * type: 'image', * url: 'base.jpg' * }); * * const overlayLayer = new OpenLIME.Layer({ * type: 'image', * url: 'overlay.jpg' * }); * * // Create combiner with custom shader * const combiner = new OpenLIME.Layer({ * type: 'combiner', * layers: [baseLayer, overlayLayer], * visible: true * }); * * // Set up blend shader * const shader = new OpenLIME.ShaderCombiner(); * shader.mode = 'blend'; * combiner.shaders = { 'standard': shader }; * combiner.setShader('standard'); * * // Add to viewer * viewer.addLayer('combined', combiner); * ``` */ class LayerCombiner extends Layer { /** * Creates a new LayerCombiner instance * @param {LayerCombinerOptions} options - Configuration options * @throws {Error} If rasters option is not empty (rasters should be defined in source layers) */ constructor(options) { super(options); if (Object.keys(this.rasters).length != 0) throw \"Rasters options should be empty!\"; /* let shader = new ShaderCombiner({ 'label': 'Combiner', 'samplers': [{ id:0, name:'source1', type:'vec3' }, { id:1, name:'source2', type:'vec3' }], }); this.shaders = {'standard': shader }; this.setShader('standard'); */ //todo if layers check for importjson this.textures = []; this.framebuffers = []; this.status = 'ready'; } /** * Renders the combined layers using framebuffer operations * Handles framebuffer creation, layer rendering, and final composition * @param {Transform} transform - Current view transform * @param {Object} viewport - Current viewport parameters * @param {number} viewport.x - Viewport X position * @param {number} viewport.y - Viewport Y position * @param {number} viewport.dx - Viewport width * @param {number} viewport.dy - Viewport height * @param {number} viewport.w - Total width * @param {number} viewport.h - Total height * @throws {Error} If shader is not specified * @private */ draw(transform, viewport) { for (let layer of this.layers) if (layer.status != 'ready') return; if (!this.shader) throw \"Shader not specified!\"; let w = viewport.dx; let h = viewport.dy; if (!this.framebuffers.length || this.layout.width != w || this.layout.height != h) { this.deleteFramebuffers(); this.layout.width = w; this.layout.height = h; this.createFramebuffers(); } let gl = this.gl; var b = [0, 0, 0, 0]; gl.clearColor(b[0], b[1], b[2], b[3]); //TODO optimize: render to texture ONLY if some parameters change! //provider di textures... max memory and reference counting. for (let i = 0; i &lt; this.layers.length; i++) { gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffers[i]); gl.clear(gl.COLOR_BUFFER_BIT); this.layers[i].draw(transform, { x: 0, y: 0, dx: w, dy: h, w: w, h: h }); gl.bindFramebuffer(gl.FRAMEBUFFER, null); } this.prepareWebGL(); for (let i = 0; i &lt; this.layers.length; i++) { gl.uniform1i(this.shader.samplers[i].location, i); gl.activeTexture(gl.TEXTURE0 + i); gl.bindTexture(gl.TEXTURE_2D, this.textures[i]); } this.updateTileBuffers( new Float32Array([-1, -1, 0, -1, 1, 0, 1, 1, 0, 1, -1, 0]), new Float32Array([0, 0, 0, 1, 1, 1, 1, 0])); gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0); } /** * Creates framebuffers and textures for layer composition * Initializes WebGL resources for each input layer * @private */ createFramebuffers() { let gl = this.gl; for (let i = 0; i &lt; this.layers.length; i++) { //TODO for thing like lens, we might want to create SMALLER textures for some layers. const texture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, texture); const level = 0; const internalFormat = gl.RGBA; const border = 0; const format = gl.RGBA; const type = gl.UNSIGNED_BYTE; gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, this.layout.width, this.layout.height, border, format, type, null); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); const framebuffer = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0); gl.bindFramebuffer(gl.FRAMEBUFFER, null); this.textures[i] = texture; this.framebuffers[i] = framebuffer; } } //TODO release textures and framebuffers /** * Cleans up framebuffer and texture resources * Should be called when resizing or destroying the layer * @private */ deleteFramebuffers() { } /** * Computes combined bounding box of all input layers * @returns {BoundingBox} Combined bounding box * @override * @private */ boundingBox() { // Combiner ask the combination of all its children boxes // keeping the hidden, because they could be hidden, but revealed by the combiner const discardHidden = false; let result = Layer.computeLayersBBox(this.layers, discardHidden); if (this.transform != null &amp;&amp; this.transform != undefined) { result = this.transform.transformBox(result); } return result; } /** * Computes minimum scale across all input layers * @returns {number} Combined scale factor * @override * @private */ scale() { //Combiner ask the scale of all its children //keeping the hidden, because they could be hidden, but revealed by the combiner const discardHidden = false; let scale = Layer.computeLayersMinScale(this.layers, discardHidden); scale *= this.transform.z; return scale; } } /** * Register this layer type with the Layer factory * @type {Function} * @private */ Layer.prototype.types['combiner'] = (options) =&gt; { return new LayerCombiner(options); } export { LayerCombiner } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"LayerDstretch.js.html":{"id":"LayerDstretch.js.html","title":"Source: LayerDstretch.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: LayerDstretch.js import { Layer } from './Layer.js'; import { LayerImage } from './LayerImage.js' import { ShaderDstretch } from './ShaderDstretch.js'; import { Raster } from './Raster.js'; /** * @typedef {Object} LayerDStretchOptions * @property {string} url - URL to the image to be processed (required) * @property {number[]} [eulerRotation=[0,0,0]] - Initial Euler rotation angles * @property {number} [worldRotation=0] - Global rotation offset for canvas/layer * @extends LayerImageOptions */ /** * LayerDStretch implements the DStretch (Decorrelation Stretch) algorithm for image enhancement. * This technique is particularly useful in archaeology and rock art documentation for revealing * faint pictographs and petroglyphs. * * DStretch works by: * 1. Converting RGB colors to a decorrelated color space * 2. Equalizing and stretching the color distributions * 3. Converting back to RGB for display * * Features: * - Real-time image enhancement * - Interactive control of enhancement parameters * - Automatic color statistics computation * - Support for large images through tiling * - GPU-accelerated processing * - Light direction control * * Technical Implementation: * - Uses Principal Component Analysis (PCA) for color decorrelation * - Supports custom transformation matrices * - Implements dynamic sampling for color statistics * - Handles WebGL texture management * - Supports progressive loading * * @extends LayerImage * * @example * ```javascript * // Create DStretch layer * const dstretchLayer = new OpenLIME.Layer({ * type: 'dstretch', * url: 'image.jpg', * visible: true * }); * * // Add to viewer * viewer.addLayer('enhanced', dstretchLayer); * * // Adjust enhancement parameters * dstretchLayer.setLight([0.5, 0.3], 500); // Animate to new enhancement * ``` */ class LayerDstretch extends LayerImage { /** * Creates a new LayerDStretch instance * @param {LayerDStretchOptions} options - Configuration options * @throws {Error} If url option is not provided */ constructor(options) { super(options); if (!this.url) throw \"Url option is required\"; this.shaders['dstretch'] = new ShaderDstretch(); this.setShader('dstretch'); this.eulerRotation = [0, 0, 0]; this.worldRotation = 0; //if the canvas or ethe layer rotate, light direction neeeds to be rotated too. if (this.url) this.loadJson(); this.addControl('light', [0, 0]); } /** * Sets the enhancement parameters through a light-like interface * @param {number[]} value - Two values controlling the enhancement transformation * @param {number} [dt] - Animation duration in milliseconds * @fires Layer#update */ setLight(value, dt) { this.setControl('light', value, dt); this.eulerRotation[0] = Math.PI * this.getControl('light').current.value[0];//this.controls['light'].current[0]; this.eulerRotation[1] = Math.PI * this.getControl('light').current.value[1];//this.controls['light'].current[1]; this.shader.updateRotationMatrix(this.eulerRotation); this.emit('update'); } /** * Loads DStretch configuration and image data * Attempts to load a .dstretch companion file with pre-computed statistics * Falls back to runtime sampling if companion file is not found * @private */ loadJson() { (async () =&gt; { let json try { let dstretchUrl = this.url.substring(0, this.url.lastIndexOf(\".\")) + \".dstretch\"; let response = await fetch(dstretchUrl); console.log(response.ok); json = await response.json(); } catch (error) { json = { transformation: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1], samples: [] }; this.rasters[0].loadTexture = this.loadAndSampleTexture.bind(this); } this.layout.setUrls([this.url]); this.shader.init(json); })(); } /** * Renders the enhanced image * @param {Transform} transform - Current view transform * @param {Object} viewport - Current viewport parameters * @returns {boolean} Whether the render completed successfully * @override * @private */ draw(transform, viewport) { this.shader.setMinMax(); return super.draw(transform, viewport); } /** * Loads texture and performs color sampling if needed * Samples the image in a grid pattern to compute color statistics * @param {WebGLRenderingContext} gl - WebGL context * @param {HTMLImageElement} img - Source image * @returns {WebGLTexture} Created texture * @private */ loadAndSampleTexture(gl, img) { this.rasters[0].width = img.width; this.rasters[0].height = img.height; let tex = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, tex); gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); //_MIPMAP_LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img); // Sample the texture // Temporarily print the texture on a canvas let canvas = document.createElement(\"canvas\"); let context = canvas.getContext(\"2d\"); canvas.setAttribute(\"width\", img.width); canvas.setAttribute(\"height\", img.height); context.drawImage(img, 0, 0, img.width, img.height); // Get the data and sample the texture let imageData = context.getImageData(0, 0, img.width, img.height).data; let samples = []; let rowSkip = Math.floor(img.height / 32); let colSkip = Math.floor(img.width / 32); console.log(rowSkip, colSkip); for (let i = 0; i &lt; imageData.length; i += 4) { let row = Math.floor((i / 4) / img.width); let col = Math.floor(i / 4) % img.width; if (row % rowSkip == 0 &amp;&amp; col % colSkip == 0) samples.push([imageData[i], imageData[i + 1], imageData[i + 2]]); } this.shader.samples = samples; this.shader.setMinMax(); return tex; } } /** * Register this layer type with the Layer factory * @type {Function} * @private */ Layer.prototype.types['dstretch'] = (options) =&gt; { return new LayerDstretch(options); } export { LayerDstretch } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"LayerImage.js.html":{"id":"LayerImage.js.html","title":"Source: LayerImage.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: LayerImage.js import { Layer } from './Layer.js' import { Raster } from './Raster.js' import { Shader } from './Shader.js' /** * @typedef {Object} LayerImageOptions * @property {string} url - URL of the image to display (required) * @property {string|Layout} [layout='image'] - Layout format for image display * @property {string} [format='vec4'] - Image data format for WebGL processing * @property {string} [type='image'] - Must be 'image' when using Layer factory * @extends LayerOptions */ /** * LayerImage provides fundamental image rendering capabilities in OpenLIME. * It serves as both a standalone layer for basic image display and a foundation * for more complex image-based layers. * * Features: * - Single image rendering * - WebGL-based display * - Automatic format handling * - Layout system integration * - Shader-based processing * * Technical Details: * - Uses WebGL textures for image data * - Supports various color formats (vec3, vec4) * - Integrates with OpenLIME layout system * - Manages raster data automatically * - Provides standard RGB shader by default * * @extends Layer * * @example * ```javascript * // Direct instantiation * const imageLayer = new OpenLIME.LayerImage({ * url: 'image.jpg', * layout: 'image', * format: 'vec4' * }); * viewer.addLayer('main', imageLayer); * * // Using Layer factory * const factoryLayer = new OpenLIME.Layer({ * type: 'image', * url: 'image.jpg', * layout: 'image' * }); * viewer.addLayer('factory', factoryLayer); * ``` */ class LayerImage extends Layer { /** * Creates a new LayerImage instance * @param {LayerImageOptions} options - Configuration options * @throws {Error} If rasters options is not empty (should be auto-configured) * @throws {Error} If no URL is provided and layout has no URLs */ constructor(options) { super(options); if (Object.keys(this.rasters).length != 0) throw \"Rasters options should be empty!\"; if (this.url) this.layout.setUrls([this.url]); else if (this.layout.urls.length == 0) throw \"Missing options.url parameter\"; const rasterFormat = this.format != null ? this.format : 'vec4'; let raster = new Raster({ format: rasterFormat }); //FIXME select format for GEO stuff this.rasters.push(raster); let shader = new Shader({ 'label': 'Rgb', 'samplers': [{ id: 0, name: 'kd', type: rasterFormat }] }); this.shaders = { 'standard': shader }; this.setShader('standard'); } } /** * Register this layer type with the Layer factory * @type {Function} * @private */ Layer.prototype.types['image'] = (options) =&gt; { return new LayerImage(options); } export { LayerImage } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"LayerLens.js.html":{"id":"LayerLens.js.html","title":"Source: LayerLens.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: LayerLens.js import { CoordinateSystem } from './CoordinateSystem.js'; import { Layer } from './Layer.js' import { LayerCombiner } from './LayerCombiner.js' import { ShaderLens } from './ShaderLens.js' /** * @typedef {Object} LayerLensOptions * @property {boolean} [overlay=true] - Whether the lens renders as an overlay * @property {number} [radius=100] - Initial lens radius in pixels * @property {number[]} [borderColor=[0.078, 0.078, 0.078, 1]] - RGBA border color * @property {number} [borderWidth=12] - Border width in pixels * @property {boolean} [borderEnable=false] - Whether to show lens border * @property {Object} [dashboard=null] - Dashboard UI component for lens control * @property {Camera} camera - Camera instance (required) * @extends LayerCombinerOptions */ /** * LayerLens implements a magnifying lens effect that can display content from one or two layers. * It provides an interactive lens that can be moved and resized, showing different layer content * inside and outside the lens area. * * Features: * - Interactive lens positioning and sizing * - Support for base and overlay layers * - Animated transitions * - Customizable border appearance * - Dashboard UI integration * - Optimized viewport rendering * * Technical Details: * - Uses framebuffer composition for layer blending * - Implements viewport optimization for performance * - Handles coordinate transformations between systems * - Supports animated parameter changes * - Manages WebGL resources efficiently * * @extends LayerCombiner * * @example * ```javascript * // Create lens with base layer * const lens = new OpenLIME.LayerLens({ * camera: viewer.camera, * radius: 150, * borderEnable: true, * borderColor: [0, 0, 0, 1] * }); * * // Set layers * lens.setBaseLayer(baseLayer); * lens.setOverlayLayer(overlayLayer); * * // Animate lens position * lens.setCenter(500, 500, 1000, 'ease-out'); * * // Add to viewer * viewer.addLayer('lens', lens); * ``` */ class LayerLens extends LayerCombiner { /** * Creates a new LayerLens instance * @param {LayerLensOptions} options - Configuration options * @throws {Error} If camera is not provided */ constructor(options) { options = Object.assign({ overlay: true, radius: 100, borderColor: [0.078, 0.078, 0.078, 1], borderWidth: 12, borderEnable: false, dashboard: null, }, options); super(options); if (!this.camera) { console.log(\"Missing camera\"); throw \"Missing Camera\" } // Shader lens currently handles up to 2 layers let shader = new ShaderLens(); if (this.layers.length == 2) shader.setOverlayLayerEnabled(true); //FIXME Is it a mode? Control? this.shaders['lens'] = shader; this.setShader('lens'); this.addControl('center', [0, 0]); this.addControl('radius', [this.radius, 0]); this.addControl('borderColor', this.borderColor); this.addControl('borderWidth', [this.borderWidth]); this.oldRadius = -9999; this.oldCenter = [-9999, -9999]; this.useGL = true; if (this.dashboard) this.dashboard.lensLayer = this; } /** * Sets layer visibility and updates dashboard if present * @param {boolean} visible - Whether layer should be visible * @override */ setVisible(visible) { if (this.dashboard) { if (visible) { this.dashboard.container.style.display = 'block'; } else { this.dashboard.container.style.display = 'none'; } } super.setVisible(visible); } /** * Removes the overlay layer, returning to single layer mode */ removeOverlayLayer() { this.layers.length = 1; this.shader.setOverlayLayerEnabled(false); } /** * Sets the base layer (shown outside lens) * @param {Layer} layer - Base layer instance * @fires Layer#update */ setBaseLayer(l) { this.layers[0] = l; this.emit('update'); } /** * Sets the overlay layer (shown inside lens) * @param {Layer} layer - Overlay layer instance */ setOverlayLayer(l) { this.layers[1] = l; this.layers[1].setVisible(true); this.shader.setOverlayLayerEnabled(true); this.regenerateFrameBuffers(); } /** * Sets the overlay layer (shown inside lens) * @param {Layer} layer - Overlay layer instance */ regenerateFrameBuffers() { // Regenerate frame buffers const w = this.layout.width; const h = this.layout.height; this.deleteFramebuffers(); this.layout.width = w; this.layout.height = h; this.createFramebuffers(); } /** * Sets lens radius with optional animation * @param {number} radius - New radius in pixels * @param {number} [delayms=100] - Animation duration * @param {string} [easing='linear'] - Animation easing function */ setRadius(r, delayms = 100, easing = 'linear') { this.setControl('radius', [r, 0], delayms, easing); } /** * Gets current lens radius * @returns {number} Current radius in pixels */ getRadius() { return this.controls['radius'].current.value[0]; } /** * Sets lens center position with optional animation * @param {number} x - X coordinate in scene space * @param {number} y - Y coordinate in scene space * @param {number} [delayms=100] - Animation duration * @param {string} [easing='linear'] - Animation easing function */ setCenter(x, y, delayms = 100, easing = 'linear') { this.setControl('center', [x, y], delayms, easing); } /** * Gets current lens center position * @returns {{x: number, y: number}} Center position in scene coordinates */ getCurrentCenter() { const p = this.controls['center'].current.value; return { x: p[0], y: p[1] }; } /** * Gets target lens position for ongoing animation * @returns {{x: number, y: number}} Target position in scene coordinates */ getTargetCenter() { const p = this.controls['center'].target.value; return { x: p[0], y: p[1] }; } /** * Gets current border color * @returns {number[]} RGBA color array */ getBorderColor() { return this.controls['borderColor'].current.value; } /** * Gets current border width * @returns {number} Border width in pixels */ getBorderWidth() { return this.controls['borderWidth'].current.value[0]; } /** * Renders the lens effect * @param {Transform} transform - Current view transform * @param {Object} viewport - Current viewport * @returns {boolean} Whether all animations are complete * @override * @private */ draw(transform, viewport) { let done = this.interpolateControls(); // Update dashboard size &amp; pos if (this.dashboard) { const c = this.getCurrentCenter(); const r = this.getRadius(); this.dashboard.update(c.x, c.y, r); this.oldCenter = c; this.oldRadius = r; } // const vlens = this.getLensInViewportCoords(transform, viewport); // this.shader.setLensUniforms(vlens, [viewport.w, viewport.h], this.borderColor); // this.emit('draw'); // super.draw(transform, viewport); for (let layer of this.layers) if (layer.status != 'ready') return false; if (!this.shader) throw \"Shader not specified!\"; let gl = this.gl; // Draw on a restricted viewport around the lens, to lower down the number of required tiles let lensViewport = this.getLensViewport(transform, viewport); // If an overlay is present, merge its viewport with the lens one let overlayViewport = this.getOverlayLayerViewport(transform, viewport); if (overlayViewport != null) { lensViewport = this.joinViewports(lensViewport, overlayViewport); } gl.viewport(lensViewport.x, lensViewport.y, lensViewport.dx, lensViewport.dy); // Keep the framwbuffer to the window size in order to avoid changing at each scale event if (!this.framebuffers.length || this.layout.width != viewport.w || this.layout.height != viewport.h) { this.deleteFramebuffers(); this.layout.width = viewport.w; this.layout.height = viewport.h; this.createFramebuffers(); } var b = [0, 0, 0, 0]; gl.clearColor(b[0], b[1], b[2], b[3]); // Draw the layers only within the viewport enclosing the lens for (let i = 0; i &lt; this.layers.length; i++) { gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffers[i]); gl.clear(gl.COLOR_BUFFER_BIT); this.layers[i].draw(transform, lensViewport); gl.bindFramebuffer(gl.FRAMEBUFFER, null); } // Set in the lensShader the proper lens position wrt the window viewport const vl = this.getLensInViewportCoords(transform, viewport); this.shader.setLensUniforms(vl, [viewport.w, viewport.h], this.getBorderColor(), this.borderEnable); this.prepareWebGL(); // Bind all textures and combine them with the shaderLens for (let i = 0; i &lt; this.layers.length; i++) { gl.uniform1i(this.shader.samplers[i].location, i); gl.activeTexture(gl.TEXTURE0 + i); gl.bindTexture(gl.TEXTURE_2D, this.textures[i]); } // Get texture coords of the lensViewport with respect to the framebuffer sz const lx = lensViewport.x / lensViewport.w; const ly = lensViewport.y / lensViewport.h; const hx = (lensViewport.x + lensViewport.dx) / lensViewport.w; const hy = (lensViewport.y + lensViewport.dy) / lensViewport.h; this.updateTileBuffers( new Float32Array([-1, -1, 0, -1, 1, 0, 1, 1, 0, 1, -1, 0]), new Float32Array([lx, ly, lx, hy, hx, hy, hx, ly])); gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0); // Restore old viewport gl.viewport(viewport.x, viewport.x, viewport.dx, viewport.dy); return done; } /** * Calculates viewport region affected by lens * @param {Transform} transform - Current view transform * @param {Object} viewport - Current viewport * @returns {Object} Viewport specification for lens region * @private */ getLensViewport(transform, viewport) { const lensC = this.getCurrentCenter(); const l = CoordinateSystem.fromSceneToViewport(lensC, this.camera, this.useGL); const r = this.getRadius() * transform.z; return { x: Math.floor(l.x - r) - 1, y: Math.floor(l.y - r) - 1, dx: Math.ceil(2 * r) + 2, dy: Math.ceil(2 * r) + 2, w: viewport.w, h: viewport.h }; } /** * Calculates viewport region for overlay layer * @param {Transform} transform - Current view transform * @param {Object} viewport - Current viewport * @returns {Object|null} Viewport specification for overlay or null * @private */ getOverlayLayerViewport(transform, viewport) { let result = null; if (this.layers.length == 2) { // Get overlay projected viewport let bbox = this.layers[1].boundingBox(); const p0v = CoordinateSystem.fromSceneToViewport({ x: bbox.xLow, y: bbox.yLow }, this.camera, this.useGL); const p1v = CoordinateSystem.fromSceneToViewport({ x: bbox.xHigh, y: bbox.yHigh }, this.camera, this.useGL); // Intersect with window viewport const x0 = Math.min(Math.max(0, Math.floor(p0v.x)), viewport.w); const y0 = Math.min(Math.max(0, Math.floor(p0v.y)), viewport.h); const x1 = Math.min(Math.max(0, Math.ceil(p1v.x)), viewport.w); const y1 = Math.min(Math.max(0, Math.ceil(p1v.y)), viewport.h); const width = x1 - x0; const height = y1 - y0; result = { x: x0, y: y0, dx: width, dy: height, w: viewport.w, h: viewport.h }; } return result; } /** * Combines two viewport regions * @param {Object} v0 - First viewport * @param {Object} v1 - Second viewport * @returns {Object} Combined viewport encompassing both regions * @private */ joinViewports(v0, v1) { const xm = Math.min(v0.x, v1.x); const xM = Math.max(v0.x + v0.dx, v1.x + v1.dx); const ym = Math.min(v0.y, v1.y); const yM = Math.max(v0.y + v0.dy, v1.y + v1.dy); const width = xM - xm; const height = yM - ym; return { x: xm, y: ym, dx: width, dy: height, w: v0.w, h: v0.h }; } /** * Converts lens parameters to viewport coordinates * @param {Transform} transform - Current view transform * @param {Object} viewport - Current viewport * @returns {number[]} [centerX, centerY, radius, borderWidth] in viewport coordinates * @private */ getLensInViewportCoords(transform, viewport) { const lensC = this.getCurrentCenter(); const c = CoordinateSystem.fromSceneToViewport(lensC, this.camera, this.useGL); const r = this.getRadius(); return [c.x, c.y, r * transform.z, this.getBorderWidth()]; } } /** * Register this layer type with the Layer factory * @type {Function} * @private */ Layer.prototype.types['lens'] = (options) =&gt; { return new LayerLens(options); } export { LayerLens } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"LayerMaskedImage.js.html":{"id":"LayerMaskedImage.js.html","title":"Source: LayerMaskedImage.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: LayerMaskedImage.js import { Layer } from './Layer.js'; import { Raster } from './Raster.js' import { Shader } from './Shader.js' /** * @typedef {Object} LayerMaskedImageOptions * @property {string} url - URL of the masked image to display (required) * @property {string} [format='vec4'] - Image data format * @property {string} [type='maskedimage'] - Must be 'maskedimage' when using Layer factory * @extends LayerOptions */ /** * LayerMaskedImage provides specialized handling for masked scalar images with bilinear interpolation. * It implements custom texture sampling and masking operations through WebGL shaders. * * Features: * - Custom scalar image handling * - Bilinear interpolation with masking * - WebGL shader-based processing * - Support for both WebGL 1 and 2 * - Nearest-neighbor texture filtering * - Masked value visualization * * Technical Details: * - Uses LUMINANCE format for single-channel data * - Implements custom bilinear sampling in shader * - Handles mask values through alpha channel * - Supports value rescaling (255.0/254.0 scale with -1.0/254.0 bias) * - Uses custom texture parameters for proper sampling * * Shader Implementation: * - Performs bilinear interpolation in shader * - Handles masked values (0 = masked) * - Implements value rescaling * - Provides visualization of masked areas (in red) * - Uses texelFetch for precise sampling * * @extends Layer * * @example * ```javascript * // Create masked image layer * const maskedLayer = new OpenLIME.Layer({ * type: 'maskedimage', * url: 'masked-data.png', * format: 'vec4' * }); * * // Add to viewer * viewer.addLayer('masked', maskedLayer); * ``` */ class LayerMaskedImage extends Layer { /** * Creates a new LayerMaskedImage instance * @param {LayerMaskedImageOptions} options - Configuration options * @throws {Error} If rasters options is not empty * @throws {Error} If url is not provided and layout has no URLs */ constructor(options) { super(options); if (Object.keys(this.rasters).length != 0) throw \"Rasters options should be empty!\"; if (this.url) { this.layout.setUrls([this.url]); } else if (this.layout.urls.length == 0) throw \"Missing options.url parameter\"; const rasterFormat = this.format != null ? this.format : 'vec4'; let raster = new Raster({ format: rasterFormat }); //FIXME select format for GEO stuff this.rasters.push(raster); let shader = new Shader({ 'label': 'Rgb', 'samplers': [{ id: 0, name: 'kd', type: rasterFormat }] }); shader.fragShaderSrc = function (gl) { let gl2 = !(gl instanceof WebGLRenderingContext); let str = ` uniform sampler2D kd; ${gl2 ? 'in' : 'varying'} vec2 v_texcoord; vec2 bilinear_masked_scalar(sampler2D field, vec2 uv) { vec2 px = uv*tileSize; ivec2 iuv = ivec2(floor( px )); vec2 fuv = fract(px); int i0 = iuv.x; int j0 = iuv.y; int i1 = i0+1&gt;=int(tileSize.x) ? i0 : i0+1; int j1 = j0+1&gt;=int(tileSize.y) ? j0 : j0+1; float f00 = texelFetch(field, ivec2(i0, j0), 0).r; float f10 = texelFetch(field, ivec2(i1, j0), 0).r; float f01 = texelFetch(field, ivec2(i0, j1), 0).r; float f11 = texelFetch(field, ivec2(i1, j1), 0).r; // FIXME Compute weights of valid vec2 result_masked_scalar; result_masked_scalar.y = f00*f01*f10*f11; result_masked_scalar.y = result_masked_scalar.y &gt; 0.0 ? 1.0 : 0.0; const float scale = 255.0/254.0; const float bias = -1.0/254.0; result_masked_scalar.x = mix(mix(f00, f10, fuv.x), mix(f01, f11, fuv.x), fuv.y); result_masked_scalar.x = result_masked_scalar.y * (scale * result_masked_scalar.x + bias); return result_masked_scalar; } vec4 data() { vec2 masked_scalar = bilinear_masked_scalar(kd, v_texcoord); return masked_scalar.y &gt; 0.0 ? vec4(masked_scalar.x, masked_scalar.x, masked_scalar.x, masked_scalar.y) : vec4(1.0, 0.0, 0.0, masked_scalar.y); } `; return str; }; this.shaders = { 'scalarimage': shader }; this.setShader('scalarimage'); this.rasters[0].loadTexture = this.loadTexture.bind(this); //this.layout.setUrls([this.url]); } /** * Renders the masked image * @param {Transform} transform - Current view transform * @param {Object} viewport - Current viewport * @returns {boolean} Whether render completed successfully * @override * @private */ draw(transform, viewport) { return super.draw(transform, viewport); } /** * Custom texture loader for masked images * Sets up proper texture parameters for scalar data * * @param {WebGLRenderingContext|WebGL2RenderingContext} gl - WebGL context * @param {HTMLImageElement} img - Source image * @returns {WebGLTexture} Created texture * @private */ loadTexture(gl, img) { this.rasters[0].width = img.width; this.rasters[0].height = img.height; var tex = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, tex); gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); //_MIPMAP_LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); // gl.texImage2D(gl.TEXTURE_2D, 0, gl.R16UI, gl.R16UI, gl.UNSIGNED_SHORT, img); gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE, gl.LUMINANCE, gl.UNSIGNED_BYTE, img); return tex; } } /** * Register this layer type with the Layer factory * @type {Function} * @private */ Layer.prototype.types['maskedimage'] = (options) =&gt; { return new LayerMaskedImage(options); } export { LayerMaskedImage } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"LayerNeuralRTI.js.html":{"id":"LayerNeuralRTI.js.html","title":"Source: LayerNeuralRTI.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: LayerNeuralRTI.js import { Layer } from './Layer.js' import { Raster } from './Raster.js' import { Layout } from './Layout.js' import { Transform } from './Transform.js' import { Shader } from './Shader.js' import { ShaderNeural } from './ShaderNeural.js' /** * @typedef {Object} LayerNeuralRTIOptions * @property {string} url - URL to the Neural RTI configuration JSON * @property {Layout} layout - Layout system for image loading * @property {number} [convergenceSpeed=1.2] - Speed of quality convergence * @property {number} [maxTiles=40] - Maximum number of tiles to process * @property {string} [colorspace='rgb'] - Color space for processing * @extends LayerOptions */ /** * LayerNeuralRTI implements real-time Neural Reflectance Transformation Imaging. * This layer uses a neural network to perform real-time relighting of images, * offering improved quality and performance compared to traditional RTI approaches. * * Features: * - Neural network-based relighting * - Adaptive quality scaling * - Frame rate optimization * - Progressive refinement * - Multi-plane texture support * - WebGL acceleration * * Technical Details: * - Uses 3-layer neural network * - Supports multiple color spaces * - Implements adaptive tile processing * - Handles dynamic quality adjustment * - Manages frame buffer operations * - Coordinates light transformations * * Performance Optimizations: * - Dynamic resolution scaling * - FPS-based quality adjustment * - Progressive refinement system * - Tile caching * - Batch processing * * @extends Layer * * @example * ```javascript * // Create Neural RTI layer * const neuralRTI = new OpenLIME.Layer({ * type: 'neural', * url: 'config.json', * layout: 'deepzoom', * convergenceSpeed: 1.2, * maxTiles: 40 * }); * * // Add to viewer * viewer.addLayer('rti', neuralRTI); * * // Change light direction * neuralRTI.setLight([0.5, 0.3], 1000); * ``` */ class LayerNeuralRTI extends Layer { /** * Creates a new LayerNeuralRTI instance * @param {LayerNeuralRTIOptions} options - Configuration options */ constructor(options) { super(options || {}); this.currentRelightFraction = 1.0; //(min: 0, max 1) this.maxTiles = 40; this.relighted = false; this.convergenceSpeed = 1.2; this.addControl('light', [0, 0]); this.worldRotation = 0; //if the canvas or ethe layer rotate, light direction neeeds to be rotated too. let textureUrls = [ null, this.layout.imageUrl(this.url, 'plane_1'), this.layout.imageUrl(this.url, 'plane_2'), this.layout.imageUrl(this.url, 'plane_3'), ]; this.layout.setUrls(textureUrls); for (let url of textureUrls) { let raster = new Raster({ format: 'vec3' }); this.rasters.push(raster); } this.imageShader = new Shader({ 'label': 'Rgb', 'samplers': [{ id: 0, name: 'kd', type: 'vec3', load: false }] }); this.neuralShader = new ShaderNeural(); this.shaders = { 'standard': this.imageShader, 'neural': this.neuralShader }; this.setShader('neural'); this.neuralShader.setLight([0, 0]); (async () =&gt; { await this.loadNeural(this.url); })(); } /** * Sets light direction with optional animation * @param {number[]} light - Light direction vector [x, y] * @param {number} [dt] - Animation duration in milliseconds */ setLight(light, dt) { this.setControl('light', light, dt); } /** @ignore */ loadTile(tile, callback) { this.shader = this.neuralShader; super.loadTile(tile, callback); } /** * Loads neural network configuration and weights * @param {string} url - URL to configuration JSON * @private * @async */ async loadNeural(url) { await this.initialize(url); } /** * Initializes neural network parameters * @param {string} json_url - URL to configuration * @private * @async */ async initialize(json_url) { const info = await this.loadJSON(json_url); this.max = info.max.flat(1); this.min = info.min.flat(1); this.width = info.width; this.height = info.height; let parameters = {}; for (let i = 0; i &lt; 3; i++) { let key = 'layer' + (i + 1); parameters[key + '_weights'] = info.weights[i];//(await this.loadJSON(data_path + \"/parameters/\" + w + \"_weights.json\")).flat(1); parameters[key + '_biases'] = info.biases[i]; //(await this.loadJSON(data_path + \"/parameters/\" + w + \"_biases.json\")).flat(1); } for (const [name, value] of Object.entries(parameters)) this.neuralShader.setUniform(name, value); //this.neuralShader.updateUniforms(gl, this.neuralShader.program); this.neuralShader.setUniform('min', this.min); this.neuralShader.setUniform('max', this.max); // make the fragment shader flexible to different network configurations let n = info.samples; let c = info.planes + 2; while (n % 4 != 0) n++; while (c % 4 != 0) c++; this.neuralShader.setShaderInfo(info.samples, info.planes, n, c, info.colorspace); this.networkParameters = parameters; } /** @ignore */ setCoords() { let gl = this.gl; let coords = new Float32Array([-1, -1, -1, 1, 1, 1, 1, -1]); this.coords_buffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, this.coords_buffer); gl.bufferData(gl.ARRAY_BUFFER, coords, gl.STATIC_DRAW); let texCoords = new Float32Array([0, 0, 0, 1, 1, 1, 1, 0]); this.texCoords_buffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, this.texCoords_buffer); gl.bufferData(gl.ARRAY_BUFFER, texCoords, gl.STATIC_DRAW); } // little set of functions to get model, coeff and info /** @ignore */ async loadJSON(info_file) { const info_response = await fetch(info_file); const info = await info_response.json(); return info; } /* ************************************************************************** */ /** * Renders the Neural RTI visualization * Handles quality adaptation and progressive refinement * @param {Transform} transform - Current view transform * @param {Object} viewport - Current viewport * @returns {boolean} Whether render completed * @override * @private */ draw(transform, viewport) { //TODO this is duplicated code. move this check up if (this.status != 'ready') return true; this.worldRotation = transform.a + this.transform.a; if (this.networkParameters !== undefined) { let previousRelightFraction = this.relightFraction; //adjust maxTiles to presserve framerate only when we had a draw which included relighting (but not a refine operation!). if (this.relighted) { if (this.canvas.fps &gt; this.canvas.targetfps * 1.5) { this.currentRelightFraction = Math.min(1.0, this.currentRelightFraction * this.convergenceSpeed); //console.log('fps fast: ', this.canvas.fps, this.currentRelightFraction); } else if (this.canvas.fps &lt; this.canvas.targetfps * 0.75) { this.currentRelightFraction = Math.max(this.currentRelightFraction / this.convergenceSpeed, 1 / 128); this.convergenceSpeed = Math.max(1.05, Math.pow(this.convergenceSpeed, 0.9)); console.log('fps slow: ', this.canvas.fps, this.currentRelightFraction); } } //this.refine = true; //setup final refinement if (this.refineTimeout) clearTimeout(this.refineTimeout); if (this.currentRelightFraction &lt; 0.75 &amp;&amp; this.refine == false) this.refineTimeout = setTimeout(() =&gt; { this.emit('update'); this.refine = true; }, Math.max(400, 4000 / this.canvas.fps)); this.relightFraction = this.refine ? 1.0 : this.currentRelightFraction; this.relightFraction = Math.round(this.relightFraction * 8) / 8; let sizeChanged = this.relightFraction != previousRelightFraction; let w = Math.round((this.layout.tilesize || this.layout.width) * this.relightFraction); let h = Math.round((this.layout.tilesize || this.layout.height) * this.relightFraction); //console.log(\"Canvas fps: \", this.canvas.fps, \"relighted: \", this.relighted, \"Refine? \", this.refine, \" fraction: \", this.relightFraction, \" w: \", this.tileRelightWidth); this.refine = false; let available = this.layout.available(viewport, transform, this.transform, 0, this.mipmapBias, this.tiles); let tiles = Object.values(available); if (tiles.length == 0) return; if (sizeChanged) for (let tile of tiles) tile.neuralUpdated = false; this.relighted = false; this.totTiles = 0; this.totPixels = 0; for (let tile of tiles) { if (tile.neuralUpdated &amp;&amp; !sizeChanged) continue; if (!this.relighted) { this.relighted = true; //update fps next turn. this.preRelight([viewport.x, viewport.y, viewport.dx, viewport.dy], w, h, sizeChanged); } this.relightTile(tile, w, h, sizeChanged); this.totPixels += w * h; this.totTiles += 1; } if (this.relighted) this.postRelight(); this.relighted = this.relighted &amp;&amp; !this.refine; //udpate fps only if not refined. } this.shader = this.imageShader; let done = super.draw(transform, viewport); this.shader = this.neuralShader; return done; } /** * Prepares WebGL resources for relighting * @param {number[]} viewport - Viewport parameters * @param {number} w - Width for processing * @param {number} h - Height for processing * @private */ preRelight(viewport, w, h) { let gl = this.gl; if (!this.neuralShader.program) { this.neuralShader.createProgram(gl); gl.useProgram(this.neuralShader.program); for (var i = 0; i &lt; this.neuralShader.samplers.length; i++) gl.uniform1i(this.neuralShader.samplers[i].location, i); } else gl.useProgram(this.neuralShader.program); this.neuralShader.updateUniforms(gl); if (!this.coords_buffer) this.setCoords(); gl.bindBuffer(gl.ARRAY_BUFFER, this.coords_buffer); gl.vertexAttribPointer(this.neuralShader.position_location, 2, gl.FLOAT, false, 0, 0); gl.bindBuffer(gl.ARRAY_BUFFER, this.texCoords_buffer); gl.vertexAttribPointer(this.neuralShader.texcoord_location, 2, gl.FLOAT, false, 0, 0); gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA); gl.enable(gl.BLEND); if (!this.framebuffer) this.framebuffer = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer); //save previous viewport this.backupViewport = viewport; gl.viewport(0, 0, w, h); } /** * Finalizes the relighting pass and restores rendering state * * This method performs cleanup after relighting operations by: * 1. Unbinding the framebuffer to return to normal rendering * 2. Restoring the original viewport dimensions * * Technical details: * - Restores WebGL rendering state * - Returns framebuffer binding to default * - Resets viewport to original dimensions * - Must be called after all tiles have been processed * * @private * @see preRelight - Called at start of relighting process * @see relightTile - Called for each tile during relighting */ postRelight() { let gl = this.gl; gl.bindFramebuffer(gl.FRAMEBUFFER, null); //restore previous viewport let v = this.backupViewport; this.gl.viewport(v[0], v[1], v[2], v[3]); } /** * Processes individual tile using neural network * @param {Object} tile - Tile to process * @param {number} w - Processing width * @param {number} h - Processing height * @param {boolean} sizeChanged - Whether tile size changed * @private */ relightTile(tile, w, h, sizeChanged) { let gl = this.gl; let needsCreate = tile.tex[0] == null; if (needsCreate) { let tex = tile.tex[0] = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, tex); // set the filtering so we don't need mips gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); } if (sizeChanged || needsCreate) { gl.bindTexture(gl.TEXTURE_2D, tile.tex[0]); // define size and format of level 0 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, w, h, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); //gl.bindTexture(gl.TEXTURE_2D, null); } for (var i = 0; i &lt; this.neuralShader.samplers.length; i++) { let id = this.neuralShader.samplers[i].id; gl.activeTexture(gl.TEXTURE0 + i); gl.bindTexture(gl.TEXTURE_2D, tile.tex[id]); } gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tile.tex[0], 0); gl.drawArrays(gl.TRIANGLE_FAN, 0, 4); tile.neuralUpdated = true; } /** * Updates light direction and marks tiles for update * @returns {boolean} Whether updates are complete * @override * @private */ interpolateControls() { let done = super.interpolateControls(); if (done) return true; let light = this.controls['light'].current.value; let rotated = Transform.rotate(light[0], light[1], this.worldRotation * Math.PI); light = [rotated.x, rotated.y]; this.neuralShader.setLight(light); for (let [id, tile] of this.tiles) tile.neuralUpdated = false; return false; } } /** * Register this layer type with the Layer factory * @type {Function} * @private */ Layer.prototype.types['neural'] = (options) =&gt; { return new LayerNeuralRTI(options); } export { LayerNeuralRTI } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"LayerRTI.js.html":{"id":"LayerRTI.js.html","title":"Source: LayerRTI.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: LayerRTI.js import { Layer } from './Layer.js' import { Raster } from './Raster.js' import { ShaderRTI } from './ShaderRTI.js' import { Transform } from './Transform.js' /** * @typedef {Object} LayerRTIOptions * @property {string} url - URL to RTI info.json file (required) * @property {string} layout - Layout type: 'image', 'deepzoom', 'google', 'iiif', 'zoomify', 'tarzoom', 'itarzoom' * @property {boolean} [normals=false] - Whether to load normal maps * @property {string} [server] - IIP server URL (for IIP layout) * @property {number} [worldRotation=0] - Global rotation offset * @extends LayerOptions */ /** * LayerRTI implements Reflectance Transformation Imaging (RTI) visualization. * * RTI is an imaging technique that captures surface reflectance data to enable * interactive relighting of an object from different directions. The layer handles * the 'relight' data format, which consists of: * * - info.json: Contains RTI parameters and configuration * - plane_*.jpg: Series of coefficient images * - normals.jpg: Optional normal map (when using normals=true) * * Features: * - Interactive relighting * - Multiple layout support * - Normal map integration * - Light direction control * - Animation support * - World rotation handling * * Technical Details: * - Uses coefficient-based relighting * - Supports multiple image planes * - Handles various tiling schemes * - Manages WebGL resources * - Coordinates light transformations * * Data Format Support: * - Relight JSON configuration * - Multiple layout systems * - JPEG coefficient planes * - Optional normal maps * - IIP image protocol * * @extends Layer * * @example * ```javascript * // Create RTI layer with deepzoom layout * const rtiLayer = new OpenLIME.Layer({ * type: 'rti', * url: 'path/to/info.json', * layout: 'deepzoom', * normals: true * }); * * // Add to viewer * viewer.addLayer('rti', rtiLayer); * * // Change light direction with animation * rtiLayer.setLight([0.5, 0.5], 1000); * ``` * * @see {@link https://github.com/cnr-isti-vclab/relight|Relight on GitHub} */ class LayerRTI extends Layer { /** * Creates a new LayerRTI instance * @param {LayerRTIOptions} options - Configuration options * @throws {Error} If rasters options is not empty * @throws {Error} If url is not provided */ constructor(options) { super(options); if (Object.keys(this.rasters).length != 0) throw \"Rasters options should be empty!\"; if (!this.url) throw \"Url option is required\"; this.shaders['rti'] = new ShaderRTI({ normals: this.normals }); this.setShader('rti'); this.addControl('light', [0, 0]); this.worldRotation = 0; //if the canvas or ethe layer rotate, light direction neeeds to be rotated too. this.loadJson(this.url); } /** * Constructs URL for image plane resources based on layout type * @param {string} url - Base URL * @param {string} plane - Plane identifier * @returns {string} Complete URL for the resource * @private */ imageUrl(url, plane) { let path = this.url.substring(0, this.url.lastIndexOf('/') + 1); switch (this.layout.type) { case 'image': return path + plane + '.jpg'; break; case 'google': return path + plane; break; case 'deepzoom': return path + plane + '.dzi'; break; case 'tarzoom': return path + plane + '.tzi'; break; case 'itarzoom': return path + 'planes.tzi'; break; case 'zoomify': return path + plane + '/ImageProperties.xml'; break; case 'iip': return url; break; case 'iiif': throw Error(\"Unimplemented\"); default: throw Error(\"Unknown layout: \" + layout.type); } } /** * Sets the light direction with optional animation * @param {number[]} light - Light direction vector [x, y] * @param {number} [dt] - Animation duration in milliseconds */ setLight(light, dt) { this.setControl('light', light, dt); } /** * Loads and processes RTI configuration * @param {string} url - URL to info.json * @private * @async */ loadJson(url) { (async () =&gt; { let infoUrl = url; // Need to handle embedded RTI info.json when using IIP and TIFF image stacks if (this.layout.type == \"iip\") infoUrl = (this.server ? this.server + '?FIF=' : '') + url + \"&amp;obj=description\"; var response = await fetch(infoUrl); if (!response.ok) { this.status = \"Failed loading \" + infoUrl + \": \" + response.statusText; return; } let json = await response.json(); // Update layout image format and pixelSize if provided in info.json this.layout.suffix = json.format; if (json.pixelSizeInMM) this.pixelSize = json.pixelSizeInMM; this.shader.init(json); let urls = []; for (let p = 0; p &lt; this.shader.njpegs; p++) { let imageUrl = this.layout.imageUrl(url, 'plane_' + p); urls.push(imageUrl); let raster = new Raster({ format: 'vec3' }); this.rasters.push(raster); } if (this.normals) { // ITARZOOM must include normals and currently has a limitation: loads the entire tile let imageUrl = this.layout.imageUrl(url, 'normals'); urls.push(imageUrl); let raster = new Raster({ format: 'vec3' }); this.rasters.push(raster); } this.layout.setUrls(urls); })().catch(e =&gt; { console.log(e); this.status = e; }); } /** * Updates light direction based on control state * Handles world rotation transformations * @returns {boolean} Whether interpolation is complete * @override * @private */ interpolateControls() { let done = super.interpolateControls(); if (!done) { let light = this.controls['light'].current.value; //this.shader.setLight(light); let rotated = Transform.rotate(light[0], light[1], this.worldRotation * Math.PI); this.shader.setLight([rotated.x, rotated.y]); } return done; } /** * Renders the RTI visualization * Updates world rotation and manages drawing * @param {Transform} transform - Current view transform * @param {Object} viewport - Current viewport * @returns {boolean} Whether render completed successfully * @override * @private */ draw(transform, viewport) { this.worldRotation = transform.a + this.transform.a; return super.draw(transform, viewport); } } /** * Register this layer type with the Layer factory * @type {Function} * @private */ Layer.prototype.types['rti'] = (options) =&gt; { return new LayerRTI(options); } export { LayerRTI } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"Layout.js.html":{"id":"Layout.js.html","title":"Source: Layout.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: Layout.js import { BoundingBox } from \"./BoundingBox\"; import { addSignals } from \"./Signals\"; import { Tile } from \"./Tile\"; import { CoordinateSystem } from \"./CoordinateSystem\"; // Tile level x y index ----- tex missing() start/end (tarzoom) ----- time, priority size(byte) /** * @typedef {Object} Tile * @property {number} level - Zoom level in the image pyramid * @property {number} x - Horizontal position in tile grid * @property {number} y - Vertical position in tile grid * @property {number} index - Unique tile identifier * @property {number} [start] - Starting byte position in dataset (for tar formats) * @property {number} [end] - Ending byte position in dataset (for tar formats) * @property {number} missing - Number of pending channel data requests * @property {WebGLTexture[]} tex - Array of textures (one per channel) * @property {number} time - Tile creation timestamp for cache management * @property {number} priority - Loading priority for cache management * @property {number} size - Total tile size in bytes */ /** * @typedef {'image'|'deepzoom'|'deepzoom1px'|'google'|'zoomify'|'iiif'|'tarzoom'|'itarzoom'} LayoutType * @description Supported image format types: * - image: Single-resolution web images (jpg, png, etc.) * - deepzoom: Microsoft Deep Zoom with root tile &gt; 1px * - deepzoom1px: Microsoft Deep Zoom with 1px root tile * - google: Google Maps tiling scheme * - zoomify: Zoomify format * - iiif: International Image Interoperability Framework * - tarzoom: OpenLIME tar-based tiling * - itarzoom: OpenLIME indexed tar-based tiling */ /** * @typedef {Object} LayoutOptions * @property {number} [width] - Image width (required for google layout) * @property {number} [height] - Image height (required for google layout) * @property {string} [suffix='jpg'] - Tile file extension * @property {string} [subdomains='abc'] - Available subdomains for URL templates */ /** * Layout manages image formats and tiling schemes in OpenLIME. * * This class is responsible for: * - Managing different image formats * - Handling tiling schemes * - Coordinating tile loading * - Converting between coordinate systems * - Managing tile priorities * * Format Support: * 1. Single-resolution images: * - Direct URL to image file * - Supports all standard web formats (jpg, png, etc) * * 2. Tiled formats: * - DeepZoom (Microsoft): Uses .dzi config file * - Google Maps: Direct directory structure * - Zoomify: Uses ImageProperties.xml * - IIIF: Standard server interface * - TarZoom: OpenLIME's optimized format * * @fires Layout#ready - When layout is initialized and ready for use * @fires Layout#updateSize - When layout dimensions change * * @example * ```javascript * // Single image * const imageLayout = new Layout('image.jpg', 'image'); * * // Deep Zoom * const dzLayout = new Layout('tiles.dzi', 'deepzoom'); * * // Google Maps format * const googleLayout = new Layout('tiles/', 'google', { * width: 2000, * height: 1500 * }); * ``` */ class Layout { /** * Creates a new Layout instance * @param {string} url - URL to image or configuration file * @param {LayoutType} type - Type of image layout * @param {LayoutOptions} [options] - Additional configuration * @throws {Error} If layout type is unknown or module not loaded */ constructor(url, type, options) { if (type == 'image') { this.setDefaults(type); this.init(url, type, options); } else if (type in this.types) return this.types[type](url, type, options); else if (type == null) return; else throw \"Layout type: \" + type + \" unknown, or module not loaded\"; } /** * Gets tile dimensions * @returns {number[]} [width, height] of tiles */ getTileSize() { return [this.width, this.height]; } /** * Sets default layout properties * @param {LayoutType} type - Layout type * @private */ setDefaults(type) { Object.assign(this, { type: type, width: 0, height: 0, suffix: 'jpg', urls: [], status: null, subdomains: 'abc' }); } /** * Initializes layout configuration * @param {string} url - Resource URL * @param {LayoutType} type - Layout type * @param {LayoutOptions} options - Configuration options * @private */ init(url, type, options) { if (options) Object.assign(this, options); if (typeof (url) == 'string') this.setUrls([url]); if (this.width &amp;&amp; this.height) this.status = 'ready'; } /** * Sets URLs for layout resources * @param {string[]} urls - Array of resource URLs * @fires Layout#ready * @private */ setUrls(urls) { /** * The event is fired when a layout is ready to be drawn(the single-resolution image is downloaded or the multi-resolution structure has been initialized). * @event Layout#ready */ this.urls = urls; this.getTileURL = (rasterid, tile) =&gt; { return this.urls[rasterid]; } this.status = 'ready'; this.emit('ready'); } /** * Constructs URL for specific image plane * @param {string} url - Base URL * @param {string} plane - Plane identifier * @returns {string} Complete URL */ imageUrl(url, plane) { let path = url.substring(0, url.lastIndexOf('/') + 1); return path + plane + '.jpg'; } /** * Gets URL for specific tile * @param {number} id - Channel identifier * @param {Tile} tile - Tile object * @returns {string} Tile URL * @abstract */ getTileURL(id, tile) { throw Error(\"Layout not defined or ready.\"); } /** * Gets layout bounds * @returns {BoundingBox} Layout boundaries */ boundingBox() { //if(!this.width) throw \"Layout not initialized still\"; return new BoundingBox({ xLow: -this.width / 2, yLow: -this.height / 2, xHigh: this.width / 2, yHigh: this.height / 2 }); } /** * Calculates tile coordinates * @param {Tile} tile - Tile to calculate coordinates for * @returns {{coords: Float32Array, tcoords: Float32Array}} Image and texture coordinates */ tileCoords(tile) { let w = this.width; let h = this.height; //careful: here y is inverted due to textures not being flipped on load (Firefox fault!). var tcoords = new Float32Array([0, 1, 0, 0, 1, 0, 1, 1]); return { coords: new Float32Array([-w / 2, -h / 2, 0, -w / 2, h / 2, 0, w / 2, h / 2, 0, w / 2, -h / 2, 0]), tcoords: tcoords }; } /** * Creates new tile instance * @param {number} index - Tile identifier * @returns {Tile} New tile object * @private */ newTile(index) { let tile = new Tile(); tile.index = index; return tile; } /** * Determines required tiles for rendering * @param {Object} viewport - Current viewport * @param {Transform} transform - Current transform * @param {Transform} layerTransform - Layer transform * @param {number} border - Border size * @param {number} bias - Mipmap bias * @param {Map} tiles - Existing tiles * @param {number} [maxtiles=8] - Maximum tiles to return * @returns {Tile[]} Array of needed tiles */ needed(viewport, transform, layerTransform, border, bias, tiles, maxtiles = 8) { //FIXME should check if image is withing the viewport (+ border) let tile = tiles.get(0) || this.newTile(0); //{ index, x, y, missing, tex: [], level }; tile.time = performance.now(); tile.priority = 10; if (tile.missing === null) // || tile.missing != 0 &amp;&amp; !this.requested[index]) return [tile]; return []; } /** * Gets tiles available for rendering * @param {Object} viewport - Current viewport * @param {Transform} transform - Current transform * @param {Transform} layerTransform - Layer transform * @param {number} border - Border size * @param {number} bias - Mipmap bias * @param {Map} tiles - Existing tiles * @returns {Object.&lt;number, Tile&gt;} Map of available tiles */ available(viewport, transform, layerTransform, border, bias, tiles) { //FIXME should check if image is withing the viewport (+ border) let torender = {}; if (tiles.has(0) &amp;&amp; tiles.get(0).missing == 0) torender[0] = tiles.get(0); //{ index: index, level: level, x: x &gt;&gt; d, y: y &gt;&gt; d, complete: true }; return torender; } /** * Calculates viewport bounding box * @param {Object} viewport - Viewport parameters * @param {Transform} transform - Current transform * @param {Transform} layerT - Layer transform * @returns {BoundingBox} Viewport bounds in image space */ getViewportBox(viewport, transform, layerT) { const boxViewport = new BoundingBox({ xLow: viewport.x, yLow: viewport.y, xHigh: viewport.x + viewport.dx, yHigh: viewport.y + viewport.dy }); return CoordinateSystem.fromViewportBoxToImageBox(boxViewport, transform, viewport, layerT, { w: this.width, h: this.height }); } } Layout.prototype.types = {} addSignals(Layout, 'ready', 'updateSize'); export { Layout } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"LayoutTiles.js.html":{"id":"LayoutTiles.js.html","title":"Source: LayoutTiles.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: LayoutTiles.js import { BoundingBox } from \"./BoundingBox\"; import { Layout } from \"./Layout\"; import { Transform } from \"./Transform\"; // Tile level x y index ----- tex missing() start/end (tarzoom) ----- time, priority size(byte) /** * @typedef {Object} Tile * Represents a single element of a regular grid that subdivides an image. * Tiles are identified by their position (x, y) within the grid and the zoom level. * * @property {number} level - The zoom level of the tile (0 is top/most zoomed out) * @property {number} x - Horizontal position of the tile in the grid at the given level * @property {number} y - Vertical position of the tile in the grid at the given level * @property {number} index - Unique identifier for the tile across all levels * @property {number} [start] - Starting byte position in the dataset (used for tarzoom/itarzoom formats) * @property {number} [end] - Ending byte position in the dataset (used for tarzoom/itarzoom formats) * @property {number} missing - For multi-channel formats (RTI, BRDF), tracks pending channel data requests * @property {WebGLTexture[]} tex - Array of WebGL textures (one per channel) * @property {number} time - Timestamp of tile creation (used by cache algorithms) * @property {number} priority - Tile priority for cache management (lower = higher priority) * @property {number} size - Total size of the tile in bytes (used by cache algorithms) */ /** * @typedef {'image'|'deepzoom'|'deepzoom1px'|'google'|'zoomify'|'iiif'|'iip'|'tarzoom'|'itarzoom'} Layout#Type * Supported image layout types including both single-resolution and multi-resolution formats. * - image: Standard web image formats (jpg, png, gif, etc.) * - deepzoom: Microsoft Deep Zoom format with root tile &gt; 1px * - deepzoom1px: Microsoft Deep Zoom format with 1px root tile * - google: Google Maps tiling scheme * - zoomify: Zoomify tiling format * - iiif: International Image Interoperability Framework * - iip: Internet Imaging Protocol * - tarzoom: OpenLIME custom format (single TAR of DeepZoom pyramid) * - itarzoom: OpenLIME custom interleaved TAR format */ /** * The Layout class is responsible for specifying the data formats (images) managed by OpenLIME. * All web single-resolution image types (*jpg*, *png*, *gif*, etc...) are supported as well as the most common * tiled image formats (*deepzoom*, *zoomify*, *IIIF*, *google maps*), which are suitable for large images. * #### Single-resolution images * The URL is the address of the file (for instance, 'https://my.example/image.jpg'). * #### Tiled images * They can be specified in a variety of ways depending on the format chosen. * * **deepzoom** - The root tile of the image pyramid has a size &gt; 1px (typical value is 254px). It is defined by the URL of the *.dzi* file * (for instance, 'https://my.example/image.dzi'). See: {@link https://docs.microsoft.com/en-us/previous-versions/windows/silverlight/dotnet-windows-silverlight/cc645077(v=vs.95)?redirectedfrom=MSDN DeepZoom} * * **deepzoom1px** - The root tile of the image pyramid has a size = 1px. It is defined by the URL of the *.dzi* file * (for instance, 'https://my.example/image.dzi'). See: {@link https://docs.microsoft.com/en-us/previous-versions/windows/silverlight/dotnet-windows-silverlight/cc645077(v=vs.95)?redirectedfrom=MSDN DeepZoom} * * **google** - The URL points directly to the directory containing the pyramid of images (for instance, 'https://my.example/image'). * The standard does not require any configuration file, so it is mandatory to indicate in the `options` the * width and height in pixels of the original image. See: {@link https://www.microimages.com/documentation/TechGuides/78googleMapsStruc.pdf Google Maps} * * **zoomify** - The URL indicates the location of Zoomify configuration file (for instance, 'https://my.example/image/ImageProperties.xml'). * See: {@link http://www.zoomify.com/ZIFFileFormatSpecification.htm Zoomify} * * **iip** - The server parameter (optional) indicates the URL of the IIPImage endpoint (for example '/fcgi-bin/iipsrv.fcgi'). * The URL parameter indicates either just the name of the path and image file (for instance 'image.tif') if the server parameter has been set or the full IIP URL if not * (for instance '/fcgi-bin/iipsrv.fcgi?FIF=image.tif' or 'https://you.server//fcgi-bin/iipsrv.fcgi?FIF=image.tif' if image is hosted elsewhere) * See: {@link https://iipimage.sourceforge.io/ IIPImage Server} * * **iiif** - According to the standard, the URL is the address of a IIIF server (for instance, 'https://myiiifserver.example/'). * See: {@link https://iiif.io/api/image/3.0/ IIIF } * * **tarzoom** and **itarzoom** - This is a custom format of the OpenLIME framework. It can be described as the TAR of a DeepZoom (all the DeepZoom image pyramid is stored in a single file). * It takes advantage of the fact that current web servers are able to handle partial-content HTTP requests. Tarzoom facilitates * the work of the server, which is not penalised by having to manage a file system with many small files. The URL is the address of the *.tzi* file * (for instance, 'https://my.example/image.tzi'). Warning: tarzoom|itarzoom may not work on older web servers. * * @extends Layout * * @example * ```javascript * // DeepZoom layout * const dzLayout = new LayoutTiles('image.dzi', 'deepzoom', { * cachelevels: 8 * }); * * // Google Maps layout * const googleLayout = new LayoutTiles('tiles/', 'google', { * width: 4096, * height: 3072, * suffix: 'png' * }); * * // IIIF layout * const iiifLayout = new LayoutTiles('https://server/image', 'iiif'); * ``` * * @fires Layout#ready - When layout initialization is complete * @fires Layout#updateSize - When layout dimensions change */ class LayoutTiles extends Layout { /** * Creates a new LayoutTiles instance. * @param {string} url - URL to the image or tile configuration * @param {Layout#Type} type - The type of image layout * @param {Object} [options] - Configuration options * @param {number} [options.width] - Width of original image (required for 'google' type) * @param {number} [options.height] - Height of original image (required for 'google' type) * @param {string} [options.suffix='jpg'] - Tile file extension * @param {string} [options.subdomains='abc'] - Available subdomains for Google URL template * @param {number} [options.cachelevels=10] - Number of levels above current to cache * @param {string} [options.server] - IIP server URL (for IIP type only) * @fires Layout#ready * @fires Layout#updateSize */ constructor(url, type, options) { super(url, null, options); this.setDefaults(type); this.init(url, type, options); } /** * Sets default values for the layout. * @private * @param {Layout#Type} type - The layout type */ setDefaults(type) { super.setDefaults(type); Object.assign(this, { tilesize: 256, overlap: 0, nlevels: 1, //level 0 is the top, single tile level. qbox: [], //array of bounding box in tiles, one for mipmap bbox: [], //array of bounding box in pixels (w, h) urls: [], cachelevels: 10, }); } /** * Configures URLs and initializes the layout based on type. * @private * @param {string[]} urls - Array of URLs to configure * @fires Layout#ready * @fires Layout#updateSize */ setUrls(urls) { /** * The event is fired when a layout is ready to be drawn(the single-resolution image is downloaded or the multi-resolution structure has been initialized). * @event Layout#ready */ this.urls = urls; (async () =&gt; { switch (this.type) { case 'google': await this.initGoogle(); break; // No Url needed case 'deepzoom1px': await this.initDeepzoom(true); break; // urls[0] only needed case 'deepzoom': await this.initDeepzoom(false); break; // urls[0] only needed case 'zoomify': await this.initZoomify(); break; // urls[0] only needed case 'iiif': await this.initIIIF(); break; // urls[0] only needed case 'iip': await this.initIIP(); break; // urls[0] only needed case 'tarzoom': await this.initTarzoom(); break; // all urls needed case 'itarzoom': await this.initITarzoom(); break; // actually it has just one url } this.initBoxes(); this.status = 'ready'; this.emit('ready'); })().catch(e =&gt; { console.log(e); this.status = e; }); } /** * Constructs image URL for a specific plane/channel. * @private * @param {string} url - Base URL * @param {string} plane - Plane/channel identifier * @returns {string} Constructed URL * @throws {Error} For unknown layout types */ imageUrl(url, plane) { let path = url.substring(0, url.lastIndexOf('/') + 1); switch (this.type) { case 'image': return path + plane + '.jpg'; break; case 'google': return path + plane; break; case 'deepzoom': return path + plane + '.dzi'; break; case 'tarzoom': return path + plane + '.tzi'; break; case 'itarzoom': return path + 'planes.tzi'; break; case 'zoomify': return path + plane + '/ImageProperties.xml'; break; case 'iip': return url + \"&amp;SDS=\" + plane.substring(plane.lastIndexOf('_') + 1, plane.length); break; case 'iiif': throw Error(\"Unimplemented\"); default: throw Error(\"Unknown layout: \" + this.type); } } /** * Gets the tile size for the layout. * @returns {number[]} Array containing [width, height] of tiles */ getTileSize() { return [this.tilesize, this.tilesize]; } /** * Generates unique index for a tile based on its position and level. * @param {number} level - Zoom level * @param {number} x - X coordinate * @param {number} y - Y coordinate * @returns {number} Unique tile index */ index(level, x, y) { let startindex = 0; for (let i = 0; i &lt; level; i++) startindex += this.qbox[i].xHigh * this.qbox[i].yHigh; return startindex + y * this.qbox[level].xHigh + x; } /** * Converts tile index back to level, x, y coordinates. * @param {number} index - Tile index * @returns {Object} Position object containing level, x, y */ reverseIndex(index) { let originalindex = index; let level = 0; for (let i = 0; i &lt; this.qbox.length; i++) { let size = this.qbox[i].xHigh * this.qbox[i].yHigh; if (index - size &lt; 0) break; index -= size; level++; } let width = this.qbox[level].xHigh; let y = Math.floor(index / width) let x = index % width; console.assert(this.index(level, x, y) == originalindex); return { level, x, y }; } /** * Initializes bounding boxes for all pyramid levels. * @private * @fires Layout#updateSize * @returns {number} Total number of tiles */ initBoxes() { /** * The event is fired when a layout size is modified (and the scene extension must be recomputed at canvas level). * @event Layout#updateSize */ this.qbox = []; //by level (0 is the bottom) this.bbox = []; var w = this.width; var h = this.height; if (this.type == 'image') { this.qbox[0] = new BoundingBox({ xLow: 0, yLow: 0, xHigh: 1, yHigh: 1 }); this.bbox[0] = new BoundingBox({ xLow: 0, yLow: 0, xHigh: w, yHigh: h }); // Acknowledge bbox change (useful for knowing scene extension (at canvas level)) this.emit('updateSize'); return 1; } for (let level = this.nlevels - 1; level &gt;= 0; level--) { this.qbox[level] = new BoundingBox({ xLow: 0, yLow: 0, xHigh: 0, yHigh: 0 }); this.bbox[level] = new BoundingBox({ xLow: 0, yLow: 0, xHigh: w, yHigh: h }); this.qbox[level].yHigh = Math.ceil(h / this.tilesize); this.qbox[level].xHigh = Math.ceil(w / this.tilesize); w &gt;&gt;&gt;= 1; h &gt;&gt;&gt;= 1; } // Acknowledge bbox (useful for knowing scene extension (at canvas level)) this.emit('updateSize'); } /** * Gets coordinates for a tile in both image space and texture space. * @param {Tile} tile - The tile to get coordinates for * @returns {Object} Coordinate data * @returns {Float32Array} .coords - Image space coordinates [x,y,z, x,y,z, x,y,z, x,y,z] * @returns {Float32Array} .tcoords - Texture coordinates [u,v, u,v, u,v, u,v] */ tileCoords(tile) { let { level, x, y } = tile; let w = this.width; let h = this.height; //careful: here y is inverted due to textures not being flipped on load (Firefox fault!). var tcoords = new Float32Array([0, 1, 0, 0, 1, 0, 1, 1]); let coords = new Float32Array([0, 0, 0, 0, 1, 0, 1, 1, 0, 1, 0, 0]); // FIXME 32 bit and errors let ilevel = this.nlevels - 1 - level; let side = this.tilesize * (1 &lt;&lt; (ilevel)); //tile size in imagespace let tx = side; let ty = side; if (side * (x + 1) &gt; this.width) { tx = (this.width - side * x); if (this.type == 'google') tcoords[4] = tcoords[6] = tx / side; } if (side * (y + 1) &gt; this.height) { ty = (this.height - side * y); if (this.type == 'google') tcoords[1] = tcoords[7] = ty / side; } var lx = this.qbox[level].xHigh - 1; //last tile x pos, if so no overlap. var ly = this.qbox[level].yHigh - 1; var over = this.overlap; if (over) { let dtx = over / (tx / (1 &lt;&lt; ilevel) + (x == 0 ? 0 : over) + (x == lx ? 0 : over)); let dty = over / (ty / (1 &lt;&lt; ilevel) + (y == 0 ? 0 : over) + (y == ly ? 0 : over)); tcoords[0] = tcoords[2] = (x == 0 ? 0 : dtx); tcoords[3] = tcoords[5] = (y == 0 ? 0 : dty); tcoords[4] = tcoords[6] = (x == lx ? 1 : 1 - dtx); tcoords[1] = tcoords[7] = (y == ly ? 1 : 1 - dty); } //flip Y coordinates //TODO cleanup this mess! let tmp = tcoords[1]; tcoords[1] = tcoords[7] = tcoords[3]; tcoords[3] = tcoords[5] = tmp; for (let i = 0; i &lt; coords.length; i += 3) { coords[i] = coords[i] * tx + side * x - this.width / 2; coords[i + 1] = -coords[i + 1] * ty - side * y + this.height / 2; } return { coords: coords, tcoords: tcoords } } /** * Creates a new tile instance with computed properties. * @param {number} index - Unique tile identifier * @returns {Tile} New tile instance */ newTile(index) { let tile = super.newTile(index) tile.index = index; Object.assign(tile, this.reverseIndex(index)); return tile; } /** * Determines which tiles are needed for the current view. * @param {Viewport} viewport - Current viewport * @param {Transform} transform - Current transform * @param {Transform} layerTransform - Layer-specific transform * @param {number} border - Border size in tile units for prefetching * @param {number} bias - Resolution bias (0-1, affects mipmap level selection) * @param {Map&lt;number,Tile&gt;} tiles - Currently available tiles * @param {number} [maxtiles=8] - Maximum number of tiles to return * @returns {Tile[]} Array of needed tiles sorted by priority */ needed(viewport, transform, layerTransform, border, bias, tiles, maxtiles = 8) { let neededBox = this.neededBox(viewport, transform, layerTransform, 0, bias); //if (this.previouslyNeeded &amp;&amp; this.sameNeeded(this.previouslyNeeded, neededBox)) // return; //this.previouslyNeeded = neededBox; let needed = []; let now = performance.now(); //look for needed nodes and prefetched nodes (on the pos destination //let missing = this.shader.samplers.length; for (let level = 0; level &lt;= neededBox.level; level++) { let box = neededBox.pyramid[level]; let tmp = []; for (let y = box.yLow; y &lt; box.yHigh; y++) { for (let x = box.xLow; x &lt; box.xHigh; x++) { let index = this.index(level, x, y); let tile = tiles.get(index) || this.newTile(index); //{ index, x, y, missing, tex: [], level }; tile.time = now; tile.priority = neededBox.level - level; if (tile.priority &gt; this.cachelevels) continue; if (tile.missing === null) // || tile.missing != 0 &amp;&amp; !this.requested[index]) tmp.push(tile); } } let c = box.center(); //sort tiles by distance to the center TODO: check it's correct! tmp.sort(function (a, b) { return Math.abs(a.x - c.x) + Math.abs(a.y - c.y) - Math.abs(b.x - c.x) - Math.abs(b.y - c.y); }); needed = needed.concat(tmp); } return needed; } /** * Gets tiles currently available for rendering. * @param {Viewport} viewport - Current viewport * @param {Transform} transform - Current transform * @param {Transform} layerTransform - Layer-specific transform * @param {number} border - Border size in tile units * @param {number} bias - Resolution bias * @param {Map&lt;number,Tile&gt;} tiles - Available tiles * @returns {Object.&lt;number,Tile&gt;} Map of tile index to tile object with additional 'complete' property */ available(viewport, transform, layerTransform, border, bias, tiles) { let needed = this.neededBox(viewport, transform, layerTransform, 0, bias); let torender = {}; //array of minlevel, actual level, x, y (referred to minlevel) let brothers = {}; let minlevel = needed.level; let box = needed.pyramid[minlevel]; for (let y = box.yLow; y &lt; box.yHigh; y++) { for (let x = box.xLow; x &lt; box.xHigh; x++) { let level = minlevel; while (level &gt;= 0) { let d = minlevel - level; let index = this.index(level, x &gt;&gt; d, y &gt;&gt; d); if (tiles.has(index) &amp;&amp; tiles.get(index).missing == 0) { torender[index] = tiles.get(index); //{ index: index, level: level, x: x &gt;&gt; d, y: y &gt;&gt; d, complete: true }; break; } else { let sx = (x &gt;&gt; (d + 1)) &lt;&lt; 1; let sy = (y &gt;&gt; (d + 1)) &lt;&lt; 1; brothers[this.index(level, sx, sy)] = 1; brothers[this.index(level, sx + 1, sy)] = 1; brothers[this.index(level, sx + 1, sy + 1)] = 1; brothers[this.index(level, sx, sy + 1)] = 1; } level--; } } } for (let index in brothers) { if (index in torender) torender[index].complete = false; } return torender; } /** * Computes required tiles at each pyramid level for the current view. * @param {Viewport} viewport - Current viewport * @param {Transform} transform - Current transform * @param {Transform} layerTransform - Layer-specific transform * @param {number} border - Border size in tile units for prefetching * @param {number} bias - Resolution bias (0-1) * @returns {Object} Tile requirements * @returns {number} .level - Optimal pyramid level * @returns {BoundingBox[]} .pyramid - Array of tile bounding boxes per level */ neededBox(viewport, transform, layerTransform, border, bias) { if (this.type == \"image\") return { level: 0, pyramid: [new BoundingBox({ xLow: 0, yLow: 0, xHigh: 1, yHigh: 1 })] }; //here we are computing with inverse levels; level 0 is the bottom! let iminlevel = Math.max(0, Math.min(Math.floor(-Math.log2(transform.z) + bias), this.nlevels - 1)); let minlevel = this.nlevels - 1 - iminlevel; const bbox = this.getViewportBox(viewport, transform, layerTransform); let pyramid = []; for (let level = 0; level &lt;= minlevel; level++) { let ilevel = this.nlevels - 1 - level; let side = this.tilesize * Math.pow(2, ilevel); let qbox = new BoundingBox(bbox); qbox.quantize(side); //clamp! qbox.xLow = Math.max(qbox.xLow - border, this.qbox[level].xLow); qbox.yLow = Math.max(qbox.yLow - border, this.qbox[level].yLow); qbox.xHigh = Math.min(qbox.xHigh + border, this.qbox[level].xHigh); qbox.yHigh = Math.min(qbox.yHigh + border, this.qbox[level].yHigh); pyramid[level] = qbox; } return { level: minlevel, pyramid: pyramid }; } /** * Gets URL for a specific tile. * @param {number} id - Channel/raster ID * @param {Tile} tile - Tile to get URL for * @returns {string} URL to fetch tile data * @throws {Error} If layout not defined or ready */ getTileURL(id, tile) { throw Error(\"Layout not defined or ready.\"); } /** * Initializes single-image layout. * @private * @async */ async initImage() { this.getTileURL = (rasterid, tile) =&gt; { return this.urls[rasterid]; } this.nlevels = 1; this.tilesize = 0; } /** * Initializes Google Maps layout. * @private * @async * @throws {Error} If width or height not specified */ async initGoogle() { if (!this.width || !this.height) throw \"Google rasters require to specify width and height\"; this.tilesize = 256; this.overlap = 0; let max = Math.max(this.width, this.height) / this.tilesize; this.nlevels = Math.ceil(Math.log(max) / Math.LN2) + 1; if (this.urls[0].includes('{')) { this.getTileURL = (rasterid, tile) =&gt; { let s = this.subdomains ? this.subdomains[Math.abs(tile.x + tile.y) % this.subdomains.length] : ''; let vars = { s, ...tile, z: tile.level }; return this.urls[rasterid].replace(/{(.+?)}/g, (match, p) =&gt; vars[p]); } } else this.getTileURL = (rasterid, tile) =&gt; { return this.urls[rasterid] + \"/\" + tile.level + \"/\" + tile.y + \"/\" + tile.x + '.' + this.suffix; }; } /** * Initializes DeepZoom layout. * @private * @async * @param {boolean} onepixel - Whether using 1px root tile variant * @throws {Error} If unable to fetch or parse DZI file */ async initDeepzoom(onepixel) { let url = this.urls.filter(u =&gt; u)[0]; var response = await fetch(url); if (!response.ok) { this.status = \"Failed loading \" + url + \": \" + response.statusText; throw new Error(this.status); } let text = await response.text(); let xml = (new window.DOMParser()).parseFromString(text, \"text/xml\"); let doc = xml.documentElement; this.suffix = doc.getAttribute('Format'); this.tilesize = parseInt(doc.getAttribute('TileSize')); this.overlap = parseInt(doc.getAttribute('Overlap')); let size = doc.querySelector('Size'); this.width = parseInt(size.getAttribute('Width')); this.height = parseInt(size.getAttribute('Height')); let max = Math.max(this.width, this.height) / this.tilesize; this.nlevels = Math.ceil(Math.log(max) / Math.LN2) + 1; this.urls = this.urls.map(url =&gt; url ? url.substr(0, url.lastIndexOf(\".\")) + '_files/' : null); this.skiplevels = 0; if (onepixel) this.skiplevels = Math.ceil(Math.log(this.tilesize) / Math.LN2); this.getTileURL = (rasterid, tile) =&gt; { let url = this.urls[rasterid]; let level = tile.level + this.skiplevels; return url + level + '/' + tile.x + '_' + tile.y + '.' + this.suffix; }; } /** * Initializes Tarzoom layout. * @private * @async * @throws {Error} If unable to fetch or parse TZI file */ async initTarzoom() { this.tarzoom = []; for (let url of this.urls) { var response = await fetch(url); if (!response.ok) { this.status = \"Failed loading \" + url + \": \" + response.statusText; throw new Error(this.status); } let json = await response.json(); json.url = url.substr(0, url.lastIndexOf(\".\")) + '.tzb'; Object.assign(this, json); this.tarzoom.push(json); } this.getTileURL = (rasterid, tile) =&gt; { const tar = this.tarzoom[rasterid]; tile.start = tar.offsets[tile.index]; tile.end = tar.offsets[tile.index + 1]; return tar.url; }; } /** * Initializes Tarzoom layout. * @private * @async * @throws {Error} If unable to fetch or parse TZI file */ async initITarzoom() { const url = this.urls[0]; var response = await fetch(url); if (!response.ok) { this.status = \"Failed loading \" + url + \": \" + response.statusText; throw new Error(this.status); } let json = await response.json(); Object.assign(this, json); //suffix, tilesize, overlap, width, height, levels this.url = url.substr(0, url.lastIndexOf(\".\")) + '.tzb'; this.getTileURL = (rasterid, tile) =&gt; { let index = tile.index * this.stride; tile.start = this.offsets[index]; tile.end = this.offsets[index + this.stride]; tile.offsets = [] for (let i = 0; i &lt; this.stride + 1; i++) tile.offsets.push(this.offsets[index + i] - tile.start); return this.url; }; } /** * Initializes Zoomify layout. * @private * @async * @throws {Error} If unable to fetch or parse ImageProperties.xml */ async initZoomify() { const url = this.urls[0]; this.overlap = 0; var response = await fetch(url); if (!response.ok) { this.status = \"Failed loading \" + url + \": \" + response.statusText; throw new Error(this.status); } let text = await response.text(); let xml = (new window.DOMParser()).parseFromString(text, \"text/xml\"); let doc = xml.documentElement; this.tilesize = parseInt(doc.getAttribute('TILESIZE')); this.width = parseInt(doc.getAttribute('WIDTH')); this.height = parseInt(doc.getAttribute('HEIGHT')); if (!this.tilesize || !this.height || !this.width) throw \"Missing parameter files for zoomify!\"; let max = Math.max(this.width, this.height) / this.tilesize; this.nlevels = Math.ceil(Math.log(max) / Math.LN2) + 1; this.getTileURL = (rasterid, tile) =&gt; { const tileUrl = this.urls[rasterid].substr(0, url.lastIndexOf(\"/\")); let group = tile.index &gt;&gt; 8; return tileUrl + \"/TileGroup\" + group + \"/\" + tile.level + \"-\" + tile.x + \"-\" + tile.y + \".\" + this.suffix; }; } /** * Initializes IIIF layout. * @private * @async * @throws {Error} If unable to fetch or parse info.json */ async initIIIF() { const url = this.urls[0]; this.overlap = 0; var response = await fetch(url); if (!response.ok) { this.status = \"Failed loading \" + url + \": \" + response.statusText; throw new Error(this.status); } let info = await response.json(); this.width = info.width; this.height = info.height; this.nlevels = info.tiles[0].scaleFactors.length; this.tilesize = info.tiles[0].width; this.getTileURL = (rasterid, tile) =&gt; { const tileUrl = this.urls[rasterid].substr(0, url.lastIndexOf(\"/\")); let tw = this.tilesize; let ilevel = parseInt(this.nlevels - 1 - tile.level); let s = Math.pow(2, tile.level); //region parameters let xr = tile.x * tw * s; let yr = tile.y * tw * s; let wr = Math.min(tw * s, this.width - xr) let hr = Math.min(tw * s, this.height - yr); // pixel size parameters /ws,hs/ let ws = tw if (xr + tw * s &gt; this.width) ws = (this.width - xr + s - 1) / s let hs = tw if (yr + tw * s &gt; this.height) hs = (this.height - yr + s - 1) / s return `${tileUrl}/${xr},${yr},${wr},${hr}/${ws},${hs}/0/default.jpg`; }; } /** * Initializes IIP layout. * @private * @async * @throws {Error} If unable to fetch or parse server response */ async initIIP() { const server = this.server ? (this.server + '?FIF=') : ''; const url = server + this.urls[0] + \"&amp;obj=Max-size&amp;obj=Tile-size&amp;obj=Resolution-number\"; let response = await fetch(url); if (!response.ok) { this.status = \"Failed loading \" + url + \": \" + response.statusText; throw new Error(this.status); } let info = await response.text(); let tmp = info.split(\"Tile-size:\"); if (!tmp[1]) return null; this.tilesize = parseInt(tmp[1].split(\" \")[0]); tmp = info.split(\"Max-size:\"); if (!tmp[1]) return null; tmp = tmp[1].split('\\n')[0].split(' '); this.width = parseInt(tmp[0]); this.height = parseInt(tmp[1]); this.nlevels = parseInt(info.split(\"Resolution-number:\")[1]); this.getTileURL = (rasterid, tile) =&gt; { // Tile index for this resolution let index = tile.y * this.qbox[tile.level].xHigh + tile.x; // Handle different formats if requested or indicated in the info.json let command = \"JTL\"; // Default if (this.suffix == \"webp\") command = \"WTL\"; else if (this.suffix == \"png\") command = \"PTL\"; let url = (this.server ? this.server + '?FIF=' : '') + this.urls[rasterid] + \"&amp;\" + command + \"=\" + tile.level + \",\" + index; return url; }; } } /** * @event Layout#ready * Fired when the layout is ready for rendering. * This occurs when: * - Single-resolution image is fully downloaded * - Multi-resolution structure is initialized and validated * - Tile pyramid information is computed */ /** * @event Layout#updateSize * Fired when the layout size changes and scene extension needs updating. * This occurs when: * - Image dimensions are determined * - Pyramid levels are initialized * - Bounding boxes are computed */ /** * Factory function to create LayoutTiles instances. * @private * @param {string} url - URL to image resource * @param {Layout#Type} type - Layout type * @param {Object} [options] - Configuration options * @returns {LayoutTiles} New LayoutTiles instance */ const factory = (url, type, options) =&gt; { return new LayoutTiles(url, type, options); }; // Register supported layout types for (let type of ['google', 'deepzoom1px', 'deepzoom', 'zoomify', 'iiif', 'iip', 'tarzoom', 'itarzoom']) Layout.prototype.types[type] = factory; export { LayoutTiles } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"LayoutTileImages.js.html":{"id":"LayoutTileImages.js.html","title":"Source: LayoutTileImages.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: LayoutTileImages.js import { Layout } from './Layout.js'; import { BoundingBox } from './BoundingBox.js'; import { Tile } from './Tile.js'; import { Annotation } from './Annotation.js'; /** * @fileoverview * LayoutTileImages module provides management for collections of image tiles with associated regions. * This layout type is specialized for handling multiple independent image tiles, each with their own * position and dimensions, rather than a regular grid of tiles like LayoutTiles. */ /** * @typedef {Object} TileDescriptor * Properties expected in tile descriptors: * @property {boolean} visible - Whether the tile should be rendered * @property {Object} region - Position and dimensions of the tile * @property {number} region.x - X coordinate of tile's top-left corner * @property {number} region.y - Y coordinate of tile's top-left corner * @property {number} region.w - Width of the tile * @property {number} region.h - Height of the tile * @property {string} image - URL or path to the tile's image * @property {number} [publish] - Publication status (1 = published) */ /** * LayoutTileImages class manages collections of image tiles with associated regions. * Each tile represents an independent image with its own position and dimensions in the layout space. * Tiles can be individually shown or hidden and are loaded from annotation files or external descriptors. * @extends Layout */ class LayoutTileImages extends Layout { /** * Creates a new LayoutTileImages instance. * @param {string|null} url - URL to the annotation file containing tile descriptors, or null if descriptors will be set later * @param {string} type - The layout type (should be 'tile_images') * @param {Object} [options] - Configuration options inherited from Layout */ constructor(url, type, options) { super(url, null, options); this.setDefaults(type); this.init(url, type, options); // Contain array of records with at least visible,region,image (url of the image). // Can be also a pointer to annotation array set from outside with setTileDescriptors() this.tileDescriptors = []; this.box = new BoundingBox(); if (url != null) { // Read data from annotation file this.loadDescriptors(url); } } /** * Gets the tile size. For this layout, tiles don't have a fixed size. * @returns {number[]} Returns [0, 0] as tiles have variable sizes */ getTileSize() { return [0, 0]; } /** * Loads tile descriptors from an annotation file. * @private * @async * @param {string} url - URL of the annotation file * @fires Layout#ready - When descriptors are loaded and processed * @fires Layout#updateSize - When bounding box is computed */ async loadDescriptors(url) { // Load tile descriptors from annotation file let response = await fetch(url); if (!response.ok) { this.status = \"Failed loading \" + url + \": \" + response.statusText; return; } this.tileDescriptors = await response.json(); if (this.tileDescriptors.status == 'error') { alert(\"Failed to load annotations: \" + this.tileDescriptors.msg); return; } //this.annotations = this.annotations.map(a =&gt; '@context' in a ? Annotation.fromJsonLd(a): a); this.tileDescriptors = this.tileDescriptors.map(a =&gt; new Annotation(a)); for (let a of this.tileDescriptors) { if (a.publish != 1) a.visible = false; } this.computeBoundingBox(); this.emit('updateSize'); if (this.path == null) { this.setPathFromUrl(url); } this.status = 'ready'; this.emit('ready'); } /** * Computes the bounding box containing all tile regions. * Updates the layout's box property to encompass all tile regions. * @private */ computeBoundingBox() { this.box = new BoundingBox(); for (let a of this.tileDescriptors) { let r = a.region; let b = new BoundingBox({ xLow: r.x, yLow: r.y, xHigh: r.x + r.w, yHigh: r.y + r.h }); this.box.mergeBox(b); } } /** * Gets the layout's bounding box. * @returns {BoundingBox} The bounding box containing all tile regions */ boundingBox() { return this.box; } /** * Sets the base path for tile URLs based on the annotation file location. * @private * @param {string} url - URL of the annotation file */ setPathFromUrl(url) { // Assume annotations in dir of annotation.json + /annot/ const myArray = url.split(\"/\"); const N = myArray.length; this.path = \"\"; for (let i = 0; i &lt; N - 1; ++i) { this.path += myArray[i] + \"/\"; } this.getTileURL = (id, tile) =&gt; { const url = this.path + '/' + this.tileDescriptors[tile.index].image; return url; } //this.path += \"/annot/\"; } /** * Sets tile descriptors programmatically instead of loading from a file. * @param {Annotation[]} tileDescriptors - Array of tile descriptors * @fires Layout#ready */ setTileDescriptors(tileDescriptors) { this.tileDescriptors = tileDescriptors; this.status = 'ready'; this.emit('ready'); } /** * Gets the URL for a specific tile. * @param {number} id - Channel/raster ID * @param {Tile} tile - Tile object * @returns {string} URL to fetch tile image */ getTileURL(id, tile) { const url = this.path + '/' + this.tileDescriptors[id].image; return url; } /** * Sets visibility for a specific tile. * @param {number} index - Index of the tile * @param {boolean} visible - Visibility state to set */ setTileVisible(index, visible) { this.tileDescriptors[index].visible = visible; } /** * Sets visibility for all tiles. * @param {boolean} visible - Visibility state to set for all tiles */ setAllTilesVisible(visible) { const N = this.tileCount(); for (let i = 0; i &lt; N; ++i) { this.tileDescriptors[i].visible = visible; } } /** * Maps tile coordinates to a linear index. * In this layout, x directly maps to the index as tiles are stored in a flat list. * @param {number} level - Zoom level (unused in this layout) * @param {number} x - X coordinate (used as index) * @param {number} y - Y coordinate (unused in this layout) * @returns {number} Linear index of the tile */ index(level, x, y) { // Map x to index (flat list) return x; } /** * Gets coordinates for a tile in both image space and texture space. * @param {Tile} tile - The tile to get coordinates for * @returns {Object} Coordinate data * @returns {Float32Array} .coords - Image space coordinates [x,y,z, x,y,z, x,y,z, x,y,z] * @returns {Float32Array} .tcoords - Texture coordinates [u,v, u,v, u,v, u,v] */ tileCoords(tile) { const r = this.tileDescriptors[tile.index].region; const x0 = r.x; const y0 = r.y const x1 = x0 + r.w; const y1 = y0 + r.h; return { coords: new Float32Array([x0, y0, 0, x0, y1, 0, x1, y1, 0, x1, y0, 0]), //careful: here y is inverted due to textures not being flipped on load (Firefox fault!). tcoords: new Float32Array([0, 1, 0, 0, 1, 0, 1, 1]) }; } /** * Determines which tiles are needed for the current view. * @param {Viewport} viewport - Current viewport * @param {Transform} transform - Current transform * @param {Transform} layerTransform - Layer-specific transform * @param {number} border - Border size in viewport units * @param {number} bias - Resolution bias (unused in this layout) * @param {Map&lt;number,Tile&gt;} tiles - Currently available tiles * @param {number} [maxtiles=8] - Maximum number of tiles to return * @returns {Tile[]} Array of needed tiles sorted by distance to viewport center */ needed(viewport, transform, layerTransform, border, bias, tiles, maxtiles = 8) { //look for needed nodes and prefetched nodes (on the pos destination const box = this.getViewportBox(viewport, transform, layerTransform); let needed = []; let now = performance.now(); // Linear scan of all the potential tiles const N = this.tileCount(); const flipY = true; for (let x = 0; x &lt; N; x++) { let index = this.index(0, x, 0); let tile = tiles.get(index) || this.newTile(index); if (this.intersects(box, index, flipY)) { tile.time = now; tile.priority = this.tileDescriptors[index].visible ? 10 : 1; if (tile.missing === null) needed.push(tile); } } let c = box.center(); //sort tiles by distance to the center TODO: check it's correct! needed.sort(function (a, b) { return Math.abs(a.x - c[0]) + Math.abs(a.y - c[1]) - Math.abs(b.x - c[0]) - Math.abs(b.y - c[1]); }); return needed; } /** * Gets tiles currently available for rendering. * @param {Viewport} viewport - Current viewport * @param {Transform} transform - Current transform * @param {Transform} layerTransform - Layer-specific transform * @param {number} border - Border size in viewport units * @param {number} bias - Resolution bias (unused in this layout) * @param {Map&lt;number,Tile&gt;} tiles - Available tiles * @returns {Object.&lt;number,Tile&gt;} Map of tile index to tile object for visible, loaded tiles */ available(viewport, transform, layerTransform, border, bias, tiles) { //find box in image coordinates where (0, 0) is in the upper left corner. const box = this.getViewportBox(viewport, transform, layerTransform); let torender = []; // Linear scan of all the potential tiles const N = this.tileCount(); const flipY = true; for (let x = 0; x &lt; N; x++) { let index = this.index(0, x, 0); if (this.tileDescriptors[index].visible &amp;&amp; this.intersects(box, index, flipY)) { if (tiles.has(index)) { let tile = tiles.get(index); if (tile.missing == 0) { torender[index] = tile; } } } } return torender; } /** * Creates a new tile instance with properties from its descriptor. * @param {number} index - Index of the tile descriptor * @returns {Tile} New tile instance with region and image properties */ newTile(index) { let tile = new Tile(); tile.index = index; let descriptor = this.tileDescriptors[index]; tile.image = descriptor.image; Object.assign(tile, descriptor.region); return tile; } /** * Checks if a tile's region intersects with a given box. * @private * @param {BoundingBox} box - Box to check intersection with * @param {number} index - Index of the tile to check * @param {boolean} [flipY=true] - Whether to flip Y coordinates for texture coordinate space * @returns {boolean} True if the tile intersects the box */ intersects(box, index, flipY = true) { const r = this.tileDescriptors[index].region; const xLow = r.x; const yLow = r.y; const xHigh = xLow + r.w; const yHigh = yLow + r.h; const boxYLow = flipY ? -box.yHigh : box.yLow; const boxYHigh = flipY ? -box.yLow : box.yHigh; return xLow &lt; box.xHigh &amp;&amp; yLow &lt; boxYHigh &amp;&amp; xHigh &gt; box.xLow &amp;&amp; yHigh &gt; boxYLow; } /** * Gets the total number of tiles in the layout. * @returns {number} Number of tile descriptors */ tileCount() { return this.tileDescriptors.length; } } /** * @event Layout#ready * Fired when the layout is ready for rendering. * This occurs when: * - Tile descriptors are loaded from annotation file * - Tile descriptors are set programmatically */ /** * @event Layout#updateSize * Fired when the layout size changes and scene extension needs updating. * This occurs when: * - Tile descriptors are loaded and bounding box is computed */ // Register the tile_images layout type Layout.prototype.types['tile_images'] = (url, type, options) =&gt; { return new LayoutTileImages(url, type, options); }; export { LayoutTileImages } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"LensDashboard.js.html":{"id":"LensDashboard.js.html","title":"Source: LensDashboard.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: LensDashboard.js import { CoordinateSystem } from \"./CoordinateSystem\"; import { Util } from \"./Util\" /** * @fileoverview * LensDashboard module provides functionality for creating and managing an interactive lens interface * in OpenLIME. It handles the lens border, SVG masking, and positioning of UI elements around the lens. */ /** * @enum {string} * Defines rendering modes for lens and background areas. * @property {string} draw - \"fill:white;\" Shows content in the specified area * @property {string} hide - \"fill:black;\" Hides content in the specified area */ const RenderingMode = { draw: \"fill:white;\", hide: \"fill:black;\" }; /** * Callback function fired by a 'click' event on a lens dashboard element. * @function taskCallback * @param {Event} e The DOM event. */ /** * LensDashboard class creates an interactive container for a lens interface. * It provides: * - A square HTML container that moves with the lens * - SVG-based circular lens border with drag interaction for resizing * - Masking capabilities for controlling content visibility inside/outside the lens * - Ability to add HTML elements positioned relative to the lens */ class LensDashboard { /** * Creates a new LensDashboard instance. * @param {Viewer} viewer - The OpenLIME viewer instance * @param {Object} [options] - Configuration options * @param {number} [options.containerSpace=80] - Extra space around the lens for dashboard elements (in pixels) * @param {number[]} [options.borderColor=[0.078, 0.078, 0.078, 1]] - RGBA color for lens border * @param {number} [options.borderWidth=12] - Width of the lens border (in pixels) * @param {LayerSvgAnnotation} [options.layerSvgAnnotation=null] - Associated SVG annotation layer */ constructor(viewer, options) { options = Object.assign({ containerSpace: 80, borderColor: [0.078, 0.078, 0.078, 1], borderWidth: 12, layerSvgAnnotation: null }, options); Object.assign(this, options); this.lensLayer = null; this.viewer = viewer; this.elements = []; this.container = document.createElement('div'); this.container.style = `position: absolute; width: 50px; height: 50px; background-color: rgb(200, 0, 0, 0.0); pointer-events: none`; this.container.classList.add('openlime-lens-dashboard'); this.viewer.containerElement.appendChild(this.container); const col = [255.0 * this.borderColor[0], 255.0 * this.borderColor[1], 255.0 * this.borderColor[2], 255.0 * this.borderColor[3]]; this.lensElm = Util.createSVGElement('svg', { viewBox: `0 0 100 100` }); const circle = Util.createSVGElement('circle', { cx: 10, cy: 10, r: 50 }); circle.setAttributeNS(null, 'style', `position:absolute; visibility: visible; fill: none; stroke: rgb(${col[0]},${col[1]},${col[2]},${col[3]}); stroke-width: ${this.borderWidth}px;`); circle.setAttributeNS(null, 'shape-rendering', 'geometricPrecision'); this.lensElm.appendChild(circle); this.container.appendChild(this.lensElm); this.setupCircleInteraction(circle); this.lensBox = { x: 0, y: 0, r: 0, w: 0, h: 0 }; this.svgElement = null; this.svgMaskId = 'openlime-image-mask'; this.svgMaskUrl = `url(#${this.svgMaskId})`; this.noupdate = false; } /** * Sets up interactive lens border resizing. * Creates event listeners for pointer events to allow users to drag the lens border to resize. * @private * @param {SVGElement} circle - The SVG circle element representing the lens border */ setupCircleInteraction(circle) { circle.style.pointerEvents = 'auto'; this.isCircleSelected = false; // OffsetXY are unstable from this point (I don't know why) // Thus get coordinates from clientXY function getXYFromEvent(e, container) { const x = e.clientX - container.offsetLeft - container.clientLeft; const y = e.clientY - container.offsetTop - container.clientTop; return { offsetX: x, offsetY: y }; } this.viewer.containerElement.addEventListener('pointerdown', (e) =&gt; { if (circle == e.target) { this.isCircleSelected = true; if (this.lensLayer.controllers[0]) { const p = getXYFromEvent(e, this.viewer.containerElement); this.lensLayer.controllers[0].zoomStart(p); } e.preventDefault(); e.stopPropagation(); } }); this.viewer.containerElement.addEventListener('pointermove', (e) =&gt; { if (this.isCircleSelected) { if (this.lensLayer.controllers[0]) { const p = getXYFromEvent(e, this.viewer.containerElement); this.lensLayer.controllers[0].zoomMove(p); } e.preventDefault(); e.stopPropagation(); } }); this.viewer.containerElement.addEventListener('pointerup', (e) =&gt; { if (this.isCircleSelected) { if (this.lensLayer.controllers[0]) { this.lensLayer.controllers[0].zoomEnd(); } this.isCircleSelected = false; e.preventDefault(); e.stopPropagation(); } }); } /** * Toggles the visibility of the dashboard UI elements. * Uses CSS classes to show/hide the interface. */ toggle() { this.container.classList.toggle('closed'); } /** * Associates a LayerSvgAnnotation with the dashboard. * This enables proper masking of SVG annotations within the lens area. * @param {LayerSvgAnnotation} layer - The SVG annotation layer to associate */ setLayerSvgAnnotation(layer) { this.layerSvgAnnotation = l; this.svgElement = this.layerSvgAnnotation.svgElement; } /** * Creates SVG masking elements for the lens. * Sets up a composite mask consisting of: * - A full-viewport rectangle for the background * - A circle for the lens area * The mask controls visibility of content inside vs outside the lens. * @private */ createSvgLensMask() { if (this.svgElement == null) this.setupSvgElement(); if (this.svgElement == null) return; // Create a mask made of a rectangle (it will be set to the full viewport) for the background // And a circle, corresponding to the lens. const w = 100; // The real size will be set at each frame by the update function this.svgMask = Util.createSVGElement(\"mask\", { id: this.svgMaskId }); this.svgGroup = Util.createSVGElement(\"g\"); this.outMask = Util.createSVGElement(\"rect\", { id: 'outside-lens-mask', x: -w / 2, y: -w / 2, width: w, height: w, style: \"fill:black;\" }); this.inMask = Util.createSVGElement(\"circle\", { id: 'inside-lens-mask', cx: 0, cy: 0, r: w / 2, style: \"fill:white;\" }); this.svgGroup.appendChild(this.outMask); this.svgGroup.appendChild(this.inMask); this.svgMask.appendChild(this.svgGroup); this.svgElement.appendChild(this.svgMask); // FIXME Remove svgCheck. It's a Check, just to have an SVG element to mask // this.svgCheck = Util.createSVGElement('rect', {x:-w/2, y:-w/2, width:w/2, height:w/2, style:'fill:orange; stroke:blue; stroke-width:5px;'}); // // this.svgCheck.setAttribute('mask', this.svgMaskUrl); // this.svgElement.appendChild(this.svgCheck); // console.log(this.svgCheck); } /** * Sets up the SVG container element for the lens. * Will either: * - Use the SVG element from an associated annotation layer * - Find an existing SVG element in the shadow DOM * - Create a new SVG element if needed * @private */ setupSvgElement() { if (this.layerSvgAnnotation) { // AnnotationLayer available, get its root svgElement if (this.svgElement == null) { //console.log(\"NULL SVG ELEMENT, take it from layerSvgAnnotation\"); this.svgElement = this.layerSvgAnnotation.svgElement; } } else { // No annotationLayer, search for an svgElement // First: get shadowRoot to attach the svgElement let shadowRoot = this.viewer.canvas.overlayElement.shadowRoot; if (shadowRoot == null) { //console.log(\"WARNING: null ShadowRoot, create a new one\"); shadowRoot = this.viewer.canvas.overlayElement.attachShadow({ mode: \"open\" }); } //console.log(\"WARNING: no svg element, create a new one\"); this.svgElement = shadowRoot.querySelector('svg'); if (this.svgElement == null) { // Not availale svg element: build a new one and attach to the tree this.svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); this.svgElement.classList.add('openlime-svgoverlay-mask'); this.svgElement.setAttributeNS(null, 'style', 'pointer-events: none;'); shadowRoot.appendChild(this.svgElement); } } } /** * Applies the lens mask to an SVG element. * Elements with the mask will only be visible within the lens area * (or outside, depending on mask configuration). * @param {SVGElement} svg - The SVG element to mask */ setMaskOnSvgLayer(svg) { svg.setAttributeNS(null, 'mask', this.svgMaskUrl); } /** * Removes the lens mask from an SVG element. * Returns the element to its normal, unmasked rendering. * @param {SVGElement} svg - The SVG element to unmask */ removeMaskFromSvgLayer(svg) { svg.removeAttribute('mask'); } /** * Adds an HTML element to the dashboard container. * The element should use absolute positioning relative to the container. * Example: * ```javascript * const button = document.createElement('button'); * button.style = 'position: absolute; left: 10px; top: 10px;'; * lensDashboard.append(button); * ``` * @param {HTMLElement} elm - The HTML element to add */ append(elm) { this.container.appendChild(elm); } /** * Sets the rendering mode for the lens area. * Controls whether content inside the lens is shown or hidden. * @param {RenderingMode} mode - The rendering mode to use */ setLensRenderingMode(mode) { this.inMask.setAttributeNS(null, 'style', mode); } /** * Sets the rendering mode for the background (area outside the lens). * Controls whether content outside the lens is shown or hidden. * @param {RenderingMode} mode - The rendering mode to use */ setBackgroundRenderingMode(mode) { this.outMask.setAttributeNS(null, 'style', mode); } /** * Updates the dashboard position and size. * Called internally when the lens moves or resizes. * @private * @param {number} x - Center X coordinate in scene space * @param {number} y - Center Y coordinate in scene space * @param {number} r - Lens radius in scene space */ update(x, y, r) { const useGL = false; const center = CoordinateSystem.fromSceneToCanvasHtml({ x: x, y: y }, this.viewer.camera, useGL); const now = performance.now(); let cameraT = this.viewer.camera.getCurrentTransform(now); const radius = r * cameraT.z; const sizew = 2 * radius + 2 * this.containerSpace; const sizeh = 2 * radius + 2 * this.containerSpace; const p = { x: 0, y: 0 }; p.x = center.x - radius - this.containerSpace; p.y = center.y - radius - this.containerSpace; this.container.style.left = `${p.x}px`; this.container.style.top = `${p.y}px`; this.container.style.width = `${sizew}px`; this.container.style.height = `${sizeh}px`; // Lens circle if (sizew != this.lensBox.w || sizeh != this.lensBox.h) { const cx = Math.ceil(sizew * 0.5); const cy = Math.ceil(sizeh * 0.5); this.lensElm.setAttributeNS(null, 'viewBox', `0 0 ${sizew} ${sizeh}`); const circle = this.lensElm.querySelector('circle'); circle.setAttributeNS(null, 'cx', cx); circle.setAttributeNS(null, 'cy', cy); circle.setAttributeNS(null, 'r', radius - 0.5 * this.borderWidth); } this.updateMask(cameraT, center, radius); this.lensBox = { x: center.x, y: center.y, r: radius, w: sizew, h: sizeh } } /** * Updates the SVG mask position and size. * Called internally by update() to keep the mask aligned with the lens. * @private * @param {Transform} cameraT - Current camera transform * @param {Object} center - Lens center in canvas coordinates * @param {number} center.x - Center X coordinate * @param {number} center.y - Center Y coordinate * @param {number} radius - Lens radius in canvas coordinates */ updateMask(cameraT, center, radius) { if (this.svgElement == null) { this.createSvgLensMask(); } if (this.svgElement == null) return; // Lens Mask const viewport = this.viewer.camera.viewport; if (this.layerSvgAnnotation != null) { // Compensate the mask transform with the inverse of the annotation svgGroup transform const inverse = true; const invTransfStr = this.layerSvgAnnotation.getSvgGroupTransform(cameraT, inverse); this.svgGroup.setAttribute(\"transform\", invTransfStr); } else { // Set the viewbox. (in the other branch it is set by the layerSvgAnnotation) this.svgElement.setAttribute('viewBox', `${-viewport.w / 2} ${-viewport.h / 2} ${viewport.w} ${viewport.h}`); } // Set the full viewport for outer mask rectangle this.outMask.setAttribute('x', -viewport.w / 2); this.outMask.setAttribute('y', -viewport.h / 2); this.outMask.setAttribute('width', viewport.w); this.outMask.setAttribute('height', viewport.h); // Set lens parameter for inner lens this.inMask.setAttributeNS(null, 'cx', center.x - viewport.w / 2); this.inMask.setAttributeNS(null, 'cy', center.y - viewport.h / 2); this.inMask.setAttributeNS(null, 'r', radius - this.borderWidth - 2); } } /** * Example usage of LensDashboard: * ```javascript * const lensDashboard = new OpenLIME.LensDashboard(limeViewer, { * containerSpace: 100, * borderColor: [0.1, 0.1, 0.1, 1], * borderWidth: 10 * }); * * const lensLayer = new OpenLIME.Layer({ * type: \"lens\", * layers: [innerLayer], * camera: limeViewer.camera, * radius: 200, * dashboard: lensDashboard, * visible: true * }); * * const button = document.createElement('button'); * button.innerHTML = \"Toggle Layer\"; * button.style = ` * position: absolute; * left: 10px; * top: 10px; * pointer-events: auto; * `; * lensDashboard.append(button); * ``` */ export { LensDashboard, RenderingMode }; × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"LensDashboardNavigator.js.html":{"id":"LensDashboardNavigator.js.html","title":"Source: LensDashboardNavigator.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: LensDashboardNavigator.js import { Util } from \"./Util\" import { LensDashboard } from \"./LensDashboard\" /** * @fileoverview * LensDashboardNavigator module provides an enhanced lens dashboard with navigation controls and tools. * Extends the base LensDashboard with additional UI elements for camera control, lighting, and annotation navigation. */ /** * LensDashboardNavigator class creates an interactive lens dashboard with navigation controls. * Provides: * - Camera movement control * - Light direction control * - Annotation switching and navigation * - Toolbar UI elements positioned around the lens * @extends LensDashboard */ class LensDashboardNavigator extends LensDashboard { /** * Creates a new LensDashboardNavigator instance. * @param {Viewer} viewer - The OpenLIME viewer instance * @param {Object} [options] - Configuration options * @param {number} [options.toolboxHeight=22] - Height of the toolbox UI elements in pixels * @param {number} [options.angleToolbar=30] - Angle of toolbar position in degrees * @param {Object} [options.actions] - Configuration for toolbar actions * @param {Object} [options.actions.camera] - Camera control action * @param {string} options.actions.camera.label - Action identifier * @param {Function} options.actions.camera.task - Callback for camera action * @param {Object} [options.actions.light] - Light control action * @param {string} options.actions.light.label - Action identifier * @param {Function} options.actions.light.task - Callback for light action * @param {Object} [options.actions.annoswitch] - Annotation toggle action * @param {string} options.actions.annoswitch.label - Action identifier * @param {string} options.actions.annoswitch.type - Action type ('toggle') * @param {string} options.actions.annoswitch.toggleClass - CSS class for toggle element * @param {Function} options.actions.annoswitch.task - Callback for annotation toggle * @param {Object} [options.actions.prev] - Previous annotation action * @param {string} options.actions.prev.label - Action identifier * @param {Function} options.actions.prev.task - Callback for previous action * @param {Object} [options.actions.down] - Download annotation action * @param {string} options.actions.down.label - Action identifier * @param {Function} options.actions.down.task - Callback for download action * @param {Object} [options.actions.next] - Next annotation action * @param {string} options.actions.next.label - Action identifier * @param {Function} options.actions.next.task - Callback for next action * @param {Function} [options.updateCb] - Callback fired during lens updates * @param {Function} [options.updateEndCb] - Callback fired when lens movement ends */ constructor(viewer, options) { super(viewer, options); options = Object.assign({ toolboxHeight: 22, actions: { camera: { label: 'camera', task: (event) =&gt; { if (!this.actions.camera.active) this.toggleLightController(); } }, light: { label: 'light', task: (event) =&gt; { if (!this.actions.light.active) this.toggleLightController(); } }, annoswitch: { label: 'annoswitch', type: 'toggle', toggleClass: '.openlime-lens-dashboard-annoswitch-bar', task: (event) =&gt; { } }, prev: { label: 'prev', task: (event) =&gt; { } }, down: { label: 'down', task: (event) =&gt; { } }, next: { label: 'next', task: (event) =&gt; { } }, }, updateCb: null, updateEndCb: null }, options); Object.assign(this, options); this.moving = false; this.delay = 400; this.timeout = null; // Timeout for moving this.noupdate = false; this.angleToolbar = 30.0 * (Math.PI / 180.0); this.container.style.display = 'block'; this.container.style.margin = '0'; const h1 = document.createElement('div'); h1.style = `text-align: center; color: #fff`; h1.classList.add('openlime-lens-dashboard-toolbox-header'); h1.innerHTML = 'MOVE'; const h2 = document.createElement('div'); h2.style = `text-align: center; color: #fff`; h2.classList.add('openlime-lens-dashboard-toolbox-header'); h2.innerHTML = 'INFO'; this.toolbox1 = document.createElement('div'); this.toolbox1.style = `z-index: 10; position: absolute; padding: 4px; left: 0px; width: fit-content; background-color: rgb(20, 20, 20, 1.0); border-radius: 10px; gap: 8px`; this.toolbox1.classList.add('openlime-lens-dashboard-toolbox'); this.container.appendChild(this.toolbox1); this.toolbox1.appendChild(h1); this.toolbox2 = document.createElement('div'); this.toolbox2.style = `z-index: 10; position: absolute; padding: 4px; right: 0px; width: fit-content; background-color: rgb(20, 20, 20, 1.0); border-radius: 10px; gap: 8px`; this.toolbox2.classList.add('openlime-lens-dashboard-toolbox'); this.container.appendChild(this.toolbox2); this.toolbox2.appendChild(h2); this.tools1 = document.createElement('div'); this.tools1.style = `display: flex; justify-content: center; height: ${this.toolboxHeight}px`; this.tools1.classList.add('openlime-lens-dashboard-toolbox-tools'); this.toolbox1.appendChild(this.tools1); this.tools2 = document.createElement('div'); this.tools2.style = `display: flex; justify-content: center; height: ${this.toolboxHeight}px`; this.tools2.classList.add('openlime-lens-dashboard-toolbox-tools'); this.toolbox2.appendChild(this.tools2); // TOOLBOX ITEMS this.actions.camera.svg = `&lt;?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?&gt; &lt;!-- Created with Inkscape (http://www.inkscape.org/) --&gt; &lt;svg viewBox=\"0 0 83.319054 83.319054\" version=\"1.1\" id=\"svg2495\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\"&gt; &lt;defs id=\"defs2492\" /&gt; &lt;g id=\"layer1\" transform=\"translate(-69.000668,-98.39946)\"&gt; &lt;g id=\"g2458\" transform=\"matrix(0.35277777,0,0,0.35277777,46.261671,-65.803422)\" class=\"openlime-lens-dashboard-camera\"&gt; &lt;path class=\"openlime-lens-dashboard-button-bkg\" d=\"m 300.637,583.547 c 0,65.219 -52.871,118.09 -118.09,118.09 -65.219,0 -118.09,-52.871 -118.09,-118.09 0,-65.219 52.871,-118.09 118.09,-118.09 65.219,0 118.09,52.871 118.09,118.09 z\" style=\"fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none\" id=\"path50\" /&gt; &lt;g id=\"g52\"&gt; &lt;path d=\"M 123.445,524.445 H 241.652 V 642.648 H 123.445 Z\" style=\"fill:#ffffff;fill-opacity:0;fill-rule:nonzero;stroke:#000000;stroke-width:16.7936;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1\" id=\"path54\" /&gt; &lt;/g&gt; &lt;g id=\"g56\" transform=\"scale(1,0.946694)\"&gt; &lt;path d=\"m 190.449,581.031 h -15.793 c -0.011,7.563 0,27.472 0,27.472 0,0 -17.133,0 -25.609,0.025 v 15.779 c 8.476,-0.009 25.609,-0.009 25.609,-0.009 0,0 0,19.881 -0.011,27.485 h 15.793 c 0.011,-7.604 0.011,-27.485 0.011,-27.485 0,0 17.125,0 25.598,0 v -15.795 c -8.473,0 -25.598,0 -25.598,0 0,0 -0.023,-19.904 0,-27.472\" style=\"fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.52673;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1\" id=\"path58\" /&gt; &lt;/g&gt; &lt;path d=\"m 269.254,557.93 22.332,21.437 c 2.098,2.071 2.195,5.344 0,7.504 l -22.332,21.008 c -1.25,1.25 -5.004,1.25 -6.254,-2.504 v -46.273 c 1.25,-3.672 5.004,-2.422 6.254,-1.172 z\" style=\"fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none\" id=\"path60\" /&gt; &lt;path d=\"M 95.844,607.395 73.508,585.957 c -2.094,-2.07 -2.192,-5.34 0,-7.504 l 22.336,-21.008 c 1.25,-1.25 5,-1.25 6.254,2.504 v 46.274 c -1.254,3.672 -5.004,2.422 -6.254,1.172 z\" style=\"fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none\" id=\"path62\" /&gt; &lt;path d=\"m 157.59,494.32 21.437,-22.332 c 2.071,-2.097 5.344,-2.191 7.504,0 l 21.008,22.332 c 1.25,1.254 1.25,5.004 -2.504,6.254 h -46.273 c -3.672,-1.25 -2.422,-5 -1.172,-6.254 z\" style=\"fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none\" id=\"path64\" /&gt; &lt;path d=\"m 207.055,671.785 -21.438,22.336 c -2.07,2.094 -5.344,2.191 -7.504,0 l -21.008,-22.336 c -1.25,-1.25 -1.25,-5 2.504,-6.25 h 46.274 c 3.672,1.25 2.422,5 1.172,6.25 z\" style=\"fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none\" id=\"path66\" /&gt; &lt;/g&gt; &lt;/g&gt; &lt;/svg&gt;`; this.actions.light.svg = `&lt;?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?&gt; &lt;!-- Created with Inkscape (http://www.inkscape.org/) --&gt; &lt;svg viewBox=\"0 0 83.319054 83.320114\" version=\"1.1\" id=\"svg5698\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\"&gt; &lt;defs id=\"defs5695\" /&gt; &lt;g id=\"layer1\" transform=\"translate(-104.32352,-59.017909)\"&gt; &lt;g id=\"g2477\" transform=\"matrix(0.35277777,0,0,0.35277777,-16.220287,-105.16169)\" class=\"openlime-lens-dashboard-light\"&gt; &lt;path class=\"openlime-lens-dashboard-button-bkg\" d=\"m 577.879,583.484 c 0,65.219 -52.871,118.09 -118.09,118.09 -65.219,0 -118.09,-52.871 -118.09,-118.09 0,-65.222 52.871,-118.093 118.09,-118.093 65.219,0 118.09,52.871 118.09,118.093 z\" style=\"fill:#fbfbfb;fill-opacity:1;fill-rule:nonzero;stroke:none\" id=\"path74\" /&gt; &lt;path d=\"m 546.496,558.359 22.332,21.438 c 2.098,2.066 2.192,5.34 0,7.504 l -22.332,21.004 c -1.25,1.254 -5.004,1.254 -6.254,-2.5 v -46.274 c 1.25,-3.672 5.004,-2.422 6.254,-1.172 z\" style=\"fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none\" id=\"path76\" /&gt; &lt;path d=\"M 373.082,607.82 350.75,586.383 c -2.094,-2.067 -2.191,-5.34 0,-7.504 l 22.332,-21.004 c 1.254,-1.25 5.004,-1.25 6.254,2.5 v 46.277 c -1.25,3.672 -5,2.422 -6.254,1.168 z\" style=\"fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none\" id=\"path78\" /&gt; &lt;path d=\"m 434.832,494.75 21.438,-22.332 c 2.07,-2.098 5.339,-2.195 7.503,0 l 21.008,22.332 c 1.25,1.25 1.25,5.004 -2.504,6.254 h -46.273 c -3.672,-1.25 -2.422,-5.004 -1.172,-6.254 z\" style=\"fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none\" id=\"path80\" /&gt; &lt;path d=\"m 484.297,672.215 -21.438,22.332 c -2.07,2.098 -5.343,2.195 -7.507,0 l -21.004,-22.332 c -1.25,-1.25 -1.25,-5.004 2.504,-6.254 h 46.273 c 3.672,1.25 2.422,5.004 1.172,6.254 z\" style=\"fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none\" id=\"path82\" /&gt; &lt;path d=\"m 438.223,599.988 c 0,0 -2.161,-0.535 -3.684,0.227 -1.523,0.762 -0.789,8.773 -0.789,8.773 l 16.305,-0.222 c 0,0 -14.071,3.597 -15.383,6.296 -1.317,2.7 1.672,6.786 4.34,7.426 2.136,0.516 45.793,-13.426 46.808,-14.625 0.883,-1.039 1.446,-6.75 0.528,-7.648 -0.922,-0.899 -4.602,-0.789 -4.602,-0.789 0,0 -1.449,0.113 -0.133,-3.934 1.317,-4.051 15.254,-20.137 18.672,-30.262 3.293,-9.753 1.387,-22.531 -2.367,-28.683 -3.965,-6.504 -9.598,-10.688 -17.356,-13.723 -7.789,-3.051 -22.191,-4.773 -33.664,-1.578 -11.425,3.188 -20.32,8.988 -25.507,16.649 -4.657,6.878 -4.473,20.699 -2.895,26.097 1.578,5.403 17.621,25.426 19.199,29.473 1.578,4.051 0.528,6.523 0.528,6.523 z\" style=\"fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none\" id=\"path84\" /&gt; &lt;g id=\"g86\" transform=\"scale(1,0.855493)\"&gt; &lt;path d=\"m 438.223,701.337 c 0,0 -2.161,-0.626 -3.684,0.265 -1.523,0.89 -0.789,10.255 -0.789,10.255 l 16.305,-0.26 c 0,0 -14.071,4.205 -15.383,7.36 -1.317,3.155 1.672,7.931 4.34,8.68 2.136,0.603 45.793,-15.693 46.808,-17.095 0.883,-1.215 1.446,-7.89 0.528,-8.94 -0.922,-1.051 -4.602,-0.923 -4.602,-0.923 0,0 -1.449,0.133 -0.133,-4.598 1.317,-4.735 15.254,-23.538 18.672,-35.373 3.293,-11.402 1.387,-26.337 -2.367,-33.529 -3.965,-7.603 -9.598,-12.493 -17.356,-16.041 -7.789,-3.566 -22.191,-5.579 -33.664,-1.844 -11.425,3.725 -20.32,10.506 -25.507,19.46 -4.657,8.041 -4.473,24.196 -2.895,30.506 1.578,6.315 17.621,29.721 19.199,34.451 1.578,4.735 0.528,7.626 0.528,7.626 z\" style=\"fill:none;stroke:#f8f8f8;stroke-width:8.1576;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.00677317\" id=\"path88\" /&gt; &lt;/g&gt; &lt;path d=\"m 435.59,631.598 c 0.394,3.714 14.992,14.851 20.91,15.414 5.914,0.562 5.125,0.898 9.336,-0.453 4.207,-1.348 17.617,-9.223 18.277,-10.571 1.68,-3.453 2.758,-6.976 1.313,-9.113 -1.449,-2.145 -3.946,-0.563 -6.574,0.227 -2.629,0.785 -13.805,5.734 -17.489,6.859 -2.89,0.883 -9.203,-0.563 -9.203,-0.563 0,0 32.012,-10.578 33.266,-12.933 1.316,-2.477 0.262,-6.977 -2.762,-7.539 -1.926,-0.36 -43.785,13.386 -44.836,15.074 -1.055,1.688 -2.238,3.598 -2.238,3.598 z\" style=\"fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none\" id=\"path90\" /&gt; &lt;g id=\"g92\" transform=\"scale(1,0.855493)\"&gt; &lt;path d=\"m 435.59,738.285 c 0.394,4.343 14.992,17.361 20.91,18.018 5.914,0.658 5.125,1.05 9.336,-0.529 4.207,-1.576 17.617,-10.781 18.277,-12.356 1.68,-4.037 2.758,-8.155 1.313,-10.653 -1.449,-2.507 -3.946,-0.657 -6.574,0.265 -2.629,0.918 -13.805,6.703 -17.489,8.018 -2.89,1.032 -9.203,-0.658 -9.203,-0.658 0,0 32.012,-12.365 33.266,-15.118 1.316,-2.895 0.262,-8.155 -2.762,-8.812 -1.926,-0.421 -43.785,15.648 -44.836,17.62 -1.055,1.973 -2.238,4.205 -2.238,4.205 z\" style=\"fill:none;stroke:#f8f8f8;stroke-width:8.1576;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.00677317\" id=\"path94\" /&gt; &lt;/g&gt; &lt;path d=\"m 438.223,599.988 c 0,0 -2.161,-0.535 -3.684,0.227 -1.523,0.762 -0.789,8.773 -0.789,8.773 l 16.305,-0.222 c 0,0 -14.071,3.597 -15.383,6.296 -1.317,2.7 1.672,6.786 4.34,7.426 2.136,0.516 45.793,-13.426 46.808,-14.625 0.883,-1.039 1.446,-6.75 0.528,-7.648 -0.922,-0.899 -4.602,-0.789 -4.602,-0.789 0,0 -1.449,0.113 -0.133,-3.934 1.317,-4.051 15.254,-20.137 18.672,-30.262 3.293,-9.753 1.387,-22.531 -2.367,-28.683 -3.965,-6.504 -9.598,-10.688 -17.356,-13.723 -7.789,-3.051 -22.191,-4.773 -33.664,-1.578 -11.425,3.188 -20.32,8.988 -25.507,16.649 -4.657,6.878 -4.473,20.699 -2.895,26.097 1.578,5.403 17.621,25.426 19.199,29.473 1.578,4.051 0.528,6.523 0.528,6.523 z\" style=\"fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none\" id=\"path96\" /&gt; &lt;g id=\"g98\" transform=\"scale(1,0.855493)\"&gt; &lt;path d=\"m 438.223,701.337 c 0,0 -2.161,-0.626 -3.684,0.265 -1.523,0.89 -0.789,10.255 -0.789,10.255 l 16.305,-0.26 c 0,0 -14.071,4.205 -15.383,7.36 -1.317,3.155 1.672,7.931 4.34,8.68 2.136,0.603 45.793,-15.693 46.808,-17.095 0.883,-1.215 1.446,-7.89 0.528,-8.94 -0.922,-1.051 -4.602,-0.923 -4.602,-0.923 0,0 -1.449,0.133 -0.133,-4.598 1.317,-4.735 15.254,-23.538 18.672,-35.373 3.293,-11.402 1.387,-26.337 -2.367,-33.529 -3.965,-7.603 -9.598,-12.493 -17.356,-16.041 -7.789,-3.566 -22.191,-5.579 -33.664,-1.844 -11.425,3.725 -20.32,10.506 -25.507,19.46 -4.657,8.041 -4.473,24.196 -2.895,30.506 1.578,6.315 17.621,29.721 19.199,34.451 1.578,4.735 0.528,7.626 0.528,7.626 z\" style=\"fill:none;stroke:#f8f8f8;stroke-width:8.1576;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.00677317\" id=\"path100\" /&gt; &lt;/g&gt; &lt;path d=\"m 435.59,631.598 c 0.394,3.714 14.992,14.851 20.91,15.414 5.914,0.562 5.125,0.898 9.336,-0.453 4.207,-1.348 17.617,-9.223 18.277,-10.571 1.68,-3.453 2.758,-6.976 1.313,-9.113 -1.449,-2.145 -3.946,-0.563 -6.574,0.227 -2.629,0.785 -13.805,5.734 -17.489,6.859 -2.89,0.883 -9.203,-0.563 -9.203,-0.563 0,0 32.012,-10.578 33.266,-12.933 1.316,-2.477 0.262,-6.977 -2.762,-7.539 -1.926,-0.36 -43.785,13.386 -44.836,15.074 -1.055,1.688 -2.238,3.598 -2.238,3.598 z\" style=\"fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none\" id=\"path102\" /&gt; &lt;g id=\"g104\" transform=\"scale(1,0.855493)\"&gt; &lt;path d=\"m 435.59,738.285 c 0.394,4.343 14.992,17.361 20.91,18.018 5.914,0.658 5.125,1.05 9.336,-0.529 4.207,-1.576 17.617,-10.781 18.277,-12.356 1.68,-4.037 2.758,-8.155 1.313,-10.653 -1.449,-2.507 -3.946,-0.657 -6.574,0.265 -2.629,0.918 -13.805,6.703 -17.489,8.018 -2.89,1.032 -9.203,-0.658 -9.203,-0.658 0,0 32.012,-12.365 33.266,-15.118 1.316,-2.895 0.262,-8.155 -2.762,-8.812 -1.926,-0.421 -43.785,15.648 -44.836,17.62 -1.055,1.973 -2.238,4.205 -2.238,4.205 z\" style=\"fill:none;stroke:#f8f8f8;stroke-width:8.1576;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.00677317\" id=\"path106\" /&gt; &lt;/g&gt; &lt;/g&gt; &lt;/g&gt; &lt;/svg&gt;`; this.actions.annoswitch.svg = `&lt;?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?&gt; &lt;!-- Created with Inkscape (http://www.inkscape.org/) --&gt; &lt;svg viewBox=\"0 0 83.319054 83.320114\" version=\"1.1\" id=\"svg11415\" xml:space=\"preserve\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\"&gt;&lt;defs id=\"defs11412\"&gt;&lt;marker style=\"overflow:visible\" id=\"TriangleStart\" refX=\"0\" refY=\"0\" orient=\"auto-start-reverse\" markerWidth=\"5.3244081\" markerHeight=\"6.155385\" viewBox=\"0 0 5.3244081 6.1553851\" preserveAspectRatio=\"xMidYMid\"&gt;&lt;path transform=\"scale(0.5)\" style=\"fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt\" d=\"M 5.77,0 -2.88,5 V -5 Z\" id=\"path135\" /&gt;&lt;/marker&gt;&lt;marker style=\"overflow:visible\" id=\"TriangleStart-5\" refX=\"0\" refY=\"0\" orient=\"auto-start-reverse\" markerWidth=\"5.3244081\" markerHeight=\"6.155385\" viewBox=\"0 0 5.3244081 6.1553851\" preserveAspectRatio=\"xMidYMid\"&gt;&lt;path transform=\"scale(0.5)\" style=\"fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt\" d=\"M 5.77,0 -2.88,5 V -5 Z\" id=\"path135-3\" /&gt;&lt;/marker&gt;&lt;/defs&gt;&lt;g id=\"g327\" transform=\"translate(129.83427,13.264356)\"&gt;&lt;g id=\"g346\"&gt;&lt;path d=\"m -46.51522,28.396234 c 0,23.007813 -18.65172,41.659526 -41.65953,41.659526 -23.00782,0 -41.65952,-18.651713 -41.65952,-41.659526 0,-23.00887 18.6517,-41.66059 41.65952,-41.66059 23.00781,0 41.65953,18.65172 41.65953,41.66059 z\" style=\"fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.352778\" id=\"path68\" class=\"openlime-lens-dashboard-button-bkg\" /&gt;&lt;g aria-label=\"i\" id=\"text430\" style=\"font-size:50.8px;line-height:1.25;font-family:'Palace Script MT';-inkscape-font-specification:'Palace Script MT';font-variant-ligatures:none;letter-spacing:0px;word-spacing:0px;stroke-width:0.264583\" transform=\"matrix(1.9896002,0,0,1.9896002,-378.32178,-41.782121)\"&gt;&lt;path d=\"m 149.74343,19.295724 c -1.4224,1.1176 -2.5908,2.032 -3.5052,2.6416 0.3556,1.0668 0.8128,1.9304 1.9304,3.556 1.4224,-1.27 1.5748,-1.4224 3.302,-2.7432 -0.1524,-0.3048 -0.254,-0.508 -0.6604,-1.1684 -0.3048,-0.6096 -0.3556,-0.6096 -0.762,-1.6256 z m 1.9304,25.4 -0.8636,0.4572 c -3.5052,1.9304 -4.1148,2.1844 -4.7244,2.1844 -0.5588,0 -0.9144,-0.5588 -0.9144,-1.4224 0,-0.8636 0,-0.8636 1.6764,-7.5692 1.8796,-7.7216 1.8796,-7.7216 1.8796,-8.128 0,-0.3048 -0.254,-0.508 -0.6096,-0.508 -0.8636,0 -3.8608,1.6764 -8.0264,4.4704 l -0.1016,1.4224 c 3.0988,-1.6764 3.2512,-1.7272 3.7084,-1.7272 0.4064,0 0.6096,0.3048 0.6096,0.8636 0,0.7112 -0.1524,1.4224 -0.9144,4.318 -2.3876,8.8392 -2.3876,8.8392 -2.3876,10.16 0,1.2192 0.4572,2.032 1.2192,2.032 0.8636,0 2.2352,-0.6604 4.9276,-2.3876 0.9652,-0.6096 1.9304,-1.2192 2.8956,-1.8796 0.4572,-0.254 0.8128,-0.508 1.4224,-0.8636 z\" style=\"font-weight:bold;font-family:Z003;-inkscape-font-specification:'Z003 Bold'\" id=\"path495\" /&gt;&lt;/g&gt;&lt;path style=\"fill:none;stroke:#000000;stroke-width:17.09477;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1\" d=\"M -66.121922,49.608737 -110.22757,7.1826674\" id=\"path465\" class=\"openlime-lens-dashboard-annoswitch-bar\" /&gt;&lt;/g&gt;&lt;/g&gt;&lt;/svg&gt;`; this.actions.prev.svg = `&lt;svg viewBox=\"0 0 83.319054 83.320114\" version=\"1.1\" id=\"svg11415\" xml:space=\"preserve\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\"&gt;&lt;defs id=\"defs11412\"&gt;&lt;marker style=\"overflow:visible\" id=\"TriangleStart\" refX=\"0\" refY=\"0\" orient=\"auto-start-reverse\" markerWidth=\"5.3244081\" markerHeight=\"6.155385\" viewBox=\"0 0 5.3244081 6.1553851\" preserveAspectRatio=\"xMidYMid\"&gt;&lt;path transform=\"scale(0.5)\" style=\"fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt\" d=\"M 5.77,0 -2.88,5 V -5 Z\" id=\"path135\" /&gt;&lt;/marker&gt;&lt;marker style=\"overflow:visible\" id=\"TriangleStart-5\" refX=\"0\" refY=\"0\" orient=\"auto-start-reverse\" markerWidth=\"5.3244081\" markerHeight=\"6.155385\" viewBox=\"0 0 5.3244081 6.1553851\" preserveAspectRatio=\"xMidYMid\"&gt;&lt;path transform=\"scale(0.5)\" style=\"fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt\" d=\"M 5.77,0 -2.88,5 V -5 Z\" id=\"path135-3\" /&gt;&lt;/marker&gt;&lt;/defs&gt;&lt;g id=\"g417\" transform=\"matrix(3.3565779,0,0,3.3565779,129.92814,-51.220758)\"&gt;&lt;g id=\"g335\"&gt;&lt;path d=\"m -172.71351,100.60243 c 0,23.00781 -18.65172,41.65952 -41.65953,41.65952 -23.00782,0 -41.65952,-18.65171 -41.65952,-41.65952 0,-23.00887 18.6517,-41.66059 41.65952,-41.66059 23.00781,0 41.65953,18.65172 41.65953,41.66059 z\" style=\"fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.352778\" id=\"path68\" class=\"openlime-lens-dashboard-button-bkg\" transform=\"matrix(0.29792248,0,0,0.29792248,37.569341,-2.3002842)\" /&gt;&lt;path style=\"fill:#030104\" d=\"m -35.494703,28.624414 c 0,-0.264 0.213,-0.474 0.475,-0.474 h 2.421 c 0.262,0 0.475,0.21 0.475,0.474 0,3.211 2.615,5.826 5.827,5.826 3.212,0 5.827,-2.615 5.827,-5.826 0,-3.214 -2.614,-5.826 -5.827,-5.826 -0.34,0 -0.68,0.028 -1.016,0.089 v 1.647 c 0,0.193 -0.116,0.367 -0.291,0.439 -0.181,0.073 -0.383,0.031 -0.521,-0.104 l -4.832,-3.273 c -0.184,-0.185 -0.184,-0.482 0,-0.667 l 4.833,-3.268 c 0.136,-0.136 0.338,-0.176 0.519,-0.104 0.175,0.074 0.291,0.246 0.291,0.438 v 1.487 c 0.34,-0.038 0.68,-0.057 1.016,-0.057 5.071,0 9.198,4.127 9.198,9.198 0,5.07 -4.127,9.197 -9.198,9.197 -5.07,10e-4 -9.197,-4.126 -9.197,-9.196 z\" id=\"path415\" /&gt;&lt;/g&gt;&lt;/g&gt;&lt;/svg&gt;`; this.actions.down.svg = `&lt;?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?&gt; &lt;!-- Created with Inkscape (http://www.inkscape.org/) --&gt; &lt;svg viewBox=\"0 0 83.319054 83.320114\" version=\"1.1\" id=\"svg11415\" xml:space=\"preserve\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\"&gt;&lt;defs id=\"defs11412\"&gt;&lt;marker style=\"overflow:visible\" id=\"TriangleStart\" refX=\"0\" refY=\"0\" orient=\"auto-start-reverse\" markerWidth=\"5.3244081\" markerHeight=\"6.155385\" viewBox=\"0 0 5.3244081 6.1553851\" preserveAspectRatio=\"xMidYMid\"&gt;&lt;path transform=\"scale(0.5)\" style=\"fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt\" d=\"M 5.77,0 -2.88,5 V -5 Z\" id=\"path135\" /&gt;&lt;/marker&gt;&lt;marker style=\"overflow:visible\" id=\"TriangleStart-5\" refX=\"0\" refY=\"0\" orient=\"auto-start-reverse\" markerWidth=\"5.3244081\" markerHeight=\"6.155385\" viewBox=\"0 0 5.3244081 6.1553851\" preserveAspectRatio=\"xMidYMid\"&gt;&lt;path transform=\"scale(0.5)\" style=\"fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt\" d=\"M 5.77,0 -2.88,5 V -5 Z\" id=\"path135-3\" /&gt;&lt;/marker&gt;&lt;/defs&gt;&lt;g id=\"g4652\" transform=\"translate(145.46385,95.197966)\"&gt;&lt;g id=\"g4846\" transform=\"translate(-126.60931,52.756264)\"&gt;&lt;path d=\"m 64.464511,-106.29364 c 0,23.007813 -18.65172,41.659526 -41.65953,41.659526 -23.0078196,0 -41.659526,-18.651713 -41.659526,-41.659526 0,-23.00887 18.6517064,-41.66059 41.659526,-41.66059 23.00781,0 41.65953,18.65172 41.65953,41.66059 z\" style=\"fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.352778\" id=\"path68\" class=\"openlime-lens-dashboard-button-bkg\" /&gt;&lt;g id=\"g2392-5\" transform=\"matrix(0.26458333,0,0,0.26458333,-283.58108,-263.57207)\"&gt;&lt;path style=\"fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:40;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1\" d=\"m 1072.4033,509.27736 h 171.1826\" id=\"path351-6\" /&gt;&lt;path style=\"fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:30;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1\" d=\"m 1185.0215,568.3701 h 59.6026\" id=\"path351-3-2\" /&gt;&lt;path style=\"fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:30;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1\" d=\"m 1184.2167,621.15576 h 59.6026\" id=\"path351-3-2-0\" /&gt;&lt;path style=\"fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:40;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1\" d=\"m 1072.4033,679.59496 h 171.1826\" id=\"path351-3-6-7-1\" /&gt;&lt;path style=\"display:inline;fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:11.4448;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#TriangleStart-5)\" d=\"m 1074.9115,570.87447 54.1203,-0.0275\" id=\"path1366-2\" /&gt;&lt;path style=\"fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:14;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1\" d=\"m 1080.0425,521.28147 v 54.87857\" id=\"path1402-7\" /&gt;&lt;path style=\"fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1\" d=\"m 1150.8866,623.00688 0.3956,-5.02729\" id=\"path2545\" /&gt;&lt;path style=\"fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:30;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1\" d=\"m 1185.0215,567.71656 h 59.6026\" id=\"path2720\" /&gt;&lt;/g&gt;&lt;/g&gt;&lt;/g&gt;&lt;/svg&gt;`; this.actions.next.svg = `&lt;?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?&gt; &lt;!-- Created with Inkscape (http://www.inkscape.org/) --&gt; &lt;svg viewBox=\"0 0 83.319054 83.320114\" version=\"1.1\" id=\"svg11415\" xml:space=\"preserve\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\"&gt;&lt;defs id=\"defs11412\"&gt;&lt;marker style=\"overflow:visible\" id=\"TriangleStart\" refX=\"0\" refY=\"0\" orient=\"auto-start-reverse\" markerWidth=\"5.3244081\" markerHeight=\"6.155385\" viewBox=\"0 0 5.3244081 6.1553851\" preserveAspectRatio=\"xMidYMid\"&gt;&lt;path transform=\"scale(0.5)\" style=\"fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt\" d=\"M 5.77,0 -2.88,5 V -5 Z\" id=\"path135\" /&gt;&lt;/marker&gt;&lt;/defs&gt;&lt;g id=\"g4652\" transform=\"translate(-12.647874,74.762541)\"&gt;&lt;path d=\"m 95.96693,-33.101955 c 0,23.007813 -18.65172,41.6595258 -41.65953,41.6595258 -23.00782,0 -41.659526,-18.6517128 -41.659526,-41.6595258 0,-23.008872 18.651706,-41.660586 41.659526,-41.660586 23.00781,0 41.65953,18.651714 41.65953,41.660586 z\" style=\"fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.352778\" id=\"path68\" class=\"openlime-lens-dashboard-button-bkg\" /&gt;&lt;g id=\"g4636\" transform=\"translate(173.74831,-50.897484)\"&gt;&lt;path style=\"fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:10.5833;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1\" d=\"m -142.08694,-4.7366002 h 45.292059\" id=\"path351\" /&gt;&lt;path style=\"fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:10.5833;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1\" d=\"m -142.08694,40.326598 h 45.292059\" id=\"path351-3-6-7\" /&gt;&lt;path style=\"display:inline;fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:3.20746;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#TriangleStart)\" d=\"m -136.09942,8.7192481 0.008,14.9721889\" id=\"path1366\" /&gt;&lt;path style=\"fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:3.70417;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1\" d=\"M -136.07283,-1.5605128 V 24.204958\" id=\"path1402\" /&gt;&lt;path style=\"fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:7.9375;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1\" d=\"m -111.69142,24.864565 h 15.76985\" id=\"path351-3-2-0-3\" /&gt;&lt;path style=\"fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:7.9375;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1\" d=\"m -111.37623,10.725444 h 15.76986\" id=\"path2720-9\" /&gt;&lt;/g&gt;&lt;/g&gt;&lt;/svg&gt;`; for (let [name, action] of Object.entries(this.actions)) { action.element = Util.SVGFromString(action.svg); action.element.style = `height: 100%; margin: 0 5px`; action.element.classList.add('openlime-lens-dashboard-button'); if (action.type == 'toggle') { const toggleElm = action.element.querySelector(action.toggleClass); toggleElm.style.visibility = `hidden`; action.active = false; } action.element.addEventListener('pointerdown', (e) =&gt; { if (action.type == 'toggle') { action.active = !action.active; const toggleElm = action.element.querySelector(action.toggleClass); if (action.active) { toggleElm.style.visibility = `visible`; } else { toggleElm.style.visibility = `hidden`; } this.noupdate = true; } action.task(e); e.preventDefault(); }); } this.tools1.appendChild(this.actions.camera.element); this.tools1.appendChild(this.actions.light.element); this.tools2.appendChild(this.actions.annoswitch.element); this.tools2.appendChild(this.actions.prev.element); this.tools2.appendChild(this.actions.down.element); this.tools2.appendChild(this.actions.next.element); // Set Camera movement active this.actions.camera.active = this.actions.camera.element.classList.toggle('openlime-lens-dashboard-camera-active'); this.actions.light.active = false; // Enable camera, light, next buttons this.setActionEnabled('camera'); this.setActionEnabled('light'); this.setActionEnabled('annoswitch'); this.setActionEnabled('next'); } /** * Retrieves an action configuration by its label. * @param {string} label - The action label to find * @returns {Object|null} The action configuration object or null if not found * @private */ getAction(label) { let result = null; for (let [name, action] of Object.entries(this.actions)) { if (action.label === label) { result = action; break; } } return result; } /** * Enables or disables a specific action button. * @param {string} label - The action label to modify * @param {boolean} [enable=true] - Whether to enable or disable the action */ setActionEnabled(label, enable = true) { const action = this.getAction(label); if (action) { action.element.classList.toggle('enabled', enable); } } /** * Toggles between camera and light control modes. * When light control is active, modifies controller behavior for light direction adjustment. * @private */ toggleLightController() { let active = this.actions.light.element.classList.toggle('openlime-lens-dashboard-light-active'); this.actions.light.active = active; this.actions.camera.active = this.actions.camera.element.classList.toggle('openlime-lens-dashboard-camera-active'); for (let layer of Object.values(this.viewer.canvas.layers)) for (let c of layer.controllers) if (c.control == 'light') { c.active = true; c.activeModifiers = active ? [0, 2, 4] : [2, 4]; //nothing, shift and alt } } /** * Updates the dashboard position and UI elements. * @private * @param {number} x - Center X coordinate in scene space * @param {number} y - Center Y coordinate in scene space * @param {number} r - Lens radius in scene space */ update(x, y, r) { if (this.noupdate) { this.noupdate = false; return; } super.update(x, y, r); const center = { x: this.lensBox.x, y: this.lensBox.y } const radius = this.lensBox.r; const sizew = this.lensBox.w; const sizeh = this.lensBox.h; // Set toolbox position const tbw1 = this.toolbox1.clientWidth; const tbh1 = this.toolbox1.clientHeight; const tbw2 = this.toolbox2.clientWidth; const tbh2 = this.toolbox2.clientHeight; let cbx = radius * Math.sin(this.angleToolbar); let cby = radius * Math.cos(this.angleToolbar); let bx1 = this.containerSpace + radius - cbx - tbw1 / 2; let by1 = this.containerSpace + radius + cby - tbh1 / 2; this.toolbox1.style.left = `${bx1}px`; this.toolbox1.style.top = `${by1}px`; let bx2 = this.containerSpace + radius + cbx - tbw2 / 2; let by2 = this.containerSpace + radius + cby - tbh2 / 2; this.toolbox2.style.left = `${bx2}px`; this.toolbox2.style.top = `${by2}px`; if (this.updateCb) { // updateCb(c.x, c.y, r, dashboard.w, dashboard.h, canvas.w, canvas.h) all params in canvas coordinates this.updateCb(center.x, center.y, radius, sizew, sizeh, this.viewer.camera.viewport.w, this.viewer.camera.viewport.h); } if (!this.moving) { this.toggle(); this.moving = true; } if (this.timeout) clearTimeout(this.timeout); this.timeout = setTimeout(() =&gt; { this.toggle(); this.moving = false; if (this.updateEndCb) this.updateEndCb(center.x, center.y, radius, sizew, sizeh, this.viewer.camera.viewport.w, this.viewer.camera.viewport.h); }, this.delay); } } export { LensDashboardNavigator } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"LensDashboardNavigatorRadial.js.html":{"id":"LensDashboardNavigatorRadial.js.html","title":"Source: LensDashboardNavigatorRadial.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: LensDashboardNavigatorRadial.js import { Util } from \"./Util\" import { LensDashboard } from \"./LensDashboard\" /** * @fileoverview * LensDashboardNavigatorRadial module provides a radial menu interface for lens controls. * Extends the base LensDashboard with a circular arrangement of navigation controls and tools. */ /** * LensDashboardNavigatorRadial class creates a circular lens dashboard with radially arranged controls. * Provides: * - Circular arrangement of controls around the lens * - Grouped tool positioning * - Animated visibility transitions * - Background arc for visual grouping * @extends LensDashboard */ class LensDashboardNavigatorRadial extends LensDashboard { /** * Creates a new LensDashboardNavigatorRadial instance. * @param {Viewer} viewer - The OpenLIME viewer instance * @param {Object} [options] - Configuration options * @param {number} [options.toolSize=34] - Size of tool buttons in pixels * @param {number} [options.toolPadding=0] - Padding between tool buttons * @param {number[]} [options.group=[-65, 0]] - Angle positions for tool groups in degrees * @param {Object} [options.actions] - Configuration for toolbar actions * @param {Object} [options.actions.camera] - Camera control action * @param {string} options.actions.camera.label - Action identifier * @param {number} options.actions.camera.group - Group index for positioning * @param {number} options.actions.camera.angle - Angle offset within group * @param {Function} options.actions.camera.task - Callback for camera action * @param {Object} [options.actions.light] - Light control action (same properties as camera) * @param {Object} [options.actions.annoswitch] - Annotation toggle action * @param {string} options.actions.annoswitch.type - Action type ('toggle') * @param {string} options.actions.annoswitch.toggleClass - CSS class for toggle element * @param {Object} [options.actions.prev] - Previous annotation action (same properties as camera) * @param {Object} [options.actions.down] - Download annotation action (same properties as camera) * @param {Object} [options.actions.next] - Next annotation action (same properties as camera) * @param {Function} [options.updateCb] - Callback fired during lens updates * @param {Function} [options.updateEndCb] - Callback fired when lens movement ends */ constructor(viewer, options) { super(viewer, options); options = Object.assign({ toolSize: 34, toolPadding: 0, group: [-65, 0], actions: { camera: { label: 'camera', group: 0, angle: -25, task: (event) =&gt; { if (!this.actions.camera.active) this.toggleLightController(); } }, light: { label: 'light', group: 0, angle: 0, task: (event) =&gt; { if (!this.actions.light.active) this.toggleLightController(); } }, annoswitch: { label: 'annoswitch', group: 1, angle: 0, type: 'toggle', toggleClass: '.openlime-lens-dashboard-annoswitch-bar', task: (event) =&gt; { } }, prev: { label: 'prev', group: 1, angle: 25, task: (event) =&gt; { } }, down: { label: 'down', group: 1, angle: 50, task: (event) =&gt; { } }, next: { label: 'next', group: 1, angle: 75, task: (event) =&gt; { } }, }, updateCb: null, updateEndCb: null }, options); Object.assign(this, options); this.moving = false; this.delay = 400; this.timeout = null; // Timeout for moving this.noupdate = false; // TOOLBOX BKG const col = [255.0 * this.borderColor[0], 255.0 * this.borderColor[1], 255.0 * this.borderColor[2], 255.0 * this.borderColor[3]]; col[3] = 0.4; this.toolboxBkgSize = 56; this.toolboxBkgPadding = 4; this.toolboxBkg = new Object(); this.toolboxBkg.svg = `&lt;?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?&gt; &lt;svg viewBox=\"0 0 200 200\" fill=\"none\" version=\"1.1\" id=\"svg11\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\"&gt; &lt;path id=\"shape-dashboard-bkg\" d=\"\" stroke=\"none\" fill=\"rgb(${col[0]},${col[1]},${col[2]},${col[3]})\"/&gt; &lt;/svg&gt;`; this.toolboxBkg.element = Util.SVGFromString(this.toolboxBkg.svg); this.toolboxBkg.element.setAttributeNS(null, 'style', 'position: absolute; top: 0px; left:0px;'); this.container.appendChild(this.toolboxBkg.element); // TOOLBOX ITEMS this.actions.camera.svg = `&lt;?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?&gt; &lt;!-- Created with Inkscape (http://www.inkscape.org/) --&gt; &lt;svg viewBox=\"0 0 83.319054 83.319054\" version=\"1.1\" id=\"svg2495\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\"&gt; &lt;defs id=\"defs2492\" /&gt; &lt;g id=\"layer1\" transform=\"translate(-69.000668,-98.39946)\"&gt; &lt;g id=\"g2458\" transform=\"matrix(0.35277777,0,0,0.35277777,46.261671,-65.803422)\" class=\"openlime-lens-dashboard-camera\"&gt; &lt;path class=\"openlime-lens-dashboard-button-bkg\" d=\"m 300.637,583.547 c 0,65.219 -52.871,118.09 -118.09,118.09 -65.219,0 -118.09,-52.871 -118.09,-118.09 0,-65.219 52.871,-118.09 118.09,-118.09 65.219,0 118.09,52.871 118.09,118.09 z\" style=\"fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none\" id=\"path50\" /&gt; &lt;g id=\"g52\"&gt; &lt;path d=\"M 123.445,524.445 H 241.652 V 642.648 H 123.445 Z\" style=\"fill:#ffffff;fill-opacity:0;fill-rule:nonzero;stroke:#000000;stroke-width:16.7936;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1\" id=\"path54\" /&gt; &lt;/g&gt; &lt;g id=\"g56\" transform=\"scale(1,0.946694)\"&gt; &lt;path d=\"m 190.449,581.031 h -15.793 c -0.011,7.563 0,27.472 0,27.472 0,0 -17.133,0 -25.609,0.025 v 15.779 c 8.476,-0.009 25.609,-0.009 25.609,-0.009 0,0 0,19.881 -0.011,27.485 h 15.793 c 0.011,-7.604 0.011,-27.485 0.011,-27.485 0,0 17.125,0 25.598,0 v -15.795 c -8.473,0 -25.598,0 -25.598,0 0,0 -0.023,-19.904 0,-27.472\" style=\"fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.52673;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1\" id=\"path58\" /&gt; &lt;/g&gt; &lt;path d=\"m 269.254,557.93 22.332,21.437 c 2.098,2.071 2.195,5.344 0,7.504 l -22.332,21.008 c -1.25,1.25 -5.004,1.25 -6.254,-2.504 v -46.273 c 1.25,-3.672 5.004,-2.422 6.254,-1.172 z\" style=\"fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none\" id=\"path60\" /&gt; &lt;path d=\"M 95.844,607.395 73.508,585.957 c -2.094,-2.07 -2.192,-5.34 0,-7.504 l 22.336,-21.008 c 1.25,-1.25 5,-1.25 6.254,2.504 v 46.274 c -1.254,3.672 -5.004,2.422 -6.254,1.172 z\" style=\"fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none\" id=\"path62\" /&gt; &lt;path d=\"m 157.59,494.32 21.437,-22.332 c 2.071,-2.097 5.344,-2.191 7.504,0 l 21.008,22.332 c 1.25,1.254 1.25,5.004 -2.504,6.254 h -46.273 c -3.672,-1.25 -2.422,-5 -1.172,-6.254 z\" style=\"fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none\" id=\"path64\" /&gt; &lt;path d=\"m 207.055,671.785 -21.438,22.336 c -2.07,2.094 -5.344,2.191 -7.504,0 l -21.008,-22.336 c -1.25,-1.25 -1.25,-5 2.504,-6.25 h 46.274 c 3.672,1.25 2.422,5 1.172,6.25 z\" style=\"fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none\" id=\"path66\" /&gt; &lt;/g&gt; &lt;/g&gt; &lt;/svg&gt;`; this.actions.light.svg = `&lt;?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?&gt; &lt;!-- Created with Inkscape (http://www.inkscape.org/) --&gt; &lt;svg viewBox=\"0 0 83.319054 83.320114\" version=\"1.1\" id=\"svg5698\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\"&gt; &lt;defs id=\"defs5695\" /&gt; &lt;g id=\"layer1\" transform=\"translate(-104.32352,-59.017909)\"&gt; &lt;g id=\"g2477\" transform=\"matrix(0.35277777,0,0,0.35277777,-16.220287,-105.16169)\" class=\"openlime-lens-dashboard-light\"&gt; &lt;path class=\"openlime-lens-dashboard-button-bkg\" d=\"m 577.879,583.484 c 0,65.219 -52.871,118.09 -118.09,118.09 -65.219,0 -118.09,-52.871 -118.09,-118.09 0,-65.222 52.871,-118.093 118.09,-118.093 65.219,0 118.09,52.871 118.09,118.093 z\" style=\"fill:#fbfbfb;fill-opacity:1;fill-rule:nonzero;stroke:none\" id=\"path74\" /&gt; &lt;path d=\"m 546.496,558.359 22.332,21.438 c 2.098,2.066 2.192,5.34 0,7.504 l -22.332,21.004 c -1.25,1.254 -5.004,1.254 -6.254,-2.5 v -46.274 c 1.25,-3.672 5.004,-2.422 6.254,-1.172 z\" style=\"fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none\" id=\"path76\" /&gt; &lt;path d=\"M 373.082,607.82 350.75,586.383 c -2.094,-2.067 -2.191,-5.34 0,-7.504 l 22.332,-21.004 c 1.254,-1.25 5.004,-1.25 6.254,2.5 v 46.277 c -1.25,3.672 -5,2.422 -6.254,1.168 z\" style=\"fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none\" id=\"path78\" /&gt; &lt;path d=\"m 434.832,494.75 21.438,-22.332 c 2.07,-2.098 5.339,-2.195 7.503,0 l 21.008,22.332 c 1.25,1.25 1.25,5.004 -2.504,6.254 h -46.273 c -3.672,-1.25 -2.422,-5.004 -1.172,-6.254 z\" style=\"fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none\" id=\"path80\" /&gt; &lt;path d=\"m 484.297,672.215 -21.438,22.332 c -2.07,2.098 -5.343,2.195 -7.507,0 l -21.004,-22.332 c -1.25,-1.25 -1.25,-5.004 2.504,-6.254 h 46.273 c 3.672,1.25 2.422,5.004 1.172,6.254 z\" style=\"fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none\" id=\"path82\" /&gt; &lt;path d=\"m 438.223,599.988 c 0,0 -2.161,-0.535 -3.684,0.227 -1.523,0.762 -0.789,8.773 -0.789,8.773 l 16.305,-0.222 c 0,0 -14.071,3.597 -15.383,6.296 -1.317,2.7 1.672,6.786 4.34,7.426 2.136,0.516 45.793,-13.426 46.808,-14.625 0.883,-1.039 1.446,-6.75 0.528,-7.648 -0.922,-0.899 -4.602,-0.789 -4.602,-0.789 0,0 -1.449,0.113 -0.133,-3.934 1.317,-4.051 15.254,-20.137 18.672,-30.262 3.293,-9.753 1.387,-22.531 -2.367,-28.683 -3.965,-6.504 -9.598,-10.688 -17.356,-13.723 -7.789,-3.051 -22.191,-4.773 -33.664,-1.578 -11.425,3.188 -20.32,8.988 -25.507,16.649 -4.657,6.878 -4.473,20.699 -2.895,26.097 1.578,5.403 17.621,25.426 19.199,29.473 1.578,4.051 0.528,6.523 0.528,6.523 z\" style=\"fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none\" id=\"path84\" /&gt; &lt;g id=\"g86\" transform=\"scale(1,0.855493)\"&gt; &lt;path d=\"m 438.223,701.337 c 0,0 -2.161,-0.626 -3.684,0.265 -1.523,0.89 -0.789,10.255 -0.789,10.255 l 16.305,-0.26 c 0,0 -14.071,4.205 -15.383,7.36 -1.317,3.155 1.672,7.931 4.34,8.68 2.136,0.603 45.793,-15.693 46.808,-17.095 0.883,-1.215 1.446,-7.89 0.528,-8.94 -0.922,-1.051 -4.602,-0.923 -4.602,-0.923 0,0 -1.449,0.133 -0.133,-4.598 1.317,-4.735 15.254,-23.538 18.672,-35.373 3.293,-11.402 1.387,-26.337 -2.367,-33.529 -3.965,-7.603 -9.598,-12.493 -17.356,-16.041 -7.789,-3.566 -22.191,-5.579 -33.664,-1.844 -11.425,3.725 -20.32,10.506 -25.507,19.46 -4.657,8.041 -4.473,24.196 -2.895,30.506 1.578,6.315 17.621,29.721 19.199,34.451 1.578,4.735 0.528,7.626 0.528,7.626 z\" style=\"fill:none;stroke:#f8f8f8;stroke-width:8.1576;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.00677317\" id=\"path88\" /&gt; &lt;/g&gt; &lt;path d=\"m 435.59,631.598 c 0.394,3.714 14.992,14.851 20.91,15.414 5.914,0.562 5.125,0.898 9.336,-0.453 4.207,-1.348 17.617,-9.223 18.277,-10.571 1.68,-3.453 2.758,-6.976 1.313,-9.113 -1.449,-2.145 -3.946,-0.563 -6.574,0.227 -2.629,0.785 -13.805,5.734 -17.489,6.859 -2.89,0.883 -9.203,-0.563 -9.203,-0.563 0,0 32.012,-10.578 33.266,-12.933 1.316,-2.477 0.262,-6.977 -2.762,-7.539 -1.926,-0.36 -43.785,13.386 -44.836,15.074 -1.055,1.688 -2.238,3.598 -2.238,3.598 z\" style=\"fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none\" id=\"path90\" /&gt; &lt;g id=\"g92\" transform=\"scale(1,0.855493)\"&gt; &lt;path d=\"m 435.59,738.285 c 0.394,4.343 14.992,17.361 20.91,18.018 5.914,0.658 5.125,1.05 9.336,-0.529 4.207,-1.576 17.617,-10.781 18.277,-12.356 1.68,-4.037 2.758,-8.155 1.313,-10.653 -1.449,-2.507 -3.946,-0.657 -6.574,0.265 -2.629,0.918 -13.805,6.703 -17.489,8.018 -2.89,1.032 -9.203,-0.658 -9.203,-0.658 0,0 32.012,-12.365 33.266,-15.118 1.316,-2.895 0.262,-8.155 -2.762,-8.812 -1.926,-0.421 -43.785,15.648 -44.836,17.62 -1.055,1.973 -2.238,4.205 -2.238,4.205 z\" style=\"fill:none;stroke:#f8f8f8;stroke-width:8.1576;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.00677317\" id=\"path94\" /&gt; &lt;/g&gt; &lt;path d=\"m 438.223,599.988 c 0,0 -2.161,-0.535 -3.684,0.227 -1.523,0.762 -0.789,8.773 -0.789,8.773 l 16.305,-0.222 c 0,0 -14.071,3.597 -15.383,6.296 -1.317,2.7 1.672,6.786 4.34,7.426 2.136,0.516 45.793,-13.426 46.808,-14.625 0.883,-1.039 1.446,-6.75 0.528,-7.648 -0.922,-0.899 -4.602,-0.789 -4.602,-0.789 0,0 -1.449,0.113 -0.133,-3.934 1.317,-4.051 15.254,-20.137 18.672,-30.262 3.293,-9.753 1.387,-22.531 -2.367,-28.683 -3.965,-6.504 -9.598,-10.688 -17.356,-13.723 -7.789,-3.051 -22.191,-4.773 -33.664,-1.578 -11.425,3.188 -20.32,8.988 -25.507,16.649 -4.657,6.878 -4.473,20.699 -2.895,26.097 1.578,5.403 17.621,25.426 19.199,29.473 1.578,4.051 0.528,6.523 0.528,6.523 z\" style=\"fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none\" id=\"path96\" /&gt; &lt;g id=\"g98\" transform=\"scale(1,0.855493)\"&gt; &lt;path d=\"m 438.223,701.337 c 0,0 -2.161,-0.626 -3.684,0.265 -1.523,0.89 -0.789,10.255 -0.789,10.255 l 16.305,-0.26 c 0,0 -14.071,4.205 -15.383,7.36 -1.317,3.155 1.672,7.931 4.34,8.68 2.136,0.603 45.793,-15.693 46.808,-17.095 0.883,-1.215 1.446,-7.89 0.528,-8.94 -0.922,-1.051 -4.602,-0.923 -4.602,-0.923 0,0 -1.449,0.133 -0.133,-4.598 1.317,-4.735 15.254,-23.538 18.672,-35.373 3.293,-11.402 1.387,-26.337 -2.367,-33.529 -3.965,-7.603 -9.598,-12.493 -17.356,-16.041 -7.789,-3.566 -22.191,-5.579 -33.664,-1.844 -11.425,3.725 -20.32,10.506 -25.507,19.46 -4.657,8.041 -4.473,24.196 -2.895,30.506 1.578,6.315 17.621,29.721 19.199,34.451 1.578,4.735 0.528,7.626 0.528,7.626 z\" style=\"fill:none;stroke:#f8f8f8;stroke-width:8.1576;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.00677317\" id=\"path100\" /&gt; &lt;/g&gt; &lt;path d=\"m 435.59,631.598 c 0.394,3.714 14.992,14.851 20.91,15.414 5.914,0.562 5.125,0.898 9.336,-0.453 4.207,-1.348 17.617,-9.223 18.277,-10.571 1.68,-3.453 2.758,-6.976 1.313,-9.113 -1.449,-2.145 -3.946,-0.563 -6.574,0.227 -2.629,0.785 -13.805,5.734 -17.489,6.859 -2.89,0.883 -9.203,-0.563 -9.203,-0.563 0,0 32.012,-10.578 33.266,-12.933 1.316,-2.477 0.262,-6.977 -2.762,-7.539 -1.926,-0.36 -43.785,13.386 -44.836,15.074 -1.055,1.688 -2.238,3.598 -2.238,3.598 z\" style=\"fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none\" id=\"path102\" /&gt; &lt;g id=\"g104\" transform=\"scale(1,0.855493)\"&gt; &lt;path d=\"m 435.59,738.285 c 0.394,4.343 14.992,17.361 20.91,18.018 5.914,0.658 5.125,1.05 9.336,-0.529 4.207,-1.576 17.617,-10.781 18.277,-12.356 1.68,-4.037 2.758,-8.155 1.313,-10.653 -1.449,-2.507 -3.946,-0.657 -6.574,0.265 -2.629,0.918 -13.805,6.703 -17.489,8.018 -2.89,1.032 -9.203,-0.658 -9.203,-0.658 0,0 32.012,-12.365 33.266,-15.118 1.316,-2.895 0.262,-8.155 -2.762,-8.812 -1.926,-0.421 -43.785,15.648 -44.836,17.62 -1.055,1.973 -2.238,4.205 -2.238,4.205 z\" style=\"fill:none;stroke:#f8f8f8;stroke-width:8.1576;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.00677317\" id=\"path106\" /&gt; &lt;/g&gt; &lt;/g&gt; &lt;/g&gt; &lt;/svg&gt;`; this.actions.annoswitch.svg = `&lt;?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?&gt; &lt;!-- Created with Inkscape (http://www.inkscape.org/) --&gt; &lt;svg viewBox=\"0 0 83.319054 83.320114\" version=\"1.1\" id=\"svg11415\" xml:space=\"preserve\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\"&gt;&lt;defs id=\"defs11412\"&gt;&lt;marker style=\"overflow:visible\" id=\"TriangleStart\" refX=\"0\" refY=\"0\" orient=\"auto-start-reverse\" markerWidth=\"5.3244081\" markerHeight=\"6.155385\" viewBox=\"0 0 5.3244081 6.1553851\" preserveAspectRatio=\"xMidYMid\"&gt;&lt;path transform=\"scale(0.5)\" style=\"fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt\" d=\"M 5.77,0 -2.88,5 V -5 Z\" id=\"path135\" /&gt;&lt;/marker&gt;&lt;marker style=\"overflow:visible\" id=\"TriangleStart-5\" refX=\"0\" refY=\"0\" orient=\"auto-start-reverse\" markerWidth=\"5.3244081\" markerHeight=\"6.155385\" viewBox=\"0 0 5.3244081 6.1553851\" preserveAspectRatio=\"xMidYMid\"&gt;&lt;path transform=\"scale(0.5)\" style=\"fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt\" d=\"M 5.77,0 -2.88,5 V -5 Z\" id=\"path135-3\" /&gt;&lt;/marker&gt;&lt;/defs&gt;&lt;g id=\"g327\" transform=\"translate(129.83427,13.264356)\"&gt;&lt;g id=\"g346\"&gt;&lt;path d=\"m -46.51522,28.396234 c 0,23.007813 -18.65172,41.659526 -41.65953,41.659526 -23.00782,0 -41.65952,-18.651713 -41.65952,-41.659526 0,-23.00887 18.6517,-41.66059 41.65952,-41.66059 23.00781,0 41.65953,18.65172 41.65953,41.66059 z\" style=\"fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.352778\" id=\"path68\" class=\"openlime-lens-dashboard-button-bkg\" /&gt;&lt;g aria-label=\"i\" id=\"text430\" style=\"font-size:50.8px;line-height:1.25;font-family:'Palace Script MT';-inkscape-font-specification:'Palace Script MT';font-variant-ligatures:none;letter-spacing:0px;word-spacing:0px;stroke-width:0.264583\" transform=\"matrix(1.9896002,0,0,1.9896002,-378.32178,-41.782121)\"&gt;&lt;path d=\"m 149.74343,19.295724 c -1.4224,1.1176 -2.5908,2.032 -3.5052,2.6416 0.3556,1.0668 0.8128,1.9304 1.9304,3.556 1.4224,-1.27 1.5748,-1.4224 3.302,-2.7432 -0.1524,-0.3048 -0.254,-0.508 -0.6604,-1.1684 -0.3048,-0.6096 -0.3556,-0.6096 -0.762,-1.6256 z m 1.9304,25.4 -0.8636,0.4572 c -3.5052,1.9304 -4.1148,2.1844 -4.7244,2.1844 -0.5588,0 -0.9144,-0.5588 -0.9144,-1.4224 0,-0.8636 0,-0.8636 1.6764,-7.5692 1.8796,-7.7216 1.8796,-7.7216 1.8796,-8.128 0,-0.3048 -0.254,-0.508 -0.6096,-0.508 -0.8636,0 -3.8608,1.6764 -8.0264,4.4704 l -0.1016,1.4224 c 3.0988,-1.6764 3.2512,-1.7272 3.7084,-1.7272 0.4064,0 0.6096,0.3048 0.6096,0.8636 0,0.7112 -0.1524,1.4224 -0.9144,4.318 -2.3876,8.8392 -2.3876,8.8392 -2.3876,10.16 0,1.2192 0.4572,2.032 1.2192,2.032 0.8636,0 2.2352,-0.6604 4.9276,-2.3876 0.9652,-0.6096 1.9304,-1.2192 2.8956,-1.8796 0.4572,-0.254 0.8128,-0.508 1.4224,-0.8636 z\" style=\"font-weight:bold;font-family:Z003;-inkscape-font-specification:'Z003 Bold'\" id=\"path495\" /&gt;&lt;/g&gt;&lt;path style=\"fill:none;stroke:#000000;stroke-width:17.09477;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1\" d=\"M -66.121922,49.608737 -110.22757,7.1826674\" id=\"path465\" class=\"openlime-lens-dashboard-annoswitch-bar\" /&gt;&lt;/g&gt;&lt;/g&gt;&lt;/svg&gt;`; this.actions.prev.svg = `&lt;svg viewBox=\"0 0 83.319054 83.320114\" version=\"1.1\" id=\"svg11415\" xml:space=\"preserve\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\"&gt;&lt;defs id=\"defs11412\"&gt;&lt;marker style=\"overflow:visible\" id=\"TriangleStart\" refX=\"0\" refY=\"0\" orient=\"auto-start-reverse\" markerWidth=\"5.3244081\" markerHeight=\"6.155385\" viewBox=\"0 0 5.3244081 6.1553851\" preserveAspectRatio=\"xMidYMid\"&gt;&lt;path transform=\"scale(0.5)\" style=\"fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt\" d=\"M 5.77,0 -2.88,5 V -5 Z\" id=\"path135\" /&gt;&lt;/marker&gt;&lt;marker style=\"overflow:visible\" id=\"TriangleStart-5\" refX=\"0\" refY=\"0\" orient=\"auto-start-reverse\" markerWidth=\"5.3244081\" markerHeight=\"6.155385\" viewBox=\"0 0 5.3244081 6.1553851\" preserveAspectRatio=\"xMidYMid\"&gt;&lt;path transform=\"scale(0.5)\" style=\"fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt\" d=\"M 5.77,0 -2.88,5 V -5 Z\" id=\"path135-3\" /&gt;&lt;/marker&gt;&lt;/defs&gt;&lt;g id=\"g417\" transform=\"matrix(3.3565779,0,0,3.3565779,129.92814,-51.220758)\"&gt;&lt;g id=\"g335\"&gt;&lt;path d=\"m -172.71351,100.60243 c 0,23.00781 -18.65172,41.65952 -41.65953,41.65952 -23.00782,0 -41.65952,-18.65171 -41.65952,-41.65952 0,-23.00887 18.6517,-41.66059 41.65952,-41.66059 23.00781,0 41.65953,18.65172 41.65953,41.66059 z\" style=\"fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.352778\" id=\"path68\" class=\"openlime-lens-dashboard-button-bkg\" transform=\"matrix(0.29792248,0,0,0.29792248,37.569341,-2.3002842)\" /&gt;&lt;path style=\"fill:#030104\" d=\"m -35.494703,28.624414 c 0,-0.264 0.213,-0.474 0.475,-0.474 h 2.421 c 0.262,0 0.475,0.21 0.475,0.474 0,3.211 2.615,5.826 5.827,5.826 3.212,0 5.827,-2.615 5.827,-5.826 0,-3.214 -2.614,-5.826 -5.827,-5.826 -0.34,0 -0.68,0.028 -1.016,0.089 v 1.647 c 0,0.193 -0.116,0.367 -0.291,0.439 -0.181,0.073 -0.383,0.031 -0.521,-0.104 l -4.832,-3.273 c -0.184,-0.185 -0.184,-0.482 0,-0.667 l 4.833,-3.268 c 0.136,-0.136 0.338,-0.176 0.519,-0.104 0.175,0.074 0.291,0.246 0.291,0.438 v 1.487 c 0.34,-0.038 0.68,-0.057 1.016,-0.057 5.071,0 9.198,4.127 9.198,9.198 0,5.07 -4.127,9.197 -9.198,9.197 -5.07,10e-4 -9.197,-4.126 -9.197,-9.196 z\" id=\"path415\" /&gt;&lt;/g&gt;&lt;/g&gt;&lt;/svg&gt;`; this.actions.down.svg = `&lt;?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?&gt; &lt;!-- Created with Inkscape (http://www.inkscape.org/) --&gt; &lt;svg viewBox=\"0 0 83.319054 83.320114\" version=\"1.1\" id=\"svg11415\" xml:space=\"preserve\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\"&gt;&lt;defs id=\"defs11412\"&gt;&lt;marker style=\"overflow:visible\" id=\"TriangleStart\" refX=\"0\" refY=\"0\" orient=\"auto-start-reverse\" markerWidth=\"5.3244081\" markerHeight=\"6.155385\" viewBox=\"0 0 5.3244081 6.1553851\" preserveAspectRatio=\"xMidYMid\"&gt;&lt;path transform=\"scale(0.5)\" style=\"fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt\" d=\"M 5.77,0 -2.88,5 V -5 Z\" id=\"path135\" /&gt;&lt;/marker&gt;&lt;marker style=\"overflow:visible\" id=\"TriangleStart-5\" refX=\"0\" refY=\"0\" orient=\"auto-start-reverse\" markerWidth=\"5.3244081\" markerHeight=\"6.155385\" viewBox=\"0 0 5.3244081 6.1553851\" preserveAspectRatio=\"xMidYMid\"&gt;&lt;path transform=\"scale(0.5)\" style=\"fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt\" d=\"M 5.77,0 -2.88,5 V -5 Z\" id=\"path135-3\" /&gt;&lt;/marker&gt;&lt;/defs&gt;&lt;g id=\"g4652\" transform=\"translate(145.46385,95.197966)\"&gt;&lt;g id=\"g4846\" transform=\"translate(-126.60931,52.756264)\"&gt;&lt;path d=\"m 64.464511,-106.29364 c 0,23.007813 -18.65172,41.659526 -41.65953,41.659526 -23.0078196,0 -41.659526,-18.651713 -41.659526,-41.659526 0,-23.00887 18.6517064,-41.66059 41.659526,-41.66059 23.00781,0 41.65953,18.65172 41.65953,41.66059 z\" style=\"fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.352778\" id=\"path68\" class=\"openlime-lens-dashboard-button-bkg\" /&gt;&lt;g id=\"g2392-5\" transform=\"matrix(0.26458333,0,0,0.26458333,-283.58108,-263.57207)\"&gt;&lt;path style=\"fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:40;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1\" d=\"m 1072.4033,509.27736 h 171.1826\" id=\"path351-6\" /&gt;&lt;path style=\"fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:30;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1\" d=\"m 1185.0215,568.3701 h 59.6026\" id=\"path351-3-2\" /&gt;&lt;path style=\"fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:30;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1\" d=\"m 1184.2167,621.15576 h 59.6026\" id=\"path351-3-2-0\" /&gt;&lt;path style=\"fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:40;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1\" d=\"m 1072.4033,679.59496 h 171.1826\" id=\"path351-3-6-7-1\" /&gt;&lt;path style=\"display:inline;fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:11.4448;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#TriangleStart-5)\" d=\"m 1074.9115,570.87447 54.1203,-0.0275\" id=\"path1366-2\" /&gt;&lt;path style=\"fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:14;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1\" d=\"m 1080.0425,521.28147 v 54.87857\" id=\"path1402-7\" /&gt;&lt;path style=\"fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1\" d=\"m 1150.8866,623.00688 0.3956,-5.02729\" id=\"path2545\" /&gt;&lt;path style=\"fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:30;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1\" d=\"m 1185.0215,567.71656 h 59.6026\" id=\"path2720\" /&gt;&lt;/g&gt;&lt;/g&gt;&lt;/g&gt;&lt;/svg&gt;`; this.actions.next.svg = `&lt;?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?&gt; &lt;!-- Created with Inkscape (http://www.inkscape.org/) --&gt; &lt;svg viewBox=\"0 0 83.319054 83.320114\" version=\"1.1\" id=\"svg11415\" xml:space=\"preserve\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\"&gt;&lt;defs id=\"defs11412\"&gt;&lt;marker style=\"overflow:visible\" id=\"TriangleStart\" refX=\"0\" refY=\"0\" orient=\"auto-start-reverse\" markerWidth=\"5.3244081\" markerHeight=\"6.155385\" viewBox=\"0 0 5.3244081 6.1553851\" preserveAspectRatio=\"xMidYMid\"&gt;&lt;path transform=\"scale(0.5)\" style=\"fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt\" d=\"M 5.77,0 -2.88,5 V -5 Z\" id=\"path135\" /&gt;&lt;/marker&gt;&lt;/defs&gt;&lt;g id=\"g4652\" transform=\"translate(-12.647874,74.762541)\"&gt;&lt;path d=\"m 95.96693,-33.101955 c 0,23.007813 -18.65172,41.6595258 -41.65953,41.6595258 -23.00782,0 -41.659526,-18.6517128 -41.659526,-41.6595258 0,-23.008872 18.651706,-41.660586 41.659526,-41.660586 23.00781,0 41.65953,18.651714 41.65953,41.660586 z\" style=\"fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.352778\" id=\"path68\" class=\"openlime-lens-dashboard-button-bkg\" /&gt;&lt;g id=\"g4636\" transform=\"translate(173.74831,-50.897484)\"&gt;&lt;path style=\"fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:10.5833;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1\" d=\"m -142.08694,-4.7366002 h 45.292059\" id=\"path351\" /&gt;&lt;path style=\"fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:10.5833;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1\" d=\"m -142.08694,40.326598 h 45.292059\" id=\"path351-3-6-7\" /&gt;&lt;path style=\"display:inline;fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:3.20746;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#TriangleStart)\" d=\"m -136.09942,8.7192481 0.008,14.9721889\" id=\"path1366\" /&gt;&lt;path style=\"fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:3.70417;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1\" d=\"M -136.07283,-1.5605128 V 24.204958\" id=\"path1402\" /&gt;&lt;path style=\"fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:7.9375;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1\" d=\"m -111.69142,24.864565 h 15.76985\" id=\"path351-3-2-0-3\" /&gt;&lt;path style=\"fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:7.9375;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1\" d=\"m -111.37623,10.725444 h 15.76986\" id=\"path2720-9\" /&gt;&lt;/g&gt;&lt;/g&gt;&lt;/svg&gt;`; if (queueMicrotask) queueMicrotask(() =&gt; { this.init() }); //allows modification of actions and layers before init. else setTimeout(() =&gt; { this.init(); }, 0); } /** * Initializes the dashboard after construction. * Allows modification of actions and layers before initialization. * @private */ init() { this.container.style.display = 'block'; this.container.style.margin = '0'; for (let [name, action] of Object.entries(this.actions)) { this.addAction(action); } // Set Camera movement active this.actions.camera.active = this.actions.camera.element.classList.toggle('openlime-lens-dashboard-camera-active'); this.actions.light.active = false; // Enable camera, light, next buttons this.setActionEnabled('camera'); this.setActionEnabled('light'); this.setActionEnabled('annoswitch'); this.setActionEnabled('next'); } /** * Converts degrees to radians. * @private * @param {number} angle - Angle in degrees * @returns {number} Angle in radians */ static degToRadians(angle) { return angle * (Math.PI / 180.0); } /** * Converts polar coordinates to cartesian coordinates. * @private * @param {number} centerX - Center X coordinate * @param {number} centerY - Center Y coordinate * @param {number} radius - Radius * @param {number} angleInDegrees - Angle in degrees * @returns {Object} Cartesian coordinates {x, y} */ static polarToCartesian(centerX, centerY, radius, angleInDegrees) { const angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0; return { x: centerX + (radius * Math.cos(angleInRadians)), y: centerY + (radius * Math.sin(angleInRadians)) }; } /** * Generates SVG arc path description. * @private * @param {number} x - Center X coordinate * @param {number} y - Center Y coordinate * @param {number} radius - Inner radius * @param {number} border - Border width * @param {number} startAngle - Start angle in degrees * @param {number} endAngle - End angle in degrees * @returns {string} SVG path description */ static describeArc(x, y, radius, border, startAngle, endAngle) { const start = LensDashboardNavigatorRadial.polarToCartesian(x, y, radius + border, endAngle); const end = LensDashboardNavigatorRadial.polarToCartesian(x, y, radius + border, startAngle); const startIn = LensDashboardNavigatorRadial.polarToCartesian(x, y, radius, endAngle); const endIn = LensDashboardNavigatorRadial.polarToCartesian(x, y, radius, startAngle); const largeArcFlag = endAngle - startAngle &lt;= 180 ? \"0\" : \"1\"; const d = [ \"M\", start.x, start.y, \"A\", radius + border, radius + border, 0, largeArcFlag, 0, end.x, end.y, \"L\", endIn.x, endIn.y, \"A\", radius, radius, 1, largeArcFlag, 1, startIn.x, startIn.y, ].join(\" \"); return d; } /** * Updates the background arc element. * @private * @param {number} r - Radius * @param {number} sizew - Width * @param {number} sizeh - Height */ setToolboxBkg(r, sizew, sizeh) { const e = this.toolboxBkg.element; e.setAttributeNS(null, 'viewBox', `0 0 ${sizew} ${sizeh}`); const shape = e.querySelector('#shape-dashboard-bkg'); const cs = this.containerSpace; const b = this.toolboxBkgSize; const cx = sizew * 0.5; const cy = sizeh * 0.5; shape.setAttributeNS(null, 'd', LensDashboardNavigatorRadial.describeArc(cx, cy, r, b, -110, 110)); // shape.setAttributeNS(null, 'd', `M ${sizew*0.5-r-b},${sizeh*0.5} a1,1 0 0,1 ${2*(r+b)},0 h ${-b} a1,1 0 1,0 ${-2*r},0 Z`); } /** * Adds an action button to the dashboard. * @private * @param {Object} action - Action configuration */ addAction(action) { action.element = Util.SVGFromString(action.svg); action.element.style = `position:absolute; height: ${this.toolSize}px; margin: 0`; action.element.classList.add('openlime-lens-dashboard-button'); if (action.type == 'toggle') { const toggleElm = action.element.querySelector(action.toggleClass); toggleElm.style.visibility = `hidden`; action.active = false; } action.element.addEventListener('click', (e) =&gt; { if (action.type == 'toggle') { action.active = !action.active; const toggleElm = action.element.querySelector(action.toggleClass); if (action.active) { toggleElm.style.visibility = `visible`; } else { toggleElm.style.visibility = `hidden`; } this.noupdate = true; } action.task(e); e.preventDefault(); }); this.container.appendChild(action.element); } /** * Retrieves an action configuration by its label. * @param {string} label - The action label to find * @returns {Object|null} The action configuration object or null if not found */ getAction(label) { let result = null; for (let [name, action] of Object.entries(this.actions)) { if (action.label === label) { result = action; break; } } return result; } /** * Enables or disables a specific action button. * @param {string} label - The action label to modify * @param {boolean} [enable=true] - Whether to enable or disable the action */ setActionEnabled(label, enable = true) { const action = this.getAction(label); if (action) { action.element.classList.toggle('enabled', enable); } } /** * Toggles between camera and light control modes. * @private */ toggleLightController() { let active = this.actions.light.element.classList.toggle('openlime-lens-dashboard-light-active'); this.actions.light.active = active; this.actions.camera.active = this.actions.camera.element.classList.toggle('openlime-lens-dashboard-camera-active'); for (let layer of Object.values(this.viewer.canvas.layers)) for (let c of layer.controllers) if (c.control == 'light') { c.active = true; c.activeModifiers = active ? [0, 2, 4] : [2, 4]; //nothing, shift and alt } } /** * Sets visibility of toggle elements. * @private * @param {boolean} visible - Whether toggle elements should be visible */ setToggleClassVisibility(t) { for (let [name, action] of Object.entries(this.actions)) { if (action.type == 'toggle' &amp;&amp; action.active) { const toggleElm = action.element.querySelector(action.toggleClass); if (t) { toggleElm.style.visibility = `visible`; } else { toggleElm.style.visibility = `hidden`; } } } } /** * Updates tool element positions in the radial layout. * @private * @param {number} radius - Current lens radius * @param {number} sizew - Container width * @param {number} sizeh - Container height */ setToolboxElm(radius, sizew, sizeh) { // Toolbox Background this.setToolboxBkg(radius - this.borderWidth - 2, sizew, sizeh); this.first = false; // Set tool position const alphaDelta = 2.0 * Math.asin((this.toolSize * 0.5 + this.toolPadding) / (radius)); for (let i = 0; i &lt; this.group.length; i++) { const gArr = Object.entries(this.actions).filter(([key, value]) =&gt; value.group == i); if (Math.abs(this.group[i]) &gt; 90) gArr.reverse(); let idx = 0; for (let [name, action] of gArr) { // const tw = action.element.clientWidth; // const th = action.element.clientHeight; const th = this.toolSize; const tw = this.toolSize; const rad = LensDashboardNavigatorRadial.degToRadians(this.group[i]) + idx * alphaDelta; let cbx = (radius + this.toolSize * 0.5 + this.toolboxBkgPadding) * Math.sin(rad); let cby = (radius + this.toolSize * 0.5 + this.toolboxBkgPadding) * Math.cos(rad); let bx = sizew * 0.5 + cbx - tw / 2; let by = sizeh * 0.5 - cby - th / 2; action.element.style.left = `${bx}px`; action.element.style.top = `${by}px`; idx++; } } } /** * Updates the dashboard position and UI elements. * @private * @param {number} x - Center X coordinate in scene space * @param {number} y - Center Y coordinate in scene space * @param {number} r - Lens radius in scene space */ update(x, y, r) { if (this.noupdate) { this.noupdate = false; return; } super.update(x, y, r); const center = { x: this.lensBox.x, y: this.lensBox.y } const radius = this.lensBox.r; const sizew = this.lensBox.w; const sizeh = this.lensBox.h; //this.setToolboxElm(radius, sizew, sizeh); if (this.updateCb) { // updateCb(c.x, c.y, r, dashboard.w, dashboard.h, canvas.w, canvas.h) all params in canvas coordinates this.updateCb(center.x, center.y, radius, sizew, sizeh, this.viewer.camera.viewport.w, this.viewer.camera.viewport.h); } if (!this.moving) { this.toggle(); this.moving = true; } if (this.timeout) clearTimeout(this.timeout); this.timeout = setTimeout(() =&gt; { this.toggle(); this.moving = false; this.setToolboxElm(radius, sizew, sizeh); if (this.updateEndCb) this.updateEndCb(center.x, center.y, radius, sizew, sizeh, this.viewer.camera.viewport.w, this.viewer.camera.viewport.h); }, this.delay); } } export { LensDashboardNavigatorRadial } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"LightSphereController.js.html":{"id":"LightSphereController.js.html","title":"Source: LightSphereController.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: LightSphereController.js /* * @fileoverview * LightSphereController module provides a spherical interface for controlling light direction. * It creates a circular canvas-based UI element that allows users to interactively adjust * lighting direction through pointer interactions. */ /** * LightSphereController creates an interactive sphere UI for light direction control. * Features: * - Circular interface with gradient background * - Pointer-based interaction for light direction * - Configurable size, position, and colors * - Minimum theta angle constraint * - Visual feedback with gradient and marker */ class LightSphereController { /** * Creates a new LightSphereController instance. * @param {HTMLElement|string} parent - Parent element or selector where the controller will be mounted * @param {Object} [options] - Configuration options * @param {number} [options.width=128] - Width of the controller in pixels * @param {number} [options.height=128] - Height of the controller in pixels * @param {number} [options.top=60] - Top position offset in pixels * @param {number} [options.right=0] - Right position offset in pixels * @param {number} [options.thetaMin=0] - Minimum theta angle in degrees (constrains interaction radius) * @param {string} [options.colorSpot='#ffffff'] - Color of the central spot in the gradient * @param {string} [options.colorBkg='#0000ff'] - Color of the outer edge of the gradient * @param {string} [options.colorMark='#ff0000'] - Color of the position marker */ constructor(parent, options) { options = Object.assign({ width: 128, height: 128, top: 60, right: 0, thetaMin: 0, colorSpot: '#ffffff', colorBkg: '#0000ff', colorMark: '#ff0000' }, options); Object.assign(this, options); this.parent = parent; this.layers = []; if (typeof (this.parent) == 'string') this.parent = document.querySelector(this.parent); this.lightDir = [0, 0]; this.containerElement = document.createElement('div'); this.containerElement.style = `padding: 0; position: absolute; width: ${this.width}px; height: ${this.height}px; top:${this.top}px; right:${this.right}px; z-index: 200; touch-action: none; visibility: visible;`; this.containerElement.classList.add('openlime-lsc'); const sd = (this.width * 0.5) * (1 - 0.8); this.dlCanvas = document.createElement('canvas'); this.dlCanvas.width = this.width; this.dlCanvas.height = this.height; // this.dlCanvas.style = '' this.dlCanvasCtx = this.dlCanvas.getContext(\"2d\"); this.dlGradient = ''; this.containerElement.appendChild(this.dlCanvas); this.parent.appendChild(this.containerElement); this.r = this.width * 0.5; this.thetaMinRad = this.thetaMin / 180.0 * Math.PI; this.rmax = this.r * Math.cos(this.thetaMinRad); this.interactLightDir(this.width * 0.5, this.height * 0.5); this.pointerDown = false; this.dlCanvas.addEventListener(\"pointerdown\", (e) =&gt; { this.pointerDown = true; const rect = this.dlCanvas.getBoundingClientRect(); let clickPosX = (this.dlCanvas.width * (e.clientX - rect.left)) / rect.width; let clickPosY = (this.dlCanvas.height * (e.clientY - rect.top)) / rect.height; this.interactLightDir(clickPosX, clickPosY); e.preventDefault(); }); this.dlCanvas.addEventListener(\"pointermove\", (e) =&gt; { if (this.pointerDown) { const rect = this.dlCanvas.getBoundingClientRect(); let clickPosX = (this.dlCanvas.width * (e.clientX - rect.left)) / rect.width; let clickPosY = (this.dlCanvas.height * (e.clientY - rect.top)) / rect.height; this.interactLightDir(clickPosX, clickPosY); e.preventDefault(); } }); this.dlCanvas.addEventListener(\"pointerup\", (e) =&gt; { this.pointerDown = false; }); this.dlCanvas.addEventListener(\"pointerout\", (e) =&gt; { this.pointerDown = false; }); } /** * Adds a layer to be controlled by this light sphere. * The layer must support light control operations. * @param {Layer} layer - Layer to be controlled */ addLayer(l) { this.layers.push(l); } /** * Makes the controller visible. * @returns {string} The visibility style value */ show() { return this.containerElement.style.visibility = 'visible'; } /** * Hides the controller. * @returns {string} The visibility style value */ hide() { return this.containerElement.style.visibility = 'hidden'; } /** * Computes the radial gradient based on current light direction. * Creates a gradient that provides visual feedback about the light position. * @private */ computeGradient() { const x = (this.lightDir[0] + 1.0) * this.dlCanvas.width * 0.5; const y = (-this.lightDir[1] + 1.0) * this.dlCanvas.height * 0.5; this.dlGradient = this.dlCanvasCtx.createRadialGradient( x, y, this.dlCanvas.height / 8.0, x, y, this.dlCanvas.width / 1.2 ); this.dlGradient.addColorStop(0, this.colorSpot); this.dlGradient.addColorStop(1, this.colorBkg); } /** * Handles interaction to update light direction. * Converts pointer position to light direction vector while respecting constraints. * @private * @param {number} x - X coordinate in canvas space * @param {number} y - Y coordinate in canvas space */ interactLightDir(x, y) { let xc = x - this.r; let yc = this.r - y; const phy = Math.atan2(yc, xc); let l = Math.sqrt(xc * xc + yc * yc); l = l &gt; this.rmax ? this.rmax : l; xc = l * Math.cos(this.thetaMinRad) * Math.cos(phy); yc = l * Math.cos(this.thetaMinRad) * Math.sin(phy); x = xc + this.r; y = this.r - yc; this.lightDir[0] = 2 * (x / this.dlCanvas.width - 0.5); this.lightDir[1] = 2 * (1 - y / this.dlCanvas.height - 0.5); // console.log('LD ', this.lightDir); for (const l of this.layers) { if (l.controls.light) l.setControl('light', this.lightDir, 5); } this.computeGradient(); this.drawLightSelector(x, y); } /** * Draws the light direction selector UI. * Renders: * - Circular background with gradient * - Position marker at current light direction * @private * @param {number} x - X coordinate for position marker * @param {number} y - Y coordinate for position marker */ drawLightSelector(x, y) { this.dlCanvasCtx.clearRect(0, 0, this.dlCanvas.width, this.dlCanvas.height); this.dlCanvasCtx.beginPath(); this.dlCanvasCtx.arc( this.dlCanvas.width / 2, this.dlCanvas.height / 2, this.dlCanvas.width / 2, 0, 2 * Math.PI ); this.dlCanvasCtx.fillStyle = this.dlGradient; this.dlCanvasCtx.fill(); this.dlCanvasCtx.beginPath(); this.dlCanvasCtx.arc(x, y, this.dlCanvas.width / 30, 0, 2 * Math.PI); this.dlCanvasCtx.strokeStyle = this.colorMark; this.dlCanvasCtx.lineWidth = 2; this.dlCanvasCtx.stroke(); } } /** * Example usage of LightSphereController: * ```javascript * // Create controller with custom options * const lightController = new LightSphereController('#container', { * width: 200, * height: 200, * top: 80, * right: 20, * thetaMin: 15, * colorSpot: '#ffff00', * colorBkg: '#000066', * colorMark: '#ff3333' * }); * * // Add layers to be controlled * lightController.addLayer(layer1); * lightController.addLayer(layer2); * * // Show/hide controller * lightController.show(); * lightController.hide(); * ``` * * @property {number[]} lightDir - Current light direction vector [x, y] * @property {HTMLElement} containerElement - Main container element * @property {HTMLCanvasElement} dlCanvas - Canvas element for drawing * @property {CanvasRenderingContext2D} dlCanvasCtx - Canvas 2D rendering context * @property {CanvasGradient} dlGradient - Current radial gradient * @property {number} r - Radius of the control sphere * @property {number} thetaMinRad - Minimum theta angle in radians * @property {number} rmax - Maximum interaction radius based on thetaMin * @property {boolean} pointerDown - Whether pointer is currently pressed * @property {Layer[]} layers - Array of layers being controlled */ export { LightSphereController } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"PointerManager.js.html":{"id":"PointerManager.js.html","title":"Source: PointerManager.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: PointerManager.js /** * The `PointerManager` class is a high-level event manager that interprets low-level pointer interactions * (mouse, touch, and stylus) into higher-level gestures such as taps, holds, panning, and pinching. * It simplifies the process of handling user interactions on devices with touch screens or trackpads by * converting raw pointer events (e.g., `pointerdown`, `pointermove`, `pointerup`) into easy-to-use gestures. * * Key features include: * - **Event Management**: Registers, unregisters, and broadcasts event handlers for gestures like single/double tap, hold, panning, and pinching. * - **Gesture Recognition**: Automatically detects and handles gestures such as finger taps, holds (long press), panning (drag), and pinch (zoom). * - **Idle Detection**: Detects periods of inactivity and can trigger events based on user idleness. * - **Multiple Pointer Support**: Manages multiple pointers simultaneously, supporting interactions like pinch-to-zoom. * - **Utility Methods**: Includes helper methods for tasks like calculating device pixels per millimeter (useful for different screen densities). * * Common use cases for `PointerManager` include applications that require touch gestures, such as image or map manipulation, * or any interactive web application that benefits from handling complex pointer-based interactions. * * @module PointerManager */ /** * High-level event manager for handling pointer interactions. * Captures and classifies PointerEvents (mouse/touch) into higher-level gestures. * * @fires PointerManager#fingerHover - When pointer moves over target * @fires PointerManager#fingerSingleTap - On quick press/touch * @fires PointerManager#fingerDoubleTap - On two quick presses/touches * @fires PointerManager#fingerHold - When press/touch held for &gt;600ms * @fires PointerManager#mouseWheel - On mouse wheel rotation * @fires PointerManager#panStart - When pan gesture begins * @fires PointerManager#panMove - During pan gesture * @fires PointerManager#panEnd - When pan gesture ends * @fires PointerManager#pinchStart - When pinch gesture begins * @fires PointerManager#pinchMove - During pinch gesture * @fires PointerManager#pinchEnd - When pinch gesture ends * * @example * // Create manager and attach event handler * const canvas = document.querySelector('canvas'); * const pointerManager = new PointerManager(canvas); * const handler = { * priority: 10, * fingerSingleTap: (e) =&gt; { * console.log(\"SINGLE TAP at\", e.clientX, e.clientY); * }, * fingerHold: (e) =&gt; { * console.log(\"HOLD at\", e.clientX, e.clientY); * } * }; * pointerManager.onEvent(handler); */ class PointerManager { /** * Creates a new PointerManager instance. * @param {HTMLElement} target - DOM element to attach event listeners to * @param {Object} [options] - Configuration options * @param {number} [options.pinchMaxInterval=250] - Maximum time (ms) between touches to trigger pinch * @param {number} [options.idleTime=60] - Seconds of inactivity before idle event */ constructor(target, options) { this.target = target; Object.assign(this, { pinchMaxInterval: 250 // in ms, fingerDown event max distance in time to trigger a pinch. }); if (options) Object.assign(this, options); this.idleTimeout = null; this.idleTime = 60; //in seconds this.idling = false; this.currentPointers = []; this.eventObservers = new Map(); this.ppmm = PointerManager.getPixelsPerMM(); this.target.style.touchAction = \"none\"; this.target.addEventListener('pointerdown', (e) =&gt; this.handleEvent(e), false); this.target.addEventListener('pointermove', (e) =&gt; this.handleEvent(e), false); this.target.addEventListener('pointerup', (e) =&gt; this.handleEvent(e), false); this.target.addEventListener('pointercancel', (e) =&gt; this.handleEvent(e), false); this.target.addEventListener('wheel', (e) =&gt; this.handleEvent(e), false); } /** * Constant for targeting all pointers. * @type {number} * @readonly */ static get ANYPOINTER() { return -1; } /// Utilities /** * Splits a string into an array based on whitespace. * * @param {string} str - The input string to split. * @returns {Array&lt;string&gt;} An array of strings split by whitespace. */ static splitStr(str) { return str.trim().split(/\\s+/g); } /** * Calculates device pixels per millimeter. * @returns {number} Pixels per millimeter for current display * @private */ static getPixelsPerMM() { // Get the device pixel ratio const pixelRatio = window.devicePixelRatio || 1; // Create a div to measure const div = document.createElement(\"div\"); div.style.width = \"1in\"; div.style.height = \"1in\"; div.style.position = \"absolute\"; div.style.left = \"-100%\"; div.style.top = \"-100%\"; document.body.appendChild(div); // Measure the div const pixelsPerInch = div.offsetWidth * pixelRatio; // Clean up document.body.removeChild(div); // Convert pixels per inch to pixels per mm const pixelsPerMM = pixelsPerInch / 25.4; return pixelsPerMM; } /////////////////////////////////////////////////////////// /// Class interface /** * Registers event handlers. * @param {string} eventTypes - Space-separated list of event types * @param {Object|Function} obj - Handler object or function * @param {number} [idx=ANYPOINTER] - Pointer index to target, or ANYPOINTER for all * @returns {Object} Handler object */ on(eventTypes, obj, idx = PointerManager.ANYPOINTER) { eventTypes = PointerManager.splitStr(eventTypes); if (typeof (obj) == 'function') { obj = Object.fromEntries(eventTypes.map(e =&gt; [e, obj])); obj.priority = -1000; } eventTypes.forEach(eventType =&gt; { if (idx == PointerManager.ANYPOINTER) { this.broadcastOn(eventType, obj); } else { const p = this.currentPointers[idx]; if (!p) { throw new Error(\"Bad Index\"); } p.on(eventType, obj); } }); return obj; } /** * Unregisters event handlers. * @param {string} eventTypes - Space-separated list of event types * @param {Object|Function} callback - Handler to remove * @param {number} [idx=ANYPOINTER] - Pointer index to target */ off(eventTypes, callback, idx = PointerManager.ANYPOINTER) { if (idx == PointerManager.ANYPOINTER) { this.broadcastOff(eventTypes, callback); } else { PointerManager.splitStr(eventTypes).forEach(eventType =&gt; { const p = this.currentPointers[idx]; if (!p) { throw new Error(\"Bad Index\"); } p.off(eventType, callback); }); } } /** * Registers a complete event handler with multiple callbacks. * @param {Object} handler - Handler object * @param {number} handler.priority - Handler priority (higher = earlier execution) * @param {Function} [handler.fingerHover] - Hover callback * @param {Function} [handler.fingerSingleTap] - Single tap callback * @param {Function} [handler.fingerDoubleTap] - Double tap callback * @param {Function} [handler.fingerHold] - Hold callback * @param {Function} [handler.mouseWheel] - Mouse wheel callback * @param {Function} [handler.panStart] - Pan start callback * @param {Function} [handler.panMove] - Pan move callback * @param {Function} [handler.panEnd] - Pan end callback * @param {Function} [handler.pinchStart] - Pinch start callback * @param {Function} [handler.pinchMove] - Pinch move callback * @param {Function} [handler.pinchEnd] - Pinch end callback * @throws {Error} If handler lacks priority or required callbacks */ onEvent(handler) { const cb_properties = ['fingerHover', 'fingerSingleTap', 'fingerDoubleTap', 'fingerHold', 'mouseWheel', 'wentIdle', 'activeAgain']; if (!handler.hasOwnProperty('priority')) throw new Error(\"Event handler has not priority property\"); if (!cb_properties.some((e) =&gt; typeof (handler[e]) == 'function')) throw new Error(\"Event handler properties are wrong or missing\"); for (let e of cb_properties) if (typeof (handler[e]) == 'function') { this.on(e, handler); } if (handler.panStart) this.onPan(handler); if (handler.pinchStart) this.onPinch(handler); } /** * Registers pan gesture callbacks. * * @param {Object} handler - The handler object with pan callbacks. * @throws {Error} If the handler is missing any required pan callbacks. */ onPan(handler) { const cb_properties = ['panStart', 'panMove', 'panEnd']; if (!handler.hasOwnProperty('priority')) throw new Error(\"Event handler has not priority property\"); if (!cb_properties.every((e) =&gt; typeof (handler[e]) == 'function')) throw new Error(\"Pan handler is missing one of this functions: panStart, panMove or panEnd\"); handler.fingerMovingStart = (e) =&gt; { handler.panStart(e); if (!e.defaultPrevented) return; this.on('fingerMoving', (e1) =&gt; { handler.panMove(e1); }, e.idx); this.on('fingerMovingEnd', (e2) =&gt; { handler.panEnd(e2); }, e.idx); } this.on('fingerMovingStart', handler); } /** * Registers pinch gesture callbacks. * * @param {Object} handler - The handler object with pinch callbacks. * @throws {Error} If the handler is missing any required pinch callbacks. */ onPinch(handler) { const cb_properties = ['pinchStart', 'pinchMove', 'pinchEnd']; if (!handler.hasOwnProperty('priority')) throw new Error(\"Event handler has not priority property\"); if (!cb_properties.every((e) =&gt; typeof (handler[e]) == 'function')) throw new Error(\"Pinch handler is missing one of this functions: pinchStart, pinchMove or pinchEnd\"); handler.fingerDown = (e1) =&gt; { //find other pointers not in moving status const filtered = this.currentPointers.filter(cp =&gt; cp &amp;&amp; cp.idx != e1.idx &amp;&amp; cp.status == cp.stateEnum.DETECT); if (filtered.length == 0) return; //for each pointer search for the last fingerDown event. const fingerDownEvents = []; for (let cp of filtered) { let down = null; for (let e of cp.eventHistory.toArray()) if (e.fingerType == 'fingerDown') down = e; if (down) fingerDownEvents.push(down); } //we start from the closest one //TODO maybe we should sort by distance instead. fingerDownEvents.sort((a, b) =&gt; b.timeStamp - a.timeStamp); for (let e2 of fingerDownEvents) { if (e1.timeStamp - e2.timeStamp &gt; this.pinchMaxInterval) break; handler.pinchStart(e1, e2); if (!e1.defaultPrevented) break; clearTimeout(this.currentPointers[e1.idx].timeout); clearTimeout(this.currentPointers[e2.idx].timeout); this.on('fingerMovingStart', (e) =&gt; e.preventDefault(), e1.idx); //we need to capture this event (pan conflict) this.on('fingerMovingStart', (e) =&gt; e.preventDefault(), e2.idx); this.on('fingerMoving', (e) =&gt; e2 &amp;&amp; handler.pinchMove(e1 = e, e2), e1.idx); //we need to assign e1 and e2, to keep last position. this.on('fingerMoving', (e) =&gt; e1 &amp;&amp; handler.pinchMove(e1, e2 = e), e2.idx); this.on('fingerMovingEnd', (e) =&gt; { if (e2) handler.pinchEnd(e, e2); e1 = e2 = null; }, e1.idx); this.on('fingerMovingEnd', (e) =&gt; { if (e1) handler.pinchEnd(e1, e); e1 = e2 = null; }, e2.idx); break; } } this.on('fingerDown', handler); } /////////////////////////////////////////////////////////// /// Implementation stuff // register broadcast handlers broadcastOn(eventType, obj) { if (!this.eventObservers.has(eventType)) { this.eventObservers.set(eventType, new Set()); } this.eventObservers.get(eventType).add(obj); } broadcastOff(eventTypes, obj) { PointerManager.splitStr(eventTypes).forEach(eventType =&gt; { if (this.eventObservers.has(eventType)) { if (!obj) { this.eventObservers.delete(eventType); } else { const handlers = this.eventObservers.get(eventType); handlers.delete(obj); if (handlers.size === 0) { this.eventObservers.delete(eventType); } } } }); } broadcast(e) { if (!this.eventObservers.has(e.fingerType)) return; const handlers = Array.from(this.eventObservers.get(e.fingerType)); handlers.sort((a, b) =&gt; b.priority - a.priority); for (const obj of handlers) { obj[e.fingerType](e); if (e.defaultPrevented) break; } } addCurrPointer(cp) { let result = -1; for (let i = 0; i &lt; this.currentPointers.length &amp;&amp; result &lt; 0; i++) { if (this.currentPointers[i] == null) { result = i; } } if (result &lt; 0) { this.currentPointers.push(cp); result = this.currentPointers.length - 1; } else { this.currentPointers[result] = cp; } return result; } removeCurrPointer(index) { this.currentPointers[index] = null; while ((this.currentPointers.length &gt; 0) &amp;&amp; (this.currentPointers[this.currentPointers.length - 1] == null)) { this.currentPointers.pop(); } } handleEvent(e) { //IDLING MANAGEMENT if (this.idling) { this.broadcast({ fingerType: 'activeAgain' }); this.idling = false; } else { if (this.idleTimeout) clearTimeout(this.idleTimeout); this.idleTimeout = setTimeout(() =&gt; { this.broadcast({ fingerType: 'wentIdle' }); this.idling = true; }, this.idleTime * 1000); } if (e.type == 'pointerdown') this.target.setPointerCapture(e.pointerId); if (e.type == 'pointercancel') console.log(e); let handled = false; for (let i = 0; i &lt; this.currentPointers.length &amp;&amp; !handled; i++) { const cp = this.currentPointers[i]; if (cp) { handled = cp.handleEvent(e); if (cp.isDone()) this.removeCurrPointer(i); } } if (!handled) { const cp = new SinglePointerHandler(this, e.pointerId, { ppmm: this.ppmm }); handled = cp.handleEvent(e); } //e.preventDefault(); } } /** * Handles events for a single pointer. * @private */ class SinglePointerHandler { /** * Creates a new SinglePointerHandler instance. * @param {PointerManager} parent - Parent PointerManager instance * @param {number} pointerId - Pointer identifier * @param {Object} [options] - Configuration options * @param {number} [options.ppmm=3] - Pixels per millimeter */ constructor(parent, pointerId, options) { this.parent = parent; this.pointerId = pointerId; Object.assign(this, { ppmm: 3, // 27in screen 1920x1080 = 3 ppmm }); if (options) Object.assign(this, options); this.eventHistory = new CircularBuffer(10); this.isActive = false; this.startTap = 0; this.threshold = 15; // 15mm this.eventObservers = new Map(); this.isDown = false; this.done = false; this.stateEnum = { IDLE: 0, DETECT: 1, HOVER: 2, MOVING_START: 3, MOVING: 4, MOVING_END: 5, HOLD: 6, TAPS_DETECT: 7, SINGLE_TAP: 8, DOUBLE_TAP_DETECT: 9, DOUBLE_TAP: 10, }; this.status = this.stateEnum.IDLE; this.timeout = null; this.holdTimeoutThreshold = 600; this.tapTimeoutThreshold = 100; this.oldDownPos = { clientX: 0, clientY: 0 }; this.movingThreshold = 1; // 1mm this.idx = this.parent.addCurrPointer(this); } /////////////////////////////////////////////////////////// /// Utilities static distance(x0, y0, x1, y1) { return Math.sqrt((x1 - x0) ** 2 + (y1 - y0) ** 2); } distanceMM(x0, y0, x1, y1) { return SinglePointerHandler.distance(x0, y0, x1, y1) / this.ppmm; } /////////////////////////////////////////////////////////// /// Class interface on(eventType, obj) { this.eventObservers.set(eventType, obj); } off(eventType) { if (this.eventObservers.has(eventType)) { this.eventObservers.delete(eventType); } } /////////////////////////////////////////////////////////// /// Implementation stuff addToHistory(e) { this.eventHistory.push(e); } prevPointerEvent() { return this.eventHistory.last(); } handlePointerDown(e) { this.startTap = e.timeStamp; } handlePointerUp(e) { const tapDuration = e.timeStamp - this.startTap; } isLikelySamePointer(e) { let result = this.pointerId == e.pointerId; if (!result &amp;&amp; !this.isDown &amp;&amp; e.type == \"pointerdown\") { const prevP = this.prevPointerEvent(); if (prevP) { result = (e.pointerType == prevP.pointerType) &amp;&amp; this.distanceMM(e.clientX, e.clientY, prevP.clientX, prevP.clientY) &lt; this.threshold; } } return result; } // emit+broadcast emit(e) { if (this.eventObservers.has(e.fingerType)) { this.eventObservers.get(e.fingerType)[e.fingerType](e); if (e.defaultPrevented) return; } this.parent.broadcast(e); } // output Event, speed is computed only on pointermove createOutputEvent(e, type) { const result = e; result.fingerType = type; result.originSrc = this.originSrc; result.speedX = 0; result.speedY = 0; result.idx = this.idx; const prevP = this.prevPointerEvent(); if (prevP &amp;&amp; (e.type == 'pointermove')) { const dt = result.timeStamp - prevP.timeStamp; if (dt &gt; 0) { result.speedX = (result.clientX - prevP.clientX) / dt * 1000.0; // px/s result.speedY = (result.clientY - prevP.clientY) / dt * 1000.0; // px/s } } return result; } // Finite State Machine processEvent(e) { let distance = 0; if (e.type == \"pointerdown\") { this.oldDownPos.clientX = e.clientX; this.oldDownPos.clientY = e.clientY; this.isDown = true; } if (e.type == \"pointerup\" || e.type == \"pointercancel\") this.isDown = false; if (e.type == \"pointermove\" &amp;&amp; this.isDown) { distance = this.distanceMM(e.clientX, e.clientY, this.oldDownPos.clientX, this.oldDownPos.clientY) } if (e.type == \"wheel\") { this.emit(this.createOutputEvent(e, 'mouseWheel')); return; } switch (this.status) { case this.stateEnum.HOVER: case this.stateEnum.IDLE: if (e.type == 'pointermove') { this.emit(this.createOutputEvent(e, 'fingerHover')); this.status = this.stateEnum.HOVER; this.originSrc = e.composedPath()[0]; } else if (e.type == 'pointerdown') { this.status = this.stateEnum.DETECT; this.emit(this.createOutputEvent(e, 'fingerDown')); if (e.defaultPrevented) { // An observer captured the fingerDown event this.status = this.stateEnum.MOVING; break; } this.originSrc = e.composedPath()[0]; this.timeout = setTimeout(() =&gt; { this.emit(this.createOutputEvent(e, 'fingerHold')); if (e.defaultPrevented) this.status = this.stateEnum.IDLE; }, this.holdTimeoutThreshold); } break; case this.stateEnum.DETECT: if (e.type == 'pointercancel') { /// For Firefox clearTimeout(this.timeout); this.status = this.stateEnum.IDLE; this.emit(this.createOutputEvent(e, 'fingerHold')); } else if (e.type == 'pointermove' &amp;&amp; distance &gt; this.movingThreshold) { clearTimeout(this.timeout); this.status = this.stateEnum.MOVING; this.emit(this.createOutputEvent(e, 'fingerMovingStart')); } else if (e.type == 'pointerup') { clearTimeout(this.timeout); this.status = this.stateEnum.TAPS_DETECT; this.timeout = setTimeout(() =&gt; { this.status = this.stateEnum.IDLE; this.emit(this.createOutputEvent(e, 'fingerSingleTap')); }, this.tapTimeoutThreshold); } break; case this.stateEnum.TAPS_DETECT: if (e.type == 'pointerdown') { clearTimeout(this.timeout); this.status = this.stateEnum.DOUBLE_TAP_DETECT; this.timeout = setTimeout(() =&gt; { this.emit(this.createOutputEvent(e, 'fingerHold')); if (e.defaultPrevented) this.status = this.stateEnum.IDLE; }, this.tapTimeoutThreshold); } else if (e.type == 'pointermove' &amp;&amp; distance &gt; this.movingThreshold) { clearTimeout(this.timeout); this.status = this.stateEnum.IDLE; this.emit(this.createOutputEvent(e, 'fingerHover')); } break; case this.stateEnum.DOUBLE_TAP_DETECT: if (e.type == 'pointerup' || e.type == 'pointercancel') { clearTimeout(this.timeout); this.status = this.stateEnum.IDLE; this.emit(this.createOutputEvent(e, 'fingerDoubleTap')); } break; case this.stateEnum.DOUBLE_TAP_DETECT: if (e.type == 'pointermove' &amp;&amp; distance &gt; this.movingThreshold) { this.status = this.stateEnum.MOVING; this.emit(this.createOutputEvent(e, 'fingerMovingStart')); } break; case this.stateEnum.MOVING: if (e.type == 'pointermove') { // Remain MOVING this.emit(this.createOutputEvent(e, 'fingerMoving')); } else if (e.type == 'pointerup' || e.type == 'pointercancel') { this.status = this.stateEnum.IDLE; this.emit(this.createOutputEvent(e, 'fingerMovingEnd')); } break; default: console.log(\"ERROR \" + this.status); console.log(e); break; } this.addToHistory(e); } handleEvent(e) { let result = false; if (this.isLikelySamePointer(e)) { this.pointerId = e.pointerId; //it's mine this.processEvent(e); result = true; } return result; } isDone() { return this.status == this.stateEnum.IDLE; } } /** * Circular buffer for event history. * @private */ class CircularBuffer { /** * Creates a new CircularBuffer instance. * @param {number} capacity - Maximum number of elements * @throws {TypeError} If capacity is not a positive integer */ constructor(capacity) { if (typeof capacity != \"number\" || !Number.isInteger(capacity) || capacity &lt; 1) throw new TypeError(\"Invalid capacity\"); this.buffer = new Array(capacity); this.capacity = capacity; this.first = 0; this.size = 0; } clear() { this.first = 0; this.size = 0; } empty() { return this.size == 0; } size() { return this.size; } capacity() { return this.capacity; } first() { let result = null; if (this.size &gt; 0) result = this.buffer[this.first]; return result; } last() { let result = null; if (this.size &gt; 0) result = this.buffer[(this.first + this.size - 1) % this.capacity]; return result; } enqueue(v) { this.first = (this.first &gt; 0) ? this.first - 1 : this.first = this.capacity - 1; this.buffer[this.first] = v; if (this.size &lt; this.capacity) this.size++; } push(v) { if (this.size === this.capacity) { this.buffer[this.first] = v; this.first = (this.first + 1) % this.capacity; } else { this.buffer[(this.first + this.size) % this.capacity] = v; this.size++; } } dequeue() { if (this.size == 0) throw new RangeError(\"Dequeue on empty buffer\"); const v = this.buffer[(this.first + this.size - 1) % this.capacity]; this.size--; return v; } pop() { return this.dequeue(); } shift() { if (this.size == 0) throw new RangeError(\"Shift on empty buffer\"); const v = this.buffer[this.first]; if (this.first == this.capacity - 1) this.first = 0; else this.first++; this.size--; return v; } get(start, end) { if (this.size === 0 &amp;&amp; start === 0 &amp;&amp; (end === undefined || end === 0)) return []; if (typeof start !== \"number\" || !Number.isInteger(start) || start &lt; 0) throw new TypeError(\"Invalid start value\"); if (start &gt;= this.size) throw new RangeError(\"Start index past end of buffer: \" + start); if (end === undefined) return this.buffer[(this.first + start) % this.capacity]; if (typeof end !== \"number\" || !Number.isInteger(end) || end &lt; 0) throw new TypeError(\"Invalid end value\"); if (end &gt;= this.size) throw new RangeError(\"End index past end of buffer: \" + end); const result = []; for (let i = start; i &lt;= end; i++) { result.push(this.buffer[(this.first + i) % this.capacity]); } return result; } toArray() { if (this.size == 0) return []; return this.get(0, this.size - 1); } } export { PointerManager } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"Signals.js.html":{"id":"Signals.js.html","title":"Source: Signals.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: Signals.js function addSignals(proto, ...signals) { if(!proto.prototype.allSignals) proto.prototype.allSignals = []; proto.prototype.allSignals = [...proto.prototype.allSignals, ...signals]; proto.prototype.initSignals = function() { this.signals = Object.fromEntries(this.allSignals.map( s =&gt; [s, []])); } /** * Adds a Layer Event * @param {string} event A label to identify the event. * @param {*} callback The event callback function. */ proto.prototype.addEvent = function(event, callback) { if(!this.signals) this.initSignals(); this.signals[event].push(callback); } /* * Emits an event (running all the callbacks referred to it). * @param {*} event The event name */ /** @ignore */ proto.prototype.emit = function(event, ...parameters) { if(!this.signals) this.initSignals(); for (let r of this.signals[event]) r(...parameters); } } export { addSignals } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"Raster.js.html":{"id":"Raster.js.html","title":"Source: Raster.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: Raster.js /** * An Raster Format describes the way that the images in textures and renderbuffers store their data. * * 'vec3' format must be specified if the image is RGB (without alpha). * * 'vec4' is related to RGBA images. * * 'float' is for file containg coefficients. * @typedef {('vec3'|'vec4'|'float')} Raster#Format */ /** * Raster is a provider of image and/or plane of coefficients. * It support all file formats supported by {@link Layout}. * * An object literal with Raster `options` can be specified. * * @param {Object} [options] An object literal describing the raster content. * @param {Raster#Format} options.format='vec3' The color format of the image. */ class Raster { constructor(options) { Object.assign(this, { format: 'vec3', }); Object.assign(this, options); } /** * Gets a tile. * @param {Tile} tile A tile. * @param {WebGLRenderingContext} gl The WebGL rendering context . * @returns {'[tex, size]'} A pair (tex,size). */ async loadImage(tile, gl) { let img; let cors = (new URL(tile.url, window.location.href)).origin !== window.location.origin; if (tile.end || typeof createImageBitmap == 'undefined') { let options = {}; options.headers = { range: `bytes=${tile.start}-${tile.end}`, 'Accept-Encoding': 'indentity', mode: cors? 'cors' : 'same-origin' }; let response = await fetch(tile.url, options); if (!response.ok) { callback(\"Failed loading \" + tile.url + \": \" + response.statusText); return; } if (response.status != 206) throw \"The server doesn't support partial content requests (206).\"; let blob = await response.blob(); img = await this.blobToImage(blob, gl); } else { img = document.createElement('img'); if (cors) img.crossOrigin=\"\"; img.onerror = function (e) { console.log(\"Texture loading error!\"); }; img.src = tile.url; await new Promise((resolve, reject) =&gt; { img.onload = () =&gt; { resolve(); } }); } let tex = this.loadTexture(gl, img); //TODO 3 is not accurate for type of image, when changing from rgb to grayscale, fix this value. let size = img.width * img.height * 3; return [tex, size]; } /** @ignore */ async blobToImage(blob, gl) { let tex, img; if(typeof createImageBitmap != 'undefined') { var isFirefox = typeof InstallTrigger !== 'undefined'; //firefox does not support options for this call, BUT the image is automatically flipped. if(isFirefox) img = await createImageBitmap(blob); else img = await createImageBitmap(blob, { imageOrientation1: 'flipY' }); } else { //fallback for IOS let urlCreator = window.URL || window.webkitURL; img = document.createElement('img'); img.onerror = function(e) { console.log(\"Texture loading error!\"); }; img.src = urlCreator.createObjectURL(blob); await new Promise((resolve, reject) =&gt; { img.onload = () =&gt; resolve() }); urlCreator.revokeObjectURL(img.src); } return img; } /** @ignore */ loadTexture(gl, img) { this.width = img.width; //this will be useful for layout image. this.height = img.height; var tex = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, tex); let glFormat = gl.RGBA; switch(this.format) { case 'vec3': glFormat = gl.RGB; break; case 'vec4': glFormat = gl.RGBA; break; case 'float': glFormat = gl.LUMINANCE; break; default: break; } gl.texImage2D(gl.TEXTURE_2D, 0, glFormat, glFormat, gl.UNSIGNED_BYTE, img); gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); //build mipmap for large images. if(this.width &gt; 1024 || this.height &gt; 1024) { gl.generateMipmap(gl.TEXTURE_2D); gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR); } else { gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); } gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); return tex; } } export { Raster } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"ShaderBRDF.js.html":{"id":"ShaderBRDF.js.html","title":"Source: ShaderBRDF.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: ShaderBRDF.js import { Shader } from './Shader.js' /** * @param {object} options * mode: default is color, can be [color, diffuse, specular, normals] * color implements ward */ class ShaderBRDF extends Shader { constructor(options) { super({}); this.modes = ['color', 'diffuse', 'specular', 'normals', 'monochrome']; this.mode = 'color'; Object.assign(this, options); const kdCS = this.colorspaces['kd'] == 'linear' ? 0 : 1; const ksCS = this.colorspaces['ks'] == 'linear' ? 0 : 1; const brightness = options.brightness ? options.brightness : 1.0; const gamma = options.gamma ? options.gamma : 2.2; const alphaLimits = options.alphaLimits ? options.alphaLimits : [0.01, 0.5]; const monochromeMaterial = options.monochromeMaterial ? options.monochromeMaterial : [0.80, 0.79, 0.75]; const kAmbient = options.kAmbient ? options.kAmbient : 0.02; this.uniforms = { uLightInfo: { type: 'vec4', needsUpdate: true, size: 4, value: [0.1, 0.1, 0.9, 0] }, uAlphaLimits: { type: 'vec2', needsUpdate: true, size: 2, value: alphaLimits }, uBrightnessGamma: { type: 'vec2', needsUpdate: true, size: 2, value: [brightness, gamma] }, uInputColorSpaceKd: { type: 'int', needsUpdate: true, size: 1, value: kdCS }, uInputColorSpaceKs: { type: 'int', needsUpdate: true, size: 1, value: ksCS }, uMonochromeMaterial: { type: 'vec3', needsUpdate: true, size: 3, value: monochromeMaterial }, uKAmbient: { type: 'float', needsUpdate: true, size: 1, value: kAmbient }, } this.innerCode = ''; this.setMode(this.mode); } setLight(light) { // Light with 4 components (Spot: 4th==1, Dir: 4th==0) this.setUniform('uLightInfo', light); } setMode(mode) { this.mode = mode; switch(mode) { case 'color': this.innerCode = `vec3 linearColor = (kd + ks * spec) * NdotL; linearColor += kd * uKAmbient; // HACK! adding just a bit of ambient` break; case 'diffuse': this.innerCode = `vec3 linearColor = kd;` break; case 'specular': this.innerCode = `vec3 linearColor = clamp((ks * spec) * NdotL, 0.0, 1.0);` break; case 'normals': this.innerCode = `vec3 linearColor = (N+vec3(1.))/2.; applyGamma = false;` break; case 'monochrome': this.innerCode = 'vec3 linearColor = kd * NdotL + kd * uKAmbient;' break; default: console.log(\"ShaderBRDF: Unknown mode: \" + mode); throw Error(\"ShaderBRDF: Unknown mode: \" + mode); break; } this.needsUpdate = true; } fragShaderSrc(gl) { let gl2 = !(gl instanceof WebGLRenderingContext); let hasKd = this.samplers.findIndex( s =&gt; s.name == 'uTexKd') != -1 &amp;&amp; this.mode != 'monochrome'; let hasGloss = this.samplers.findIndex( s =&gt; s.name == 'uTexGloss') != -1 &amp;&amp; this.mode != 'monochrome'; let hasKs = this.samplers.findIndex( s =&gt; s.name == 'uTexKs') != -1; let str = ` #define NULL_NORMAL vec3(0,0,0) #define SQR(x) ((x)*(x)) #define PI (3.14159265359) #define ISO_WARD_EXPONENT (4.0) ${gl2? 'in' : 'varying'} vec2 v_texcoord; uniform sampler2D uTexKd; uniform sampler2D uTexKs; uniform sampler2D uTexNormals; uniform sampler2D uTexGloss; uniform vec4 uLightInfo; // [x,y,z,w] (if .w==0 =&gt; Directional, if w==1 =&gt; Spot) uniform vec2 uAlphaLimits; uniform vec2 uBrightnessGamma; uniform vec3 uMonochromeMaterial; uniform float uKAmbient; uniform int uInputColorSpaceKd; // 0: Linear; 1: sRGB uniform int uInputColorSpaceKs; // 0: Linear; 1: sRGB vec3 getNormal(const in vec2 texCoord) { vec3 n = texture(uTexNormals, texCoord).xyz; n = 2. * n - vec3(1.); float norm = length(n); if(norm &lt; 0.5) return NULL_NORMAL; else return n/norm; } vec3 linear2sRGB(vec3 linearRGB) { bvec3 cutoff = lessThan(linearRGB, vec3(0.0031308)); vec3 higher = vec3(1.055)*pow(linearRGB, vec3(1.0/2.4)) - vec3(0.055); vec3 lower = linearRGB * vec3(12.92); return mix(higher, lower, cutoff); } vec3 sRGB2Linear(vec3 sRGB) { bvec3 cutoff = lessThan(sRGB, vec3(0.04045)); vec3 higher = pow((sRGB + vec3(0.055))/vec3(1.055), vec3(2.4)); vec3 lower = sRGB/vec3(12.92); return mix(higher, lower, cutoff); } float ward(in vec3 V, in vec3 L, in vec3 N, in vec3 X, in vec3 Y, in float alpha) { vec3 H = normalize(V + L); float H_dot_N = dot(H, N); float sqr_alpha_H_dot_N = SQR(alpha * H_dot_N); if(sqr_alpha_H_dot_N &lt; 0.00001) return 0.0; float L_dot_N_mult_N_dot_V = dot(L,N) * dot(N,V); if(L_dot_N_mult_N_dot_V &lt;= 0.0) return 0.0; float spec = 1.0 / (4.0 * PI * alpha * alpha * sqrt(L_dot_N_mult_N_dot_V)); //float exponent = -(SQR(dot(H,X)) + SQR(dot(H,Y))) / sqr_alpha_H_dot_N; // Anisotropic float exponent = -SQR(tan(acos(H_dot_N))) / SQR(alpha); // Isotropic spec *= exp( exponent ); return spec; } vec4 data() { vec3 N = getNormal(v_texcoord); if(N == NULL_NORMAL) { return vec4(0.0); } vec3 L = (uLightInfo.w == 0.0) ? normalize(uLightInfo.xyz) : normalize(uLightInfo.xyz - gl_FragCoord.xyz); vec3 V = vec3(0.0,0.0,1.0); vec3 H = normalize(L + V); float NdotL = max(dot(N,L),0.0); vec3 kd = ${hasKd ? 'texture(uTexKd, v_texcoord).xyz' : 'uMonochromeMaterial'}; vec3 ks = ${hasKs ? 'texture(uTexKs, v_texcoord).xyz' : 'vec3(0.0, 0.0, 0.0)'}; if(uInputColorSpaceKd == 1) { kd = sRGB2Linear(kd); } if(uInputColorSpaceKs == 1) { ks = sRGB2Linear(ks); } kd /= PI; float gloss = ${hasGloss ? 'texture(uTexGloss, v_texcoord).x' : '0.0'}; float minGloss = 1.0 - pow(uAlphaLimits[1], 1.0 / ISO_WARD_EXPONENT); float maxGloss = 1.0 - pow(uAlphaLimits[0], 1.0 / ISO_WARD_EXPONENT); float alpha = pow(1.0 - gloss * (maxGloss - minGloss) - minGloss, ISO_WARD_EXPONENT); vec3 e = vec3(0.0,0.0,1.0); vec3 T = normalize(cross(N,e)); vec3 B = normalize(cross(N,T)); float spec = ward(V, L, N, T, B, alpha); bool applyGamma = true; ${this.innerCode} vec3 finalColor = applyGamma ? pow(linearColor * uBrightnessGamma[0], vec3(1.0/uBrightnessGamma[1])) : linearColor; return vec4(finalColor, 1.0); } `; return str; } } export { ShaderBRDF } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"ShaderCombiner.js.html":{"id":"ShaderCombiner.js.html","title":"Source: ShaderCombiner.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: ShaderCombiner.js import { Shader } from './Shader.js' /** * The **ShaderCombiner** class specifies a shader that computes an output texture as a combination of two input textures. * It defines four modes (shader behaviors): * * 'first' assigns the first texture as output (draws the first texture). The color of each fragment is cout=c1 * * 'second' assigns the second texture as output (draws the second texture). The color of each fragment is cout=c2 * * 'mean' calculates the average color of the two textures. The color of each fragment is cout=(c1+c2)/2.0 * * 'diff' calculates the difference between the color of the textures. Color of each fragment is cout=c2.rgb-c1.rgb * * Extends {@link Shader}. */ class ShaderCombiner extends Shader { /** * Instantiates a **ShaderCombiner** class. * An object literal with ShaderCombiner `options` can be specified. * @param {Object} [options] An object literal with options that inherits from {@link Shader}. */ constructor(options) { super(options); this.mode = 'mean', //Lighten Darken Contrast Inversion HSV components LCh components this.samplers = [ { id:0, name:'source1', type:'vec3' }, { id:1, name:'source2', type:'vec3' } ]; this.modes = ['first','second','mean','diff']; this.operations = { 'first': 'color = c1;', 'second': 'color = c2;', 'mean': 'color = (c1 + c2)/2.0;', 'diff': 'color = vec4(c2.rgb - c1.rgb, c1.a);' }; } /** @ignore */ fragShaderSrc(gl) { let gl2 = !(gl instanceof WebGLRenderingContext); let operation = this.operations[this.mode]; return ` ${gl2? 'in' : 'varying'} vec2 v_texcoord; uniform sampler2D source1; uniform sampler2D source2; vec4 data() { vec4 c1 = texture(source1, v_texcoord); vec4 c2 = texture(source2, v_texcoord); vec4 color; ${operation}; return color; } `; } /** @ignore */ vertShaderSrc(gl) { let gl2 = !(gl instanceof WebGLRenderingContext); return `${gl2? '#version 300 es':''} ${gl2? 'in' : 'attribute'} vec4 a_position; ${gl2? 'in' : 'attribute'} vec2 a_texcoord; ${gl2? 'out' : 'varying'} vec2 v_texcoord; void main() { gl_Position = a_position; v_texcoord = a_texcoord; }`; } } export { ShaderCombiner } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"ShaderFilter.js.html":{"id":"ShaderFilter.js.html","title":"Source: ShaderFilter.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: ShaderFilter.js class ShaderFilter { constructor(options) { options = Object.assign({ }, options); Object.assign(this, options); this.name = this.constructor.name; this.uniforms = {}; this.samplers = []; this.needsUpdate = true; this.shader = null; this.modes = {}; } setMode(mode, id) { if (!this.shader) throw Error(\"Shader not registered\"); if (Object.keys(this.modes).length &gt; 0) { const list = this.modes[mode]; if (list) { list.map(a =&gt; { a.enable = a.id == id; }); this.shader.needsUpdate = true; } else { throw Error(`Mode \"${mode}\" not exist!`); } } } // Callback in Shader.js prepare(gl) { if (this.needsUpdate) if (this.createTextures) this.createTextures(gl); this.needsUpdate = false; } // Callback to create textures for samplers // async createTextures(gl) { // } // Constant (modes) declarations in shader program fragModeSrc() { let src = ''; for (const key of Object.keys(this.modes)) { for (const e of this.modes[key]) { if (e.enable) { src += e.src + '\\n'; } } } return src; } /** * Sets the value of a uniform variable. * @param {string} name The name of the uniform variable (it will be converted with the unique filter name). * @param {*} value The value to assign. */ setUniform(name, value) { if(!this.shader) { throw Error(`Shader not registered`); } this.shader.setUniform(this.uniformName(name), value); } // Sampler declarations in shader program fragSamplerSrc() { let src = ''; for (let s of this.samplers) { src += ` uniform sampler2D ${s.name};`; } return src; } // Uniform declarations in shader program fragUniformSrc() { let src = ''; for (const [key, value] of Object.entries(this.uniforms)) { src += ` uniform ${this.uniforms[key].type} ${key};`; } return src; } fragDataSrc(gl) { return null; } functionName() { return this.name + \"_data\"; } samplerName(name) { return `${this.name}_${name}`; } uniformName(name) { return `u_${this.name}_${name}`; } modeName(name) { return `m_${this.name}_${name}`; } getSampler(name) { const samplername = this.samplerName(name); return this.samplers.find(e =&gt; e.name == samplername); } } class ShaderFilterTest extends ShaderFilter { constructor(options) { super(options); this.uniforms[this.uniformName('nodata_col')] = { type: 'vec4', needsUpdate: true, size: 4, value: [1, 1, 0, 1] }; } fragDataSrc(gl) { return ` vec4 ${this.functionName()}(vec4 col){ return col.a &gt; 0.0 ? col : ${this.uniformName('nodata_col')}; }`; } } class ShaderFilterOpacity extends ShaderFilter { constructor(opacity, options) { super(options); this.uniforms[this.uniformName('opacity')] = { type: 'float', needsUpdate: true, size: 1, value: opacity }; } fragDataSrc(gl) { return ` vec4 ${this.functionName()}(vec4 col){ return vec4(col.rgb, col.a * ${this.uniformName('opacity')}); }`; } } class ShaderGammaFilter extends ShaderFilter { constructor(options) { super(options); this.uniforms[this.uniformName('gamma')] = { type: 'float', needsUpdate: true, size: 1, value: 2.2 }; } fragDataSrc(gl) { return ` vec4 ${this.functionName()}(vec4 col){ float igamma = 1.0/${this.uniformName('gamma')}; return vec4(pow(col.r, igamma), pow(col.g, igamma), pow(col.b, igamma), col.a); }`; } } export { ShaderFilter, ShaderFilterTest, ShaderFilterOpacity, ShaderGammaFilter } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"ShaderNeural.js.html":{"id":"ShaderNeural.js.html","title":"Source: ShaderNeural.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: ShaderNeural.js import { Shader } from './Shader.js' /** * Extends {@link Shader}, initialized with a Neural .json ( **/ class ShaderNeural extends Shader { constructor(options) { super({}); Object.assign(this, { modes: ['light'], mode: 'light', nplanes: null, //number of coefficient planes scale: null, //factor and bias are used to dequantize coefficient planes. bias: null, }); Object.assign(this, options); this.samplers = [ { id:1, name:'u_texture_1', type:'vec3' }, { id:2, name:'u_texture_2', type:'vec3' }, { id:3, name:'u_texture_3', type:'vec3' } ]; this.uniforms = { lights: { type: 'vec2', needsUpdate: true, size: 2, value: [0.0, 0.0] }, min: { type: 'vec3', needsUpdate: true, size: 3, value: [0, 0, 0] }, max: { type: 'vec3', needsUpdate: true, size: 3, value: [1, 1, 1] }, layer1_weights: { type: 'vec4', needsUpdate: true, size: this.c*this.n/4}, layer1_biases: { type: 'vec4', needsUpdate: true, size: this.n/4}, layer2_weights: { type: 'vec4', needsUpdate: true, size: this.n*this.n/4}, layer2_biases: { type: 'vec4', needsUpdate: true, size: this.n/4}, layer3_weights: { type: 'vec4', needsUpdate: true, size: this.n*3/4}, layer3_biases: { type: 'vec3', needsUpdate: true, size: 1}, }; } createProgram(gl) { super.createProgram(gl); this.position_location = gl.getAttribLocation(this.program, \"a_position\"); this.texcoord_location = gl.getAttribLocation(this.program, \"a_texcoord\"); } setLight(light) { this.setUniform('lights', light); } init() { this.lightWeights([0, 0, 1], 'base'); } setShaderInfo(samples, planes, n, c, colorspace) { this.samples = samples; this.planes = planes; this.n = n; this.c = c; this.colorspace = colorspace; } vertShaderSrc(gl) { return `#version 300 es in vec2 a_position; in vec2 a_texcoord; out vec2 v_texcoord; void main() { gl_Position = vec4(a_position, 0.0, 1.0); v_texcoord = a_texcoord; }`; } fragShaderSrc(gl) { return ` vec4 inputs[${this.c/4}]; // 12/4 vec4 output1[${this.n/4}]; // 52/4 vec4 output2[${this.n/4}]; // 52/4 vec3 output3; in vec2 v_texcoord; uniform sampler2D u_texture_1; uniform sampler2D u_texture_2; uniform sampler2D u_texture_3; uniform vec2 lights; uniform vec4 layer1_weights[${this.c*this.n/4}]; // 12*52/4 uniform vec4 layer1_biases[${this.n/4}]; // 52/4 uniform vec4 layer2_weights[${this.n*this.n/4}]; // 52*52/4 uniform vec4 layer2_biases[${this.n/4}]; // 52/4 uniform vec4 layer3_weights[${this.n*3/4}]; // 52*3/4 uniform vec3 layer3_biases; uniform vec3 min[${this.planes/3}]; uniform vec3 max[${this.planes/3}]; float elu(float a){ return (a &gt; 0.0) ? a : (exp(a) - 1.0); } vec4 relightCoeff(vec3 color_1, vec3 color_2, vec3 color_3) { // Rescaling features color_1 = color_1 * (max[0] - min[0]) + min[0]; color_2 = color_2 * (max[1] - min[1]) + min[1]; color_3 = color_3 * (max[2] - min[2]) + min[2]; // building input inputs[0] = vec4(color_1, color_2.x); inputs[1] = vec4(color_2.yz, color_3.xy); inputs[2] = vec4(color_3.z, lights, 0.0); float sum = 0.0; // layer 1 - 11 x 49 for (int i=0; i &lt; ${this.n}; i++){ sum = 0.0; for (int j=0; j &lt; ${this.c/4}; j++){ sum += dot(inputs[j], layer1_weights[${this.c/4}*i+j]); } output1[i/4][i%4] = elu(sum + layer1_biases[i/4][i%4]); } // layer 2 - 49 x 49 for (int i=0; i &lt; ${this.n}; i++){ sum = 0.0; for (int j=0; j &lt; ${this.n/4}; j++){ sum += dot(output1[j], layer2_weights[${this.n/4}*i+j]); } output2[i/4][i%4] = elu(sum + layer2_biases[i/4][i%4]); } // layer 3 - 49 x 3 for (int i=0; i &lt; 3; i++){ sum = 0.0; for (int j=0; j &lt; ${this.n/4}; j++){ sum += dot(output2[j], layer3_weights[${this.n/4}*i+j]); } output3[i] = sum + layer3_biases[i]; } return vec4(output3.${this.colorspace}, 1.0); } vec4 relight(vec2 v) { vec3 color_1 = texture(u_texture_1, v).${this.colorspace}; vec3 color_2 = texture(u_texture_2, v).${this.colorspace}; vec3 color_3 = texture(u_texture_3, v).${this.colorspace}; return relightCoeff(color_1, color_2, color_3); } vec4 data() { return relight(v_texcoord); } vec4 data1() { vec2 uv = v_texcoord; bool showDiff = false; bool showA = false; if(v_texcoord.x &gt; 0.5) { showDiff = true; uv.x -= 0.5; } if(v_texcoord.y &gt; 0.5) { showA = true; uv.y -= 0.5; } vec2 o = floor(uv*128.0)/128.0; float step = 1.0/256.0; vec4 a = vec4(0, 0, 0, 0); vec3 color_1 = vec3(0, 0, 0); vec3 color_2 = vec3(0, 0, 0); vec3 color_3 = vec3(0, 0, 0); for(float y = 0.0; y &lt;= step; y = y + step) { for(float x = 0.0; x &lt;= step; x = x + step) { vec2 d = o + vec2(x, y); a += 0.25*relight(d); color_1 += texture(u_texture_1, d).${this.colorspace}; color_2 += texture(u_texture_2, d).${this.colorspace}; color_3 += texture(u_texture_3, d).${this.colorspace}; } } vec4 b = relightCoeff(0.25*color_1, 0.25*color_2, 0.25*color_3); float diff = 255.0*length((a - b).xyz); if(showDiff) { if(diff &lt; 10.0) { return vec4(0.0, 0.0, 0.0, 1.0); } else if (diff &lt; 20.0) { return vec4(0.0, 0.0, 1.0, 1.0); } else if(diff &lt; 40.0) { return vec4(0.0, 1.0, 0.0, 1.0); } else return vec4(1.0, 0.0, 0.0, 1.0); } if(showA) return a; return b; } `; } } export { ShaderNeural } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"ShaderRTI.js.html":{"id":"ShaderRTI.js.html","title":"Source: ShaderRTI.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: ShaderRTI.js import { Shader } from './Shader.js' /** * Extends {@link Shader}, initialized with a relight .json (see: * [relight on github]{@link https://github.com/cnr-isti-vclab/relight} for details). * * Supported modes are * light: relightable images depending on light direction * normals: shows a normal map * diffuse: remove albedo and display only the geometry with a white material. * specular: specular enhancement * * From the .json configuration the type of basis used: ('ptm', 'hsh', rbf', 'bln'), * and the colorspace ('lrgb', 'rgb', 'mrgb', 'mycc') along with all the other parameters. * * @param {object} options * *compose*: compose operation: add, subtract, multiply, etc. */ class ShaderRTI extends Shader { constructor(options) { super({}); Object.assign(this, { modes: ['light', 'normals', 'diffuse', 'specular'], mode: 'normal', type: ['ptm', 'hsh', 'sh', 'rbf', 'bln'], colorspaces: ['lrgb', 'rgb', 'mrgb', 'mycc'], nplanes: null, //number of coefficient planes yccplanes: null, //number of luminance planes for mycc color space njpegs: null, //number of textures needed (ceil(nplanes/3)) material: null, //material parameters lights: null, //light directions (needed for rbf interpolation) sigma: null, //rbf interpolation parameter ndimensions: null, //PCA dimension space (for rbf and bln) scale: null, //factor and bias are used to dequantize coefficient planes. bias: null, basis: null, //PCA basis for rbf and bln lweights: null //light direction dependent coefficients to be used with coefficient planes }); Object.assign(this, options); if(this.relight) this.init(this.relight); this.setMode('light'); } /* * Set current rendering mode * @param {string} mode one of 'light', 'normals', 'diffuse', 'specular' * @param {number} dt in ms, interpolation duration. */ setMode(mode) { if(!(this.modes.includes(mode))) throw Error(\"Unknown mode: \" + mode); this.mode = mode; if( mode != 'light') { this.lightWeights([ 0.612, 0.354, 0.707], 'base'); this.lightWeights([-0.612, 0.354, 0.707], 'base1'); this.lightWeights([ 0, -0.707, 0.707], 'base2'); } this.needsUpdate = true; } setLight(light) { if(!this.uniforms.light) throw \"Shader not initialized, wait on layer ready event for setLight.\" let x = light[0]; let y = light[1]; //map the square to the circle. let r = Math.sqrt(x*x + y*y); if(r &gt; 1) { x /= r; y /= r; } let z = Math.sqrt(Math.max(0, 1 - x*x - y*y)); light = [x, y, z]; if(this.mode == 'light') this.lightWeights(light, 'base'); this.setUniform('light', light); } setSpecularExp(value) { this.setUniform('specular_exp', value); } init(relight) { Object.assign(this, relight); if(this.colorspace == 'mycc') this.nplanes = this.yccplanes[0] + this.yccplanes[1] + this.yccplanes[2]; else this.yccplanes = [0, 0, 0]; this.planes = []; this.njpegs = 0; while(this.njpegs*3 &lt; this.nplanes) this.njpegs++; for(let i = 0; i &lt; this.njpegs; i++) this.samplers.push({ id:i, name:'plane'+i, type:'vec3' }); if(this.normals) this.samplers.push({ id:this.njpegs, name:'normals', type:'vec3' }); this.material = this.materials[0]; if(this.lights) this.lights + new Float32Array(this.lights); if(this.type == \"rbf\") this.ndimensions = this.lights.length/3; if(this.type == \"bilinear\") { this.ndimensions = this.resolution*this.resolution; this.type = \"bln\"; } this.scale = this.material.scale; this.bias = this.material.bias; if(['mrgb', 'mycc'].includes(this.colorspace)) this.loadBasis(this.basis); this.uniforms = { light: { type: 'vec3', needsUpdate: true, size: 3, value: [0.0, 0.0, 1] }, specular_exp: { type: 'float', needsUpdate: false, size: 1, value: 10 }, bias: { type: 'vec3', needsUpdate: true, size: this.nplanes/3, value: this.bias }, scale: { type: 'vec3', needsUpdate: true, size: this.nplanes/3, value: this.scale }, base: { type: 'vec3', needsUpdate: true, size: this.nplanes }, base1: { type: 'vec3', needsUpdate: false, size: this.nplanes }, base2: { type: 'vec3', needsUpdate: false, size: this.nplanes } } this.lightWeights([0, 0, 1], 'base'); } lightWeights(light, basename, time) { let value; switch(this.type) { case 'ptm': value = PTM.lightWeights(light); break; case 'hsh': value = HSH.lightWeights(light); break; case 'sh' : value = SH.lightWeights(light); break; case 'rbf': value = RBF.lightWeights(light, this); break; case 'bln': value = BLN.lightWeights(light, this); break; } this.setUniform(basename, value, time); } baseLightOffset(p, l, k) { return (p*this.ndimensions + l)*3 + k; } basePixelOffset(p, x, y, k) { return (p*this.resolution*this.resolution + (x + y*this.resolution))*3 + k; } loadBasis(data) { let tmp = new Uint8Array(data); this.basis = new Float32Array(data.length); let basis = new Float32Array(tmp.length); for(let plane = 0; plane &lt; this.nplanes+1; plane++) { for(let c = 0; c &lt; this.ndimensions; c++) { for(let k = 0; k &lt; 3; k++) { let o = this.baseLightOffset(plane, c, k); if(plane == 0) this.basis[o] = tmp[o]/255; else this.basis[o] = ((tmp[o] - 127)/this.material.range[plane-1]); } } } } fragShaderSrc(gl) { let basetype = 'vec3'; //(this.colorspace == 'mrgb' || this.colorspace == 'mycc')?'vec3':'float'; let gl2 = !(gl instanceof WebGLRenderingContext); let str = ` #define np1 ${this.nplanes + 1} ${gl2? 'in' : 'varying'} vec2 v_texcoord; const mat3 T = mat3(8.1650e-01, 4.7140e-01, 4.7140e-01, -8.1650e-01, 4.7140e-01, 4.7140e-01, -1.6222e-08, -9.4281e-01, 4.7140e-01); uniform vec3 light; uniform float specular_exp; uniform vec3 bias[np1]; uniform vec3 scale[np1]; uniform ${basetype} base[np1]; uniform ${basetype} base1[np1]; uniform ${basetype} base2[np1]; `; for(let n = 0; n &lt; this.njpegs; n++) str += ` uniform sampler2D plane${n}; `; if(this.normals) str += ` uniform sampler2D normals; `; if(this.colorspace == 'mycc') str += ` const int ny0 = ${this.yccplanes[0]}; const int ny1 = ${this.yccplanes[1]}; ` switch(this.colorspace) { case 'lrgb': str += LRGB.render(this.njpegs, gl2); break; case 'rgb' : str += RGB.render(this.njpegs, gl2); break; case 'mrgb': str += MRGB.render(this.njpegs, gl2); break; case 'mycc': str += MYCC.render(this.njpegs, this.yccplanes[0], gl2); break; } str += ` vec4 data() { `; if(this.mode == 'light') { str += ` vec4 color = render(base); `; } else { str += ` vec4 color; `; if(this.normals) str += ` vec3 normal = (texture${gl2?'':'2D'}(normals, v_texcoord).zyx *2.0) - 1.0; normal.z = sqrt(1.0 - normal.x*normal.x - normal.y*normal.y); `; else str += ` vec3 normal; normal.x = dot(render(base ).xyz, vec3(1)); normal.y = dot(render(base1).xyz, vec3(1)); normal.z = dot(render(base2).xyz, vec3(1)); normal = normalize(T * normal); `; switch(this.mode) { case 'normals': str += ` normal = (normal + 1.0)/2.0; color = vec4(0.0, normal.xy, 1); `; break; case 'diffuse': if(this.colorspace == 'lrgb' || this.colorspace == 'rgb') str += ` vec4 diffuse = texture${gl2?'':'2D'}(plane0, v_texcoord); float s = dot(light, normal); color = vec4(s * diffuse.xyz, 1); `; else str += ` color = vec4(vec3(dot(light, normal)), 1); `; break; case 'specular': default: str += ` float s = pow(dot(light, normal), specular_exp); //color = vec4(render(base).xyz*s, 1.0); color = vec4(s, s, s, 1.0); `; break; } } str += `return color; }`; return str; } } class LRGB { static render(njpegs, gl2) { let str = ` vec4 render(vec3 base[np1]) { float l = 0.0; ` for(let j = 1, k = 0; j &lt; njpegs; j++, k+=3) { str += ` { vec4 c = texture${gl2?'':'2D'}(plane${j}, v_texcoord); l += base[${k}].x*(c.x - bias[${j}].x)*scale[${j}].x; l += base[${k+1}].x*(c.y - bias[${j}].y)*scale[${j}].y; l += base[${k+2}].x*(c.z - bias[${j}].z)*scale[${j}].z; } `; } str += ` vec3 basecolor = (texture${gl2?'':'2D'}(plane0, v_texcoord).xyz - bias[0])*scale[0]; return l*vec4(basecolor, 1); } `; return str; } } class RGB { static render(njpegs, gl2) { let str = ` vec4 render(vec3 base[np1]) { vec4 rgb = vec4(0, 0, 0, 1);`; for(let j = 0; j &lt; njpegs; j++) { str += ` { vec4 c = texture${gl2?'':'2D'}(plane${j}, v_texcoord); rgb.x += base[${j}].x*(c.x - bias[${j}].x)*scale[${j}].x; rgb.y += base[${j}].y*(c.y - bias[${j}].y)*scale[${j}].y; rgb.z += base[${j}].z*(c.z - bias[${j}].z)*scale[${j}].z; } `; } str += ` return rgb; } `; return str; } } class MRGB { static render(njpegs, gl2) { let str = ` vec4 render(vec3 base[np1]) { vec3 rgb = base[0]; vec4 c; vec3 r; `; for(let j = 0; j &lt; njpegs; j++) { str += ` c = texture${gl2?'':'2D'}(plane${j}, v_texcoord); r = (c.xyz - bias[${j}])* scale[${j}]; rgb += base[${j}*3+1]*r.x; rgb += base[${j}*3+2]*r.y; rgb += base[${j}*3+3]*r.z; `; } str += ` return vec4(rgb, 1); } `; return str; } } class MYCC { static render(njpegs, ny1, gl2) { let str = ` vec3 toRgb(vec3 ycc) { vec3 rgb; rgb.g = ycc.r + ycc.b/2.0; rgb.b = ycc.r - ycc.b/2.0 - ycc.g/2.0; rgb.r = rgb.b + ycc.g; return rgb; } vec4 render(vec3 base[np1]) { vec3 rgb = base[0]; vec4 c; vec3 r; `; for(let j = 0; j &lt; njpegs; j++) { str += ` c = texture${gl2?'':'2D'}(plane${j}, v_texcoord); r = (c.xyz - bias[${j}])* scale[${j}]; `; if(j &lt; ny1) { str += ` rgb.x += base[${j}*3+1].x*r.x; rgb.y += base[${j}*3+2].y*r.y; rgb.z += base[${j}*3+3].z*r.z; `; } else { str += ` rgb.x += base[${j}*3+1].x*r.x; rgb.x += base[${j}*3+2].x*r.y; rgb.x += base[${j}*3+3].x*r.z; `; } } str += ` return vec4(toRgb(rgb), 1); } `; return str; } } /* PTM utility functions */ class PTM { /* @param {Array} v expects light direction as [x, y, z] */ static lightWeights(v) { let b = [1.0, v[0], v[1], v[0]*v[0], v[0]*v[1], v[1]*v[1]]; let base = new Float32Array(18); for(let i = 0; i &lt; 18; i++) base[3*i] = base[3*i+1] = base[3*i+2] = b[i]; return base; } } /* HSH utility functions */ class HSH { static minElevation = 0.15; /* @param {Array} v expects light direction as [x, y, z] */ static lightWeights(v) { let PI = 3.1415; let phi = Math.atan2(v[1], v[0]); if (phi &lt; 0) phi = 2 * PI + phi; let theta = Math.min(Math.acos(v[2]), PI / 2 - this.minElevation); let cosP = Math.cos(phi); let cosT = Math.cos(theta); let cosT2 = cosT * cosT; let b = [ 1.0 / Math.sqrt(2 * PI), Math.sqrt(6 / PI) * (cosP * Math.sqrt(cosT-cosT2)), Math.sqrt(3 / (2 * PI)) * (-1 + 2*cosT), Math.sqrt(6 / PI) * (Math.sqrt(cosT - cosT2) * Math.sin(phi)), Math.sqrt(30 / PI) * (Math.cos(2 * phi) * (-cosT + cosT2)), Math.sqrt(30 / PI) * (cosP*(-1 + 2 * cosT) * Math.sqrt(cosT - cosT2)), Math.sqrt(5 / (2 * PI)) * (1 - 6 * cosT + 6 * cosT2), Math.sqrt(30 / PI) * ((-1 + 2 * cosT) * Math.sqrt(cosT - cosT2) * Math.sin(phi)), Math.sqrt(30 / PI) * ((-cosT + cosT2) * Math.sin(2*phi)) ]; let base = new Float32Array(27); for(let i = 0; i &lt; 27; i++) base[3*i] = base[3*i+1] = base[3*i+2] = b[i]; return base; } } class SH { /* @param {Array} v expects light direction as [x, y, z] */ static lightWeights(v) { let PI = 3.1415; let A = 0.5*Math.sqrt(3.0/PI); let B = 0.5*Math.sqrt(15/PI); let b = [ 0.5/Math.sqrt(PI), A*v[0], A*v[2], A*v[1], B*v[0]*v[1], B*v[0]*v[2], 0.5*Math.sqrt(5/PI)*(3*v[2]*v[2] - 1), B*v[1]*v[2], 0.5*B*(v[1]*v[1] - v[0]*v[0]) ]; let base = new Float32Array(27); for(let i = 0; i &lt; 27; i++) base[3*i] = base[3*i+1] = base[3*i+2] = b[i]; return base; } } class RBF { /* @param {Array} v expects light direction as [x, y, z] */ static lightWeights(lpos, shader) { let weights = RBF.rbf(lpos, shader); let np = shader.nplanes; let lweights = new Float32Array((np + 1) * 3); for(let p = 0; p &lt; np+1; p++) { for(let k = 0; k &lt; 3; k++) { for(let l = 0; l &lt; weights.length; l++) { let o = shader.baseLightOffset(p, weights[l][0], k); lweights[3*p + k] += weights[l][1]*shader.basis[o]; } } } return lweights; } static rbf(lpos, shader) { let radius = 1/(shader.sigma*shader.sigma); let weights = new Array(shader.ndimensions); //compute rbf weights let totw = 0.0; for(let i = 0; i &lt; weights.length; i++) { let dx = shader.lights[i*3+0] - lpos[0]; let dy = shader.lights[i*3+1] - lpos[1]; let dz = shader.lights[i*3+2] - lpos[2]; let d2 = dx*dx + dy*dy + dz*dz; let w = Math.exp(-radius * d2); weights[i] = [i, w]; totw += w; } for(let i = 0; i &lt; weights.length; i++) weights[i][1] /= totw; //pick only most significant and renormalize let count = 0; totw = 0.0; for(let i = 0; i &lt; weights.length; i++) { if(weights[i][1] &gt; 0.001) { weights[count++] = weights[i]; totw += weights[i][1]; } } weights = weights.slice(0, count); for(let i = 0; i &lt; weights.length; i++) weights[i][1] /= totw; return weights; } } class BLN { static lightWeights(lpos, shader) { let np = shader.nplanes; let s = Math.abs(lpos[0]) + Math.abs(lpos[1]) + Math.abs(lpos[2]); //rotate 45 deg. let x = (lpos[0] + lpos[1])/s; let y = (lpos[1] - lpos[0])/s; x = (x + 1.0)/2.0; y = (y + 1.0)/2.0; x = x*(shader.resolution - 1.0); y = y*(shader.resolution - 1.0); let sx = Math.min(shader.resolution-2, Math.max(0, Math.floor(x))); let sy = Math.min(shader.resolution-2, Math.max(0, Math.floor(y))); let dx = x - sx; let dy = y - sy; //bilinear interpolation coefficients. let s00 = (1 - dx)*(1 - dy); let s10 = dx *(1 - dy); let s01 = (1 - dx)* dy; let s11 = dx * dy; let lweights = new Float32Array((np + 1) * 3); //TODO optimize away basePixel for(let p = 0; p &lt; np+1; p++) { for(let k = 0; k &lt; 3; k++) { let o00 = shader.basePixelOffset(p, sx, sy, k); let o10 = shader.basePixelOffset(p, sx+1, sy, k); let o01 = shader.basePixelOffset(p, sx, sy+1, k); let o11 = shader.basePixelOffset(p, sx+1, sy+1, k); lweights[3*p + k] = s00*shader.basis[o00] + s10*shader.basis[o10] + s01*shader.basis[o01] + s11*shader.basis[o11]; } } return lweights; } } export { ShaderRTI, HSH } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"Skin.js.html":{"id":"Skin.js.html","title":"Source: Skin.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: Skin.js let url = 'skin/skin.svg'; let svg = null; let pad = 5; /** * The static class **Skin** implements some utilities for handling the skin file. * A skin file is a SVG file containing SVG icons that are used by **UIBasic* * for customizing the visual appearance of the user interface (i.e., icons for buttons, menu, toolbar, dialog...). * Each SVG drawing element must be tagged with a 'class' attribute whose name must begin with *openlime-*: * for instance, the HOME icon is a SVG element tagged with `class=\"openlime-home\"`. */ class Skin { /** * Sets the URL of the SVG skin file. By default it is *'skin/skin.svg'*; * @param {string} u The URL of the SVG skin file. */ static setUrl(u) { url = u; } /** * Loads the SVG skin file and converts it into a global DOM SVGElement ready for use in a web page. */ static async loadSvg() { var response = await fetch(url); if (!response.ok) { throw Error(\"Failed loading \" + url + \": \" + response.statusText); return; } let text = await response.text(); let parser = new DOMParser(); svg = parser.parseFromString(text, \"image/svg+xml\").documentElement; } /** * Gets the SVG element with a specific CSS `selector`. * @param {string} selector A CSS selector (e.g. a class name). * @returns {SVGElement} The SVGElement referenced by the selector. */ static async getElement(selector) { if (!svg) await Skin.loadSvg(); return svg.querySelector(selector).cloneNode(true); } /** * Appends the selected SVG element to the `container`. * @param {HTMLElement} container A HTML DOM node. * @param {SVGElement|string} elm An SVGElement or a CSS selector (e.g. a class name). * @returns {SVGElement} A pointer to the SVG icon referenced by the elm. */ static async appendIcon(container, icon) { let element = null; let box = null; if (typeof icon == 'string') { element = await Skin.getElement(icon); icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); icon.appendChild(element); document.body.appendChild(icon); box = element.getBBox(); let tlist = element.transform.baseVal; if (tlist.numberOfItems == 0) tlist.appendItem(icon.createSVGTransform()); tlist.getItem(0).setTranslate(-box.x, -box.y); } else { document.body.appendChild(icon); box = icon.getBBox(); } icon.setAttribute('viewBox', `${-pad} ${-pad} ${box.width + 2 * pad} ${box.height + 2 * pad}`); icon.setAttribute('preserveAspectRatio', 'xMidYMid meet'); container.appendChild(icon); return icon; } } export { Skin } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"TextToSpeechPlayer.js.html":{"id":"TextToSpeechPlayer.js.html","title":"Source: TextToSpeechPlayer.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: TextToSpeechPlayer.js /** * The TextToSpeechPlayer class is responsible for text-to-speech functionality in the application. * It handles voice selection, speech synthesis, and various audio controls. */ class TextToSpeechPlayer { /** * Creates an TextToSpeechPlayer. Additionally, an object literal with TextToSpeechPlayer `options` can be specified. * @param {Object} [options] * @param {string} [options.language='it-IT'] The language for speech synthesis. * @param {number} [options.rate=1.12] The speech rate. * @param {number} [options.volume=1.0] The speech volume. * @param {boolean} [options.cleanText=true] Whether to clean the text before speech synthesis. * @param {number} [options.voiceSelected=-1] The index of the selected voice. */ constructor(options) { Object.assign(this, { language: 'it-IT', rate: 1.0, volume: 1.0, cleanText: true, voiceSelected: -1 }); Object.assign(this, options); this.voice = null; this.isSpeaking = false; this.currentUtterance = null; this.isOfflineCapable = false; this.resumeTimer = null; this.timeoutTimer = null; this.isPaused = false; this.previousVolume = this.volume; } /** * Initializes the TextToSpeechPlayer by loading the voice and checking offline capability. * @returns {Promise&lt;void&gt;} */ async initialize() { try { await this.loadVoice(); this.checkOfflineCapability(); console.log(\"TextToSpeechPlayer initialized successfully\"); console.log(`Offline capable: ${this.isOfflineCapable}`); } catch (error) { console.error(\"Failed to initialize TextToSpeechPlayer:\", error); throw error; } this.setupPageListeners(); } /** * Sets up event listeners for page visibility changes and unload events. * @private */ setupPageListeners() { // For page close/refresh window.addEventListener('beforeunload', () =&gt; { this.stopSpeaking(); }); // For page visibility change (e.g., switching tabs) document.addEventListener('visibilitychange', () =&gt; { if (document.hidden) { this.stopSpeaking(); } }); } /** * Activates the TextToSpeechPlayer. */ activate() { this.isSpeaking = true; } /** * Loads the voice for speech synthesis based on the selected language. * @returns {Promise&lt;SpeechSynthesisVoice&gt;} * @private */ async loadVoice() { console.log(`Loading voice for language: ${this.language}`); return new Promise((resolve, reject) =&gt; { let synth = window.speechSynthesis; const setVoice = () =&gt; { let voices = synth.getVoices(); if (voices.length === 0) { console.warn(`No voices available for this browser`); reject(new Error(`No voices available for this browser`)); } if (this.voiceSelected &gt;= 0) { this.voice = voices[this.voiceSelected]; } else { const firstTwo = this.language.substring(0, 2); this.voice = voices.find(v =&gt; v.lang.startsWith(firstTwo)); } if (this.voice) { console.log(`Voice loaded: ${this.voice.name}`); resolve(this.voice); } else { console.warn(`No suitable voice found for language: ${this.language}`); reject(new Error(`No voice available for ${this.language}`)); } }; if (synth.getVoices().length &gt; 0) { setVoice(); } else { synth.onvoiceschanged = () =&gt; { setVoice(); synth.onvoiceschanged = null; }; // Set a timeout in case onvoiceschanged doesn't fire setTimeout(() =&gt; { if (!this.voice) { console.warn(\"Timeout while waiting for voices to load\"); setVoice(); } }, 1000); } }); } /** * Checks if the selected voice is capable of offline speech synthesis. * @private */ checkOfflineCapability() { if (this.voice) { // If a voice is loaded and it's not marked as a network voice, assume it's offline capable this.isOfflineCapable = !this.voice.localService; } else { this.isOfflineCapable = false; } } /** * Cleans the input text for speech synthesis by removing HTML tags and escape characters. * @param {string} text - The text to clean. * @returns {string} The cleaned text. * @private */ cleanTextForSpeech(text) { // Remove content of any HTML tag with class \"omissis\" (with or without escaped quotes) let cleanedText = text.replace(/&lt;[^&gt;]+class=(\\\"omissis\\\"|\"omissis\")[^&gt;]*&gt;[\\s\\S]*?&lt;\\/[^&gt;]+&gt;/g, \"\"); // Substitute &lt;br&gt; tag with whitespace \" \" cleanedText = cleanedText.replace(/&lt;br\\s*\\/?&gt;/gi, \" \"); // Remove HTML tags cleanedText = cleanedText.replace(/&lt;\\/?[^&gt;]+(&gt;|$)/g, \"\"); // Remove escape characters like \\n, \\t, etc. cleanedText = cleanedText.replace(/\\\\[nrt]/g, \" \"); // Trim leading and trailing whitespace return cleanedText.trim(); } /** * Speaks the provided text using speech synthesis. * @param {string} text - The text to speak. * @returns {Promise&lt;void&gt;} */ async speakText(text) { if (window.speechSynthesis.speaking) { window.speechSynthesis.cancel(); } this.currentUtterance = null; if (!this.voice) { console.error(\"Voice not loaded. Please initialize TextToSpeechPlayer first.\"); return; } if (!this.isOfflineCapable &amp;&amp; !navigator.onLine) { console.error(\"No internet connection and offline speech is not available.\"); return; } this.isSpeaking = true; let cleanedText = text; if (this.cleanText) cleanedText = this.cleanTextForSpeech(text); console.log(\"Attempting to speak:\", cleanedText); if (window.speechSynthesis.speaking) { window.speechSynthesis.cancel(); await new Promise(resolve =&gt; setTimeout(resolve, 100)); } let synth = window.speechSynthesis; this.currentUtterance = new SpeechSynthesisUtterance(cleanedText); this.currentUtterance.lang = this.language; this.currentUtterance.voice = this.voice; this.currentUtterance.rate = this.rate; this.currentUtterance.volume = this.volume; try { await new Promise((resolve, reject) =&gt; { this.currentUtterance.onend = () =&gt; { resolve(); }; this.currentUtterance.onerror = (event) =&gt; { console.error(\"Speech error:\", event); reject(event); }; synth.speak(this.currentUtterance); // Timeout to prevent speech from running indefinitely if it takes too long let maxSpeechTime = cleanedText.length * 800; this.timeoutTimer = setTimeout(() =&gt; { if (synth.speaking &amp;&amp; this.isSpeaking) { console.warn(\"Speech synthesis taking too long. Resetting...\"); synth.cancel(); clearInterval(this.resumeTimer); reject(new Error(\"Speech synthesis timeout\")); } }, maxSpeechTime); // Workaround to resume speech every 10 seconds this.resumeTimer = setInterval(() =&gt; { console.log(speechSynthesis.speaking); if (!speechSynthesis.speaking) { clearInterval(this.resumeTimer); } else if (!this.isPaused) { // Only pause and resume if not manually paused speechSynthesis.pause(); speechSynthesis.resume(); } }, 10000); }); } catch (error) { console.error(\"Error during speech:\", error); } clearTimeout(this.timeoutTimer); this.timeoutTimer = null; clearInterval(this.resumeTimer); this.resumeTimer = null; this.currentUtterance = null; } /** * Pauses or resumes the current speech synthesis. * @param {boolean} enable - True to pause, false to resume. */ pauseSpeaking(enable) { if (!this.currentUtterance) { console.log(\"No speech in progress to pause/resume\"); return; } if (enable &amp;&amp; !this.isPaused) { window.speechSynthesis.pause(); this.isPaused = true; clearInterval(this.resumeTimer); // Clear the resume timer when pausing } else if (!enable &amp;&amp; this.isPaused) { window.speechSynthesis.resume(); this.isPaused = false; // Restart the resume timer this.resumeTimer = setInterval(() =&gt; { if (!speechSynthesis.speaking) { clearInterval(this.resumeTimer); } else { speechSynthesis.pause(); speechSynthesis.resume(); } }, 10000); } } /** * Mutes or unmutes the audio playback. * @param {boolean} enable - True to mute, false to unmute. */ mute(enable) { if (enable) { this.previousVolume = this.volume; this.volume = 0; } else { this.volume = this.previousVolume; } } /** * Stops the current speech synthesis. */ stopSpeaking() { if (this.isSpeaking) { if (window.speechSynthesis.speaking) { window.speechSynthesis.cancel(); } this.currentUtterance = null; clearInterval(this.resumeTimer); this.resumeTimer = null; } this.isSpeaking = false; } } export { TextToSpeechPlayer } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"Tile.js.html":{"id":"Tile.js.html","title":"Source: Tile.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: Tile.js // Tile level x y index ----- tex missing() start/end (tarzoom) ----- time, priority size(byte) /** * A tile represents a single element of a regular grid that subdivides an image. * A tile is identified by its position (`x`, `y`) within the grid and the zoom `level` of the image. * @typedef {Object} Tile * @property {number} level The zoom level of the tile. * @property {number} x x position of the tile in the grid. * @property {number} y y position of the tile in the grid. * @property {number} index Unique tile identifier. * @property {number} start The position of the first byte of the tile in the image dataset (used only for tarzoom and itarzoom image formats). * @property {number} end The position of the last byte of the tile in the image dataset (used only for tarzoom and itarzoom image formats). * @property {number} missing In the case of multi-channel formats (RTI, BRDF), the information content of a tile is distributed over several planes (channels). * `missing` represents the number of pending channel data requests. * @property {Array} tex A array of WebGLTexture (one texture per channel). * @property {time} time Tile creation time (this value is used internally by the cache algorithms). * @property {number} priority The priority of the tile (this value is used internally by the cache algorithms). * @property {number} size The total size of the tile in bytes (this value is used internally by the cache algorithms). */ class Tile { constructor() { Object.assign(this, { index: null, bbox: null, level: null, //used only in LayoutTiles x: null, y: null, w: null, // used only in LayoutImages h: null, // used only in LayoutImages start:null, end:null, tex: [], missing: null, time: null, priority: null, size: null }); } }; export { Tile } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"UIBasic.js.html":{"id":"UIBasic.js.html","title":"Source: UIBasic.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: UIBasic.js import { Skin } from './Skin' import { Util } from './Util' import { Controller2D } from './Controller2D' import { ControllerPanZoom } from './ControllerPanZoom' import { Ruler } from \"./Ruler\" import { ScaleBar } from './ScaleBar' import { addSignals } from './Signals' /** * An Action describes the behaviour of a tool button. * @typedef {Object} UIBasic#Action * @property {string} title The nameof the action. * @property {bool} display Whether to show the action in the toolbar. * @property {string} key The shortcut key. * @property {callback} task The callback executed by the action. */ /** * A MenuEntry describes an entry for the menu. * @typedef {Object} UIBasic#Action * @property {string} title The menu title. * @property {string} section The section title. * @property {string} html A HTML text. * @property {callback} task The callback executed by the action. */ /* Basic viewer for a single layer. * we support actions through buttons: each button style is controlled by classes (trigger), active (if support status) * and custom. * actions supported are: * home: reset the camera * zoomin, zoomout * fullscreen * rotate (45/90 deg rotation option. * light: turn on light changing. * switch layer(s) * lens. * * How the menu works: * Each entry eg: { title: 'Coin 16' } * title: large title * section: smaller title * html: whatever html * button: visually a button, attributes: group, layer, mode * slider: callback(percent) * list: an array of entries. * * Additional attributes: * onclick: a function(event) {} * group: a group of entries where at most one is active * layer: a layer id: will be active if layer is visible * mode: a layer visualization mode, active if it's the current mode. * layer + mode: if both are specified, both must be current for an active. */ /** * **UIBasic** is a flexible and easy-to-use class that implements a complete user interface to bind to the `viewer` * The interface is associated with a CSS file (skin.css) that defines the style of the HTML DOM and a graphic * file (skin.svg) that specifies the geometric characteristics of the tool buttons. * * The class provides a set of default ready-to-use tools (called actions): * * **home** resets the camera. * * **fullscreen** enables the fullscreen mode. * * **layers** displays the layer menu. * * **zoomin** performs a camera zoom-in. * * **zoomout** performs a camera zoom-out. * * **rotate** rotates the camera around the z-axis (by 45-degs steps). * * **light** enables light manipulation. * * **help** displays a help dialog box. * * In the following example a UIBasic interface is created and binded to the `lime` viewer. * The `light` action is disabled, and the `zoomin` and `zoomout` actions are enabled. * ``` * // Creates an User Interface * const ui = new OpenLIME.UIBasic(lime); * * // Removes light from the toolbar * ui.actions.light.display=false; * // Adds zoomin and zoomout to the toolbar * ui.actions.zoomin.display=true; * ui.actions.zoomout.display=true; * ``` */ class UIBasic { /** * Instantiates a UIBasic object. * @param {Viewer} viewer The OpenLIME viewer. * @param {Object} [options] An object literal with UIBasic parameters. * @param {string} options.skin='skin/skin.svg' The file name of the vector image defining the tool buttons. * @param {bool} options.autofit=true Whether the initial position of the camera is set to fit the scene model. * @param {number} options.priority=0 Higher priority controllers are invoked first. * @param {{UIBasic#Action}} options.actions An Object of {@link UIBasic#Action}. A set of default actions are ready to be used. * @param {number} options.pixelSize Spatial resolution: physical size represented by a single pixel in mm * @param {string} options.attribution Some information related to data attribution or credits. * @param {Array&lt;UIBasic#MenuEntry&gt;} options.menu The interface menu structure. * @param {bool} options.enableTooltip=true Whether to enable tool button tooltip. * @param {bool} options.showLightDirections=false Whether to draw light direction vectors. */ constructor(viewer, options) { //we need to know the size of the scene but the layers are not ready. let camera = viewer.camera; Object.assign(this, { viewer: viewer, camera: viewer.camera, skin: 'skin/skin.svg', autoFit: true, //FIXME to be moved in the viewer? //skinCSS: 'skin.css', // TODO: probably not useful actions: { home: { title: 'Home', display: true, key: 'Home', task: (event) =&gt; { if (camera.boundingBox) camera.fitCameraBox(250); } }, fullscreen: { title: 'Fullscreen', display: true, key: 'f', task: (event) =&gt; { this.toggleFullscreen(); } }, layers: { title: 'Layers', display: true, key: 'Escape', task: (event) =&gt; { this.toggleLayers(); } }, zoomin: { title: 'Zoom in', display: false, key: '+', task: (event) =&gt; { camera.deltaZoom(250, 1.25, 0, 0); } }, zoomout: { title: 'Zoom out', display: false, key: '-', task: (event) =&gt; { camera.deltaZoom(250, 1 / 1.25, 0, 0); } }, rotate: { title: 'Rotate', display: false, key: 'r', task: (event) =&gt; { camera.rotate(250, -45); } }, light: { title: 'Light', display: 'auto', key: 'l', task: (event) =&gt; { this.toggleLightController(); } }, ruler: { title: 'Ruler', display: false, task: (event) =&gt; { this.toggleRuler(); } }, help: { title: 'Help', display: false, key: '?', task: (event) =&gt; { this.toggleHelp(this.actions.help); }, html: '&lt;p&gt;Help here!&lt;/p&gt;' }, //FIXME Why a boolean in toggleHelp? snapshot: { title: 'Snapshot', display: false, task: (event) =&gt; { this.snapshot() } }, //FIXME not work! }, postInit: () =&gt; {}, pixelSize: null, unit: null, //FIXME to be used with ruler attribution: null, //image attribution lightcontroller: null, showLightDirections: false, enableTooltip: true, controlZoomMessage: null, //\"Use Ctrl + Wheel to zoom instead of scrolling\" , menu: [] }); Object.assign(this, options); if (this.autoFit) //FIXME Check if fitCamera is triggered only if the layer is loaded. Is updateSize the right event? this.viewer.canvas.addEvent('updateSize', () =&gt; this.viewer.camera.fitCameraBox(0)); this.panzoom = new ControllerPanZoom(this.viewer.camera, { priority: -1000, activeModifiers: [0, 1], controlZoom: this.controlZoomMessage != null }); if (this.controlZoomMessage) this.panzoom.addEvent('nowheel', () =&gt; { this.showOverlayMessage(this.controlZoomMessage); }); this.viewer.pointerManager.onEvent(this.panzoom); //register wheel, doubleclick, pan and pinch // this.viewer.pointerManager.on(\"fingerSingleTap\", { \"fingerSingleTap\": (e) =&gt; { this.showInfo(e); }, priority: 10000 }); /*let element = entry.element; let group = element.getAttribute('data-group'); let layer = element.getAttribute('data-layer'); let mode = element.getAttribute('data-mode'); let active = (layer &amp;&amp; this.viewer.canvas.layers[layer].visible) &amp;&amp; (!mode || this.viewer.canvas.layers[layer].getMode() == mode); entry.element.classList.toggle('active', active); */ this.menu.push({ section: \"Layers\" }); for (let [id, layer] of Object.entries(this.viewer.canvas.layers)) { let modes = [] for (let m of layer.getModes()) { let mode = { button: m, mode: m, layer: id, onclick: () =&gt; { layer.setMode(m); }, status: () =&gt; layer.getMode() == m ? 'active' : '', }; if (m == 'specular' &amp;&amp; layer.shader.setSpecularExp) mode.list = [{ slider: '', oninput: (e) =&gt; { layer.shader.setSpecularExp(e.target.value); } }]; modes.push(mode); } let layerEntry = { button: layer.label || id, onclick: () =&gt; { this.setLayer(layer); }, status: () =&gt; layer.visible ? 'active' : '', layer: id }; if (modes.length &gt; 1) layerEntry.list = modes; if (layer.annotations) { layerEntry.list = []; //setTimeout(() =&gt; { layerEntry.list.push(layer.annotationsEntry()); //this.updateMenu(); //}, 1000); //TODO: this could be a convenience, creating an editor which can be //customized later using layer.editor. //if(layer.editable) // layer.editor = this.editor; } this.menu.push(layerEntry); } let controller = new Controller2D( (x, y) =&gt; { for (let layer of lightLayers) layer.setLight([x, y], 0); if (this.showLightDirections) this.updateLightDirections(x, y); this.emit('lightdirection', [x, y, Math.sqrt(1 - x * x + y * y)]); }, { // TODO: IS THIS OK? It was false before active: false, activeModifiers: [2, 4], control: 'light', onPanStart: this.showLightDirections ? () =&gt; { Object.values(this.viewer.canvas.layers).filter(l =&gt; l.annotations != null).forEach(l =&gt; l.setVisible(false)); this.enableLightDirections(true); } : null, onPanEnd: this.showLightDirections ? () =&gt; { Object.values(this.viewer.canvas.layers).filter(l =&gt; l.annotations != null).forEach(l =&gt; l.setVisible(true)); this.enableLightDirections(false); } : null, relative: true }); controller.priority = 0; this.viewer.pointerManager.onEvent(controller); this.lightcontroller = controller; let lightLayers = []; for (let [id, layer] of Object.entries(this.viewer.canvas.layers)) if (layer.controls.light) lightLayers.push(layer); if (lightLayers.length) { this.createLightDirections(); for (let layer of lightLayers) { controller.setPosition(0.5, 0.5); //layer.setLight([0.5, 0.5], 0); layer.controllers.push(controller); } } if (queueMicrotask) queueMicrotask(() =&gt; { this.init() }); //allows modification of actions and layers before init. else setTimeout(() =&gt; { this.init(); }, 0); } showOverlayMessage(msg, duration = 2000) { if (this.overlayMessage) { clearTimeout(this.overlayMessage.timeout); this.overlayMessage.timeout = setTimeout(() =&gt; this.destroyOverlayMessage(), duration); return; } let background = document.createElement('div'); background.classList.add('openlime-overlaymsg'); background.innerHTML = `&lt;p&gt;${msg}&lt;/p&gt;`; this.viewer.containerElement.appendChild(background); this.overlayMessage = { background, timeout: setTimeout(() =&gt; this.destroyOverlayMessage(), duration) } } destroyOverlayMessage() { this.overlayMessage.background.remove(); this.overlayMessage = null; } /** @ignore */ getMenuLayerEntry(id) { const found = this.menu.find(e =&gt; e.layer == id); return found; } /** @ignore */ createLightDirections() { this.lightDirections = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); this.lightDirections.setAttribute('viewBox', '-100, -100, 200 200'); this.lightDirections.setAttribute('preserveAspectRatio', 'xMidYMid meet'); this.lightDirections.style.display = 'none'; this.lightDirections.classList.add('openlime-lightdir'); for (let x = -1; x &lt;= 1; x++) { for (let y = -1; y &lt;= 1; y++) { let line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); line.pos = [x * 35, y * 35]; //line.setAttribute('data-start', `${x} ${y}`); this.lightDirections.appendChild(line); } } this.viewer.containerElement.appendChild(this.lightDirections); } /** @ignore */ updateLightDirections(lx, ly) { let lines = [...this.lightDirections.children]; for (let line of lines) { let x = line.pos[0]; let y = line.pos[1]; line.setAttribute('x1', 0.6 * x - 25 * 0 * lx); line.setAttribute('y1', 0.6 * y + 25 * 0 * ly); line.setAttribute('x2', x / 0.6 + 60 * lx); line.setAttribute('y2', y / 0.6 - 60 * ly); } } /** @ignore */ enableLightDirections(show) { this.lightDirections.style.display = show ? 'block' : 'none'; } /** @ignore */ init() { (async () =&gt; { document.addEventListener('keydown', (e) =&gt; this.keyDown(e), false); document.addEventListener('keyup', (e) =&gt; this.keyUp(e), false); this.createMenu(); this.updateMenu(); this.viewer.canvas.addEvent('update', () =&gt; this.updateMenu()); if (this.actions.light &amp;&amp; this.actions.light.display === 'auto') this.actions.light.display = true; if (this.skin) await this.loadSkin(); /* TODO: this is probably not needed if(this.skinCSS) await this.loadSkinCSS(); */ this.setupActions(); /* Get pixel size from options if provided or from layer metadata */ if (this.pixelSize) { this.scalebar = new ScaleBar(this.pixelSize, this.viewer); } else if (this.viewer.canvas.layers[Object.keys(this.viewer.canvas.layers)[0]].pixelSize) { let pixelSize = this.viewer.canvas.layers[Object.keys(this.viewer.canvas.layers)[0]].pixelSizePerMM(); this.scalebar = new ScaleBar(pixelSize, this.viewer); } if (this.attribution) { var p = document.createElement('p'); p.classList.add('openlime-attribution'); p.innerHTML = this.attribution; this.viewer.containerElement.appendChild(p); } for (let l of Object.values(this.viewer.canvas.layers)) { this.setLayer(l); break; } if (this.actions.light &amp;&amp; this.actions.light.active) this.toggleLightController(); if (this.actions.layers &amp;&amp; this.actions.layers.active) this.toggleLayers(); this.postInit(); })().catch(e =&gt; { console.log(e); throw Error(\"Something failed\") }); } /** @ignore */ keyDown(e) { } /** @ignore */ keyUp(e) { if (e.target != document.body &amp;&amp; e.target.closest('input, textarea') != null) return; if (e.defaultPrevented) return; for (const a of Object.values(this.actions)) { if ('key' in a &amp;&amp; a.key == e.key) { e.preventDefault(); a.task(e); return; } } } /** @ignore */ async loadSkin() { let toolbar = document.createElement('div'); toolbar.classList.add('openlime-toolbar'); this.viewer.containerElement.appendChild(toolbar); //toolbar manually created with parameters (padding, etc) + css for toolbar positioning and size. if (1) { let padding = 10; let x = 0; let h = 0; for (let [name, action] of Object.entries(this.actions)) { if (action.display !== true) continue; if ('icon' in action) { if (typeof action.icon == 'string') { if (Util.isSVGString(action.icon)) { action.icon = Util.SVGFromString(action.icon); } else { action.icon = await Util.loadSVG(action.icon); } action.icon.classList.add('openlime-button'); } } else { action.icon = '.openlime-' + name; } action.element = await Skin.appendIcon(toolbar, action.icon); if (this.enableTooltip) { let title = document.createElementNS('http://www.w3.org/2000/svg', 'title'); title.textContent = action.title; action.element.appendChild(title); } } } if (0) { //single svg toolbar let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); toolbar.appendChild(svg); ui.toggleLightController(); let x = padding; let h = 0; for (let [name, action] of Object.entries(this.actions)) { if (action.display !== true) continue; let element = skin.querySelector('.openlime-' + name).cloneNode(true); if (!element) continue; svg.appendChild(element); let box = element.getBBox(); h = Math.max(h, box.height); let tlist = element.transform.baseVal; if (tlist.numberOfItems == 0) tlist.appendItem(svg.createSVGTransform()); tlist.getItem(0).setTranslate(-box.x + x, -box.y); x += box.width + padding; } svg.setAttribute('viewBox', `0 0 ${x} ${h}`); svg.setAttribute('preserveAspectRatio', 'xMidYMid meet'); } //TODO: not needed, probably. Toolbar build from the skin directly if (0) { toolbar.appendChild(skin); let w = skin.getAttribute('width'); let h = skin.getAttribute('height'); let viewbox = skin.getAttribute('viewBox'); if (!viewbox) skin.setAttribute('viewBox', `0 0 ${w} ${h}`); } } /** @ignore */ setupActions() { for (let [name, action] of Object.entries(this.actions)) { let element = action.element; if (!element) continue; // let pointerManager = new PointerManager(element); // pointerManager.onEvent({ fingerSingleTap: action.task, priority: -2000 }); element.addEventListener('click', (e) =&gt; { action.task(e); e.preventDefault(); }); } let items = document.querySelectorAll('.openlime-layers-button'); for (let item of items) { let id = item.getAttribute('data-layer'); if (!id) continue; item.addEventListener('click', () =&gt; { this.setLayer(this.viewer.layers[id]); }); } } //we need the concept of active layer! so we an turn on and off light. /** @ignore */ toggleLightController(on) { let div = this.viewer.containerElement; let active = div.classList.toggle('openlime-light-active', on); this.lightActive = active; for (let layer of Object.values(this.viewer.canvas.layers)) for (let c of layer.controllers) if (c.control == 'light') { c.active = true; c.activeModifiers = active ? [0, 2, 4] : [2, 4]; //nothing, shift and alt } } /** @ignore */ toggleFullscreen() { let canvas = this.viewer.canvasElement; let div = this.viewer.containerElement; let active = div.classList.toggle('openlime-fullscreen-active'); if (!active) { var request = document.exitFullscreen || document.webkitExitFullscreen || document.mozCancelFullScreen || document.msExitFullscreen; request.call(document); document.querySelector('.openlime-scale &gt; line'); this.viewer.resize(canvas.offsetWidth, canvas.offsetHeight); } else { var request = div.requestFullscreen || div.webkitRequestFullscreen || div.mozRequestFullScreen || div.msRequestFullscreen; request.call(div); } this.viewer.resize(canvas.offsetWidth, canvas.offsetHeight); } /** @ignore */ toggleRuler() { if (!this.ruler) { this.ruler = new Ruler(this.viewer, this.pixelSize); this.viewer.pointerManager.onEvent(this.ruler); } if (!this.ruler.enabled) this.ruler.start(); else this.ruler.end(); } /** @ignore */ toggleHelp(help, on) { if (!help.dialog) { help.dialog = new UIDialog(this.viewer.containerElement, { modal: true, class: 'openlime-help-dialog' }); help.dialog.setContent(help.html); } else help.dialog.toggle(on); } /** @ignore */ snapshot() { var e = document.createElement('a'); e.setAttribute('href', this.viewer.canvas.canvasElement.toDataURL()); e.setAttribute('download', 'snapshot.png'); e.style.display = 'none'; document.body.appendChild(e); e.click(); document.body.removeChild(e); } /* Layer management */ /** @ignore */ createEntry(entry) { if (!('id' in entry)) entry.id = 'entry_' + (this.entry_count++); let id = `id=\"${entry.id}\"`; let tooltip = 'tooltip' in entry ? `title=\"${entry.tooltip}\"` : ''; let classes = 'classes' in entry ? entry.classes : ''; let html = ''; if ('title' in entry) { html += `&lt;h2 ${id} class=\"openlime-title ${classes}\" ${tooltip}&gt;${entry.title}&lt;/h2&gt;`; } else if ('section' in entry) { html += `&lt;h3 ${id} class=\"openlime-section ${classes}\" ${tooltip}&gt;${entry.section}&lt;/h3&gt;`; } else if ('html' in entry) { html += `&lt;div ${id} class=\"${classes}\"&gt;${entry.html}&lt;/div&gt;`; } else if ('button' in entry) { let group = 'group' in entry ? `data-group=\"${entry.group}\"` : ''; let layer = 'layer' in entry ? `data-layer=\"${entry.layer}\"` : ''; let mode = 'mode' in entry ? `data-mode=\"${entry.mode}\"` : ''; html += `&lt;a href=\"#\" ${id} ${group} ${layer} ${mode} ${tooltip} class=\"openlime-entry ${classes}\"&gt;${entry.button}&lt;/a&gt;`; } else if ('slider' in entry) { let value = ('value' in entry) ? entry['value'] : 50; html += `&lt;input type=\"range\" min=\"1\" max=\"100\" value=\"${value}\" class=\"openlime-slider ${classes}\" ${id}&gt;`; } if ('list' in entry) { let ul = `&lt;div class=\"openlime-list ${classes}\"&gt;`; for (let li of entry.list) ul += this.createEntry(li); ul += '&lt;/div&gt;'; html += ul; } return html; } /** @ignore */ addEntryCallbacks(entry) { entry.element = this.layerMenu.querySelector('#' + entry.id); if (entry.onclick) entry.element.addEventListener('click', (e) =&gt; { entry.onclick(); //this.updateMenu(); }); if (entry.oninput) entry.element.addEventListener('input', entry.oninput); if (entry.oncreate) entry.oncreate(); if ('list' in entry) for (let e of entry.list) this.addEntryCallbacks(e); } /** @ignore */ updateEntry(entry) { let status = entry.status ? entry.status() : ''; entry.element.classList.toggle('active', status == 'active'); if ('list' in entry) for (let e of entry.list) this.updateEntry(e); } /** @ignore */ updateMenu() { for (let entry of this.menu) this.updateEntry(entry); } /** @ignore */ createMenu() { this.entry_count = 0; let html = `&lt;div class=\"openlime-layers-menu\"&gt;`; for (let entry of this.menu) { html += this.createEntry(entry); } html += '&lt;/div&gt;'; let template = document.createElement('template'); template.innerHTML = html.trim(); this.layerMenu = template.content.firstChild; this.viewer.containerElement.appendChild(this.layerMenu); for (let entry of this.menu) { this.addEntryCallbacks(entry); } /* for(let li of document.querySelectorAll('[data-layer]')) li.addEventListener('click', (e) =&gt; { this.setLayer(this.viewer.canvas.layers[li.getAttribute('data-layer')]); }); */ } /** @ignore */ toggleLayers() { this.layerMenu.classList.toggle('open'); } /** @ignore */ setLayer(layer_on) { if (typeof layer_on == 'string') layer_on = this.viewer.canvas.layers[layer_on]; if (layer_on.overlay) { //just toggle layer_on.setVisible(!layer_on.visible); } else { for (let layer of Object.values(this.viewer.canvas.layers)) { if (layer.overlay) continue; layer.setVisible(layer == layer_on); for (let c of layer.controllers) { if (c.control == 'light') c.active = this.lightActive &amp;&amp; layer == layer_on; } } } this.updateMenu(); this.viewer.redraw(); } /** @ignore */ closeLayersMenu() { this.layerMenu.style.display = 'none'; } } /** * A **UIDialog** is a top-level window used for communications with the user. It may be modal or modeless. * The content of the dialog can be either an HTML text or a pre-built DOM element. * When hidden, a dialog emits a 'closed' event. */ class UIDialog { //FIXME standalone class /** * Instatiates a UIDialog object. * @param {HTMLElement} container The HTMLElement on which the dialog is focused * @param {Object} [options] An object literal with UIDialog parameters. * @param {bool} options.modal Whether the dialog is modal. */ constructor(container, options) { Object.assign(this, { dialog: null, content: null, container: container, modal: false, class: null, visible: false, backdropEvents: true }, options); this.create(); } /** @ignore */ create() { let background = document.createElement('div'); background.classList.add('openlime-dialog-background'); let dialog = document.createElement('div'); dialog.classList.add('openlime-dialog'); if (this.class) dialog.classList.add(this.class); (async () =&gt; { let close = await Skin.appendIcon(dialog, '.openlime-close'); close.classList.add('openlime-close'); close.addEventListener('click', () =&gt; this.hide()); //content.appendChild(close); })(); // let close = Skin.appendIcon(dialog, '.openlime-close'); // close.classList.add('openlime-close'); // close.addEventListener('click', () =&gt; this.hide()); let content = document.createElement('div'); content.classList.add('openlime-dialog-content'); dialog.append(content); if (this.modal) { //FIXME backdrown =&gt; backdrop if (this.backdropEvents) background.addEventListener('click', (e) =&gt; { if (e.target == background) this.hide(); }); background.appendChild(dialog); this.container.appendChild(background); this.element = background; } else { this.container.appendChild(dialog); this.element = dialog; } this.dialog = dialog; this.content = content; this.hide(); } /** * Sets the content of the dialog. * @param {(string|HTMLElement)} html The content of the dialog (a HTML text or element). */ setContent(html) { if (typeof (html) == 'string') this.content.innerHTML = html; else this.content.replaceChildren(html); } /** * Shows the dialog. */ show() { this.element.classList.remove('hidden'); this.visible = true; } /** * Hides the dialog. */ hide() { /** * The event is fired when the dialog is closed. * @event UIDialog#closed */ this.element.classList.add('hidden'); this.visible = false; this.emit('closed'); } /** * Adds fading effect to the dialog. * @param {bool} on Whether the fading effect is enabled. */ fade(on) { //FIXME Does it work? this.element.classList.toggle('fading'); } /** * Toggles the display of the dialog. * @param {bool} force Whether to turn the dialog into a one way-only operation. */ toggle(force) { //FIXME Why not remove force? this.element.classList.toggle('hidden', force); this.visible = !this.visible; //FIXME not in sync with 'force' } } addSignals(UIDialog, 'closed'); addSignals(UIBasic, 'lightdirection'); export { UIBasic, UIDialog } × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"Viewer.js.html":{"id":"Viewer.js.html","title":"Source: Viewer.js","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Source: Viewer.js import { Canvas } from './Canvas.js' import { Camera } from './Camera.js' import { PointerManager } from './PointerManager.js' import { Controller } from './Controller.js'; import { addSignals } from './Signals.js' /** **Viewer** is the central class of the OpenLIME framework. It is used to create a viewer on a web page and manipulate it. * In the following example, after instantiating a Viewer, a LayerImage is added to it. * ``` * // Create an OpenLIME canvas into .openlime * const lime = new OpenLIME.Viewer('.openlime'); * * // Create an image layer and add it to the canvans * const layer = new OpenLIME.Layer({ * layout: 'image', * type: 'image', * url: '../../assets/lime/image/lime.jpg' * }); * lime.addLayer('Base', layer); * * // Access to internal structures * const camera = lime.camera; * const canvas = lime.canvas; * const layers = canvas.layers; * ``` */ class Viewer { /** * Instantiates a viewer object given the `div` element or a DOM selector of a `div` element. * Additionally, an object literal with Viewer `options` can be specified. * The class creates the canvas, enables the WebGL context and takes care of the content redrawing when needed. * Viewer is the main class of the OpenLIME framework. It allows access to all the internal structures that make up the system. * * @param {(HTMLElement|string)} div A DOM element or a selector (es. '#openlime' or '.openlime'). * @param {Object} [options] An object literal describing the viewer content. * @param {color} options.background CSS style for background (it overwrites CSS if present). * @param {bool} options.autofit=true Whether the initial position of the camera is set to fit the scene model. */ constructor(div, options) { Object.assign(this, { background: null, autofit: true, canvas: {}, camera: new Camera(), }); if (typeof (div) == 'string') div = document.querySelector(div); if (!div) throw \"Missing element parameter\"; Object.assign(this, options); if (this.background) div.style.background = this.background; this.containerElement = div; this.canvasElement = div.querySelector('canvas'); if (!this.canvasElement) { this.canvasElement = document.createElement('canvas'); div.prepend(this.canvasElement); } this.overlayElement = document.createElement('div'); this.overlayElement.classList.add('openlime-overlay'); this.containerElement.appendChild(this.overlayElement); this.canvas = new Canvas(this.canvasElement, this.overlayElement, this.camera, this.canvas); this.canvas.addEvent('update', () =&gt; { this.redraw(); }); if (this.autofit) this.canvas.addEvent('updateSize', () =&gt; this.camera.fitCameraBox(0)); this.pointerManager = new PointerManager(this.overlayElement); this.canvasElement.addEventListener('contextmenu', (e) =&gt; { e.preventDefault(); return false; }); let resizeobserver = new ResizeObserver(entries =&gt; { for (let entry of entries) { this.resize(entry.contentRect.width, entry.contentRect.height); } }); resizeobserver.observe(this.canvasElement); this.resize(this.canvasElement.clientWidth, this.canvasElement.clientHeight); } /** * Adds a device event controller to the viewer. * @param {Controller} controller An OpenLIME controller. */ addController(controller) { this.pointerManager.onEvent(controller); } /** Adds the given layer to the Viewer. * @param {string} id A label to identify the layer. * @param {Layer} layer An OpenLIME Layer object. */ addLayer(id, layer) { this.canvas.addLayer(id, layer); this.redraw(); } /** Remove the given layer from the Viewer. * @param {(Layer|string)} layer An OpenLIME Layer or a Layer identifier. */ removeLayer(layer) { if (typeof (layer) == 'string') layer = this.canvas.layers[layer]; if (layer) { this.canvas.removeLayer(layer); this.redraw(); } } /* Resizes the canvas (and the overlay) and triggers a redraw. * This method is internal and used by a ResizeObserver of the Canvas size. * @param {number} width A width value defined in CSS pixel. * @param {number} height A height value defined in CSS pixel. */ /** * @ignore */ resize(width, height) { if(width == 0 || height == 0) return; // Test with retina display! this.canvasElement.width = width * window.devicePixelRatio; this.canvasElement.height = height * window.devicePixelRatio; let view = { x: 0, y: 0, dx: width, dy: height, w: width, h: height }; this.camera.setViewport(view); this.canvas.updateSize(); this.emit('resize', view); this.canvas.prefetch(); this.redraw(); } /** * Schedules a redrawing. */ redraw() { if (this.animaterequest) return; this.animaterequest = requestAnimationFrame((time) =&gt; { this.draw(time); }); this.requestTime = performance.now(); } /* * Renders the canvas content. * This method is internal. * @param {time} time The current time (a DOMHighResTimeStamp variable, as in `performance.now()`). */ /** * @ignore */ draw(time) { if (!time) time = performance.now(); this.animaterequest = null; let elapsed = performance.now() - this.requestTime; this.canvas.addRenderTiming(elapsed); let viewport = this.camera.viewport; let transform = this.camera.getCurrentTransform(time); let done = this.canvas.draw(time); if (!done) this.redraw(); this.emit('draw'); } } addSignals(Viewer, 'draw'); addSignals(Viewer, 'resize'); //args: viewport export { Viewer }; × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"global.html":{"id":"global.html","title":"Global","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Global Members &lt;constant&gt; RenderingMode :string Defines rendering modes for lens and background areas. Type: string Properties: Name Type Default Description draw string \"fill:white;\" Shows content in the specified area hide string \"fill:black;\" Hides content in the specified area draw string fill:white; hide string fill:black; Source: LensDashboard.js, line 16 Methods simplify(points, tolerance) Simplifies a polyline via the Douglas-Peucker algorithm. Parameters: Name Type Description points Array.&lt;Point&gt; A polyline. tolerance * The tolerance is the maximum distance between the original polyline and the simplified polyline. It has the same metric as the point coordinates. Source: Simplify.js, line 19 Returns: The simplified polyline. Type Array.&lt;Point&gt; smooth(points, cornerThres, match) Uses Bezier Curve to smooth a polyline Parameters: Name Type Description points Array.&lt;Point&gt; A polyline. cornerThres number The angular threshold (in degrees). Two segments are smoothed if their angle is less then the threshold. match bool Whether the smoothed curve should traverse the original points or approximate them. Source: Simplify.js, line 82 Returns: The smoothed polyline. Type Array.&lt;BezierPoint&gt; smoothToPath(smoothed) Converts a smoothed polyline into an SVG path. Parameters: Name Type Description smoothed Array.&lt;BezierPoint&gt; The smoothed polyline. Source: Simplify.js, line 181 Returns: The SVG path. Type Array.&lt;String&gt; taskCallback(e) Callback function fired by a 'click' event on a lens dashboard element. Parameters: Name Type Description e Event The DOM event. Source: LensDashboard.js, line 21 Type Definitions Annotation Type: Object Properties: Name Type Argument Description id string Unique identifier label string Annotation title description string Detailed description class string Class name for styling/categorization publish number Publication status (0 or 1) data Object Custom data object elements Array.&lt;SVGElement&gt; SVG elements composing the annotation state Object &lt;optional&gt; Camera and viewer state Source: EditorSvgAnnotation.js, line 7 AnnotationClass Type: Object Properties: Name Type Description stroke string CSS color for SVG elements (lines, text, outlines) label string Display name for the class Source: LayerSvgAnnotation.js, line 7 AnnotationClasses Map of class names to their visual properties Type: Object.&lt;string, AnnotationClass&gt; Source: LayerSvgAnnotation.js, line 13 APoint A [x, y] point. Properties: Name Type Description p.0 number The x-coordinate. p.1 number The y-coordinate. Source: Transform.js, line 3 BezierPoint A [x, y, xc, yc] point. Properties: Name Type Description p.0 number The x-coordinate. p.1 number The y-coordinate. p.2 number The x-coordinate of the control point. p.3 number The y-coordinate of the control point. Source: Simplify.js, line 3 crudCallback(annotation) Callback for create/update/delete operations on annotations Parameters: Name Type Description annotation Annotation The annotation being operated on Source: EditorSvgAnnotation.js, line 19 Returns: Success status of the operation Type boolean customDataCallback(annotation) Callback to customize the annotation data object Parameters: Name Type Description annotation Annotation The annotation being modified Source: EditorSvgAnnotation.js, line 32 customStateCallback(annotation) Callback to customize state information saved with annotations Parameters: Name Type Description annotation Annotation The annotation being modified Source: EditorSvgAnnotation.js, line 26 Focus Type: Object Properties: Name Type Description position Object Lens center position in dataset coordinates Properties Name Type Description x number X coordinate y number Y coordinate radius number Lens radius in dataset units Source: FocusContext.js, line 14 LayerAnnotationImageOptions Type: Object Properties: Name Type Argument Default Description url string &lt;optional&gt; URL to the annotations JSON file path string &lt;optional&gt; Base path for annotation image files format string &lt;optional&gt; 'vec4' Raster format for image data Source: LayerAnnotationImage.js, line 7 LayerAnnotationOptions Type: Object Properties: Name Type Argument Default Description style string &lt;optional&gt; CSS styles for annotation rendering annotations string | Array.&lt;Annotation&gt; &lt;optional&gt; [] URL of JSON annotation data or array of annotations overlay boolean &lt;optional&gt; true Whether annotations render as overlay selected Set.&lt;string&gt; &lt;optional&gt; new Set() Set of selected annotation IDs annotationsListEntry Object &lt;optional&gt; null UI entry for annotations list Source: LayerAnnotation.js, line 5 LayerBRDFOptions Type: Object Properties: Name Type Argument Default Description channels Object Required channels for BRDF rendering Properties Name Type Description kd string URL to diffuse color map (required) ks string URL to specular color map (optional) normals string URL to normal map (required) gloss string URL to glossiness/roughness map (optional) colorspaces Object &lt;optional&gt; Color space definitions for material properties Properties Name Type Argument Default Description kd 'linear' | 'srgb' &lt;optional&gt; 'linear' Color space for diffuse map ks 'linear' | 'srgb' &lt;optional&gt; 'linear' Color space for specular map brightness number &lt;optional&gt; 1.0 Overall brightness adjustment gamma number &lt;optional&gt; 2.2 Gamma correction value alphaLimits Array.&lt;number&gt; &lt;optional&gt; [0.01, 0.5] Range for glossiness/roughness monochromeMaterial Array.&lt;number&gt; &lt;optional&gt; [0.80, 0.79, 0.75] RGB color for monochrome rendering kAmbient number &lt;optional&gt; 0.1 Ambient light coefficient Source: LayerBRDF.js, line 5 LayerCombinerOptions Type: Object Properties: Name Type Argument Default Description layers Array.&lt;Layer&gt; Array of layers to be combined (required) shaders Object.&lt;string, Shader&gt; &lt;optional&gt; Map of available shaders type string &lt;optional&gt; 'combiner' Must be 'combiner' when using Layer factory visible boolean &lt;optional&gt; true Whether combined output is visible Source: LayerCombiner.js, line 3 LayerDStretchOptions Type: Object Properties: Name Type Argument Default Description url string URL to the image to be processed (required) eulerRotation Array.&lt;number&gt; &lt;optional&gt; [0,0,0] Initial Euler rotation angles worldRotation number &lt;optional&gt; 0 Global rotation offset for canvas/layer Source: LayerDstretch.js, line 6 LayerImageOptions Type: Object Properties: Name Type Argument Default Description url string URL of the image to display (required) layout string | Layout &lt;optional&gt; 'image' Layout format for image display format string &lt;optional&gt; 'vec4' Image data format for WebGL processing type string &lt;optional&gt; 'image' Must be 'image' when using Layer factory Source: LayerImage.js, line 5 LayerLensOptions Type: Object Properties: Name Type Argument Default Description overlay boolean &lt;optional&gt; true Whether the lens renders as an overlay radius number &lt;optional&gt; 100 Initial lens radius in pixels borderColor Array.&lt;number&gt; &lt;optional&gt; [0.078, 0.078, 0.078, 1] RGBA border color borderWidth number &lt;optional&gt; 12 Border width in pixels borderEnable boolean &lt;optional&gt; false Whether to show lens border dashboard Object &lt;optional&gt; null Dashboard UI component for lens control camera Camera Camera instance (required) Source: LayerLens.js, line 6 LayerMaskedImageOptions Type: Object Properties: Name Type Argument Default Description url string URL of the masked image to display (required) format string &lt;optional&gt; 'vec4' Image data format type string &lt;optional&gt; 'maskedimage' Must be 'maskedimage' when using Layer factory Source: LayerMaskedImage.js, line 5 LayerNeuralRTIOptions Type: Object Properties: Name Type Argument Default Description url string URL to the Neural RTI configuration JSON layout Layout Layout system for image loading convergenceSpeed number &lt;optional&gt; 1.2 Speed of quality convergence maxTiles number &lt;optional&gt; 40 Maximum number of tiles to process colorspace string &lt;optional&gt; 'rgb' Color space for processing Source: LayerNeuralRTI.js, line 8 LayerOptions Type: Object Properties: Name Type Argument Default Description layout string | Layout &lt;optional&gt; 'image' Layout/format of input raster images type string &lt;optional&gt; Identifier for specific derived layer class id string &lt;optional&gt; Unique layer identifier label string &lt;optional&gt; Display label for UI (defaults to id) transform Transform &lt;optional&gt; Transform from layer to canvas coordinates visible boolean &lt;optional&gt; true Whether layer should be rendered zindex number &lt;optional&gt; 0 Stack order for rendering (higher = on top) overlay boolean &lt;optional&gt; false Whether layer renders in overlay mode prefetchBorder number &lt;optional&gt; 1 Tile prefetch threshold in tile units mipmapBias number &lt;optional&gt; 0.4 Texture resolution selection bias (0=highest, 1=lowest) shaders Object.&lt;string, Shader&gt; &lt;optional&gt; Map of available shaders controllers Array.&lt;Controller&gt; &lt;optional&gt; Array of active UI controllers sourceLayer Layer &lt;optional&gt; Layer to share tiles with pixelSize number &lt;optional&gt; 0.0 Physical size of a pixel in mm Source: Layer.js, line 8 LayerRTIOptions Type: Object Properties: Name Type Argument Default Description url string URL to RTI info.json file (required) layout string Layout type: 'image', 'deepzoom', 'google', 'iiif', 'zoomify', 'tarzoom', 'itarzoom' normals boolean &lt;optional&gt; false Whether to load normal maps server string &lt;optional&gt; IIP server URL (for IIP layout) worldRotation number &lt;optional&gt; 0 Global rotation offset Source: LayerRTI.js, line 6 LayerSvgAnnotationOptions Type: Object Properties: Name Type Argument Default Description classes AnnotationClasses Annotation class definitions with styles onClick function &lt;optional&gt; Callback for annotation click events (param: selected annotation) shadow boolean &lt;optional&gt; true Whether to use Shadow DOM for SVG elements overlayElement HTMLElement &lt;optional&gt; Container for SVG overlay style string &lt;optional&gt; Additional CSS styles for annotations annotationUpdate function &lt;optional&gt; Custom update function for annotations Source: LayerSvgAnnotation.js, line 18 LayoutOptions Type: Object Properties: Name Type Argument Default Description width number &lt;optional&gt; Image width (required for google layout) height number &lt;optional&gt; Image height (required for google layout) suffix string &lt;optional&gt; 'jpg' Tile file extension subdomains string &lt;optional&gt; 'abc' Available subdomains for URL templates Source: Layout.js, line 36 LayoutType Supported image format types: image: Single-resolution web images (jpg, png, etc.) deepzoom: Microsoft Deep Zoom with root tile &gt; 1px deepzoom1px: Microsoft Deep Zoom with 1px root tile google: Google Maps tiling scheme zoomify: Zoomify format iiif: International Image Interoperability Framework tarzoom: OpenLIME tar-based tiling itarzoom: OpenLIME indexed tar-based tiling Type: 'image' | 'deepzoom' | 'deepzoom1px' | 'google' | 'zoomify' | 'iiif' | 'tarzoom' | 'itarzoom' Source: Layout.js, line 23 Point A {x, y} point. Type: Object Properties: Name Type Description x number The x-coordinate. y number The y-coordinate. Source: Transform.js, line 10 selectedCallback(annotation) Callback executed when an annotation is selected in the UI Parameters: Name Type Description annotation Annotation The selected annotation Source: EditorSvgAnnotation.js, line 38 Tile Type: Object Properties: Name Type Argument Description level number Zoom level in the image pyramid x number Horizontal position in tile grid y number Vertical position in tile grid index number Unique tile identifier start number &lt;optional&gt; Starting byte position in dataset (for tar formats) end number &lt;optional&gt; Ending byte position in dataset (for tar formats) missing number Number of pending channel data requests tex Array.&lt;WebGLTexture&gt; Array of textures (one per channel) time number Tile creation timestamp for cache management priority number Loading priority for cache management size number Total tile size in bytes Source: Layout.js, line 8 Tile Represents a single element of a regular grid that subdivides an image. Tiles are identified by their position (x, y) within the grid and the zoom level. Type: Object Properties: Name Type Argument Description level number The zoom level of the tile (0 is top/most zoomed out) x number Horizontal position of the tile in the grid at the given level y number Vertical position of the tile in the grid at the given level index number Unique identifier for the tile across all levels start number &lt;optional&gt; Starting byte position in the dataset (used for tarzoom/itarzoom formats) end number &lt;optional&gt; Ending byte position in the dataset (used for tarzoom/itarzoom formats) missing number For multi-channel formats (RTI, BRDF), tracks pending channel data requests tex Array.&lt;WebGLTexture&gt; Array of WebGL textures (one per channel) time number Timestamp of tile creation (used by cache algorithms) priority number Tile priority for cache management (lower = higher priority) size number Total size of the tile in bytes (used by cache algorithms) Source: LayoutTiles.js, line 7 Tile A tile represents a single element of a regular grid that subdivides an image. A tile is identified by its position (x, y) within the grid and the zoom level of the image. Type: Object Properties: Name Type Description level number The zoom level of the tile. x number x position of the tile in the grid. y number y position of the tile in the grid. index number Unique tile identifier. start number The position of the first byte of the tile in the image dataset (used only for tarzoom and itarzoom image formats). end number The position of the last byte of the tile in the image dataset (used only for tarzoom and itarzoom image formats). missing number In the case of multi-channel formats (RTI, BRDF), the information content of a tile is distributed over several planes (channels). missing represents the number of pending channel data requests. tex Array A array of WebGLTexture (one texture per channel). time time Tile creation time (this value is used internally by the cache algorithms). priority number The priority of the tile (this value is used internally by the cache algorithms). size number The total size of the tile in bytes (this value is used internally by the cache algorithms). Source: Tile.js, line 3 TileDescriptor Properties expected in tile descriptors: Type: Object Properties: Name Type Argument Description visible boolean Whether the tile should be rendered region Object Position and dimensions of the tile Properties Name Type Description x number X coordinate of tile's top-left corner y number Y coordinate of tile's top-left corner w number Width of the tile h number Height of the tile image string URL or path to the tile's image publish number &lt;optional&gt; Publication status (1 = published) Source: LayoutTileImages.js, line 12 updatePosition(x, y) Callback for position updates. Parameters: Name Type Description x number X coordinate in the range [-1, 1] y number Y coordinate in the range [-1, 1] Source: Controller2D.js, line 4 Viewport Defines a rectangular viewing region inside a canvas area. Type: Object Properties: Name Type Description x number X-coordinate of the lower-left corner y number Y-coordinate of the lower-left corner dx number Width of the viewport dy number Height of the viewport w number Total canvas width h number Total canvas height Source: Camera.js, line 5 Viewport Type: Object Properties: Name Type Description x number Viewport x position y number Viewport y position dx number Viewport horizontal offset dy number Viewport vertical offset w number Viewport width h number Viewport height Source: FocusContext.js, line 4 Events Layout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computed Source: LayoutTiles.js, line 736 Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmatically Source: LayoutTileImages.js, line 338 Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computed Source: LayoutTiles.js, line 745 Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computed Source: LayoutTileImages.js, line 346 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"modules.list.html":{"id":"modules.list.html","title":"Modules","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Modules Classes Annotation AudioPlayer BoundingBox Camera Canvas Color Colormap ColormapLegend Controller Controller2D ControllerFocusContext ControllerLens ControllerPanZoom CoordinateSystem Draggable EditorSvgAnnotation FocusContext Layer LayerAnnotation LayerAnnotationImage LayerBRDF LayerCombiner LayerDstretch LayerImage LayerLens LayerMaskedImage LayerNeuralRTI LayerRTI LayerSvgAnnotation Layout LayoutTileImages LayoutTiles LensDashboard LensDashboardNavigator LensDashboardNavigatorRadial LightSphereController PointerManager Raster Shader ShaderBRDF ShaderCombiner ShaderNeural ShaderRTI Skin TextToSpeechPlayer Transform UIBasic UIDialog Viewer Namespaces Cache Events update The event is fired when the camera target is changed. Source: Camera.js, line 135 update The event is fired when a uniform shader variable is changed. Source: Shader.js, line 130 ready Fired when all layers are initialized and ready to display. Source: Canvas.js, line 311 update Fired when canvas content is updated (layer changes, camera moves). Source: Canvas.js, line 301 updateSize Fired when canvas or layout size changes. Source: Canvas.js, line 306 ready The event is fired when a layer is initialized. Source: Layer.js, line 231 update The event is fired if a redraw is needed. Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: LayerAnnotation#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: LayerAnnotation#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: LayerImage#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: LayerImage#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: LayerCombiner#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: LayerCombiner#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: LayerAnnotation#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: LayerAnnotation#event:update Source: Layer.js, line 235 ready The event is fired when a layout is ready to be drawn(the single-resolution image is downloaded or the multi-resolution structure has been initialized). Source: Layout.js, line 158 ready The event is fired when a layout is ready to be drawn(the single-resolution image is downloaded or the multi-resolution structure has been initialized). Source: LayoutTiles.js, line 138 updateSize The event is fired when a layout size is modified (and the scene extension must be recomputed at canvas level). Source: LayoutTiles.js, line 234 Layout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computed Source: LayoutTiles.js, line 736 Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmatically Source: LayoutTileImages.js, line 338 Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computed Source: LayoutTiles.js, line 745 Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computed Source: LayoutTileImages.js, line 346 ready The event is fired when a layout is ready to be drawn(the single-resolution image is downloaded or the multi-resolution structure has been initialized). Inherited From: Layout#event:ready Overrides: Layout#event:ready Source: Layout.js, line 158 updateSize The event is fired when a layout size is modified (and the scene extension must be recomputed at canvas level). Inherited From: Layout#event:updateSize Overrides: Layout#event:updateSize Source: LayoutTiles.js, line 234 ready The event is fired when a layout is ready to be drawn(the single-resolution image is downloaded or the multi-resolution structure has been initialized). Inherited From: Layout#event:ready Overrides: Layout#event:ready Source: Layout.js, line 158 updateSize The event is fired when a layout size is modified (and the scene extension must be recomputed at canvas level). Inherited From: Layout#event:updateSize Overrides: Layout#event:updateSize Source: LayoutTiles.js, line 234 closed The event is fired when the dialog is closed. Source: UIBasic.js, line 773 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"classes.list.html":{"id":"classes.list.html","title":"Classes","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Classes Classes Annotation AudioPlayer BoundingBox Camera Canvas Color Colormap ColormapLegend Controller Controller2D ControllerFocusContext ControllerLens ControllerPanZoom CoordinateSystem Draggable EditorSvgAnnotation FocusContext Layer LayerAnnotation LayerAnnotationImage LayerBRDF LayerCombiner LayerDstretch LayerImage LayerLens LayerMaskedImage LayerNeuralRTI LayerRTI LayerSvgAnnotation Layout LayoutTileImages LayoutTiles LensDashboard LensDashboardNavigator LensDashboardNavigatorRadial LightSphereController PointerManager Raster Shader ShaderBRDF ShaderCombiner ShaderNeural ShaderRTI Skin TextToSpeechPlayer Transform UIBasic UIDialog Viewer Namespaces Cache Events update The event is fired when the camera target is changed. Source: Camera.js, line 135 update The event is fired when a uniform shader variable is changed. Source: Shader.js, line 130 ready Fired when all layers are initialized and ready to display. Source: Canvas.js, line 311 update Fired when canvas content is updated (layer changes, camera moves). Source: Canvas.js, line 301 updateSize Fired when canvas or layout size changes. Source: Canvas.js, line 306 ready The event is fired when a layer is initialized. Source: Layer.js, line 231 update The event is fired if a redraw is needed. Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: LayerAnnotation#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: LayerAnnotation#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: LayerImage#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: LayerImage#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: LayerCombiner#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: LayerCombiner#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: LayerAnnotation#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: LayerAnnotation#event:update Source: Layer.js, line 235 ready The event is fired when a layout is ready to be drawn(the single-resolution image is downloaded or the multi-resolution structure has been initialized). Source: Layout.js, line 158 ready The event is fired when a layout is ready to be drawn(the single-resolution image is downloaded or the multi-resolution structure has been initialized). Source: LayoutTiles.js, line 138 updateSize The event is fired when a layout size is modified (and the scene extension must be recomputed at canvas level). Source: LayoutTiles.js, line 234 Layout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computed Source: LayoutTiles.js, line 736 Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmatically Source: LayoutTileImages.js, line 338 Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computed Source: LayoutTiles.js, line 745 Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computed Source: LayoutTileImages.js, line 346 ready The event is fired when a layout is ready to be drawn(the single-resolution image is downloaded or the multi-resolution structure has been initialized). Inherited From: Layout#event:ready Overrides: Layout#event:ready Source: Layout.js, line 158 updateSize The event is fired when a layout size is modified (and the scene extension must be recomputed at canvas level). Inherited From: Layout#event:updateSize Overrides: Layout#event:updateSize Source: LayoutTiles.js, line 234 ready The event is fired when a layout is ready to be drawn(the single-resolution image is downloaded or the multi-resolution structure has been initialized). Inherited From: Layout#event:ready Overrides: Layout#event:ready Source: Layout.js, line 158 updateSize The event is fired when a layout size is modified (and the scene extension must be recomputed at canvas level). Inherited From: Layout#event:updateSize Overrides: Layout#event:updateSize Source: LayoutTiles.js, line 234 closed The event is fired when the dialog is closed. Source: UIBasic.js, line 773 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"namespaces.list.html":{"id":"namespaces.list.html","title":"Namespaces","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Namespaces Classes Annotation AudioPlayer BoundingBox Camera Canvas Color Colormap ColormapLegend Controller Controller2D ControllerFocusContext ControllerLens ControllerPanZoom CoordinateSystem Draggable EditorSvgAnnotation FocusContext Layer LayerAnnotation LayerAnnotationImage LayerBRDF LayerCombiner LayerDstretch LayerImage LayerLens LayerMaskedImage LayerNeuralRTI LayerRTI LayerSvgAnnotation Layout LayoutTileImages LayoutTiles LensDashboard LensDashboardNavigator LensDashboardNavigatorRadial LightSphereController PointerManager Raster Shader ShaderBRDF ShaderCombiner ShaderNeural ShaderRTI Skin TextToSpeechPlayer Transform UIBasic UIDialog Viewer Namespaces Cache Events update The event is fired when the camera target is changed. Source: Camera.js, line 135 update The event is fired when a uniform shader variable is changed. Source: Shader.js, line 130 ready Fired when all layers are initialized and ready to display. Source: Canvas.js, line 311 update Fired when canvas content is updated (layer changes, camera moves). Source: Canvas.js, line 301 updateSize Fired when canvas or layout size changes. Source: Canvas.js, line 306 ready The event is fired when a layer is initialized. Source: Layer.js, line 231 update The event is fired if a redraw is needed. Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: LayerAnnotation#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: LayerAnnotation#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: LayerImage#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: LayerImage#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: LayerCombiner#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: LayerCombiner#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: LayerAnnotation#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: LayerAnnotation#event:update Source: Layer.js, line 235 ready The event is fired when a layout is ready to be drawn(the single-resolution image is downloaded or the multi-resolution structure has been initialized). Source: Layout.js, line 158 ready The event is fired when a layout is ready to be drawn(the single-resolution image is downloaded or the multi-resolution structure has been initialized). Source: LayoutTiles.js, line 138 updateSize The event is fired when a layout size is modified (and the scene extension must be recomputed at canvas level). Source: LayoutTiles.js, line 234 Layout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computed Source: LayoutTiles.js, line 736 Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmatically Source: LayoutTileImages.js, line 338 Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computed Source: LayoutTiles.js, line 745 Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computed Source: LayoutTileImages.js, line 346 ready The event is fired when a layout is ready to be drawn(the single-resolution image is downloaded or the multi-resolution structure has been initialized). Inherited From: Layout#event:ready Overrides: Layout#event:ready Source: Layout.js, line 158 updateSize The event is fired when a layout size is modified (and the scene extension must be recomputed at canvas level). Inherited From: Layout#event:updateSize Overrides: Layout#event:updateSize Source: LayoutTiles.js, line 234 ready The event is fired when a layout is ready to be drawn(the single-resolution image is downloaded or the multi-resolution structure has been initialized). Inherited From: Layout#event:ready Overrides: Layout#event:ready Source: Layout.js, line 158 updateSize The event is fired when a layout size is modified (and the scene extension must be recomputed at canvas level). Inherited From: Layout#event:updateSize Overrides: Layout#event:updateSize Source: LayoutTiles.js, line 234 closed The event is fired when the dialog is closed. Source: UIBasic.js, line 773 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"tutorials.list.html":{"id":"tutorials.list.html","title":"Howto","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Howto Classes Annotation AudioPlayer BoundingBox Camera Canvas Color Colormap ColormapLegend Controller Controller2D ControllerFocusContext ControllerLens ControllerPanZoom CoordinateSystem Draggable EditorSvgAnnotation FocusContext Layer LayerAnnotation LayerAnnotationImage LayerBRDF LayerCombiner LayerDstretch LayerImage LayerLens LayerMaskedImage LayerNeuralRTI LayerRTI LayerSvgAnnotation Layout LayoutTileImages LayoutTiles LensDashboard LensDashboardNavigator LensDashboardNavigatorRadial LightSphereController PointerManager Raster Shader ShaderBRDF ShaderCombiner ShaderNeural ShaderRTI Skin TextToSpeechPlayer Transform UIBasic UIDialog Viewer Namespaces Cache Events update The event is fired when the camera target is changed. Source: Camera.js, line 135 update The event is fired when a uniform shader variable is changed. Source: Shader.js, line 130 ready Fired when all layers are initialized and ready to display. Source: Canvas.js, line 311 update Fired when canvas content is updated (layer changes, camera moves). Source: Canvas.js, line 301 updateSize Fired when canvas or layout size changes. Source: Canvas.js, line 306 ready The event is fired when a layer is initialized. Source: Layer.js, line 231 update The event is fired if a redraw is needed. Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: LayerAnnotation#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: LayerAnnotation#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: LayerImage#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: LayerImage#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: LayerCombiner#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: LayerCombiner#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: LayerAnnotation#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: LayerAnnotation#event:update Source: Layer.js, line 235 ready The event is fired when a layout is ready to be drawn(the single-resolution image is downloaded or the multi-resolution structure has been initialized). Source: Layout.js, line 158 ready The event is fired when a layout is ready to be drawn(the single-resolution image is downloaded or the multi-resolution structure has been initialized). Source: LayoutTiles.js, line 138 updateSize The event is fired when a layout size is modified (and the scene extension must be recomputed at canvas level). Source: LayoutTiles.js, line 234 Layout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computed Source: LayoutTiles.js, line 736 Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmatically Source: LayoutTileImages.js, line 338 Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computed Source: LayoutTiles.js, line 745 Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computed Source: LayoutTileImages.js, line 346 ready The event is fired when a layout is ready to be drawn(the single-resolution image is downloaded or the multi-resolution structure has been initialized). Inherited From: Layout#event:ready Overrides: Layout#event:ready Source: Layout.js, line 158 updateSize The event is fired when a layout size is modified (and the scene extension must be recomputed at canvas level). Inherited From: Layout#event:updateSize Overrides: Layout#event:updateSize Source: LayoutTiles.js, line 234 ready The event is fired when a layout is ready to be drawn(the single-resolution image is downloaded or the multi-resolution structure has been initialized). Inherited From: Layout#event:ready Overrides: Layout#event:ready Source: Layout.js, line 158 updateSize The event is fired when a layout size is modified (and the scene extension must be recomputed at canvas level). Inherited From: Layout#event:updateSize Overrides: Layout#event:updateSize Source: LayoutTiles.js, line 234 closed The event is fired when the dialog is closed. Source: UIBasic.js, line 773 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"index.html":{"id":"index.html","title":"Index","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback openlime 0.1.1 OpenLIME (Open Layered IMage Explorer) OpenLIME (Open Layered IMage Explorer) is an open-source JavaScript library for the efficient display of scalable high-resolution relightable images. OpenLime is jointly developed by CRS4 Visual and Data-intensive Computing Group and CNR ISTI - Visual Computing Lab. OpenLIME natively supports BRDF and RTI datasets, and can be easily extended for other multi-channel raster datasets, such as hyper spectral imaging or other reflectance modeling. Input data can be combined in a multi-layer visualization system using opacity and blending modes, and interactive lenses. All web image types (jpg, png, gif, etc...) are supported as well as the most common multi-resolution image formats (deepzoom, zoomify, IIIF, google maps), which are suitable for large images. OpenLIME provides a set of ready-to-use layers that allows developers to quickly publish their datasets on the web or make kiosk applications. Ready-to-use layers ranging from images, to multi-channel data (such as, for example, RTI or BRDF) or the combination of multiple layers or for visualization through lenses. The OpenLIME library comes with a responsive user iterface that works well with both desktop monitors and multitouch systems. Additionally, it is designed to be highly configurable, so it will be easy for the experienced developer to build their own custom interface. The library contains a convenient set of examples that can be used both to understand how the library works and as a starting point for programming with OpenLIME itself. Installing npm Ubuntu sudo apt install npm Ubuntu 18.04 You might have some problem using the old npm version shipped with Ubuntu18.04, and even upgrading it. This worked for me: sudo npm install -g npm@latest-6 Windows To obtain npm for Windows, you need to download the Windows version of node.js from https://nodejs.org/en/download/ . You can download either the Windows Installer (.msi) or the Windows Binary (.zip). If you download and expand the Windows Binary zip file, you will afterwards need to set your PATH variable to include the directory that contains the npm executable (this directory is the subdirectory node_modules\\npm\\bin). Setting up npm (all platforms) The following step should be performed in the openlime directory that was cloned from this repository. Before using npm, you need to install the required packages locally. This only needs to be done once. The following command tells npm to download all the webpack packages (and their dependencies) listed in the package.json file. These will be put in the ./node_modules directory. npm install The downloaded packages include rollup, documentation, and nodemon, which will be used below. Using npm (all platforms) These steps should be performed in the openlime directory that was cloned from this repository. Build the code The following command reads the javascript code in ./src, and puts the transpiled webpack code in ./dist/main.js. npm run build The webpack code is used, for example, by the ./dist/index.html web page. Run the node.js server If you wish, you can run the node.js development server to serve your web pages. This server will use ./dist as the home directory. The server is run in \"hot\" mode, which means that whenever you change a file in the ./src directory, the webpack code will automatically be rebuilt, and your web browser will automatically refresh, to reflect your latest changes. npm run start Then access the demo app at http://localhost:8080 (which by default is ./dist/index.html). If you prefer to serve from a different port, say 8088, you can call npm run start -- --port 8088 Create a rollup file to use with other servers You do not need to use node.js as the server. Instead, you can use the &lt;script&gt; approach, embedding a rollup file, either ./build/openlime.min.js or ./build/openlime.js, in your web page. The files ./dist/ui_custom.html and ./dist/ui_svg.html are examples of this approach. Such files will display correctly when served from any web server. To create the rollup files, call rollup: npm run rollup Keep the rollup files up to date If you keep a nodemon (node monitor) script running, it will automatically update the rollup files ./build/openlime.min.js and ./build/openlime.js whenever anything changes in the ./src directory. Note that, unlike with the node.js server, the browser will not refresh automatically; you will have to do that yourself once the rollup files have been updated. npm run nodemon Create documentation The documentation is created from structured comments in the source code (in ./src). Once created, it is accessible from ./docs/index.html npm run doc Customization skin.css skin.svg Run svgo -p 1 skin.svg -o skin.min.svg to minimize svg. Documentation.js supports markdown syntax and JSDoc syntax. JSON example of the configuration: { camera: { }, canvas: { rasters: [ { id: name: width: //optional height: //optional url: layout: &lt;image|google|deepzoom|zoomify|iip|iiif&gt; //optional if can be determined from the url. } ] }, overlay: { } } Index LayoutTileImages.js LayoutTileImages module provides management for collections of image tiles with associated regions. This layout type is specialized for handling multiple independent image tiles, each with their own position and dimensions, rather than a regular grid of tiles like LayoutTiles. Source: LayoutTileImages.js, line 5 Index LensDashboard.js LensDashboard module provides functionality for creating and managing an interactive lens interface in OpenLIME. It handles the lens border, SVG masking, and positioning of UI elements around the lens. Source: LensDashboard.js, line 4 Index LensDashboardNavigator.js LensDashboardNavigator module provides an enhanced lens dashboard with navigation controls and tools. Extends the base LensDashboard with additional UI elements for camera control, lighting, and annotation navigation. Source: LensDashboardNavigator.js, line 4 Index LensDashboardNavigatorRadial.js LensDashboardNavigatorRadial module provides a radial menu interface for lens controls. Extends the base LensDashboard with a circular arrangement of navigation controls and tools. Source: LensDashboardNavigatorRadial.js, line 4 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"global.html#Annotation":{"id":"global.html#Annotation","title":"Class: Annotation","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: Annotation Annotation Represents an annotation that can be drawn as an overlay on a canvas. An annotation is a decoration (text, graphics element, glyph) that provides additional information for interpreting underlying drawings. Each annotation has a unique identifier and can contain various properties such as description, category, drawing style, labels, etc. new Annotation( [options]) Creates a new Annotation instance. Parameters: Name Type Argument Description options Object &lt;optional&gt; Configuration options for the annotation. Properties Name Type Argument Default Description id string &lt;optional&gt; Unique identifier for the annotation. If not provided, a UUID will be generated. code string &lt;optional&gt; A code identifier for the annotation. label string &lt;optional&gt; '' Display label for the annotation. description string &lt;optional&gt; HTML text containing a comprehensive description. class string &lt;optional&gt; Category or classification of the annotation. target string &lt;optional&gt; Target element or area this annotation refers to. svg string &lt;optional&gt; SVG content for the annotation. image Object &lt;optional&gt; Image data associated with the annotation. region Object &lt;optional&gt; Region coordinates {x, y, w, h} for the annotation. data Object &lt;optional&gt; {} Additional custom data for the annotation. style Object &lt;optional&gt; Style configuration for rendering. bbox BoundingBox &lt;optional&gt; Bounding box of the annotation. visible boolean &lt;optional&gt; true Visibility state of the annotation. state Object &lt;optional&gt; State variables for the annotation. ready boolean &lt;optional&gt; false Indicates if SVG conversion is complete. needsUpdate boolean &lt;optional&gt; true Indicates if annotation needs updating. editing boolean &lt;optional&gt; false Indicates if annotation is being edited. Source: Annotation.js, line 10 Methods &lt;static&gt; fromJsonLd(entry) Creates an Annotation instance from a JSON-LD format string. Parameters: Name Type Description entry Object The JSON-LD object representing an annotation. Source: Annotation.js, line 110 Throws: If the entry is not a valid JSON-LD annotation or contains unsupported selectors. Type Error Returns: A new Annotation instance. Type Annotation getBBoxFromElements() Calculates and returns the bounding box of the annotation based on its elements or region. The coordinates are always relative to the top-left corner of the canvas. Source: Annotation.js, line 80 Returns: The calculated bounding box of the annotation. If the annotation has no elements and no region, returns an empty bounding box. If the annotation has a region but no elements, returns a bounding box based on the region. If the annotation has elements, calculates the bounding box that encompasses all elements. Type BoundingBox toJsonLd() Converts the annotation to a JSON-LD format object. Source: Annotation.js, line 140 Returns: A JSON-LD representation of the annotation including context, id, type, body (with code, class, and description), and target selector information. Type Object × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"AudioPlayer.html":{"id":"AudioPlayer.html","title":"Class: AudioPlayer","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: AudioPlayer AudioPlayer Class representing an audio player with playback control capabilities. Supports playing, pausing, resuming, and stopping audio files with volume control and playback speed adjustment. new AudioPlayer() Creates an instance of AudioPlayer. Initializes the player with default settings and sets up signal handling for the 'ended' event. Source: AudioPlayer.js, line 8 Methods &lt;async&gt; continue() Resumes playback of a paused audio file. Source: AudioPlayer.js, line 79 Returns: Resolves when the resumed audio playback completes. Type Promise.&lt;void&gt; getPlayDuration() Returns the total play duration in milliseconds. Source: AudioPlayer.js, line 132 Returns: Total play duration in milliseconds. Type number pause() Pauses the currently playing audio. Updates play duration when pausing. Source: AudioPlayer.js, line 66 &lt;async&gt; play(audioFile [, speed]) Plays an audio file with optional playback speed adjustment. If audio is paused, it will resume playback instead of starting a new file. Parameters: Name Type Argument Default Description audioFile string The path or URL to the audio file. speed number &lt;optional&gt; 1.0 Playback speed multiplier (1.0 is normal speed). Source: AudioPlayer.js, line 32 Returns: Resolves when the audio playback completes. Type Promise.&lt;void&gt; setVolume(volume) Sets the audio volume level. Parameters: Name Type Description volume number Volume level between 0.0 and 1.0. Source: AudioPlayer.js, line 141 &lt;async&gt; silence(ms) Creates a delay in the execution flow. Parameters: Name Type Description ms number Number of milliseconds to wait. Source: AudioPlayer.js, line 160 Returns: Resolves after the specified delay. Type Promise.&lt;void&gt; stop() Stops the current audio playback and resets all player states. Removes event listeners and updates final play duration. Source: AudioPlayer.js, line 99 toggleMute() Toggles the mute state of the audio player. Stores the previous volume level when muting and restores it when unmuting. Source: AudioPlayer.js, line 168 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"BoundingBox.html":{"id":"BoundingBox.html","title":"Class: BoundingBox","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: BoundingBox BoundingBox Represents an axis-aligned rectangular bounding box that can be wrapped tightly around geometric elements. The box is defined by two opposite vertices (low and high corners) and provides a comprehensive set of utility methods for manipulating and analyzing bounding boxes. new BoundingBox( [options]) Creates a new BoundingBox instance. Parameters: Name Type Argument Description options Object &lt;optional&gt; Configuration options for the bounding box Properties Name Type Argument Default Description xLow number &lt;optional&gt; 1e20 X coordinate of the lower corner yLow number &lt;optional&gt; 1e20 Y coordinate of the lower corner xHigh number &lt;optional&gt; -1e20 X coordinate of the upper corner yHigh number &lt;optional&gt; -1e20 Y coordinate of the upper corner Source: BoundingBox.js, line 6 Methods center() Calculates the center point of the bounding box. Source: BoundingBox.js, line 146 Returns: The coordinates of the center point Type Object corner(i) Gets the coordinates of a specific corner of the bounding box. Parameters: Name Type Description i number Corner index (0: bottom-left, 1: bottom-right, 2: top-left, 3: top-right) Source: BoundingBox.js, line 155 Returns: The coordinates of the specified corner Type Object fromArray(x) Initializes the bounding box from an array of coordinates. Parameters: Name Type Description x Array.&lt;number&gt; Array containing coordinates in order [xLow, yLow, xHigh, yHigh] Source: BoundingBox.js, line 29 height() Calculates the height of the bounding box. Source: BoundingBox.js, line 138 Returns: The difference between yHigh and yLow Type number intersects(box) Checks if this bounding box intersects with another bounding box. Parameters: Name Type Description box BoundingBox The other bounding box to check intersection with Source: BoundingBox.js, line 166 Returns: True if the boxes intersect, false otherwise Type boolean isEmpty() Checks if the bounding box is empty (has no valid area). A box is considered empty if its low corner coordinates are greater than its high corner coordinates. Source: BoundingBox.js, line 51 Returns: True if the box is empty, false otherwise Type boolean mergeBox(box) Enlarges this bounding box to include another bounding box. If this box is empty, it will adopt the dimensions of the input box. If the input box is null, no changes are made. Parameters: Name Type Description box BoundingBox | null The bounding box to merge with this one Source: BoundingBox.js, line 77 mergePoint(p) Enlarges this bounding box to include a point. Parameters: Name Type Description p Object The point to include in the bounding box Source: BoundingBox.js, line 95 print() Prints the bounding box coordinates to the console in a formatted string. Output format: \"BOX=xLow, yLow, xHigh, yHigh\" with values rounded to 2 decimal places Source: BoundingBox.js, line 174 quantize(side) Quantizes the bounding box coordinates by dividing by a specified value and rounding down. This creates a grid-aligned bounding box. Parameters: Name Type Description side number The value to divide coordinates by Source: BoundingBox.js, line 119 shift(dx, dy) Moves the bounding box by the specified displacement. Parameters: Name Type Description dx number Displacement along the x-axis dy number Displacement along the y-axis Source: BoundingBox.js, line 107 toArray() Converts the bounding box coordinates to an array. Source: BoundingBox.js, line 59 Returns: Array of coordinates in order [xLow, yLow, xHigh, yHigh] Type Array.&lt;number&gt; toEmpty() Resets the bounding box to an empty state by setting coordinates to extreme values. Source: BoundingBox.js, line 39 toString() Creates a space-separated string representation of the bounding box coordinates. Source: BoundingBox.js, line 67 Returns: String in format \"xLow yLow xHigh yHigh\" Type string width() Calculates the width of the bounding box. Source: BoundingBox.js, line 130 Returns: The difference between xHigh and xLow Type number × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"Cache.html":{"id":"Cache.html","title":"Namespace: Cache","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Namespace: Cache Cache Singleton cache instance for managing tile loading and caching across layers. Provides efficient tile retrieval and memory management with configurable capacity and request rate limiting. Properties: Name Type Description capacity number Total cache capacity in bytes (default: 512MB) size number Current amount of GPU RAM used maxRequest number Maximum concurrent HTTP requests (default: 6) requested number Current number of active requests maxRequestsRate number Maximum requests per second (0 for unlimited) maxPrefetch number Maximum size of prefetched tiles in bytes prefetched number Current amount of prefetched GPU RAM layers Array.&lt;Layer&gt; Array of layers being managed by the cache Source: Cache.js, line 191 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"Camera.html":{"id":"Camera.html","title":"Class: Camera","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: Camera Camera Camera class that manages viewport parameters and camera transformations. Acts as a container for parameters needed to define the viewport and camera position, supporting smooth animations between positions using source and target transforms. The camera maintains two Transform objects: source: represents current position target: represents destination position Animation between positions is handled automatically by the OpenLIME system unless manually interrupted by user input. new Camera( [options]) Creates a new Camera instance. Parameters: Name Type Argument Description options Object &lt;optional&gt; Configuration options Properties Name Type Argument Default Description bounded boolean &lt;optional&gt; true Whether to limit camera translation to scene boundaries maxFixedZoom number &lt;optional&gt; 2 Maximum allowed pixel size minScreenFraction number &lt;optional&gt; 1 Minimum portion of screen to show when zoomed in target Transform &lt;optional&gt; Initial target transform Source: Camera.js, line 28 Fires: Camera#event:update Methods copy() Creates a deep copy of the camera instance. Source: Camera.js, line 58 Returns: A new Camera instance with copied properties Type Camera deltaZoom(dt, dz [, x] [, y]) Applies a relative zoom change at a specific point. Parameters: Name Type Argument Default Description dt number Animation duration in milliseconds dz number Relative zoom change factor x number &lt;optional&gt; 0 X coordinate to zoom around y number &lt;optional&gt; 0 Y coordinate to zoom around Source: Camera.js, line 237 fit(box [, dt]) Adjusts the camera to frame a specified bounding box. Parameters: Name Type Argument Default Description box BoundingBox The box to frame in canvas coordinates dt number &lt;optional&gt; 0 Animation duration in milliseconds Source: Camera.js, line 288 fitCameraBox(dt) Resets the camera to show the entire scene. Parameters: Name Type Description dt number Animation duration in milliseconds Source: Camera.js, line 308 getCurrentTransform(time) Gets the camera transform at a specific time. Parameters: Name Type Description time number Current time in milliseconds (from performance.now()) Source: Camera.js, line 265 Returns: The interpolated transform at the specified time Type Transform getGlCurrentTransform(time) Gets the camera transform at a specific time in device coordinates. Parameters: Name Type Description time number Current time in milliseconds (from performance.now()) Source: Camera.js, line 275 Returns: The interpolated transform scaled for device pixels Type Transform glViewport() Returns the current viewport in device coordinates (accounting for device pixel ratio). Source: Camera.js, line 83 Returns: The current viewport scaled for device pixels Type Viewport mapToScene(x, y, transform) Converts canvas coordinates to scene coordinates using the specified transform. Parameters: Name Type Description x number X coordinate relative to canvas y number Y coordinate relative to canvas transform Transform Transform to use for conversion Source: Camera.js, line 98 Returns: Coordinates in scene space relative to viewport center Type Object pan(dt, dx, dy) Pans the camera by a specified amount in canvas coordinates. Parameters: Name Type Description dt number Animation duration in milliseconds dx number Horizontal displacement dy number Vertical displacement Source: Camera.js, line 184 rotate(dt, a) Rotates the camera around its z-axis. Parameters: Name Type Description dt number Animation duration in milliseconds a number Rotation angle in degrees Source: Camera.js, line 222 sceneToCanvas(x, y, transform) Converts scene coordinates to canvas coordinates using the specified transform. Parameters: Name Type Description x number X coordinate in scene space y number Y coordinate in scene space transform Transform Transform to use for conversion Source: Camera.js, line 117 Returns: Coordinates in canvas space Type Object setPosition(dt, x, y, z, a [, easing]) Sets the camera target parameters for a new position. Parameters: Name Type Argument Description dt number Animation duration in milliseconds x number X component of translation y number Y component of translation z number Zoom factor a number Rotation angle in degrees easing string &lt;optional&gt; Easing function name for animation Source: Camera.js, line 134 Fires: Camera#event:update setViewport(view) Updates the viewport while maintaining the camera position as close as possible to the previous one. Parameters: Name Type Description view Viewport The new viewport in CSS coordinates Source: Camera.js, line 68 zoom(dt, z [, x] [, y]) Zooms the camera to a specific point in canvas coordinates. Parameters: Name Type Argument Default Description dt number Animation duration in milliseconds z number Target zoom level x number &lt;optional&gt; 0 X coordinate to zoom towards y number &lt;optional&gt; 0 Y coordinate to zoom towards Source: Camera.js, line 199 Events update The event is fired when the camera target is changed. Source: Camera.js, line 135 update The event is fired when a uniform shader variable is changed. Source: Shader.js, line 130 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"Canvas.html":{"id":"Canvas.html","title":"Class: Canvas","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: Canvas Canvas Canvas class that manages WebGL context, layers, and scene rendering. Handles layer management, WebGL context creation/restoration, and render timing. new Canvas(canvas, overlay, camera [, options]) Creates a new Canvas instance with WebGL context and overlay support. Parameters: Name Type Argument Description canvas HTMLCanvasElement | string Canvas DOM element or selector overlay HTMLElement | string Overlay DOM element or selector for decorations (annotations, glyphs) camera Camera Scene camera instance options Object &lt;optional&gt; Configuration options Properties Name Type Argument Default Description layers Object &lt;optional&gt; Layer configurations mapping layer IDs to Layer instances preserveDrawingBuffer boolean &lt;optional&gt; false Whether to preserve WebGL buffers until manually cleared targetfps number &lt;optional&gt; 30 Target frames per second for rendering Source: Canvas.js, line 16 Fires: Canvas#event:update Canvas#event:updateSize Canvas#event:ready Methods addLayer(id, layer) Adds a layer to the canvas. Parameters: Name Type Description id string Unique identifier for the layer layer Layer Layer instance to add Source: Canvas.js, line 194 Fires: Canvas#event:update Canvas#event:ready Throws: If layer ID already exists Type Error getState( [stateMask]) Retrieves current state of the canvas and its components. Parameters: Name Type Argument Default Description stateMask Object &lt;optional&gt; null Optional mask to filter returned state properties Source: Canvas.js, line 148 Returns: Current state object Type Object removeLayer(layer) Removes a layer from the canvas. Parameters: Name Type Description layer Layer Layer instance to remove Source: Canvas.js, line 222 Example const layer = new Layer(options); canvas.addLayer('map', layer); // ... later ... canvas.removeLayer(layer); setState(state, dt [, easing]) Updates the state of the canvas and its components. Parameters: Name Type Argument Default Description state Object State object containing updates Properties Name Type Argument Description camera Object &lt;optional&gt; Camera state updates layers Object &lt;optional&gt; Layer state updates dt number Animation duration in milliseconds easing string &lt;optional&gt; 'linear' Easing function for animations Source: Canvas.js, line 130 Events ready Fired when all layers are initialized and ready to display. Source: Canvas.js, line 311 update Fired when canvas content is updated (layer changes, camera moves). Source: Canvas.js, line 301 updateSize Fired when canvas or layout size changes. Source: Canvas.js, line 306 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"Color.html":{"id":"Color.html","title":"Class: Color","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: Color Color Represents a color in RGBA format with values normalized between 0 and 1. new Color(r [, g] [, b] [, a]) Creates a new Color instance. Parameters: Name Type Argument Description r number | string Red component [0.0, 1.0] or color string ('#RGB', '#RGBA', '#RRGGBB', '#RRGGBBAA', 'rgb()', 'rgba()') g number &lt;optional&gt; Green component [0.0, 1.0] b number &lt;optional&gt; Blue component [0.0, 1.0] a number &lt;optional&gt; Alpha component [0.0, 1.0] Source: Colormap.js, line 159 Throws: If string value is not a valid color format Type Error Methods toHex() Converts color to hexadecimal string. Source: Colormap.js, line 256 Returns: Color in '#RRGGBB' format Type string toHexa() Converts color to hexadecimal string with alpha. Source: Colormap.js, line 265 Returns: Color in '#RRGGBBAA' format Type string toRGB() Converts color to RGB values [0, 255]. Source: Colormap.js, line 244 Returns: Array of [r, g, b] values Type Array.&lt;number&gt; toRGBA() Converts color to RGBA values [0-255]. Source: Colormap.js, line 274 Returns: Array of [r, g, b, a] values Type Array.&lt;number&gt; value() Gets color components as an array. Source: Colormap.js, line 236 Returns: Array of [r, g, b, a] values Type Array.&lt;number&gt; × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"Colormap.html":{"id":"Colormap.html","title":"Class: Colormap","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: Colormap Colormap Creates a colormap for mapping numerical values to colors. Supports linear, spline, and bar interpolation between colors. new Colormap( [colors] [, options]) Creates a new Colormap instance. Parameters: Name Type Argument Default Description colors Array.&lt;Color&gt; &lt;optional&gt; [black, white] Array of colors to interpolate between options Object &lt;optional&gt; Configuration options Properties Name Type Argument Default Description domain Array.&lt;number&gt; &lt;optional&gt; [0,1] Domain range for mapping lowColor Color &lt;optional&gt; Color for values below domain (defaults to first color) highColor Color &lt;optional&gt; Color for values above domain (defaults to last color) description string &lt;optional&gt; '' Description of the colormap type 'linear' | 'spline' | 'bar' &lt;optional&gt; 'linear' Interpolation type Source: Colormap.js, line 287 Throws: If colors/domain format is invalid Type Error Methods at(x) Gets color for a value using configured interpolation type. Parameters: Name Type Description x number Value to get color for Source: Colormap.js, line 410 Throws: If interpolation type is invalid Type Error Returns: Corresponding color Type Color rangeDomain() Gets the domain range of the colormap. Source: Colormap.js, line 346 Returns: Array containing [min, max] of domain Type Array.&lt;number&gt; sample(maxSteps) Samples the colormap into a buffer. Parameters: Name Type Description maxSteps number Number of samples to generate Source: Colormap.js, line 434 Returns: Sample data and buffer Type Object × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"ColormapLegend.html":{"id":"ColormapLegend.html","title":"Class: ColormapLegend","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: ColormapLegend ColormapLegend Creates a visual legend for a colormap. new ColormapLegend(viewer, colorscale [, options]) Creates a new ColormapLegend instance. Parameters: Name Type Argument Description viewer Object Viewer instance to attach legend to colorscale Colormap Colormap to create legend for options Object &lt;optional&gt; Configuration options Properties Name Type Argument Default Description nticks number &lt;optional&gt; 6 Number of ticks/divisions in legend legendWidth number &lt;optional&gt; 25 Width of legend as percentage textColor string &lt;optional&gt; '#fff' Color of text labels class string &lt;optional&gt; 'openlime-legend' CSS class for legend container Source: Colormap.js, line 454 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"Controller.html":{"id":"Controller.html","title":"Class: Controller","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: Controller Controller Base class that handles user interaction via device events (mouse/touch events). Provides an abstract user interface to define interaction actions such as panning, pinching, tapping, etc... The actions are implemented by pre-defined callback functions: panStart(e) intercepts the initial pan event (movement of the mouse after pressing a mouse button or moving a finger). The event is captured calling e.preventDefault(). panMove(e) receives and handles the pan event. panEnd(e) intercepts the final pan event (the user releases the left mouse button or removes his finger from the screen). pinchStart(e1, e2) intercepts the initial pinch event (a continuous gesture that tracks the positions between the first two fingers that touch the screen). The event is captured calling e1.preventDefault(). pinchMove(e1,e2) receives and handles the pinch event. pinchEnd(e1,e2) intercepts the final pinch event (the user removes one of their two fingers from the screen). mouseWheel(e) receives and handles the mouse wheel event (the user rotates the mouse wheel button). fingerSingleTap(e) receives and handles the single-tap event (the user presses a mouse button quickly or touches the screen shortly with a finger). fingerDoubleTap(e) receives and handles the double-tap event (the user quickly presses a mouse button twice or shortly touches the screen with a finger twice). e.preventDefault() will capture the event and wont be propagated to other controllers. This class only describes user interactions by implementing actions or callbacks. A Controller works in concert with a PointerManager object that emits events and links them to actions. &lt;abstract&gt; new Controller( [options]) Creates a new Controller instance. Parameters: Name Type Argument Description options Object &lt;optional&gt; Configuration options Properties Name Type Argument Default Description active boolean &lt;optional&gt; true Whether the controller is initially active debug boolean &lt;optional&gt; false Enable debug logging panDelay number &lt;optional&gt; 50 Inertial value for panning movements in milliseconds zoomDelay number &lt;optional&gt; 200 Delay for smoothing zoom events in milliseconds priority number &lt;optional&gt; 0 Controllers with higher priority are invoked first activeModifiers Array.&lt;number&gt; &lt;optional&gt; [0] Array of modifier states that activate this controller Source: Controller.js, line 31 Example // Create a pan-zoom controller and associate it with the viewer's pointer manager const panzoom = new OpenLIME.ControllerPanZoom(viewer.camera, { priority: -1000, activeModifiers: [0, 1] }); viewer.pointerManager.onEvent(panzoom); Methods &lt;abstract&gt; fingerDoubleTap(e) Called for quick double mouse press or double finger touch. Parameters: Name Type Description e Event The double tap event Source: Controller.js, line 166 &lt;abstract&gt; fingerSingleTap(e) Called for quick mouse press or short finger touch. Parameters: Name Type Description e Event The tap event Source: Controller.js, line 158 modifierState(e) Gets the modifier state from an event. Parameters: Name Type Description e Event The event to check Source: Controller.js, line 66 Returns: Modifier state bitmask where: 0 = No modifiers 1 = Ctrl key 2 = Shift key 4 = Alt key Multiple modifiers combine their values (e.g., Ctrl+Shift = 3) Type number &lt;abstract&gt; mouseWheel(e) Called when user rotates mouse wheel. Parameters: Name Type Description e WheelEvent The wheel event Source: Controller.js, line 150 &lt;abstract&gt; panEnd(e) Called when panning ends (mouse up or finger lift). Parameters: Name Type Description e Event The pan end event Source: Controller.js, line 114 &lt;abstract&gt; panMove(e) Called continuously during panning. Parameters: Name Type Description e Event The pan move event Source: Controller.js, line 106 &lt;abstract&gt; panStart(e) Called when user starts panning (mouse down or finger touch). Call e.preventDefault() to capture the event. Parameters: Name Type Description e Event The pan start event Source: Controller.js, line 98 &lt;abstract&gt; pinchEnd(e1, e2) Called when pinch ends (finger lift). Parameters: Name Type Description e1 Event First finger event e2 Event Second finger event Source: Controller.js, line 142 &lt;abstract&gt; pinchMove(e1, e2) Called continuously during pinching. Parameters: Name Type Description e1 Event First finger event e2 Event Second finger event Source: Controller.js, line 133 &lt;abstract&gt; pinchStart(e1, e2) Called when user starts a two-finger pinch. Call e1.preventDefault() to capture the event. Parameters: Name Type Description e1 Event First finger event e2 Event Second finger event Source: Controller.js, line 124 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"Controller2D.html":{"id":"Controller2D.html","title":"Class: Controller2D","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: Controller2D Controller2D Controller for handling 2D position updates based on pan and tap events. Extends the base Controller to track a 2D position (x, y) of the device pointer. Supports two coordinate systems: Absolute: Coordinates mapped to [-1, 1] with origin at bottom-left of canvas Relative: Coordinates based on distance from initial pan position, scaled by speed new Controller2D(callback [, options]) Creates a new Controller2D instance. Parameters: Name Type Argument Description callback updatePosition Function called when position is updated options Object &lt;optional&gt; Configuration options Properties Name Type Argument Default Description relative boolean &lt;optional&gt; false Whether to use relative coordinate system speed number &lt;optional&gt; 2.0 Scaling factor for relative coordinates box BoundingBox &lt;optional&gt; Bounding box for coordinate constraints onPanStart updatePosition &lt;optional&gt; Callback for pan start event onPanEnd updatePosition &lt;optional&gt; Callback for pan end event active boolean &lt;optional&gt; true Whether the controller is active activeModifiers Array.&lt;number&gt; &lt;optional&gt; [0] Array of active modifier states Source: Controller2D.js, line 33 Extends Controller Methods &lt;abstract&gt; fingerDoubleTap(e) Called for quick double mouse press or double finger touch. Parameters: Name Type Description e Event The double tap event Inherited From: Controller#fingerDoubleTap Overrides: Controller#fingerDoubleTap Source: Controller.js, line 166 fingerSingleTap(e) Handles single tap/click events. Only processes events in absolute coordinate mode. Parameters: Name Type Description e MouseEvent | TouchEvent Tap event Inherited From: Controller2D#fingerSingleTap Overrides: Controller#fingerSingleTap Source: Controller2D.js, line 169 modifierState(e) Gets the modifier state from an event. Parameters: Name Type Description e Event The event to check Inherited From: Controller#modifierState Overrides: Controller#modifierState Source: Controller.js, line 66 Returns: Modifier state bitmask where: 0 = No modifiers 1 = Ctrl key 2 = Shift key 4 = Alt key Multiple modifiers combine their values (e.g., Ctrl+Shift = 3) Type number &lt;abstract&gt; mouseWheel(e) Called when user rotates mouse wheel. Parameters: Name Type Description e WheelEvent The wheel event Inherited From: Controller#mouseWheel Overrides: Controller#mouseWheel Source: Controller.js, line 150 panEnd(e) Handles end of pan gesture. Parameters: Name Type Description e MouseEvent | TouchEvent Pan end event Inherited From: Controller2D#panEnd Overrides: Controller#panEnd Source: Controller2D.js, line 150 Returns: False if not currently panning Type boolean panMove(e) Handles pan movement. Parameters: Name Type Description e MouseEvent | TouchEvent Pan move event Inherited From: Controller2D#panMove Overrides: Controller#panMove Source: Controller2D.js, line 138 Returns: False if not currently panning Type boolean panStart(e) Handles start of pan gesture. Parameters: Name Type Description e MouseEvent | TouchEvent Pan start event Inherited From: Controller2D#panStart Overrides: Controller#panStart Source: Controller2D.js, line 116 &lt;abstract&gt; pinchEnd(e1, e2) Called when pinch ends (finger lift). Parameters: Name Type Description e1 Event First finger event e2 Event Second finger event Inherited From: Controller#pinchEnd Overrides: Controller#pinchEnd Source: Controller.js, line 142 &lt;abstract&gt; pinchMove(e1, e2) Called continuously during pinching. Parameters: Name Type Description e1 Event First finger event e2 Event Second finger event Inherited From: Controller#pinchMove Overrides: Controller#pinchMove Source: Controller.js, line 133 &lt;abstract&gt; pinchStart(e1, e2) Called when user starts a two-finger pinch. Call e1.preventDefault() to capture the event. Parameters: Name Type Description e1 Event First finger event e2 Event Second finger event Inherited From: Controller#pinchStart Overrides: Controller#pinchStart Source: Controller.js, line 124 setPosition(x, y) Updates the stored position for relative coordinate system. This is a convenience method typically used within callbacks. Parameters: Name Type Description x number New X coordinate in range [-1, 1] y number New Y coordinate in range [-1, 1] Source: Controller2D.js, line 76 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"ControllerFocusContext.html":{"id":"ControllerFocusContext.html","title":"Class: ControllerFocusContext","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: ControllerFocusContext ControllerFocusContext Controller for handling Focus+Context visualization interactions. Manages lens-based focus region and context region interactions including panning, zooming, and lens radius adjustments. new ControllerFocusContext(options) Creates a new ControllerFocusContext instance. Parameters: Name Type Description options Object Configuration options Properties Name Type Argument Default Description updateTimeInterval number &lt;optional&gt; 50 Time interval for position updates in ms updateDelay number &lt;optional&gt; 100 Delay for position updates in ms zoomDelay number &lt;optional&gt; 150 Delay for zoom animations in ms zoomAmount number &lt;optional&gt; 1.5 Scale factor for zoom operations priority number &lt;optional&gt; -100 Controller priority enableDirectContextControl boolean &lt;optional&gt; true Enable direct manipulation of context region lensLayer Layer Layer to use for lens visualization camera Camera Camera instance to control canvas Canvas Canvas instance to monitor Source: ControllerFocusContext.js, line 11 Throws: If required options (lensLayer, camera, canvas) are missing Type Error Extends ControllerLens Methods &lt;abstract&gt; fingerDoubleTap(e) Called for quick double mouse press or double finger touch. Parameters: Name Type Description e Event The double tap event Inherited From: Controller#fingerDoubleTap Overrides: ControllerLens#fingerDoubleTap Source: Controller.js, line 166 &lt;abstract&gt; fingerSingleTap(e) Called for quick mouse press or short finger touch. Parameters: Name Type Description e Event The tap event Inherited From: Controller#fingerSingleTap Overrides: ControllerLens#fingerSingleTap Source: Controller.js, line 158 getFocus() Gets current focus state. Inherited From: ControllerLens#getFocus Overrides: ControllerLens#getFocus Source: ControllerLens.js, line 233 Returns: Focus state object Type Object getPixelPosition(e) Converts position from canvas HTML coordinates to viewport coordinates. Parameters: Name Type Description e PointerEvent event Inherited From: ControllerLens#getPixelPosition Overrides: ControllerLens#getPixelPosition Source: ControllerLens.js, line 266 Returns: Position in viewport coordinates (origin at bottom-left, y up) Type Object getScenePosition(e) Converts position from canvas HTML coordinates to scene coordinates. Parameters: Name Type Description e PointerEvent event Inherited From: ControllerLens#getScenePosition Overrides: ControllerLens#getScenePosition Source: ControllerLens.js, line 276 Returns: Position in scene coordinates (origin at center, y up) Type Object initLens() Initializes lens position and size. Source: ControllerFocusContext.js, line 420 isInsideLens(p) Checks if a point is inside the lens. Parameters: Name Type Description p Object Point to check in scene coordinates Properties Name Type Description x number X coordinate y number Y coordinate Inherited From: ControllerLens#isInsideLens Overrides: ControllerLens#isInsideLens Source: ControllerLens.js, line 246 Returns: Whether point is inside lens and/or on border Type Object modifierState(e) Gets the modifier state from an event. Parameters: Name Type Description e Event The event to check Inherited From: Controller#modifierState Overrides: ControllerLens#modifierState Source: Controller.js, line 66 Returns: Modifier state bitmask where: 0 = No modifiers 1 = Ctrl key 2 = Shift key 4 = Alt key Multiple modifiers combine their values (e.g., Ctrl+Shift = 3) Type number updateRadiusAndScale(dz) Updates lens radius and adjusts camera to maintain Focus+Context condition. Parameters: Name Type Description dz number Scale factor for radius adjustment Source: ControllerFocusContext.js, line 306 zoomEnd() Handles end of zoom operation. Overrides: ControllerLens#zoomEnd Source: ControllerFocusContext.js, line 273 zoomMove(pe) Handles zoom movement when dragging lens border. Parameters: Name Type Description pe PointerEvent Pointer event Overrides: ControllerLens#zoomMove Source: ControllerFocusContext.js, line 223 zoomStart(pe) Starts zoom operation when clicking on lens border. Parameters: Name Type Description pe PointerEvent Pointer event Overrides: ControllerLens#zoomStart Source: ControllerFocusContext.js, line 210 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"ControllerLens.html":{"id":"ControllerLens.html","title":"Class: ControllerLens","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: ControllerLens ControllerLens Controller for handling lens-based interactions. Manages user interactions with a lens overlay including panning, zooming, and lens radius adjustments through mouse/touch events. new ControllerLens(options) Creates a new ControllerLens instance. Parameters: Name Type Description options Object Configuration options Properties Name Type Argument Default Description lensLayer Object Layer used for lens visualization camera Camera Camera instance to control useGL boolean &lt;optional&gt; false Whether to use WebGL coordinates active boolean &lt;optional&gt; true Whether the controller is initially active Source: ControllerLens.js, line 11 Throws: If required options (lensLayer, camera) are missing Type Error Extends Controller Methods &lt;abstract&gt; fingerDoubleTap(e) Called for quick double mouse press or double finger touch. Parameters: Name Type Description e Event The double tap event Inherited From: Controller#fingerDoubleTap Overrides: Controller#fingerDoubleTap Source: Controller.js, line 166 &lt;abstract&gt; fingerSingleTap(e) Called for quick mouse press or short finger touch. Parameters: Name Type Description e Event The tap event Inherited From: Controller#fingerSingleTap Overrides: Controller#fingerSingleTap Source: Controller.js, line 158 getFocus() Gets current focus state. Source: ControllerLens.js, line 233 Returns: Focus state object Type Object getPixelPosition(e) Converts position from canvas HTML coordinates to viewport coordinates. Parameters: Name Type Description e PointerEvent event Source: ControllerLens.js, line 266 Returns: Position in viewport coordinates (origin at bottom-left, y up) Type Object getScenePosition(e) Converts position from canvas HTML coordinates to scene coordinates. Parameters: Name Type Description e PointerEvent event Source: ControllerLens.js, line 276 Returns: Position in scene coordinates (origin at center, y up) Type Object isInsideLens(p) Checks if a point is inside the lens. Parameters: Name Type Description p Object Point to check in scene coordinates Properties Name Type Description x number X coordinate y number Y coordinate Source: ControllerLens.js, line 246 Returns: Whether point is inside lens and/or on border Type Object modifierState(e) Gets the modifier state from an event. Parameters: Name Type Description e Event The event to check Inherited From: Controller#modifierState Overrides: Controller#modifierState Source: Controller.js, line 66 Returns: Modifier state bitmask where: 0 = No modifiers 1 = Ctrl key 2 = Shift key 4 = Alt key Multiple modifiers combine their values (e.g., Ctrl+Shift = 3) Type number mouseWheel(e) Handles mouse wheel events. Parameters: Name Type Description e WheelEvent Wheel event Inherited From: ControllerLens#mouseWheel Overrides: Controller#mouseWheel Source: ControllerLens.js, line 159 Returns: True if event was handled Type boolean panEnd(e) Handles end of pan operation. Parameters: Name Type Description e PointerEvent Pan end event Inherited From: ControllerLens#panEnd Overrides: Controller#panEnd Source: ControllerLens.js, line 97 panMove(e) Handles pan movement. Parameters: Name Type Description e PointerEvent Pan move event Inherited From: ControllerLens#panMove Overrides: Controller#panMove Source: ControllerLens.js, line 76 panStart(e) Handles start of pan operation. Parameters: Name Type Description e PointerEvent Pan start event Inherited From: ControllerLens#panStart Overrides: Controller#panStart Source: ControllerLens.js, line 48 pinchEnd(e, x, y, scale) Handles end of pinch operation. Parameters: Name Type Description e PointerEvent End event x number X coordinate y number Y coordinate scale number Final scale value Inherited From: ControllerLens#pinchEnd Overrides: Controller#pinchEnd Source: ControllerLens.js, line 149 pinchMove(e1, e2) Handles pinch movement. Parameters: Name Type Description e1 PointerEvent First finger event e2 PointerEvent Second finger event Inherited From: ControllerLens#pinchMove Overrides: Controller#pinchMove Source: ControllerLens.js, line 132 pinchStart(e1, e2) Handles start of pinch operation. Parameters: Name Type Description e1 PointerEvent First finger event e2 PointerEvent Second finger event Inherited From: ControllerLens#pinchStart Overrides: Controller#pinchStart Source: ControllerLens.js, line 108 zoomEnd() Ends zoom operation. Source: ControllerLens.js, line 225 zoomMove(pe) Updates zoom when dragging lens border. Parameters: Name Type Description pe Object Pixel position in canvas coordinates Properties Name Type Description offsetX number X offset from canvas left offsetY number Y offset from canvas top Source: ControllerLens.js, line 204 zoomStart(pe) Initiates zoom operation when clicking on lens border. Parameters: Name Type Description pe Object Pixel position in canvas coordinates Properties Name Type Description offsetX number X offset from canvas left offsetY number Y offset from canvas top Source: ControllerLens.js, line 182 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"ControllerPanZoom.html":{"id":"ControllerPanZoom.html","title":"Class: ControllerPanZoom","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: ControllerPanZoom ControllerPanZoom ControllerPanZoom handles pan, zoom, and interaction events in a canvas element to manipulate camera parameters. It supports multiple interaction methods including: Mouse drag for panning Mouse wheel for zooming Touch gestures (pinch to zoom) Double tap to zoom The controller maintains state for ongoing pan and zoom operations and can be configured to use different coordinate systems (HTML or GL) for calculations. new ControllerPanZoom(camera [, options]) Creates a new ControllerPanZoom instance. Parameters: Name Type Argument Description camera Camera The camera object to control options Object &lt;optional&gt; Configuration options Properties Name Type Argument Default Description zoomAmount number &lt;optional&gt; 1.2 The zoom multiplier for wheel/double-tap events controlZoom boolean &lt;optional&gt; false If true, requires Ctrl key to be pressed for zoom operations useGLcoords boolean &lt;optional&gt; false If true, uses WebGL coordinate system instead of HTML panDelay number &lt;optional&gt; Delay for pan animations zoomDelay number &lt;optional&gt; Delay for zoom animations Source: ControllerPanZoom.js, line 20 Fires: ControllerPanZoom#event:nowheel - Emitted when a wheel event is received but ctrl key is required and not pressed Extends Controller Methods &lt;abstract&gt; fingerSingleTap(e) Called for quick mouse press or short finger touch. Parameters: Name Type Description e Event The tap event Inherited From: Controller#fingerSingleTap Overrides: Controller#fingerSingleTap Source: Controller.js, line 158 modifierState(e) Gets the modifier state from an event. Parameters: Name Type Description e Event The event to check Inherited From: Controller#modifierState Overrides: Controller#modifierState Source: Controller.js, line 66 Returns: Modifier state bitmask where: 0 = No modifiers 1 = Ctrl key 2 = Shift key 4 = Alt key Multiple modifiers combine their values (e.g., Ctrl+Shift = 3) Type number × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"CoordinateSystem.html":{"id":"CoordinateSystem.html","title":"Class: CoordinateSystem","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: CoordinateSystem CoordinateSystem Contain functions to pass between different coordinate system. Here described the coordinate system in sequence CanvasHTML: Html coordinates: 0,0 left,top to width height at bottom right (y Down) CanvasContext: Same as Html, but scaled by devicePixelRatio (y Down) (required for WebGL, not for SVG) Viewport: 0,0 left,bottom to (width,height) at top right (y Up) Center: 0,0 at viewport center (y Up) Scene: 0,0 at dataset center (y Up). The dataset is placed here through the camera transform Layer: 0,0 at Layer center (y Up). Layer is placed over the dataset by the layer transform Image: 0,0 at left,top (y Down) Layout: 0,0 at left,top (y Down). Depends on layout new CoordinateSystem() Source: CoordinateSystem.js, line 16 Methods &lt;static&gt; fromCanvasHtmlToImage(p, camera, layerT, layerSize, applyGLScale) Transform a point from CanvasHtml to Image Parameters: Name Type Description p * point {x, y} in CanvasHtml (0,0 left,top, y Down) camera Camera camera layerT Transform layer transform layerSize * {w, h} Size in pixel of the Layer applyGLScale bool if true apply devPixelRatio scale. Keep it false when working with SVG Source: CoordinateSystem.js, line 208 Returns: Point in Image space (0,0 left,top of the image, y Down) &lt;static&gt; fromCanvasHtmlToScene(p, camera, useGL) Transform a point from CanvasHtml to Scene Parameters: Name Type Description p * point {x, y} in CanvasHtml (0,0 left,top, y Down) camera Camera camera useGL bool True to work with WebGL, false for SVG. When true, it uses devPixelRatio scale Source: CoordinateSystem.js, line 113 Returns: Point in Scene coordinates (0,0 at scene center, y Up) &lt;static&gt; fromCanvasHtmlToViewport(p, camera, useGL) Transform point from CanvasHTML to GLViewport Parameters: Name Type Description p * point in CanvasHtml: 0,0 left,top y Down camera Camera Camera useGL bool True to work with WebGL, false for SVG. When true, it uses devPixelRatio scale Source: CoordinateSystem.js, line 38 Returns: point in GLViewport: 0,0 left,bottom, scaled by devicePixelRatio &lt;static&gt; fromLayerBoxToSceneBox(box, layerT) Transform a box from Layer to Scene Parameters: Name Type Description box BoundingBox box in Layer coordinates (0,0 at layer center) layerT Transform layer transform Source: CoordinateSystem.js, line 251 Returns: box in Scene coordinates (0,0 at scene center) &lt;static&gt; fromLayerBoxToViewportBox(box, camera, layerT, useGL) Transform a box from Layer to Viewport coordinates Parameters: Name Type Description box BoundingBox box in Layer coordinates (0,0 at Layer center y Up) camera Camera layerT Transform layer transform useGL bool True to work with WebGL, false for SVG. When true, it uses devPixelRatio scale Source: CoordinateSystem.js, line 273 Returns: Box in Viewport coordinates (0,0 at left, bottom y Up) &lt;static&gt; fromLayerToCenter(p, camera, layerT) Transform a point from Layer to Center Parameters: Name Type Description p * point {x,y} in Layer coordinates (0,0 at Layer center) camera Camera camera layerT Transform layer transform Source: CoordinateSystem.js, line 84 Returns: point in Center (0, 0 at glViewport center) coordinates. &lt;static&gt; fromLayerToImage(p, layerSize) Transform a point from Layer to Image coordinates Parameters: Name Type Description p * point {x, y} Layer coordinates (0,0 at Layer center) layerSize * {w, h} Size in pixel of the Layer Source: CoordinateSystem.js, line 100 Returns: Point in Image coordinates (0,0 at left,top, y Down) &lt;static&gt; fromLayerToViewport(p, camera, layerT, useGL) Transform a point from Layer to Viewport coordinates Parameters: Name Type Description p * point {x,y} Layer (0,0 at Layer center y Up) camera Camera layerT Transform layer transform useGL bool True to work with WebGL, false for SVG. When true, it uses devPixelRatio scale Source: CoordinateSystem.js, line 72 Returns: point in viewport coordinates (0,0 at left,bottom y Up) &lt;static&gt; fromSceneBoxToLayerBox(box, layerT) Transform a box from Scene to Layer Parameters: Name Type Description box BoundingBox box in Layer coordinates (0,0 at layer center) layerT Transform layer transform Source: CoordinateSystem.js, line 261 Returns: box in Scene coordinates (0,0 at scene center) &lt;static&gt; fromSceneToCanvasHtml(p, camera, useGL) Transform a point from Scene to CanvasHtml Parameters: Name Type Description p * point {x, y} Scene coordinates (0,0 at scene center, y Up) camera Camera camera useGL bool True to work with WebGL, false for SVG. When true, it uses devPixelRatio scale Source: CoordinateSystem.js, line 130 Returns: Point in CanvasHtml (0,0 left,top, y Down) &lt;static&gt; fromSceneToViewport(p, camera, useGL) Transform a point from Scene to Viewport Parameters: Name Type Description p * point {x, y} Scene coordinates (0,0 at scene center, y Up) camera Camera camera useGL bool True to work with WebGL, false for SVG. When true, it uses devPixelRatio scale Source: CoordinateSystem.js, line 143 Returns: Point in Viewport (0,0 left,bottom, y Up) &lt;static&gt; fromSceneToViewportNoCamera(p, cameraT, viewport) Transform a point from Scene to Viewport, using given transform and viewport Parameters: Name Type Description p * point {x, y} Scene coordinates (0,0 at scene center, y Up) cameraT Transform camera transform viewport * viewport {x,y,dx,dy,w,h} Source: CoordinateSystem.js, line 159 Returns: Point in Viewport (0,0 left,bottom, y Up) &lt;static&gt; fromViewportBoxToImageBox(box, cameraT, viewport, layerT, layerSize) Transform a box from Viewport to Image coordinates Parameters: Name Type Description box BoundingBox in Viewport coordinates (0,0 at left,bottom, y Up) cameraT Transform camera Transform viewport * {x,y,dx,dy,w,h} layerT Transform layer transform layerSize * {w,h} layer pixel size Source: CoordinateSystem.js, line 228 Returns: box in Image coordinates (0,0 left,top, y Dowm) &lt;static&gt; fromViewportBoxToLayerBox(box, camera, layerT, useGL) Transform a box from Layer to Viewport coordinates Parameters: Name Type Description box BoundingBox box in Layer coordinates (0,0 at Layer center y Up) camera Camera layerT Transform layer transform useGL bool True to work with WebGL, false for SVG. When true, it uses devPixelRatio scale Source: CoordinateSystem.js, line 286 Returns: Box in Viewport coordinates (0,0 at left, bottom y Up) &lt;static&gt; fromViewportToCanvasHtml(p, camera, useGL) Transform point from Viewport to CanvasHTML Parameters: Name Type Description p * point in Viewport: 0,0 at left,bottom camera Camera Camera which contains viewport information useGL bool True to work with WebGL, false for SVG. When true, it uses devPixelRatio scale Source: CoordinateSystem.js, line 25 Returns: point in CanvasHtml: 0,0 left,top &lt;static&gt; fromViewportToLayer(p, camera, layerT, useGL) Transform a point from Viewport to Layer coordinates Parameters: Name Type Description p * point {x,y} in Viewport (0,0 left,bottom, y Up) camera Camera camera layerT Transform layer transform useGL bool True to work with WebGL, false for SVG. When true, it uses devPixelRatio scale Source: CoordinateSystem.js, line 53 Returns: point in Layer coordinates (0, 0 at layer center, y Up) &lt;static&gt; fromViewportToScene(p, camera, useGL) Transform a point from Viewport to Scene. Parameters: Name Type Description p * point {x, y} Viewport coordinates (0,0 at left,bottom, y Up) camera Camera camera useGL bool True to work with WebGL, false for SVG. When true, it uses devPixelRatio scale Source: CoordinateSystem.js, line 174 Returns: Point in Viewport (0,0 at scene center, y Up) &lt;static&gt; fromViewportToSceneNoCamera(p, cameraT, viewport) Transform a point from Viewport to Scene, using given transform and viewport Parameters: Name Type Description p * point {x, y} Viewport coordinates (0,0 at left,bottom, y Up) cameraT Transform camera transform viewport * viewport {x,y,dx,dy,w,h} Source: CoordinateSystem.js, line 190 Returns: Point in Viewport (0,0 at scene center, y Up) &lt;static&gt; getFromLayerToViewportTransform(camera, layerT, useGL) Get a transform to go from Layer (0,0 at Layer center y Up) to Viewport (0,0 at left,bottom y Up) Parameters: Name Type Description camera Camera layerT Transform layer transform useGL bool True to work with WebGL, false for SVG. When true, it uses devPixelRatio scale Source: CoordinateSystem.js, line 328 Returns: transform from Layer to Viewport &lt;static&gt; getFromLayerToViewportTransformNoCamera(CameraT, viewport, layerT) Get a transform to go from Layer (0,0 at Layer center y Up) to Viewport (0,0 at left,bottom y Up) Parameters: Name Type Description CameraT Transform camera transform viewport viewport {x,y,dx,dy,w,h} viewport layerT Transform layer transform Source: CoordinateSystem.js, line 343 Returns: transform from Layer to Viewport &lt;static&gt; getFromViewportToCenterTransform(camera, useGL) Get a transform to go from viewport 0,0 at left, bottom y Up, to Center 0,0 at viewport center Parameters: Name Type Description camera Camera camera useGL bool True to work with WebGL, false for SVG. When true, it uses devPixelRatio scale Source: CoordinateSystem.js, line 297 Returns: transform from Viewport to Center &lt;static&gt; getFromViewportToCenterTransformNoCamera(viewport) Get a transform to go from viewport 0,0 at left, bottom y Up, to Center 0,0 at viewport center from explicit viewport param. (Not using camera parameter here) Parameters: Name Type Description viewport * viewport Source: CoordinateSystem.js, line 308 Returns: transform from Viewport to Center &lt;static&gt; getViewport(useGL) Return the camera viewport: scaled by devicePixelRatio if useGL is true. Parameters: Name Type Description useGL bool True to work with WebGL, false for SVG. When true viewport scaled by devPixelRatio Source: CoordinateSystem.js, line 376 Returns: Viewport &lt;static&gt; invertY(p, viewport) Invert y with respect to viewport.h Parameters: Name Type Description p * Point to be transformed viewport * current viewport Source: CoordinateSystem.js, line 367 Returns: Point with y inverted with respect to viewport.h &lt;static&gt; reflectY(t) Return transform with y reflected wrt origin (y=-y) Parameters: Name Type Description t Transform Source: CoordinateSystem.js, line 317 Returns: transform, with y reflected (around 0) Type Transform &lt;static&gt; scale(p, f) Scale x applying f scale factor Parameters: Name Type Description p * Point to be scaled f Number Scale factor Source: CoordinateSystem.js, line 357 Returns: Point in CanvasContext (Scaled by devicePixelRation) × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"Draggable.html":{"id":"Draggable.html","title":"Class: Draggable","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: Draggable Draggable The Draggable class enables an element to be dragged and moved around within its parent element. It creates a draggable container with a handle that can be used to initiate the dragging action. The draggable element is positioned absolutely within its parent container and can be customized through various options. The class requires either a top or bottom position and either a left or right position to be specified through the options parameter. These determine the initial position of the draggable element within its parent container. The default positioning is bottom=20 and right=20. Features: Flexible positioning using top/bottom and left/right coordinates Customizable handle size and appearance Automatic position updates on window resize Touch-enabled dragging support Configurable spacing between handle and content new Draggable(element, parent [, options]) Creates a new Draggable instance. Parameters: Name Type Argument Description element HTMLElement The element to be made draggable parent HTMLElement | string The parent element where the draggable container will be appended. Can be either an HTMLElement or a CSS selector string options Object &lt;optional&gt; Configuration options for the draggable element Properties Name Type Argument Default Description top number &lt;optional&gt; The initial top position in pixels. Mutually exclusive with bottom bottom number &lt;optional&gt; 20 The initial bottom position in pixels. Mutually exclusive with top left number &lt;optional&gt; The initial left position in pixels. Mutually exclusive with right right number &lt;optional&gt; 20 The initial right position in pixels. Mutually exclusive with left handleSize number &lt;optional&gt; 10 The size of the drag handle in pixels handleGap number &lt;optional&gt; 5 The gap between the handle and the draggable content in pixels zindex number &lt;optional&gt; 200 The z-index of the draggable container handleColor string &lt;optional&gt; '#f0f0f0b3' The background color of the handle (supports rgba) Source: Draggable.js, line 20 Methods appendChild(element) Appends an HTML element to the draggable container and updates its position. Parameters: Name Type Description element HTMLElement The element to append to the draggable container Source: Draggable.js, line 85 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"EditorSvgAnnotation.html":{"id":"EditorSvgAnnotation.html","title":"Class: EditorSvgAnnotation","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: EditorSvgAnnotation EditorSvgAnnotation EditorSvgAnnotation enables creation and editing of SVG annotations in OpenLIME. It provides tools for drawing various shapes and managing annotations through a user interface. Features: Drawing tools: point, pin, line, box, circle Annotation editing and management Custom state and data storage Integration with annotation databases through callbacks Undo/redo functionality SVG export capabilities new EditorSvgAnnotation(viewer, layer [, options]) Creates an EditorSvgAnnotation instance Parameters: Name Type Argument Description viewer Viewer The OpenLIME viewer instance layer LayerSvgAnnotation The annotation layer to edit options Object &lt;optional&gt; Configuration options Properties Name Type Argument Default Description classes Object.&lt;string, {stroke: string, label: string}&gt; Annotation classes with colors and labels createCallback crudCallback &lt;optional&gt; Called when creating annotations updateCallback crudCallback &lt;optional&gt; Called when updating annotations deleteCallback crudCallback &lt;optional&gt; Called when deleting annotations enableState boolean &lt;optional&gt; false Whether to save viewer state with annotations customState customStateCallback &lt;optional&gt; Customize saved state data customData customDataCallback &lt;optional&gt; Customize annotation data selectedCallback selectedCallback &lt;optional&gt; Called when annotation is selected tools Object &lt;optional&gt; Custom tool configurations priority number &lt;optional&gt; 20000 Event handling priority Source: EditorSvgAnnotation.js, line 77 Example ```javascript // Create annotation layer const anno = new OpenLIME.Layer(options); viewer.addLayer('annotations', anno); // Initialize editor const editor = new OpenLIME.EditorSvgAnnotation(viewer, anno, { classes: { 'default': { stroke: '#000', label: 'Default' }, 'highlight': { stroke: '#ff0', label: 'Highlight' } } }); // Setup callbacks editor.createCallback = (anno) =&gt; { console.log(\"Created:\", anno); return saveToDatabase(anno); }; ``` Methods createAnnotation() Creates a new annotation Source: EditorSvgAnnotation.js, line 221 Returns: Type void deleteSelected() Deletes the selected annotation Source: EditorSvgAnnotation.js, line 499 Returns: Type void exportAnnotations() Exports all annotations as SVG Source: EditorSvgAnnotation.js, line 533 Returns: Type void redo() Performs a redo operation Source: EditorSvgAnnotation.js, line 639 Returns: Type void undo() Performs an undo operation Source: EditorSvgAnnotation.js, line 612 Returns: Type void × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"FocusContext.html":{"id":"FocusContext.html","title":"Class: FocusContext","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: FocusContext FocusContext FocusContext manages the focus+context visualization technique for lens-based interaction. It handles the distribution of user interactions between lens movement (focus) and camera movement (context) to maintain optimal viewing conditions. Key responsibilities: Maintains proper spacing between lens and viewport boundaries Distributes pan and zoom operations between lens and camera Ensures lens stays within valid viewport bounds Adapts camera transform to accommodate lens position Manages lens radius constraints new FocusContext() Source: FocusContext.js, line 34 Methods &lt;static&gt; adaptContext(viewport, focus, context, desiredScale) Adjusts the camera transform to ensure focus+context conditions are met for a given lens Parameters: Name Type Description viewport Viewport The current viewport focus Focus The lens object context Transform The camera transform to be updated desiredScale number Target scale for the camera transform Source: FocusContext.js, line 133 &lt;static&gt; pan(viewport, focus, context, delta, imageSize) Distributes a pan operation between lens movement and camera transform to maintain focus+context Parameters: Name Type Description viewport Viewport The current viewport focus Focus The lens object to be updated context Transform The camera transform to be updated delta Object Pan amount in dataset pixels Properties Name Type Description x number Horizontal pan amount y number Vertical pan amount imageSize Object Dataset dimensions Properties Name Type Description w number Dataset width h number Dataset height Source: FocusContext.js, line 48 &lt;static&gt; scale(camera, focus, context, dz) Distributes a scale operation between lens radius and camera zoom to maintain focus+context Parameters: Name Type Description camera Camera The camera object containing viewport and zoom constraints focus Focus The lens object to be updated context Transform The camera transform to be updated dz number Scale factor to be applied (multiplier) Source: FocusContext.js, line 83 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"Layer.html":{"id":"Layer.html","title":"Class: Layer","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: Layer Layer Layer is the core class for rendering content in OpenLIME. It manages raster data display, tile loading, and shader-based rendering. Features: Tile-based rendering with level-of-detail Shader-based visualization effects Automatic tile prefetching and caching Coordinate system transformations Animation and interpolation of shader parameters Support for multiple visualization modes Integration with layout systems for different data formats Layers can be used directly or serve as a base class for specialized layer types. The class uses a registration system where derived classes register themselves, allowing instantiation through the 'type' option. new Layer( [options]) Creates a Layer. Additionally, an object literal with Layer options can be specified. Signals are triggered when: ready: the size and layout of the layer is known update: some new tile is available, or some visualization parameters has changed loaded: is fired when all the images needed have been downloaded Parameters: Name Type Argument Description options Object &lt;optional&gt; Properties Name Type Default Description layout string | Layout 'image' The layout (the format of the input raster images). type string A string identifier to select the specific derived layer class to instantiate. id string The layer unique identifier. label string A string with a more comprehensive definition of the layer. If it exists, it is used in the UI layer menu, otherwise the id value is taken. transform Transform The relative coords from layer to canvas. visible bool true Whether to render the layer. zindex number Stack ordering value for the rendering of layers (higher zindex on top). overlay bool false Whether the layer must be rendered in overlay mode. prefetchBorder number 1 The threshold (in tile units) around the current camera position for which to prefetch tiles. mipmapBias number 0.2 Determine which texture is used when scale is not a power of 2. 0: use always the highest resulution, 1 the lowest, 0.5 switch halfway. shaders Object A map (shadersId, shader) of the shaders usable for the layer rendering. See @link {Shader}. controllers Array.&lt;Controller&gt; An array of UI device controllers active on the layer. sourceLayer Layer The layer from which to take the tiles (in order to avoid tile duplication). Source: Layer.js, line 67 Fires: Layer#event:ready - Fired when layer is initialized Layer#event:update - Fired when redraw is needed Layer#event:loaded - Fired when all tiles are loaded Layer#event:updateSize - Fired when layer size changes Example ```javascript // Create a basic image layer const layer = new OpenLIME.Layer({ layout: 'deepzoom', type: 'image', url: 'path/to/image.dzi', label: 'Main Image' }); // Add to viewer viewer.addLayer('main', layer); // Listen for events layer.addEvent('ready', () =&gt; { console.log('Layer initialized'); }); ``` Methods &lt;static&gt; computeLayersBBox(layers, discardHidden) Computes combined bounding box of multiple layers Parameters: Name Type Description layers Object.&lt;string, Layer&gt; Map of layers discardHidden boolean Whether to ignore hidden layers Source: Layer.js, line 401 Returns: Combined bounding box Type BoundingBox &lt;static&gt; computeLayersMinScale(layers, discardHidden) Computes minimum scale across layers Parameters: Name Type Description layers Object.&lt;string, Layer&gt; Map of layers discardHidden boolean Whether to ignore hidden layers Source: Layer.js, line 343 Returns: Minimum scale value Type number addControl(name, value) Adds a shader parameter control Parameters: Name Type Description name string Control identifier value * Initial value Source: Layer.js, line 437 Throws: If control already exists Type Error addShaderFilter(filter) Adds a filter to the current shader Parameters: Name Type Description filter Object Filter specification Source: Layer.js, line 170 Throws: If no shader is set Type Error boundingBox() Gets layer bounding box in scene coordinates Source: Layer.js, line 381 Returns: Bounding box Type BoundingBox clearShaderFilters(name) Removes all filters from the current shader Parameters: Name Type Description name Object Filter name Source: Layer.js, line 190 Throws: If no shader is set Type Error getControl(name) Gets the shader parameter control corresponding to name Parameters: Name Type Description name * The name of the control. return {*} The control Source: Layer.js, line 422 getMode() Gets the current shader visualization mode Source: Layer.js, line 289 Returns: Current mode or null if no shader Type string | null getModes() Gets available shader modes Source: Layer.js, line 299 Returns: Array of available modes Type Array.&lt;string&gt; getState( [stateMask]) Gets the current layer state Parameters: Name Type Argument Default Description stateMask Object &lt;optional&gt; null Optional mask to filter returned state properties Source: Layer.js, line 216 Returns: Current state object Type Object interpolateControls() Updates control interpolation Source: Layer.js, line 472 Returns: Whether all interpolations are complete Type boolean pixelSizePerMM() Gets pixel size in millimeters Source: Layer.js, line 372 Returns: Size of one pixel in mm Type number removeShaderFilter(name) Removes a filter from the current shader Parameters: Name Type Description name Object Filter name Source: Layer.js, line 180 Throws: If no shader is set Type Error scale() Gets layer scale Source: Layer.js, line 362 Returns: Current scale value Type number setControl(name, value [, dt] [, easing]) Sets a shader control value with optional animation Parameters: Name Type Argument Default Description name string Control identifier value * New value dt number &lt;optional&gt; Animation duration in ms easing string &lt;optional&gt; 'linear' Easing function Source: Layer.js, line 452 Fires: Layer#event:update setMode(mode) Sets shader visualization mode Parameters: Name Type Description mode string Mode to set Source: Layer.js, line 310 Fires: Layer#event:update setShader(id) Sets the active shader Parameters: Name Type Description id string Shader identifier from registered shaders Source: Layer.js, line 277 Fires: Layer#event:update Throws: If shader ID is not found Type Error setState(state [, dt] [, easing]) Sets the layer state with optional animation Parameters: Name Type Argument Default Description state Object State object with controls and mode dt number &lt;optional&gt; Animation duration in ms easing string &lt;optional&gt; 'linear' Easing function ('linear'|'ease-out'|'ease-in-out') Source: Layer.js, line 201 setTransform(tx) Sets the layer's transform Parameters: Name Type Description tx Transform New transform Source: Layer.js, line 266 Fires: Layer#event:updateSize setViewport(view) Sets the layer's viewport Parameters: Name Type Description view Object Viewport specification Properties Name Type Description x number X position y number Y position dx number Width dy number Height Source: Layer.js, line 160 Fires: Layer#event:update setVisible(visible) Sets layer visibility Parameters: Name Type Description visible boolean Whether layer should be visible Source: Layer.js, line 320 Fires: Layer#event:update setZindex(zindex) Sets layer rendering order Parameters: Name Type Description zindex number Stack order value Source: Layer.js, line 331 Fires: Layer#event:update Events ready The event is fired when a layer is initialized. Source: Layer.js, line 231 update The event is fired if a redraw is needed. Source: Layer.js, line 235 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"LayerAnnotation.html":{"id":"LayerAnnotation.html","title":"Class: LayerAnnotation","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: LayerAnnotation LayerAnnotation LayerAnnotation provides functionality for displaying and managing annotations overlaid on other layers. It supports both local and remote annotation data, selection management, and UI integration. Features: Display of text, graphics, and glyph annotations Remote annotation loading via JSON/HTTP Selection management Visibility toggling per annotation UI integration with annotation list Annotation event handling The layer automatically handles: Annotation data loading and parsing UI synchronization Visibility states Selection states Event propagation new LayerAnnotation( [options]) Instantiates a LayerAnnotation object. Parameters: Name Type Argument Description options Object &lt;optional&gt; An object literal with options that inherits from Layer. Properties Name Type Description style string Properties to style annotations. annotations string | Array The URL of the annotation data (JSON file or HTTP GET Request to an annotation server) or an array of annotations. Source: LayerAnnotation.js, line 58 Fires: LayerAnnotation#selected - Fired when annotation selection changes,event: with selected annotation as parameter LayerAnnotation#event:loaded - Fired when annotations are loaded Layer#update - Inherited from Layer,event: fired when redraw needed Layer#ready - Inherited from Layer,event: fired when layer is ready Example ```javascript // Create annotation layer from remote JSON const annoLayer = new OpenLIME.LayerAnnotation({ annotations: 'https://example.com/annotations.json', style: '.annotation { color: red; }', overlay: true }); // Listen for selection changes annoLayer.addEvent('selected', (annotation) =&gt; { console.log('Selected annotation:', annotation.label); }); // Add to viewer viewer.addLayer('annotations', annoLayer); ``` Extends Layer Methods addControl(name, value) Adds a shader parameter control Parameters: Name Type Description name string Control identifier value * Initial value Inherited From: Layer#addControl Overrides: Layer#addControl Source: Layer.js, line 437 Throws: If control already exists Type Error addShaderFilter(filter) Adds a filter to the current shader Parameters: Name Type Description filter Object Filter specification Inherited From: Layer#addShaderFilter Overrides: Layer#addShaderFilter Source: Layer.js, line 170 Throws: If no shader is set Type Error boundingBox() Gets layer bounding box in scene coordinates Inherited From: Layer#boundingBox Overrides: Layer#boundingBox Source: Layer.js, line 381 Returns: Bounding box Type BoundingBox clearShaderFilters(name) Removes all filters from the current shader Parameters: Name Type Description name Object Filter name Inherited From: Layer#clearShaderFilters Overrides: Layer#clearShaderFilters Source: Layer.js, line 190 Throws: If no shader is set Type Error getAnnotationById(id) Retrieves an annotation by its ID Parameters: Name Type Description id string Annotation identifier Source: LayerAnnotation.js, line 214 Returns: The found annotation or null if not found Type Annotation | null getControl(name) Gets the shader parameter control corresponding to name Parameters: Name Type Description name * The name of the control. return {*} The control Inherited From: Layer#getControl Overrides: Layer#getControl Source: Layer.js, line 422 getMode() Gets the current shader visualization mode Inherited From: Layer#getMode Overrides: Layer#getMode Source: Layer.js, line 289 Returns: Current mode or null if no shader Type string | null getModes() Gets available shader modes Inherited From: Layer#getModes Overrides: Layer#getModes Source: Layer.js, line 299 Returns: Array of available modes Type Array.&lt;string&gt; getState( [stateMask]) Gets the current layer state Parameters: Name Type Argument Default Description stateMask Object &lt;optional&gt; null Optional mask to filter returned state properties Inherited From: Layer#getState Overrides: Layer#getState Source: Layer.js, line 216 Returns: Current state object Type Object interpolateControls() Updates control interpolation Inherited From: Layer#interpolateControls Overrides: Layer#interpolateControls Source: Layer.js, line 472 Returns: Whether all interpolations are complete Type boolean pixelSizePerMM() Gets pixel size in millimeters Inherited From: Layer#pixelSizePerMM Overrides: Layer#pixelSizePerMM Source: Layer.js, line 372 Returns: Size of one pixel in mm Type number removeShaderFilter(name) Removes a filter from the current shader Parameters: Name Type Description name Object Filter name Inherited From: Layer#removeShaderFilter Overrides: Layer#removeShaderFilter Source: Layer.js, line 180 Throws: If no shader is set Type Error scale() Gets layer scale Inherited From: Layer#scale Overrides: Layer#scale Source: Layer.js, line 362 Returns: Current scale value Type number setControl(name, value [, dt] [, easing]) Sets a shader control value with optional animation Parameters: Name Type Argument Default Description name string Control identifier value * New value dt number &lt;optional&gt; Animation duration in ms easing string &lt;optional&gt; 'linear' Easing function Inherited From: Layer#setControl Overrides: Layer#setControl Source: Layer.js, line 452 Fires: Layer#event:update setMode(mode) Sets shader visualization mode Parameters: Name Type Description mode string Mode to set Inherited From: Layer#setMode Overrides: Layer#setMode Source: Layer.js, line 310 Fires: Layer#event:update setSelected(anno [, on]) Sets the selection state of an annotation Parameters: Name Type Argument Default Description anno Annotation The annotation to select/deselect on boolean &lt;optional&gt; true Whether to select (true) or deselect (false) Source: LayerAnnotation.js, line 236 Fires: LayerAnnotation#event:selected setShader(id) Sets the active shader Parameters: Name Type Description id string Shader identifier from registered shaders Inherited From: Layer#setShader Overrides: Layer#setShader Source: Layer.js, line 277 Fires: Layer#event:update Throws: If shader ID is not found Type Error setState(state [, dt] [, easing]) Sets the layer state with optional animation Parameters: Name Type Argument Default Description state Object State object with controls and mode dt number &lt;optional&gt; Animation duration in ms easing string &lt;optional&gt; 'linear' Easing function ('linear'|'ease-out'|'ease-in-out') Inherited From: Layer#setState Overrides: Layer#setState Source: Layer.js, line 201 setTransform(tx) Sets the layer's transform Parameters: Name Type Description tx Transform New transform Inherited From: Layer#setTransform Overrides: Layer#setTransform Source: Layer.js, line 266 Fires: Layer#event:updateSize setViewport(view) Sets the layer's viewport Parameters: Name Type Description view Object Viewport specification Properties Name Type Description x number X position y number Y position dx number Width dy number Height Inherited From: Layer#setViewport Overrides: Layer#setViewport Source: Layer.js, line 160 Fires: Layer#event:update setVisible(visible) Sets layer visibility Parameters: Name Type Description visible boolean Whether layer should be visible Inherited From: Layer#setVisible Overrides: Layer#setVisible Source: Layer.js, line 320 Fires: Layer#event:update setZindex(zindex) Sets layer rendering order Parameters: Name Type Description zindex number Stack order value Inherited From: Layer#setZindex Overrides: Layer#setZindex Source: Layer.js, line 331 Fires: Layer#event:update Events ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"LayerAnnotationImage.html":{"id":"LayerAnnotationImage.html","title":"Class: LayerAnnotationImage","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: LayerAnnotationImage LayerAnnotationImage LayerAnnotationImage extends LayerAnnotation to provide support for image-based annotations. Each annotation corresponds to a single tile in the layer, with customizable visibility and shader-based rendering. Features: Image-based annotation rendering Per-annotation visibility control Custom shader support for image processing Automatic texture management WebGL/WebGL2 compatibility Multi-format raster support The class handles: Image loading and caching Texture creation and binding Shader setup and compilation Tile visibility management WebGL state management new LayerAnnotationImage(options) Creates a new LayerAnnotationImage instance Parameters: Name Type Description options LayerAnnotationImageOptions Configuration options Source: LayerAnnotationImage.js, line 54 Throws: If path is not specified (warns in console) Type Error Example ```javascript // Create image annotation layer const imageAnnoLayer = new OpenLIME.LayerAnnotationImage({ url: 'annotations.json', path: './annotation-images/', format: 'vec4' }); // Configure visibility imageAnnoLayer.setAllTilesVisible(true); imageAnnoLayer.setTileVisible(0, false); // Hide first annotation // Add to viewer viewer.addLayer('imageAnnotations', imageAnnoLayer); ``` Extends LayerAnnotation Methods addControl(name, value) Adds a shader parameter control Parameters: Name Type Description name string Control identifier value * Initial value Inherited From: Layer#addControl Overrides: LayerAnnotation#addControl Source: Layer.js, line 437 Throws: If control already exists Type Error addShaderFilter(filter) Adds a filter to the current shader Parameters: Name Type Description filter Object Filter specification Inherited From: Layer#addShaderFilter Overrides: LayerAnnotation#addShaderFilter Source: Layer.js, line 170 Throws: If no shader is set Type Error boundingBox() Gets layer bounding box in scene coordinates Inherited From: Layer#boundingBox Overrides: LayerAnnotation#boundingBox Source: Layer.js, line 381 Returns: Bounding box Type BoundingBox clearShaderFilters(name) Removes all filters from the current shader Parameters: Name Type Description name Object Filter name Inherited From: Layer#clearShaderFilters Overrides: LayerAnnotation#clearShaderFilters Source: Layer.js, line 190 Throws: If no shader is set Type Error getAnnotationById(id) Retrieves an annotation by its ID Parameters: Name Type Description id string Annotation identifier Inherited From: LayerAnnotation#getAnnotationById Overrides: LayerAnnotation#getAnnotationById Source: LayerAnnotation.js, line 214 Returns: The found annotation or null if not found Type Annotation | null getControl(name) Gets the shader parameter control corresponding to name Parameters: Name Type Description name * The name of the control. return {*} The control Inherited From: Layer#getControl Overrides: LayerAnnotation#getControl Source: Layer.js, line 422 getMode() Gets the current shader visualization mode Inherited From: Layer#getMode Overrides: LayerAnnotation#getMode Source: Layer.js, line 289 Returns: Current mode or null if no shader Type string | null getModes() Gets available shader modes Inherited From: Layer#getModes Overrides: LayerAnnotation#getModes Source: Layer.js, line 299 Returns: Array of available modes Type Array.&lt;string&gt; getState( [stateMask]) Gets the current layer state Parameters: Name Type Argument Default Description stateMask Object &lt;optional&gt; null Optional mask to filter returned state properties Inherited From: Layer#getState Overrides: LayerAnnotation#getState Source: Layer.js, line 216 Returns: Current state object Type Object interpolateControls() Updates control interpolation Inherited From: Layer#interpolateControls Overrides: LayerAnnotation#interpolateControls Source: Layer.js, line 472 Returns: Whether all interpolations are complete Type boolean length() Gets the number of annotations in the layer Source: LayerAnnotationImage.js, line 92 Returns: Number of annotations Type number pixelSizePerMM() Gets pixel size in millimeters Inherited From: Layer#pixelSizePerMM Overrides: LayerAnnotation#pixelSizePerMM Source: Layer.js, line 372 Returns: Size of one pixel in mm Type number removeShaderFilter(name) Removes a filter from the current shader Parameters: Name Type Description name Object Filter name Inherited From: Layer#removeShaderFilter Overrides: LayerAnnotation#removeShaderFilter Source: Layer.js, line 180 Throws: If no shader is set Type Error scale() Gets layer scale Inherited From: Layer#scale Overrides: LayerAnnotation#scale Source: Layer.js, line 362 Returns: Current scale value Type number setAllTilesVisible(visible) Sets visibility for all annotations/tiles Parameters: Name Type Description visible boolean Whether all annotations should be visible Source: LayerAnnotationImage.js, line 111 setControl(name, value [, dt] [, easing]) Sets a shader control value with optional animation Parameters: Name Type Argument Default Description name string Control identifier value * New value dt number &lt;optional&gt; Animation duration in ms easing string &lt;optional&gt; 'linear' Easing function Inherited From: Layer#setControl Overrides: LayerAnnotation#setControl Source: Layer.js, line 452 Fires: Layer#event:update setMode(mode) Sets shader visualization mode Parameters: Name Type Description mode string Mode to set Inherited From: Layer#setMode Overrides: LayerAnnotation#setMode Source: Layer.js, line 310 Fires: Layer#event:update setSelected(anno [, on]) Sets the selection state of an annotation Parameters: Name Type Argument Default Description anno Annotation The annotation to select/deselect on boolean &lt;optional&gt; true Whether to select (true) or deselect (false) Inherited From: LayerAnnotation#setSelected Overrides: LayerAnnotation#setSelected Source: LayerAnnotation.js, line 236 Fires: LayerAnnotation#event:selected setShader(id) Sets the active shader Parameters: Name Type Description id string Shader identifier from registered shaders Inherited From: Layer#setShader Overrides: LayerAnnotation#setShader Source: Layer.js, line 277 Fires: Layer#event:update Throws: If shader ID is not found Type Error setState(state [, dt] [, easing]) Sets the layer state with optional animation Parameters: Name Type Argument Default Description state Object State object with controls and mode dt number &lt;optional&gt; Animation duration in ms easing string &lt;optional&gt; 'linear' Easing function ('linear'|'ease-out'|'ease-in-out') Inherited From: Layer#setState Overrides: LayerAnnotation#setState Source: Layer.js, line 201 setTileVisible(index, visible) Sets visibility for a specific annotation/tile Parameters: Name Type Description index number Index of the annotation visible boolean Whether the annotation should be visible Source: LayerAnnotationImage.js, line 101 setTransform(tx) Sets the layer's transform Parameters: Name Type Description tx Transform New transform Inherited From: Layer#setTransform Overrides: LayerAnnotation#setTransform Source: Layer.js, line 266 Fires: Layer#event:updateSize setViewport(view) Sets the layer's viewport Parameters: Name Type Description view Object Viewport specification Properties Name Type Description x number X position y number Y position dx number Width dy number Height Inherited From: Layer#setViewport Overrides: LayerAnnotation#setViewport Source: Layer.js, line 160 Fires: Layer#event:update setVisible(visible) Sets layer visibility Parameters: Name Type Description visible boolean Whether layer should be visible Inherited From: Layer#setVisible Overrides: LayerAnnotation#setVisible Source: Layer.js, line 320 Fires: Layer#event:update setZindex(zindex) Sets layer rendering order Parameters: Name Type Description zindex number Stack order value Inherited From: Layer#setZindex Overrides: LayerAnnotation#setZindex Source: Layer.js, line 331 Fires: Layer#event:update Events ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: LayerAnnotation#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: LayerAnnotation#event:update Source: Layer.js, line 235 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"LayerBRDF.html":{"id":"LayerBRDF.html","title":"Class: LayerBRDF","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: LayerBRDF LayerBRDF LayerBRDF implements real-time BRDF (Bidirectional Reflectance Distribution Function) rendering. The BRDF model describes how light reflects off a surface, taking into account: Diffuse reflection (rough, matte surfaces) Specular reflection (mirror-like reflections) Surface normals (microscopic surface orientation) Glossiness/roughness (surface micro-structure) Features: Real-time light direction control Multiple material channels support Customizable material properties Interactive lighting model Gamma correction Ambient light component Technical implementation: Uses normal mapping for surface detail Supports both linear and sRGB color spaces Implements spherical light projection Handles multi-channel textures GPU-accelerated rendering new LayerBRDF(options) Creates a new LayerBRDF instance Parameters: Name Type Description options LayerBRDFOptions Configuration options Source: LayerBRDF.js, line 71 Throws: If required channels (kd, normals) are not provided Type Error If rasters option is not empty Type Error Example ```javascript // Create BRDF layer with all channels const brdfLayer = new OpenLIME.LayerBRDF({ channels: { kd: 'diffuse.jpg', ks: 'specular.jpg', normals: 'normals.jpg', gloss: 'gloss.jpg' }, colorspaces: { kd: 'srgb', ks: 'linear' }, brightness: 1.2, gamma: 2.2 }); // Update light direction brdfLayer.setLight([0.5, 0.5], 500, 'ease-out'); ``` Extends Layer Methods &lt;static&gt; projectToFlattenedSphere(p) Projects a 2D point onto a flattened sphere using SGI trackball algorithm. This provides more intuitive light control by avoiding acceleration near edges. Based on SIGGRAPH 1988 paper on SGI trackball implementation. Parameters: Name Type Description p Array.&lt;number&gt; 2D point [x, y] in range [-1, 1] Source: LayerBRDF.js, line 168 Returns: 3D normalized vector [x, y, z] on flattened sphere Type Array.&lt;number&gt; &lt;static&gt; projectToSphere(p) Projects a 2D point onto a sphere surface Used for converting 2D mouse/touch input to 3D light direction Parameters: Name Type Description p Array.&lt;number&gt; 2D point [x, y] in range [-1, 1] Source: LayerBRDF.js, line 144 Returns: 3D normalized vector [x, y, z] on sphere surface Type Array.&lt;number&gt; addControl(name, value) Adds a shader parameter control Parameters: Name Type Description name string Control identifier value * Initial value Inherited From: Layer#addControl Overrides: Layer#addControl Source: Layer.js, line 437 Throws: If control already exists Type Error addShaderFilter(filter) Adds a filter to the current shader Parameters: Name Type Description filter Object Filter specification Inherited From: Layer#addShaderFilter Overrides: Layer#addShaderFilter Source: Layer.js, line 170 Throws: If no shader is set Type Error boundingBox() Gets layer bounding box in scene coordinates Inherited From: Layer#boundingBox Overrides: Layer#boundingBox Source: Layer.js, line 381 Returns: Bounding box Type BoundingBox clearShaderFilters(name) Removes all filters from the current shader Parameters: Name Type Description name Object Filter name Inherited From: Layer#clearShaderFilters Overrides: Layer#clearShaderFilters Source: Layer.js, line 190 Throws: If no shader is set Type Error getControl(name) Gets the shader parameter control corresponding to name Parameters: Name Type Description name * The name of the control. return {*} The control Inherited From: Layer#getControl Overrides: Layer#getControl Source: Layer.js, line 422 getMode() Gets the current shader visualization mode Inherited From: Layer#getMode Overrides: Layer#getMode Source: Layer.js, line 289 Returns: Current mode or null if no shader Type string | null getModes() Gets available shader modes Inherited From: Layer#getModes Overrides: Layer#getModes Source: Layer.js, line 299 Returns: Array of available modes Type Array.&lt;string&gt; getState( [stateMask]) Gets the current layer state Parameters: Name Type Argument Default Description stateMask Object &lt;optional&gt; null Optional mask to filter returned state properties Inherited From: Layer#getState Overrides: Layer#getState Source: Layer.js, line 216 Returns: Current state object Type Object pixelSizePerMM() Gets pixel size in millimeters Inherited From: Layer#pixelSizePerMM Overrides: Layer#pixelSizePerMM Source: Layer.js, line 372 Returns: Size of one pixel in mm Type number removeShaderFilter(name) Removes a filter from the current shader Parameters: Name Type Description name Object Filter name Inherited From: Layer#removeShaderFilter Overrides: Layer#removeShaderFilter Source: Layer.js, line 180 Throws: If no shader is set Type Error scale() Gets layer scale Inherited From: Layer#scale Overrides: Layer#scale Source: Layer.js, line 362 Returns: Current scale value Type number setControl(name, value [, dt] [, easing]) Sets a shader control value with optional animation Parameters: Name Type Argument Default Description name string Control identifier value * New value dt number &lt;optional&gt; Animation duration in ms easing string &lt;optional&gt; 'linear' Easing function Inherited From: Layer#setControl Overrides: Layer#setControl Source: Layer.js, line 452 Fires: Layer#event:update setLight(light [, dt] [, easing]) Sets the light direction with optional animation Parameters: Name Type Argument Default Description light Array.&lt;number&gt; 2D vector [x, y] representing light direction dt number &lt;optional&gt; Animation duration in milliseconds easing string &lt;optional&gt; 'linear' Animation easing function Source: LayerBRDF.js, line 193 setMode(mode) Sets shader visualization mode Parameters: Name Type Description mode string Mode to set Inherited From: Layer#setMode Overrides: Layer#setMode Source: Layer.js, line 310 Fires: Layer#event:update setShader(id) Sets the active shader Parameters: Name Type Description id string Shader identifier from registered shaders Inherited From: Layer#setShader Overrides: Layer#setShader Source: Layer.js, line 277 Fires: Layer#event:update Throws: If shader ID is not found Type Error setState(state [, dt] [, easing]) Sets the layer state with optional animation Parameters: Name Type Argument Default Description state Object State object with controls and mode dt number &lt;optional&gt; Animation duration in ms easing string &lt;optional&gt; 'linear' Easing function ('linear'|'ease-out'|'ease-in-out') Inherited From: Layer#setState Overrides: Layer#setState Source: Layer.js, line 201 setTransform(tx) Sets the layer's transform Parameters: Name Type Description tx Transform New transform Inherited From: Layer#setTransform Overrides: Layer#setTransform Source: Layer.js, line 266 Fires: Layer#event:updateSize setViewport(view) Sets the layer's viewport Parameters: Name Type Description view Object Viewport specification Properties Name Type Description x number X position y number Y position dx number Width dy number Height Inherited From: Layer#setViewport Overrides: Layer#setViewport Source: Layer.js, line 160 Fires: Layer#event:update setVisible(visible) Sets layer visibility Parameters: Name Type Description visible boolean Whether layer should be visible Inherited From: Layer#setVisible Overrides: Layer#setVisible Source: Layer.js, line 320 Fires: Layer#event:update setZindex(zindex) Sets layer rendering order Parameters: Name Type Description zindex number Stack order value Inherited From: Layer#setZindex Overrides: Layer#setZindex Source: Layer.js, line 331 Fires: Layer#event:update Events ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"LayerCombiner.html":{"id":"LayerCombiner.html","title":"Class: LayerCombiner","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: LayerCombiner LayerCombiner LayerCombiner provides functionality to combine multiple layers using framebuffer operations and custom shaders. It enables complex visual effects by compositing layers in real-time using GPU-accelerated rendering. Features: Real-time layer composition Custom shader-based effects Framebuffer management Dynamic texture allocation Resolution-independent rendering GPU-accelerated compositing Use Cases: Layer blending and mixing Image comparison tools Lens effects (see LayerLens) Custom visual effects Multi-layer compositing Technical Details: Creates framebuffers for each input layer Manages WebGL textures and resources Supports dynamic viewport resizing Handles shader-based composition Maintains proper resource cleanup new LayerCombiner(options) Creates a new LayerCombiner instance Parameters: Name Type Description options LayerCombinerOptions Configuration options Source: LayerCombiner.js, line 71 Throws: If rasters option is not empty (rasters should be defined in source layers) Type Error Example ```javascript // Create two base layers const baseLayer = new OpenLIME.Layer({ type: 'image', url: 'base.jpg' }); const overlayLayer = new OpenLIME.Layer({ type: 'image', url: 'overlay.jpg' }); // Create combiner with custom shader const combiner = new OpenLIME.Layer({ type: 'combiner', layers: [baseLayer, overlayLayer], visible: true }); // Set up blend shader const shader = new OpenLIME.ShaderCombiner(); shader.mode = 'blend'; combiner.shaders = { 'standard': shader }; combiner.setShader('standard'); // Add to viewer viewer.addLayer('combined', combiner); ``` Extends Layer Methods addControl(name, value) Adds a shader parameter control Parameters: Name Type Description name string Control identifier value * Initial value Inherited From: Layer#addControl Overrides: Layer#addControl Source: Layer.js, line 437 Throws: If control already exists Type Error addShaderFilter(filter) Adds a filter to the current shader Parameters: Name Type Description filter Object Filter specification Inherited From: Layer#addShaderFilter Overrides: Layer#addShaderFilter Source: Layer.js, line 170 Throws: If no shader is set Type Error clearShaderFilters(name) Removes all filters from the current shader Parameters: Name Type Description name Object Filter name Inherited From: Layer#clearShaderFilters Overrides: Layer#clearShaderFilters Source: Layer.js, line 190 Throws: If no shader is set Type Error getControl(name) Gets the shader parameter control corresponding to name Parameters: Name Type Description name * The name of the control. return {*} The control Inherited From: Layer#getControl Overrides: Layer#getControl Source: Layer.js, line 422 getMode() Gets the current shader visualization mode Inherited From: Layer#getMode Overrides: Layer#getMode Source: Layer.js, line 289 Returns: Current mode or null if no shader Type string | null getModes() Gets available shader modes Inherited From: Layer#getModes Overrides: Layer#getModes Source: Layer.js, line 299 Returns: Array of available modes Type Array.&lt;string&gt; getState( [stateMask]) Gets the current layer state Parameters: Name Type Argument Default Description stateMask Object &lt;optional&gt; null Optional mask to filter returned state properties Inherited From: Layer#getState Overrides: Layer#getState Source: Layer.js, line 216 Returns: Current state object Type Object interpolateControls() Updates control interpolation Inherited From: Layer#interpolateControls Overrides: Layer#interpolateControls Source: Layer.js, line 472 Returns: Whether all interpolations are complete Type boolean pixelSizePerMM() Gets pixel size in millimeters Inherited From: Layer#pixelSizePerMM Overrides: Layer#pixelSizePerMM Source: Layer.js, line 372 Returns: Size of one pixel in mm Type number removeShaderFilter(name) Removes a filter from the current shader Parameters: Name Type Description name Object Filter name Inherited From: Layer#removeShaderFilter Overrides: Layer#removeShaderFilter Source: Layer.js, line 180 Throws: If no shader is set Type Error setControl(name, value [, dt] [, easing]) Sets a shader control value with optional animation Parameters: Name Type Argument Default Description name string Control identifier value * New value dt number &lt;optional&gt; Animation duration in ms easing string &lt;optional&gt; 'linear' Easing function Inherited From: Layer#setControl Overrides: Layer#setControl Source: Layer.js, line 452 Fires: Layer#event:update setMode(mode) Sets shader visualization mode Parameters: Name Type Description mode string Mode to set Inherited From: Layer#setMode Overrides: Layer#setMode Source: Layer.js, line 310 Fires: Layer#event:update setShader(id) Sets the active shader Parameters: Name Type Description id string Shader identifier from registered shaders Inherited From: Layer#setShader Overrides: Layer#setShader Source: Layer.js, line 277 Fires: Layer#event:update Throws: If shader ID is not found Type Error setState(state [, dt] [, easing]) Sets the layer state with optional animation Parameters: Name Type Argument Default Description state Object State object with controls and mode dt number &lt;optional&gt; Animation duration in ms easing string &lt;optional&gt; 'linear' Easing function ('linear'|'ease-out'|'ease-in-out') Inherited From: Layer#setState Overrides: Layer#setState Source: Layer.js, line 201 setTransform(tx) Sets the layer's transform Parameters: Name Type Description tx Transform New transform Inherited From: Layer#setTransform Overrides: Layer#setTransform Source: Layer.js, line 266 Fires: Layer#event:updateSize setViewport(view) Sets the layer's viewport Parameters: Name Type Description view Object Viewport specification Properties Name Type Description x number X position y number Y position dx number Width dy number Height Inherited From: Layer#setViewport Overrides: Layer#setViewport Source: Layer.js, line 160 Fires: Layer#event:update setVisible(visible) Sets layer visibility Parameters: Name Type Description visible boolean Whether layer should be visible Inherited From: Layer#setVisible Overrides: Layer#setVisible Source: Layer.js, line 320 Fires: Layer#event:update setZindex(zindex) Sets layer rendering order Parameters: Name Type Description zindex number Stack order value Inherited From: Layer#setZindex Overrides: Layer#setZindex Source: Layer.js, line 331 Fires: Layer#event:update Events ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"LayerDstretch.html":{"id":"LayerDstretch.html","title":"Class: LayerDstretch","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: LayerDstretch LayerDstretch LayerDStretch implements the DStretch (Decorrelation Stretch) algorithm for image enhancement. This technique is particularly useful in archaeology and rock art documentation for revealing faint pictographs and petroglyphs. DStretch works by: Converting RGB colors to a decorrelated color space Equalizing and stretching the color distributions Converting back to RGB for display Features: Real-time image enhancement Interactive control of enhancement parameters Automatic color statistics computation Support for large images through tiling GPU-accelerated processing Light direction control Technical Implementation: Uses Principal Component Analysis (PCA) for color decorrelation Supports custom transformation matrices Implements dynamic sampling for color statistics Handles WebGL texture management Supports progressive loading new LayerDstretch(options) Creates a new LayerDStretch instance Parameters: Name Type Description options LayerDStretchOptions Configuration options Source: LayerDstretch.js, line 57 Throws: If url option is not provided Type Error Example ```javascript // Create DStretch layer const dstretchLayer = new OpenLIME.Layer({ type: 'dstretch', url: 'image.jpg', visible: true }); // Add to viewer viewer.addLayer('enhanced', dstretchLayer); // Adjust enhancement parameters dstretchLayer.setLight([0.5, 0.3], 500); // Animate to new enhancement ``` Extends LayerImage Methods addControl(name, value) Adds a shader parameter control Parameters: Name Type Description name string Control identifier value * Initial value Inherited From: Layer#addControl Overrides: LayerImage#addControl Source: Layer.js, line 437 Throws: If control already exists Type Error addShaderFilter(filter) Adds a filter to the current shader Parameters: Name Type Description filter Object Filter specification Inherited From: Layer#addShaderFilter Overrides: LayerImage#addShaderFilter Source: Layer.js, line 170 Throws: If no shader is set Type Error boundingBox() Gets layer bounding box in scene coordinates Inherited From: Layer#boundingBox Overrides: LayerImage#boundingBox Source: Layer.js, line 381 Returns: Bounding box Type BoundingBox clearShaderFilters(name) Removes all filters from the current shader Parameters: Name Type Description name Object Filter name Inherited From: Layer#clearShaderFilters Overrides: LayerImage#clearShaderFilters Source: Layer.js, line 190 Throws: If no shader is set Type Error getControl(name) Gets the shader parameter control corresponding to name Parameters: Name Type Description name * The name of the control. return {*} The control Inherited From: Layer#getControl Overrides: LayerImage#getControl Source: Layer.js, line 422 getMode() Gets the current shader visualization mode Inherited From: Layer#getMode Overrides: LayerImage#getMode Source: Layer.js, line 289 Returns: Current mode or null if no shader Type string | null getModes() Gets available shader modes Inherited From: Layer#getModes Overrides: LayerImage#getModes Source: Layer.js, line 299 Returns: Array of available modes Type Array.&lt;string&gt; getState( [stateMask]) Gets the current layer state Parameters: Name Type Argument Default Description stateMask Object &lt;optional&gt; null Optional mask to filter returned state properties Inherited From: Layer#getState Overrides: LayerImage#getState Source: Layer.js, line 216 Returns: Current state object Type Object interpolateControls() Updates control interpolation Inherited From: Layer#interpolateControls Overrides: LayerImage#interpolateControls Source: Layer.js, line 472 Returns: Whether all interpolations are complete Type boolean pixelSizePerMM() Gets pixel size in millimeters Inherited From: Layer#pixelSizePerMM Overrides: LayerImage#pixelSizePerMM Source: Layer.js, line 372 Returns: Size of one pixel in mm Type number removeShaderFilter(name) Removes a filter from the current shader Parameters: Name Type Description name Object Filter name Inherited From: Layer#removeShaderFilter Overrides: LayerImage#removeShaderFilter Source: Layer.js, line 180 Throws: If no shader is set Type Error scale() Gets layer scale Inherited From: Layer#scale Overrides: LayerImage#scale Source: Layer.js, line 362 Returns: Current scale value Type number setControl(name, value [, dt] [, easing]) Sets a shader control value with optional animation Parameters: Name Type Argument Default Description name string Control identifier value * New value dt number &lt;optional&gt; Animation duration in ms easing string &lt;optional&gt; 'linear' Easing function Inherited From: Layer#setControl Overrides: LayerImage#setControl Source: Layer.js, line 452 Fires: Layer#event:update setLight(value [, dt]) Sets the enhancement parameters through a light-like interface Parameters: Name Type Argument Description value Array.&lt;number&gt; Two values controlling the enhancement transformation dt number &lt;optional&gt; Animation duration in milliseconds Source: LayerDstretch.js, line 85 Fires: Layer#event:update setMode(mode) Sets shader visualization mode Parameters: Name Type Description mode string Mode to set Inherited From: Layer#setMode Overrides: LayerImage#setMode Source: Layer.js, line 310 Fires: Layer#event:update setShader(id) Sets the active shader Parameters: Name Type Description id string Shader identifier from registered shaders Inherited From: Layer#setShader Overrides: LayerImage#setShader Source: Layer.js, line 277 Fires: Layer#event:update Throws: If shader ID is not found Type Error setState(state [, dt] [, easing]) Sets the layer state with optional animation Parameters: Name Type Argument Default Description state Object State object with controls and mode dt number &lt;optional&gt; Animation duration in ms easing string &lt;optional&gt; 'linear' Easing function ('linear'|'ease-out'|'ease-in-out') Inherited From: Layer#setState Overrides: LayerImage#setState Source: Layer.js, line 201 setTransform(tx) Sets the layer's transform Parameters: Name Type Description tx Transform New transform Inherited From: Layer#setTransform Overrides: LayerImage#setTransform Source: Layer.js, line 266 Fires: Layer#event:updateSize setViewport(view) Sets the layer's viewport Parameters: Name Type Description view Object Viewport specification Properties Name Type Description x number X position y number Y position dx number Width dy number Height Inherited From: Layer#setViewport Overrides: LayerImage#setViewport Source: Layer.js, line 160 Fires: Layer#event:update setVisible(visible) Sets layer visibility Parameters: Name Type Description visible boolean Whether layer should be visible Inherited From: Layer#setVisible Overrides: LayerImage#setVisible Source: Layer.js, line 320 Fires: Layer#event:update setZindex(zindex) Sets layer rendering order Parameters: Name Type Description zindex number Stack order value Inherited From: Layer#setZindex Overrides: LayerImage#setZindex Source: Layer.js, line 331 Fires: Layer#event:update Events ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: LayerImage#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: LayerImage#event:update Source: Layer.js, line 235 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"LayerImage.html":{"id":"LayerImage.html","title":"Class: LayerImage","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: LayerImage LayerImage LayerImage provides fundamental image rendering capabilities in OpenLIME. It serves as both a standalone layer for basic image display and a foundation for more complex image-based layers. Features: Single image rendering WebGL-based display Automatic format handling Layout system integration Shader-based processing Technical Details: Uses WebGL textures for image data Supports various color formats (vec3, vec4) Integrates with OpenLIME layout system Manages raster data automatically Provides standard RGB shader by default new LayerImage(options) Creates a new LayerImage instance Parameters: Name Type Description options LayerImageOptions Configuration options Source: LayerImage.js, line 54 Throws: If rasters options is not empty (should be auto-configured) Type Error If no URL is provided and layout has no URLs Type Error Example ```javascript // Direct instantiation const imageLayer = new OpenLIME.LayerImage({ url: 'image.jpg', layout: 'image', format: 'vec4' }); viewer.addLayer('main', imageLayer); // Using Layer factory const factoryLayer = new OpenLIME.Layer({ type: 'image', url: 'image.jpg', layout: 'image' }); viewer.addLayer('factory', factoryLayer); ``` Extends Layer Methods addControl(name, value) Adds a shader parameter control Parameters: Name Type Description name string Control identifier value * Initial value Inherited From: Layer#addControl Overrides: Layer#addControl Source: Layer.js, line 437 Throws: If control already exists Type Error addShaderFilter(filter) Adds a filter to the current shader Parameters: Name Type Description filter Object Filter specification Inherited From: Layer#addShaderFilter Overrides: Layer#addShaderFilter Source: Layer.js, line 170 Throws: If no shader is set Type Error boundingBox() Gets layer bounding box in scene coordinates Inherited From: Layer#boundingBox Overrides: Layer#boundingBox Source: Layer.js, line 381 Returns: Bounding box Type BoundingBox clearShaderFilters(name) Removes all filters from the current shader Parameters: Name Type Description name Object Filter name Inherited From: Layer#clearShaderFilters Overrides: Layer#clearShaderFilters Source: Layer.js, line 190 Throws: If no shader is set Type Error getControl(name) Gets the shader parameter control corresponding to name Parameters: Name Type Description name * The name of the control. return {*} The control Inherited From: Layer#getControl Overrides: Layer#getControl Source: Layer.js, line 422 getMode() Gets the current shader visualization mode Inherited From: Layer#getMode Overrides: Layer#getMode Source: Layer.js, line 289 Returns: Current mode or null if no shader Type string | null getModes() Gets available shader modes Inherited From: Layer#getModes Overrides: Layer#getModes Source: Layer.js, line 299 Returns: Array of available modes Type Array.&lt;string&gt; getState( [stateMask]) Gets the current layer state Parameters: Name Type Argument Default Description stateMask Object &lt;optional&gt; null Optional mask to filter returned state properties Inherited From: Layer#getState Overrides: Layer#getState Source: Layer.js, line 216 Returns: Current state object Type Object interpolateControls() Updates control interpolation Inherited From: Layer#interpolateControls Overrides: Layer#interpolateControls Source: Layer.js, line 472 Returns: Whether all interpolations are complete Type boolean pixelSizePerMM() Gets pixel size in millimeters Inherited From: Layer#pixelSizePerMM Overrides: Layer#pixelSizePerMM Source: Layer.js, line 372 Returns: Size of one pixel in mm Type number removeShaderFilter(name) Removes a filter from the current shader Parameters: Name Type Description name Object Filter name Inherited From: Layer#removeShaderFilter Overrides: Layer#removeShaderFilter Source: Layer.js, line 180 Throws: If no shader is set Type Error scale() Gets layer scale Inherited From: Layer#scale Overrides: Layer#scale Source: Layer.js, line 362 Returns: Current scale value Type number setControl(name, value [, dt] [, easing]) Sets a shader control value with optional animation Parameters: Name Type Argument Default Description name string Control identifier value * New value dt number &lt;optional&gt; Animation duration in ms easing string &lt;optional&gt; 'linear' Easing function Inherited From: Layer#setControl Overrides: Layer#setControl Source: Layer.js, line 452 Fires: Layer#event:update setMode(mode) Sets shader visualization mode Parameters: Name Type Description mode string Mode to set Inherited From: Layer#setMode Overrides: Layer#setMode Source: Layer.js, line 310 Fires: Layer#event:update setShader(id) Sets the active shader Parameters: Name Type Description id string Shader identifier from registered shaders Inherited From: Layer#setShader Overrides: Layer#setShader Source: Layer.js, line 277 Fires: Layer#event:update Throws: If shader ID is not found Type Error setState(state [, dt] [, easing]) Sets the layer state with optional animation Parameters: Name Type Argument Default Description state Object State object with controls and mode dt number &lt;optional&gt; Animation duration in ms easing string &lt;optional&gt; 'linear' Easing function ('linear'|'ease-out'|'ease-in-out') Inherited From: Layer#setState Overrides: Layer#setState Source: Layer.js, line 201 setTransform(tx) Sets the layer's transform Parameters: Name Type Description tx Transform New transform Inherited From: Layer#setTransform Overrides: Layer#setTransform Source: Layer.js, line 266 Fires: Layer#event:updateSize setViewport(view) Sets the layer's viewport Parameters: Name Type Description view Object Viewport specification Properties Name Type Description x number X position y number Y position dx number Width dy number Height Inherited From: Layer#setViewport Overrides: Layer#setViewport Source: Layer.js, line 160 Fires: Layer#event:update setVisible(visible) Sets layer visibility Parameters: Name Type Description visible boolean Whether layer should be visible Inherited From: Layer#setVisible Overrides: Layer#setVisible Source: Layer.js, line 320 Fires: Layer#event:update setZindex(zindex) Sets layer rendering order Parameters: Name Type Description zindex number Stack order value Inherited From: Layer#setZindex Overrides: Layer#setZindex Source: Layer.js, line 331 Fires: Layer#event:update Events ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"LayerLens.html":{"id":"LayerLens.html","title":"Class: LayerLens","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: LayerLens LayerLens LayerLens implements a magnifying lens effect that can display content from one or two layers. It provides an interactive lens that can be moved and resized, showing different layer content inside and outside the lens area. Features: Interactive lens positioning and sizing Support for base and overlay layers Animated transitions Customizable border appearance Dashboard UI integration Optimized viewport rendering Technical Details: Uses framebuffer composition for layer blending Implements viewport optimization for performance Handles coordinate transformations between systems Supports animated parameter changes Manages WebGL resources efficiently new LayerLens(options) Creates a new LayerLens instance Parameters: Name Type Description options LayerLensOptions Configuration options Source: LayerLens.js, line 61 Throws: If camera is not provided Type Error Example ```javascript // Create lens with base layer const lens = new OpenLIME.LayerLens({ camera: viewer.camera, radius: 150, borderEnable: true, borderColor: [0, 0, 0, 1] }); // Set layers lens.setBaseLayer(baseLayer); lens.setOverlayLayer(overlayLayer); // Animate lens position lens.setCenter(500, 500, 1000, 'ease-out'); // Add to viewer viewer.addLayer('lens', lens); ``` Extends LayerCombiner Methods addControl(name, value) Adds a shader parameter control Parameters: Name Type Description name string Control identifier value * Initial value Inherited From: Layer#addControl Overrides: LayerCombiner#addControl Source: Layer.js, line 437 Throws: If control already exists Type Error addShaderFilter(filter) Adds a filter to the current shader Parameters: Name Type Description filter Object Filter specification Inherited From: Layer#addShaderFilter Overrides: LayerCombiner#addShaderFilter Source: Layer.js, line 170 Throws: If no shader is set Type Error clearShaderFilters(name) Removes all filters from the current shader Parameters: Name Type Description name Object Filter name Inherited From: Layer#clearShaderFilters Overrides: LayerCombiner#clearShaderFilters Source: Layer.js, line 190 Throws: If no shader is set Type Error getBorderColor() Gets current border color Source: LayerLens.js, line 213 Returns: RGBA color array Type Array.&lt;number&gt; getBorderWidth() Gets current border width Source: LayerLens.js, line 221 Returns: Border width in pixels Type number getControl(name) Gets the shader parameter control corresponding to name Parameters: Name Type Description name * The name of the control. return {*} The control Inherited From: Layer#getControl Overrides: LayerCombiner#getControl Source: Layer.js, line 422 getCurrentCenter() Gets current lens center position Source: LayerLens.js, line 195 Returns: Center position in scene coordinates Type Object getMode() Gets the current shader visualization mode Inherited From: Layer#getMode Overrides: LayerCombiner#getMode Source: Layer.js, line 289 Returns: Current mode or null if no shader Type string | null getModes() Gets available shader modes Inherited From: Layer#getModes Overrides: LayerCombiner#getModes Source: Layer.js, line 299 Returns: Array of available modes Type Array.&lt;string&gt; getRadius() Gets current lens radius Source: LayerLens.js, line 176 Returns: Current radius in pixels Type number getState( [stateMask]) Gets the current layer state Parameters: Name Type Argument Default Description stateMask Object &lt;optional&gt; null Optional mask to filter returned state properties Inherited From: Layer#getState Overrides: LayerCombiner#getState Source: Layer.js, line 216 Returns: Current state object Type Object getTargetCenter() Gets target lens position for ongoing animation Source: LayerLens.js, line 204 Returns: Target position in scene coordinates Type Object interpolateControls() Updates control interpolation Inherited From: Layer#interpolateControls Overrides: LayerCombiner#interpolateControls Source: Layer.js, line 472 Returns: Whether all interpolations are complete Type boolean pixelSizePerMM() Gets pixel size in millimeters Inherited From: Layer#pixelSizePerMM Overrides: LayerCombiner#pixelSizePerMM Source: Layer.js, line 372 Returns: Size of one pixel in mm Type number regenerateFrameBuffers(layer) Sets the overlay layer (shown inside lens) Parameters: Name Type Description layer Layer Overlay layer instance Source: LayerLens.js, line 152 removeOverlayLayer() Removes the overlay layer, returning to single layer mode Source: LayerLens.js, line 121 removeShaderFilter(name) Removes a filter from the current shader Parameters: Name Type Description name Object Filter name Inherited From: Layer#removeShaderFilter Overrides: LayerCombiner#removeShaderFilter Source: Layer.js, line 180 Throws: If no shader is set Type Error setBaseLayer(layer) Sets the base layer (shown outside lens) Parameters: Name Type Description layer Layer Base layer instance Source: LayerLens.js, line 131 Fires: Layer#event:update setCenter(x, y [, delayms] [, easing]) Sets lens center position with optional animation Parameters: Name Type Argument Default Description x number X coordinate in scene space y number Y coordinate in scene space delayms number &lt;optional&gt; 100 Animation duration easing string &lt;optional&gt; 'linear' Animation easing function Source: LayerLens.js, line 187 setControl(name, value [, dt] [, easing]) Sets a shader control value with optional animation Parameters: Name Type Argument Default Description name string Control identifier value * New value dt number &lt;optional&gt; Animation duration in ms easing string &lt;optional&gt; 'linear' Easing function Inherited From: Layer#setControl Overrides: LayerCombiner#setControl Source: Layer.js, line 452 Fires: Layer#event:update setMode(mode) Sets shader visualization mode Parameters: Name Type Description mode string Mode to set Inherited From: Layer#setMode Overrides: LayerCombiner#setMode Source: Layer.js, line 310 Fires: Layer#event:update setOverlayLayer(layer) Sets the overlay layer (shown inside lens) Parameters: Name Type Description layer Layer Overlay layer instance Source: LayerLens.js, line 140 setRadius(radius [, delayms] [, easing]) Sets lens radius with optional animation Parameters: Name Type Argument Default Description radius number New radius in pixels delayms number &lt;optional&gt; 100 Animation duration easing string &lt;optional&gt; 'linear' Animation easing function Source: LayerLens.js, line 168 setShader(id) Sets the active shader Parameters: Name Type Description id string Shader identifier from registered shaders Inherited From: Layer#setShader Overrides: LayerCombiner#setShader Source: Layer.js, line 277 Fires: Layer#event:update Throws: If shader ID is not found Type Error setState(state [, dt] [, easing]) Sets the layer state with optional animation Parameters: Name Type Argument Default Description state Object State object with controls and mode dt number &lt;optional&gt; Animation duration in ms easing string &lt;optional&gt; 'linear' Easing function ('linear'|'ease-out'|'ease-in-out') Inherited From: Layer#setState Overrides: LayerCombiner#setState Source: Layer.js, line 201 setTransform(tx) Sets the layer's transform Parameters: Name Type Description tx Transform New transform Inherited From: Layer#setTransform Overrides: LayerCombiner#setTransform Source: Layer.js, line 266 Fires: Layer#event:updateSize setViewport(view) Sets the layer's viewport Parameters: Name Type Description view Object Viewport specification Properties Name Type Description x number X position y number Y position dx number Width dy number Height Inherited From: Layer#setViewport Overrides: LayerCombiner#setViewport Source: Layer.js, line 160 Fires: Layer#event:update setVisible(visible) Sets layer visibility and updates dashboard if present Parameters: Name Type Description visible boolean Whether layer should be visible Inherited From: Layer#setVisible Overrides: LayerCombiner#setVisible Source: LayerLens.js, line 107 Fires: Layer#event:update setZindex(zindex) Sets layer rendering order Parameters: Name Type Description zindex number Stack order value Inherited From: Layer#setZindex Overrides: LayerCombiner#setZindex Source: Layer.js, line 331 Fires: Layer#event:update Events ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: LayerCombiner#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: LayerCombiner#event:update Source: Layer.js, line 235 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"LayerMaskedImage.html":{"id":"LayerMaskedImage.html","title":"Class: LayerMaskedImage","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: LayerMaskedImage LayerMaskedImage LayerMaskedImage provides specialized handling for masked scalar images with bilinear interpolation. It implements custom texture sampling and masking operations through WebGL shaders. Features: Custom scalar image handling Bilinear interpolation with masking WebGL shader-based processing Support for both WebGL 1 and 2 Nearest-neighbor texture filtering Masked value visualization Technical Details: Uses LUMINANCE format for single-channel data Implements custom bilinear sampling in shader Handles mask values through alpha channel Supports value rescaling (255.0/254.0 scale with -1.0/254.0 bias) Uses custom texture parameters for proper sampling Shader Implementation: Performs bilinear interpolation in shader Handles masked values (0 = masked) Implements value rescaling Provides visualization of masked areas (in red) Uses texelFetch for precise sampling new LayerMaskedImage(options) Creates a new LayerMaskedImage instance Parameters: Name Type Description options LayerMaskedImageOptions Configuration options Source: LayerMaskedImage.js, line 54 Throws: If rasters options is not empty Type Error If url is not provided and layout has no URLs Type Error Example ```javascript // Create masked image layer const maskedLayer = new OpenLIME.Layer({ type: 'maskedimage', url: 'masked-data.png', format: 'vec4' }); // Add to viewer viewer.addLayer('masked', maskedLayer); ``` Extends Layer Methods addControl(name, value) Adds a shader parameter control Parameters: Name Type Description name string Control identifier value * Initial value Inherited From: Layer#addControl Overrides: Layer#addControl Source: Layer.js, line 437 Throws: If control already exists Type Error addShaderFilter(filter) Adds a filter to the current shader Parameters: Name Type Description filter Object Filter specification Inherited From: Layer#addShaderFilter Overrides: Layer#addShaderFilter Source: Layer.js, line 170 Throws: If no shader is set Type Error boundingBox() Gets layer bounding box in scene coordinates Inherited From: Layer#boundingBox Overrides: Layer#boundingBox Source: Layer.js, line 381 Returns: Bounding box Type BoundingBox clearShaderFilters(name) Removes all filters from the current shader Parameters: Name Type Description name Object Filter name Inherited From: Layer#clearShaderFilters Overrides: Layer#clearShaderFilters Source: Layer.js, line 190 Throws: If no shader is set Type Error getControl(name) Gets the shader parameter control corresponding to name Parameters: Name Type Description name * The name of the control. return {*} The control Inherited From: Layer#getControl Overrides: Layer#getControl Source: Layer.js, line 422 getMode() Gets the current shader visualization mode Inherited From: Layer#getMode Overrides: Layer#getMode Source: Layer.js, line 289 Returns: Current mode or null if no shader Type string | null getModes() Gets available shader modes Inherited From: Layer#getModes Overrides: Layer#getModes Source: Layer.js, line 299 Returns: Array of available modes Type Array.&lt;string&gt; getState( [stateMask]) Gets the current layer state Parameters: Name Type Argument Default Description stateMask Object &lt;optional&gt; null Optional mask to filter returned state properties Inherited From: Layer#getState Overrides: Layer#getState Source: Layer.js, line 216 Returns: Current state object Type Object interpolateControls() Updates control interpolation Inherited From: Layer#interpolateControls Overrides: Layer#interpolateControls Source: Layer.js, line 472 Returns: Whether all interpolations are complete Type boolean pixelSizePerMM() Gets pixel size in millimeters Inherited From: Layer#pixelSizePerMM Overrides: Layer#pixelSizePerMM Source: Layer.js, line 372 Returns: Size of one pixel in mm Type number removeShaderFilter(name) Removes a filter from the current shader Parameters: Name Type Description name Object Filter name Inherited From: Layer#removeShaderFilter Overrides: Layer#removeShaderFilter Source: Layer.js, line 180 Throws: If no shader is set Type Error scale() Gets layer scale Inherited From: Layer#scale Overrides: Layer#scale Source: Layer.js, line 362 Returns: Current scale value Type number setControl(name, value [, dt] [, easing]) Sets a shader control value with optional animation Parameters: Name Type Argument Default Description name string Control identifier value * New value dt number &lt;optional&gt; Animation duration in ms easing string &lt;optional&gt; 'linear' Easing function Inherited From: Layer#setControl Overrides: Layer#setControl Source: Layer.js, line 452 Fires: Layer#event:update setMode(mode) Sets shader visualization mode Parameters: Name Type Description mode string Mode to set Inherited From: Layer#setMode Overrides: Layer#setMode Source: Layer.js, line 310 Fires: Layer#event:update setShader(id) Sets the active shader Parameters: Name Type Description id string Shader identifier from registered shaders Inherited From: Layer#setShader Overrides: Layer#setShader Source: Layer.js, line 277 Fires: Layer#event:update Throws: If shader ID is not found Type Error setState(state [, dt] [, easing]) Sets the layer state with optional animation Parameters: Name Type Argument Default Description state Object State object with controls and mode dt number &lt;optional&gt; Animation duration in ms easing string &lt;optional&gt; 'linear' Easing function ('linear'|'ease-out'|'ease-in-out') Inherited From: Layer#setState Overrides: Layer#setState Source: Layer.js, line 201 setTransform(tx) Sets the layer's transform Parameters: Name Type Description tx Transform New transform Inherited From: Layer#setTransform Overrides: Layer#setTransform Source: Layer.js, line 266 Fires: Layer#event:updateSize setViewport(view) Sets the layer's viewport Parameters: Name Type Description view Object Viewport specification Properties Name Type Description x number X position y number Y position dx number Width dy number Height Inherited From: Layer#setViewport Overrides: Layer#setViewport Source: Layer.js, line 160 Fires: Layer#event:update setVisible(visible) Sets layer visibility Parameters: Name Type Description visible boolean Whether layer should be visible Inherited From: Layer#setVisible Overrides: Layer#setVisible Source: Layer.js, line 320 Fires: Layer#event:update setZindex(zindex) Sets layer rendering order Parameters: Name Type Description zindex number Stack order value Inherited From: Layer#setZindex Overrides: Layer#setZindex Source: Layer.js, line 331 Fires: Layer#event:update Events ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"LayerNeuralRTI.html":{"id":"LayerNeuralRTI.html","title":"Class: LayerNeuralRTI","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: LayerNeuralRTI LayerNeuralRTI LayerNeuralRTI implements real-time Neural Reflectance Transformation Imaging. This layer uses a neural network to perform real-time relighting of images, offering improved quality and performance compared to traditional RTI approaches. Features: Neural network-based relighting Adaptive quality scaling Frame rate optimization Progressive refinement Multi-plane texture support WebGL acceleration Technical Details: Uses 3-layer neural network Supports multiple color spaces Implements adaptive tile processing Handles dynamic quality adjustment Manages frame buffer operations Coordinates light transformations Performance Optimizations: Dynamic resolution scaling FPS-based quality adjustment Progressive refinement system Tile caching Batch processing new LayerNeuralRTI(options) Creates a new LayerNeuralRTI instance Parameters: Name Type Description options LayerNeuralRTIOptions Configuration options Source: LayerNeuralRTI.js, line 66 Example ```javascript // Create Neural RTI layer const neuralRTI = new OpenLIME.Layer({ type: 'neural', url: 'config.json', layout: 'deepzoom', convergenceSpeed: 1.2, maxTiles: 40 }); // Add to viewer viewer.addLayer('rti', neuralRTI); // Change light direction neuralRTI.setLight([0.5, 0.3], 1000); ``` Extends Layer Methods addControl(name, value) Adds a shader parameter control Parameters: Name Type Description name string Control identifier value * Initial value Inherited From: Layer#addControl Overrides: Layer#addControl Source: Layer.js, line 437 Throws: If control already exists Type Error addShaderFilter(filter) Adds a filter to the current shader Parameters: Name Type Description filter Object Filter specification Inherited From: Layer#addShaderFilter Overrides: Layer#addShaderFilter Source: Layer.js, line 170 Throws: If no shader is set Type Error boundingBox() Gets layer bounding box in scene coordinates Inherited From: Layer#boundingBox Overrides: Layer#boundingBox Source: Layer.js, line 381 Returns: Bounding box Type BoundingBox clearShaderFilters(name) Removes all filters from the current shader Parameters: Name Type Description name Object Filter name Inherited From: Layer#clearShaderFilters Overrides: Layer#clearShaderFilters Source: Layer.js, line 190 Throws: If no shader is set Type Error getControl(name) Gets the shader parameter control corresponding to name Parameters: Name Type Description name * The name of the control. return {*} The control Inherited From: Layer#getControl Overrides: Layer#getControl Source: Layer.js, line 422 getMode() Gets the current shader visualization mode Inherited From: Layer#getMode Overrides: Layer#getMode Source: Layer.js, line 289 Returns: Current mode or null if no shader Type string | null getModes() Gets available shader modes Inherited From: Layer#getModes Overrides: Layer#getModes Source: Layer.js, line 299 Returns: Array of available modes Type Array.&lt;string&gt; getState( [stateMask]) Gets the current layer state Parameters: Name Type Argument Default Description stateMask Object &lt;optional&gt; null Optional mask to filter returned state properties Inherited From: Layer#getState Overrides: Layer#getState Source: Layer.js, line 216 Returns: Current state object Type Object pixelSizePerMM() Gets pixel size in millimeters Inherited From: Layer#pixelSizePerMM Overrides: Layer#pixelSizePerMM Source: Layer.js, line 372 Returns: Size of one pixel in mm Type number removeShaderFilter(name) Removes a filter from the current shader Parameters: Name Type Description name Object Filter name Inherited From: Layer#removeShaderFilter Overrides: Layer#removeShaderFilter Source: Layer.js, line 180 Throws: If no shader is set Type Error scale() Gets layer scale Inherited From: Layer#scale Overrides: Layer#scale Source: Layer.js, line 362 Returns: Current scale value Type number setControl(name, value [, dt] [, easing]) Sets a shader control value with optional animation Parameters: Name Type Argument Default Description name string Control identifier value * New value dt number &lt;optional&gt; Animation duration in ms easing string &lt;optional&gt; 'linear' Easing function Inherited From: Layer#setControl Overrides: Layer#setControl Source: Layer.js, line 452 Fires: Layer#event:update setLight(light [, dt]) Sets light direction with optional animation Parameters: Name Type Argument Description light Array.&lt;number&gt; Light direction vector [x, y] dt number &lt;optional&gt; Animation duration in milliseconds Source: LayerNeuralRTI.js, line 114 setMode(mode) Sets shader visualization mode Parameters: Name Type Description mode string Mode to set Inherited From: Layer#setMode Overrides: Layer#setMode Source: Layer.js, line 310 Fires: Layer#event:update setShader(id) Sets the active shader Parameters: Name Type Description id string Shader identifier from registered shaders Inherited From: Layer#setShader Overrides: Layer#setShader Source: Layer.js, line 277 Fires: Layer#event:update Throws: If shader ID is not found Type Error setState(state [, dt] [, easing]) Sets the layer state with optional animation Parameters: Name Type Argument Default Description state Object State object with controls and mode dt number &lt;optional&gt; Animation duration in ms easing string &lt;optional&gt; 'linear' Easing function ('linear'|'ease-out'|'ease-in-out') Inherited From: Layer#setState Overrides: Layer#setState Source: Layer.js, line 201 setTransform(tx) Sets the layer's transform Parameters: Name Type Description tx Transform New transform Inherited From: Layer#setTransform Overrides: Layer#setTransform Source: Layer.js, line 266 Fires: Layer#event:updateSize setViewport(view) Sets the layer's viewport Parameters: Name Type Description view Object Viewport specification Properties Name Type Description x number X position y number Y position dx number Width dy number Height Inherited From: Layer#setViewport Overrides: Layer#setViewport Source: Layer.js, line 160 Fires: Layer#event:update setVisible(visible) Sets layer visibility Parameters: Name Type Description visible boolean Whether layer should be visible Inherited From: Layer#setVisible Overrides: Layer#setVisible Source: Layer.js, line 320 Fires: Layer#event:update setZindex(zindex) Sets layer rendering order Parameters: Name Type Description zindex number Stack order value Inherited From: Layer#setZindex Overrides: Layer#setZindex Source: Layer.js, line 331 Fires: Layer#event:update Events ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"LayerRTI.html":{"id":"LayerRTI.html","title":"Class: LayerRTI","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: LayerRTI LayerRTI LayerRTI implements Reflectance Transformation Imaging (RTI) visualization. RTI is an imaging technique that captures surface reflectance data to enable interactive relighting of an object from different directions. The layer handles the 'relight' data format, which consists of: info.json: Contains RTI parameters and configuration plane_*.jpg: Series of coefficient images normals.jpg: Optional normal map (when using normals=true) Features: Interactive relighting Multiple layout support Normal map integration Light direction control Animation support World rotation handling Technical Details: Uses coefficient-based relighting Supports multiple image planes Handles various tiling schemes Manages WebGL resources Coordinates light transformations Data Format Support: Relight JSON configuration Multiple layout systems JPEG coefficient planes Optional normal maps IIP image protocol new LayerRTI(options) Creates a new LayerRTI instance Parameters: Name Type Description options LayerRTIOptions Configuration options Source: LayerRTI.js, line 70 See: Relight on GitHub Throws: If rasters options is not empty Type Error If url is not provided Type Error Example ```javascript // Create RTI layer with deepzoom layout const rtiLayer = new OpenLIME.Layer({ type: 'rti', url: 'path/to/info.json', layout: 'deepzoom', normals: true }); // Add to viewer viewer.addLayer('rti', rtiLayer); // Change light direction with animation rtiLayer.setLight([0.5, 0.5], 1000); ``` Extends Layer Methods addControl(name, value) Adds a shader parameter control Parameters: Name Type Description name string Control identifier value * Initial value Inherited From: Layer#addControl Overrides: Layer#addControl Source: Layer.js, line 437 Throws: If control already exists Type Error addShaderFilter(filter) Adds a filter to the current shader Parameters: Name Type Description filter Object Filter specification Inherited From: Layer#addShaderFilter Overrides: Layer#addShaderFilter Source: Layer.js, line 170 Throws: If no shader is set Type Error boundingBox() Gets layer bounding box in scene coordinates Inherited From: Layer#boundingBox Overrides: Layer#boundingBox Source: Layer.js, line 381 Returns: Bounding box Type BoundingBox clearShaderFilters(name) Removes all filters from the current shader Parameters: Name Type Description name Object Filter name Inherited From: Layer#clearShaderFilters Overrides: Layer#clearShaderFilters Source: Layer.js, line 190 Throws: If no shader is set Type Error getControl(name) Gets the shader parameter control corresponding to name Parameters: Name Type Description name * The name of the control. return {*} The control Inherited From: Layer#getControl Overrides: Layer#getControl Source: Layer.js, line 422 getMode() Gets the current shader visualization mode Inherited From: Layer#getMode Overrides: Layer#getMode Source: Layer.js, line 289 Returns: Current mode or null if no shader Type string | null getModes() Gets available shader modes Inherited From: Layer#getModes Overrides: Layer#getModes Source: Layer.js, line 299 Returns: Array of available modes Type Array.&lt;string&gt; getState( [stateMask]) Gets the current layer state Parameters: Name Type Argument Default Description stateMask Object &lt;optional&gt; null Optional mask to filter returned state properties Inherited From: Layer#getState Overrides: Layer#getState Source: Layer.js, line 216 Returns: Current state object Type Object pixelSizePerMM() Gets pixel size in millimeters Inherited From: Layer#pixelSizePerMM Overrides: Layer#pixelSizePerMM Source: Layer.js, line 372 Returns: Size of one pixel in mm Type number removeShaderFilter(name) Removes a filter from the current shader Parameters: Name Type Description name Object Filter name Inherited From: Layer#removeShaderFilter Overrides: Layer#removeShaderFilter Source: Layer.js, line 180 Throws: If no shader is set Type Error scale() Gets layer scale Inherited From: Layer#scale Overrides: Layer#scale Source: Layer.js, line 362 Returns: Current scale value Type number setControl(name, value [, dt] [, easing]) Sets a shader control value with optional animation Parameters: Name Type Argument Default Description name string Control identifier value * New value dt number &lt;optional&gt; Animation duration in ms easing string &lt;optional&gt; 'linear' Easing function Inherited From: Layer#setControl Overrides: Layer#setControl Source: Layer.js, line 452 Fires: Layer#event:update setLight(light [, dt]) Sets the light direction with optional animation Parameters: Name Type Argument Description light Array.&lt;number&gt; Light direction vector [x, y] dt number &lt;optional&gt; Animation duration in milliseconds Source: LayerRTI.js, line 122 setMode(mode) Sets shader visualization mode Parameters: Name Type Description mode string Mode to set Inherited From: Layer#setMode Overrides: Layer#setMode Source: Layer.js, line 310 Fires: Layer#event:update setShader(id) Sets the active shader Parameters: Name Type Description id string Shader identifier from registered shaders Inherited From: Layer#setShader Overrides: Layer#setShader Source: Layer.js, line 277 Fires: Layer#event:update Throws: If shader ID is not found Type Error setState(state [, dt] [, easing]) Sets the layer state with optional animation Parameters: Name Type Argument Default Description state Object State object with controls and mode dt number &lt;optional&gt; Animation duration in ms easing string &lt;optional&gt; 'linear' Easing function ('linear'|'ease-out'|'ease-in-out') Inherited From: Layer#setState Overrides: Layer#setState Source: Layer.js, line 201 setTransform(tx) Sets the layer's transform Parameters: Name Type Description tx Transform New transform Inherited From: Layer#setTransform Overrides: Layer#setTransform Source: Layer.js, line 266 Fires: Layer#event:updateSize setViewport(view) Sets the layer's viewport Parameters: Name Type Description view Object Viewport specification Properties Name Type Description x number X position y number Y position dx number Width dy number Height Inherited From: Layer#setViewport Overrides: Layer#setViewport Source: Layer.js, line 160 Fires: Layer#event:update setVisible(visible) Sets layer visibility Parameters: Name Type Description visible boolean Whether layer should be visible Inherited From: Layer#setVisible Overrides: Layer#setVisible Source: Layer.js, line 320 Fires: Layer#event:update setZindex(zindex) Sets layer rendering order Parameters: Name Type Description zindex number Stack order value Inherited From: Layer#setZindex Overrides: Layer#setZindex Source: Layer.js, line 331 Fires: Layer#event:update Events ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: Layer#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: Layer#event:update Source: Layer.js, line 235 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"LayerSvgAnnotation.html":{"id":"LayerSvgAnnotation.html","title":"Class: LayerSvgAnnotation","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: LayerSvgAnnotation LayerSvgAnnotation LayerSvgAnnotation provides SVG-based annotation capabilities in OpenLIME. It renders SVG elements directly on the canvas overlay, outside the WebGL context, enabling rich vector graphics annotations with interactive features. Features: SVG-based vector annotations Custom styling per annotation class Interactive selection Shadow DOM isolation Dynamic SVG transformation Event handling Custom update callbacks Technical Details: Uses SVG overlay for rendering Handles coordinate system transformations Manages DOM element lifecycle Supports custom class styling Implements visibility management Provides selection mechanisms new LayerSvgAnnotation( [options]) Creates a new LayerSvgAnnotation instance Parameters: Name Type Argument Description options LayerSvgAnnotationOptions &lt;optional&gt; Configuration options Source: LayerSvgAnnotation.js, line 72 Example ```javascript // Create SVG annotation layer with custom classes const annotationLayer = new OpenLIME.Layer({ type: 'svg_annotations', classes: { 'highlight': { stroke: '#ff0', label: 'Highlight' }, 'comment': { stroke: '#0f0', label: 'Comment' } }, onClick: (annotation) =&gt; { console.log('Clicked:', annotation.label); }, shadow: true }); // Add to viewer viewer.addLayer('annotations', annotationLayer); ``` Extends LayerAnnotation Methods addControl(name, value) Adds a shader parameter control Parameters: Name Type Description name string Control identifier value * Initial value Inherited From: Layer#addControl Overrides: LayerAnnotation#addControl Source: Layer.js, line 437 Throws: If control already exists Type Error addShaderFilter(filter) Adds a filter to the current shader Parameters: Name Type Description filter Object Filter specification Inherited From: Layer#addShaderFilter Overrides: LayerAnnotation#addShaderFilter Source: Layer.js, line 170 Throws: If no shader is set Type Error boundingBox() Gets layer bounding box in scene coordinates Inherited From: Layer#boundingBox Overrides: LayerAnnotation#boundingBox Source: Layer.js, line 381 Returns: Bounding box Type BoundingBox clearSelected() Clears all annotation selections Overrides: LayerAnnotation#clearSelected Source: LayerSvgAnnotation.js, line 156 clearShaderFilters(name) Removes all filters from the current shader Parameters: Name Type Description name Object Filter name Inherited From: Layer#clearShaderFilters Overrides: LayerAnnotation#clearShaderFilters Source: Layer.js, line 190 Throws: If no shader is set Type Error getAnnotationById(id) Retrieves an annotation by its ID Parameters: Name Type Description id string Annotation identifier Inherited From: LayerAnnotation#getAnnotationById Overrides: LayerAnnotation#getAnnotationById Source: LayerAnnotation.js, line 214 Returns: The found annotation or null if not found Type Annotation | null getControl(name) Gets the shader parameter control corresponding to name Parameters: Name Type Description name * The name of the control. return {*} The control Inherited From: Layer#getControl Overrides: LayerAnnotation#getControl Source: Layer.js, line 422 getMode() Gets the current shader visualization mode Inherited From: Layer#getMode Overrides: LayerAnnotation#getMode Source: Layer.js, line 289 Returns: Current mode or null if no shader Type string | null getModes() Gets available shader modes Inherited From: Layer#getModes Overrides: LayerAnnotation#getModes Source: Layer.js, line 299 Returns: Array of available modes Type Array.&lt;string&gt; getState( [stateMask]) Gets the current layer state Parameters: Name Type Argument Default Description stateMask Object &lt;optional&gt; null Optional mask to filter returned state properties Inherited From: Layer#getState Overrides: LayerAnnotation#getState Source: Layer.js, line 216 Returns: Current state object Type Object getSvgGroupTransform(transform [, inverse]) Calculates SVG group transform string Parameters: Name Type Argument Default Description transform Transform Current view transform inverse boolean &lt;optional&gt; false Whether to return inverse transform Source: LayerSvgAnnotation.js, line 212 Returns: SVG transform attribute value Type string interpolateControls() Updates control interpolation Inherited From: Layer#interpolateControls Overrides: LayerAnnotation#interpolateControls Source: Layer.js, line 472 Returns: Whether all interpolations are complete Type boolean pixelSizePerMM() Gets pixel size in millimeters Inherited From: Layer#pixelSizePerMM Overrides: LayerAnnotation#pixelSizePerMM Source: Layer.js, line 372 Returns: Size of one pixel in mm Type number removeShaderFilter(name) Removes a filter from the current shader Parameters: Name Type Description name Object Filter name Inherited From: Layer#removeShaderFilter Overrides: LayerAnnotation#removeShaderFilter Source: Layer.js, line 180 Throws: If no shader is set Type Error scale() Gets layer scale Inherited From: Layer#scale Overrides: LayerAnnotation#scale Source: Layer.js, line 362 Returns: Current scale value Type number setControl(name, value [, dt] [, easing]) Sets a shader control value with optional animation Parameters: Name Type Argument Default Description name string Control identifier value * New value dt number &lt;optional&gt; Animation duration in ms easing string &lt;optional&gt; 'linear' Easing function Inherited From: Layer#setControl Overrides: LayerAnnotation#setControl Source: Layer.js, line 452 Fires: Layer#event:update setMode(mode) Sets shader visualization mode Parameters: Name Type Description mode string Mode to set Inherited From: Layer#setMode Overrides: LayerAnnotation#setMode Source: Layer.js, line 310 Fires: Layer#event:update setSelected(anno [, on]) Sets selection state of an annotation Parameters: Name Type Argument Default Description anno Annotation The annotation to select/deselect on boolean &lt;optional&gt; true Whether to select (true) or deselect (false) Overrides: LayerAnnotation#setSelected Source: LayerSvgAnnotation.js, line 168 setShader(id) Sets the active shader Parameters: Name Type Description id string Shader identifier from registered shaders Inherited From: Layer#setShader Overrides: LayerAnnotation#setShader Source: Layer.js, line 277 Fires: Layer#event:update Throws: If shader ID is not found Type Error setState(state [, dt] [, easing]) Sets the layer state with optional animation Parameters: Name Type Argument Default Description state Object State object with controls and mode dt number &lt;optional&gt; Animation duration in ms easing string &lt;optional&gt; 'linear' Easing function ('linear'|'ease-out'|'ease-in-out') Inherited From: Layer#setState Overrides: LayerAnnotation#setState Source: Layer.js, line 201 setTransform(tx) Sets the layer's transform Parameters: Name Type Description tx Transform New transform Inherited From: Layer#setTransform Overrides: LayerAnnotation#setTransform Source: Layer.js, line 266 Fires: Layer#event:updateSize setViewport(view) Sets the layer's viewport Parameters: Name Type Description view Object Viewport specification Properties Name Type Description x number X position y number Y position dx number Width dy number Height Inherited From: Layer#setViewport Overrides: LayerAnnotation#setViewport Source: Layer.js, line 160 Fires: Layer#event:update setVisible(visible) Sets visibility of the annotation layer Updates both SVG display and underlying layer visibility Parameters: Name Type Description visible boolean Whether layer should be visible Inherited From: Layer#setVisible Overrides: LayerAnnotation#setVisible Source: LayerSvgAnnotation.js, line 147 Fires: Layer#event:update setZindex(zindex) Sets layer rendering order Parameters: Name Type Description zindex number Stack order value Inherited From: Layer#setZindex Overrides: LayerAnnotation#setZindex Source: Layer.js, line 331 Fires: Layer#event:update Events ready The event is fired when a layer is initialized. Inherited From: Layer#event:ready Overrides: LayerAnnotation#event:ready Source: Layer.js, line 231 update The event is fired if a redraw is needed. Inherited From: Layer#event:update Overrides: LayerAnnotation#event:update Source: Layer.js, line 235 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"Layout.html":{"id":"Layout.html","title":"Class: Layout","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: Layout Layout Layout manages image formats and tiling schemes in OpenLIME. This class is responsible for: Managing different image formats Handling tiling schemes Coordinating tile loading Converting between coordinate systems Managing tile priorities Format Support: Single-resolution images: Direct URL to image file Supports all standard web formats (jpg, png, etc) Tiled formats: DeepZoom (Microsoft): Uses .dzi config file Google Maps: Direct directory structure Zoomify: Uses ImageProperties.xml IIIF: Standard server interface TarZoom: OpenLIME's optimized format new Layout(url, type [, options]) Creates a new Layout instance Parameters: Name Type Argument Description url string URL to image or configuration file type LayoutType Type of image layout options LayoutOptions &lt;optional&gt; Additional configuration Source: Layout.js, line 84 Fires: Layout#event:ready - When layout is initialized and ready for use Layout#event:updateSize - When layout dimensions change Throws: If layout type is unknown or module not loaded Type Error Example ```javascript // Single image const imageLayout = new Layout('image.jpg', 'image'); // Deep Zoom const dzLayout = new Layout('tiles.dzi', 'deepzoom'); // Google Maps format const googleLayout = new Layout('tiles/', 'google', { width: 2000, height: 1500 }); ``` Methods available(viewport, transform, layerTransform, border, bias, tiles) Gets tiles available for rendering Parameters: Name Type Description viewport Object Current viewport transform Transform Current transform layerTransform Transform Layer transform border number Border size bias number Mipmap bias tiles Map Existing tiles Source: Layout.js, line 260 Returns: Map of available tiles Type Object.&lt;number, Tile&gt; boundingBox() Gets layout bounds Source: Layout.js, line 194 Returns: Layout boundaries Type BoundingBox getTileSize() Gets tile dimensions Source: Layout.js, line 113 Returns: [width, height] of tiles Type Array.&lt;number&gt; &lt;abstract&gt; getTileURL(id, tile) Gets URL for specific tile Parameters: Name Type Description id number Channel identifier tile Tile Tile object Source: Layout.js, line 186 Returns: Tile URL Type string getViewportBox(viewport, transform, layerT) Calculates viewport bounding box Parameters: Name Type Description viewport Object Viewport parameters transform Transform Current transform layerT Transform Layer transform Source: Layout.js, line 276 Returns: Viewport bounds in image space Type BoundingBox imageUrl(url, plane) Constructs URL for specific image plane Parameters: Name Type Description url string Base URL plane string Plane identifier Source: Layout.js, line 174 Returns: Complete URL Type string needed(viewport, transform, layerTransform, border, bias, tiles [, maxtiles]) Determines required tiles for rendering Parameters: Name Type Argument Default Description viewport Object Current viewport transform Transform Current transform layerTransform Transform Layer transform border number Border size bias number Mipmap bias tiles Map Existing tiles maxtiles number &lt;optional&gt; 8 Maximum tiles to return Source: Layout.js, line 239 Returns: Array of needed tiles Type Array.&lt;Tile&gt; tileCoords(tile) Calculates tile coordinates Parameters: Name Type Description tile Tile Tile to calculate coordinates for Source: Layout.js, line 204 Returns: Image and texture coordinates Type Object Type Definitions Type Supported image layout types including both single-resolution and multi-resolution formats. image: Standard web image formats (jpg, png, gif, etc.) deepzoom: Microsoft Deep Zoom format with root tile &gt; 1px deepzoom1px: Microsoft Deep Zoom format with 1px root tile google: Google Maps tiling scheme zoomify: Zoomify tiling format iiif: International Image Interoperability Framework iip: Internet Imaging Protocol tarzoom: OpenLIME custom format (single TAR of DeepZoom pyramid) itarzoom: OpenLIME custom interleaved TAR format Type: 'image' | 'deepzoom' | 'deepzoom1px' | 'google' | 'zoomify' | 'iiif' | 'iip' | 'tarzoom' | 'itarzoom' Source: LayoutTiles.js, line 26 Events ready The event is fired when a layout is ready to be drawn(the single-resolution image is downloaded or the multi-resolution structure has been initialized). Source: Layout.js, line 158 ready The event is fired when a layout is ready to be drawn(the single-resolution image is downloaded or the multi-resolution structure has been initialized). Source: LayoutTiles.js, line 138 updateSize The event is fired when a layout size is modified (and the scene extension must be recomputed at canvas level). Source: LayoutTiles.js, line 234 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"LayoutTileImages.html":{"id":"LayoutTileImages.html","title":"Class: LayoutTileImages","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: LayoutTileImages LayoutTileImages LayoutTileImages class manages collections of image tiles with associated regions. Each tile represents an independent image with its own position and dimensions in the layout space. Tiles can be individually shown or hidden and are loaded from annotation files or external descriptors. new LayoutTileImages(url, type [, options]) Creates a new LayoutTileImages instance. Parameters: Name Type Argument Description url string | null URL to the annotation file containing tile descriptors, or null if descriptors will be set later type string The layout type (should be 'tile_images') options Object &lt;optional&gt; Configuration options inherited from Layout Source: LayoutTileImages.js, line 31 Extends Layout Methods available(viewport, transform, layerTransform, border, bias, tiles) Gets tiles currently available for rendering. Parameters: Name Type Description viewport Viewport Current viewport transform Transform Current transform layerTransform Transform Layer-specific transform border number Border size in viewport units bias number Resolution bias (unused in this layout) tiles Map.&lt;number, Tile&gt; Available tiles Overrides: Layout#available Source: LayoutTileImages.js, line 269 Returns: Map of tile index to tile object for visible, loaded tiles Type Object.&lt;number, Tile&gt; boundingBox() Gets the layout's bounding box. Overrides: Layout#boundingBox Source: LayoutTileImages.js, line 117 Returns: The bounding box containing all tile regions Type BoundingBox getTileSize() Gets the tile size. For this layout, tiles don't have a fixed size. Overrides: Layout#getTileSize Source: LayoutTileImages.js, line 58 Returns: Returns [0, 0] as tiles have variable sizes Type Array.&lt;number&gt; getTileURL(id, tile) Gets the URL for a specific tile. Parameters: Name Type Description id number Channel/raster ID tile Tile Tile object Overrides: Layout#getTileURL Source: LayoutTileImages.js, line 159 Returns: URL to fetch tile image Type string getViewportBox(viewport, transform, layerT) Calculates viewport bounding box Parameters: Name Type Description viewport Object Viewport parameters transform Transform Current transform layerT Transform Layer transform Inherited From: Layout#getViewportBox Overrides: Layout#getViewportBox Source: Layout.js, line 276 Returns: Viewport bounds in image space Type BoundingBox imageUrl(url, plane) Constructs URL for specific image plane Parameters: Name Type Description url string Base URL plane string Plane identifier Inherited From: Layout#imageUrl Overrides: Layout#imageUrl Source: Layout.js, line 174 Returns: Complete URL Type string index(level, x, y) Maps tile coordinates to a linear index. In this layout, x directly maps to the index as tiles are stored in a flat list. Parameters: Name Type Description level number Zoom level (unused in this layout) x number X coordinate (used as index) y number Y coordinate (unused in this layout) Source: LayoutTileImages.js, line 193 Returns: Linear index of the tile Type number needed(viewport, transform, layerTransform, border, bias, tiles [, maxtiles]) Determines which tiles are needed for the current view. Parameters: Name Type Argument Default Description viewport Viewport Current viewport transform Transform Current transform layerTransform Transform Layer-specific transform border number Border size in viewport units bias number Resolution bias (unused in this layout) tiles Map.&lt;number, Tile&gt; Currently available tiles maxtiles number &lt;optional&gt; 8 Maximum number of tiles to return Overrides: Layout#needed Source: LayoutTileImages.js, line 231 Returns: Array of needed tiles sorted by distance to viewport center Type Array.&lt;Tile&gt; newTile(index) Creates a new tile instance with properties from its descriptor. Parameters: Name Type Description index number Index of the tile descriptor Overrides: Layout#newTile Source: LayoutTileImages.js, line 299 Returns: New tile instance with region and image properties Type Tile setAllTilesVisible(visible) Sets visibility for all tiles. Parameters: Name Type Description visible boolean Visibility state to set for all tiles Source: LayoutTileImages.js, line 177 setTileDescriptors(tileDescriptors) Sets tile descriptors programmatically instead of loading from a file. Parameters: Name Type Description tileDescriptors Array.&lt;Annotation&gt; Array of tile descriptors Source: LayoutTileImages.js, line 146 Fires: Layout#event:ready setTileVisible(index, visible) Sets visibility for a specific tile. Parameters: Name Type Description index number Index of the tile visible boolean Visibility state to set Source: LayoutTileImages.js, line 169 tileCoords(tile) Gets coordinates for a tile in both image space and texture space. Parameters: Name Type Description tile Tile The tile to get coordinates for Overrides: Layout#tileCoords Source: LayoutTileImages.js, line 205 Returns: Coordinate data Type Object .coords - Image space coordinates [x,y,z, x,y,z, x,y,z, x,y,z] Type Float32Array .tcoords - Texture coordinates [u,v, u,v, u,v, u,v] Type Float32Array tileCount() Gets the total number of tiles in the layout. Source: LayoutTileImages.js, line 333 Returns: Number of tile descriptors Type number Type Definitions Type Supported image layout types including both single-resolution and multi-resolution formats. image: Standard web image formats (jpg, png, gif, etc.) deepzoom: Microsoft Deep Zoom format with root tile &gt; 1px deepzoom1px: Microsoft Deep Zoom format with 1px root tile google: Google Maps tiling scheme zoomify: Zoomify tiling format iiif: International Image Interoperability Framework iip: Internet Imaging Protocol tarzoom: OpenLIME custom format (single TAR of DeepZoom pyramid) itarzoom: OpenLIME custom interleaved TAR format Type: 'image' | 'deepzoom' | 'deepzoom1px' | 'google' | 'zoomify' | 'iiif' | 'iip' | 'tarzoom' | 'itarzoom' Inherited From: Layout#Type Overrides: Layout#Type Source: LayoutTiles.js, line 26 Events ready The event is fired when a layout is ready to be drawn(the single-resolution image is downloaded or the multi-resolution structure has been initialized). Inherited From: Layout#event:ready Overrides: Layout#event:ready Source: Layout.js, line 158 updateSize The event is fired when a layout size is modified (and the scene extension must be recomputed at canvas level). Inherited From: Layout#event:updateSize Overrides: Layout#event:updateSize Source: LayoutTiles.js, line 234 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"LayoutTiles.html":{"id":"LayoutTiles.html","title":"Class: LayoutTiles","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: LayoutTiles LayoutTiles The Layout class is responsible for specifying the data formats (images) managed by OpenLIME. All web single-resolution image types (jpg, png, gif, etc...) are supported as well as the most common tiled image formats (deepzoom, zoomify, IIIF, google maps), which are suitable for large images. Single-resolution images The URL is the address of the file (for instance, 'https://my.example/image.jpg'). Tiled images They can be specified in a variety of ways depending on the format chosen. deepzoom - The root tile of the image pyramid has a size &gt; 1px (typical value is 254px). It is defined by the URL of the .dzi file (for instance, 'https://my.example/image.dzi'). See: DeepZoom deepzoom1px - The root tile of the image pyramid has a size = 1px. It is defined by the URL of the .dzi file (for instance, 'https://my.example/image.dzi'). See: DeepZoom google - The URL points directly to the directory containing the pyramid of images (for instance, 'https://my.example/image'). The standard does not require any configuration file, so it is mandatory to indicate in the options the width and height in pixels of the original image. See: Google Maps zoomify - The URL indicates the location of Zoomify configuration file (for instance, 'https://my.example/image/ImageProperties.xml'). See: Zoomify iip - The server parameter (optional) indicates the URL of the IIPImage endpoint (for example '/fcgi-bin/iipsrv.fcgi'). The URL parameter indicates either just the name of the path and image file (for instance 'image.tif') if the server parameter has been set or the full IIP URL if not (for instance '/fcgi-bin/iipsrv.fcgi?FIF=image.tif' or 'https://you.server//fcgi-bin/iipsrv.fcgi?FIF=image.tif' if image is hosted elsewhere) See: IIPImage Server iiif - According to the standard, the URL is the address of a IIIF server (for instance, 'https://myiiifserver.example/'). See: IIIF tarzoom and itarzoom - This is a custom format of the OpenLIME framework. It can be described as the TAR of a DeepZoom (all the DeepZoom image pyramid is stored in a single file). It takes advantage of the fact that current web servers are able to handle partial-content HTTP requests. Tarzoom facilitates the work of the server, which is not penalised by having to manage a file system with many small files. The URL is the address of the .tzi file (for instance, 'https://my.example/image.tzi'). Warning: tarzoom|itarzoom may not work on older web servers. new LayoutTiles(url, type [, options]) Creates a new LayoutTiles instance. Parameters: Name Type Argument Description url string URL to the image or tile configuration type Layout#Type The type of image layout options Object &lt;optional&gt; Configuration options Properties Name Type Argument Default Description width number &lt;optional&gt; Width of original image (required for 'google' type) height number &lt;optional&gt; Height of original image (required for 'google' type) suffix string &lt;optional&gt; 'jpg' Tile file extension subdomains string &lt;optional&gt; 'abc' Available subdomains for Google URL template cachelevels number &lt;optional&gt; 10 Number of levels above current to cache server string &lt;optional&gt; IIP server URL (for IIP type only) Source: LayoutTiles.js, line 91 Fires: Layout#event:ready - When layout initialization is complete Layout#event:updateSize - When layout dimensions change Example ```javascript // DeepZoom layout const dzLayout = new LayoutTiles('image.dzi', 'deepzoom', { cachelevels: 8 }); // Google Maps layout const googleLayout = new LayoutTiles('tiles/', 'google', { width: 4096, height: 3072, suffix: 'png' }); // IIIF layout const iiifLayout = new LayoutTiles('https://server/image', 'iiif'); ``` Extends Layout Methods available(viewport, transform, layerTransform, border, bias, tiles) Gets tiles currently available for rendering. Parameters: Name Type Description viewport Viewport Current viewport transform Transform Current transform layerTransform Transform Layer-specific transform border number Border size in tile units bias number Resolution bias tiles Map.&lt;number, Tile&gt; Available tiles Overrides: Layout#available Source: LayoutTiles.js, line 392 Returns: Map of tile index to tile object with additional 'complete' property Type Object.&lt;number, Tile&gt; boundingBox() Gets layout bounds Inherited From: Layout#boundingBox Overrides: Layout#boundingBox Source: Layout.js, line 194 Returns: Layout boundaries Type BoundingBox getTileSize() Gets the tile size for the layout. Overrides: Layout#getTileSize Source: LayoutTiles.js, line 187 Returns: Array containing [width, height] of tiles Type Array.&lt;number&gt; getTileURL(id, tile) Gets URL for a specific tile. Parameters: Name Type Description id number Channel/raster ID tile Tile Tile to get URL for Overrides: Layout#getTileURL Source: LayoutTiles.js, line 474 Throws: If layout not defined or ready Type Error Returns: URL to fetch tile data Type string getViewportBox(viewport, transform, layerT) Calculates viewport bounding box Parameters: Name Type Description viewport Object Viewport parameters transform Transform Current transform layerT Transform Layer transform Inherited From: Layout#getViewportBox Overrides: Layout#getViewportBox Source: Layout.js, line 276 Returns: Viewport bounds in image space Type BoundingBox index(level, x, y) Generates unique index for a tile based on its position and level. Parameters: Name Type Description level number Zoom level x number X coordinate y number Y coordinate Source: LayoutTiles.js, line 198 Returns: Unique tile index Type number needed(viewport, transform, layerTransform, border, bias, tiles [, maxtiles]) Determines which tiles are needed for the current view. Parameters: Name Type Argument Default Description viewport Viewport Current viewport transform Transform Current transform layerTransform Transform Layer-specific transform border number Border size in tile units for prefetching bias number Resolution bias (0-1, affects mipmap level selection) tiles Map.&lt;number, Tile&gt; Currently available tiles maxtiles number &lt;optional&gt; 8 Maximum number of tiles to return Overrides: Layout#needed Source: LayoutTiles.js, line 348 Returns: Array of needed tiles sorted by priority Type Array.&lt;Tile&gt; neededBox(viewport, transform, layerTransform, border, bias) Computes required tiles at each pyramid level for the current view. Parameters: Name Type Description viewport Viewport Current viewport transform Transform Current transform layerTransform Transform Layer-specific transform border number Border size in tile units for prefetching bias number Resolution bias (0-1) Source: LayoutTiles.js, line 439 Returns: Tile requirements Type Object .level - Optimal pyramid level Type number .pyramid - Array of tile bounding boxes per level Type Array.&lt;BoundingBox&gt; newTile(index) Creates a new tile instance with computed properties. Parameters: Name Type Description index number Unique tile identifier Overrides: Layout#newTile Source: LayoutTiles.js, line 330 Returns: New tile instance Type Tile reverseIndex(index) Converts tile index back to level, x, y coordinates. Parameters: Name Type Description index number Tile index Source: LayoutTiles.js, line 210 Returns: Position object containing level, x, y Type Object tileCoords(tile) Gets coordinates for a tile in both image space and texture space. Parameters: Name Type Description tile Tile The tile to get coordinates for Overrides: Layout#tileCoords Source: LayoutTiles.js, line 273 Returns: Coordinate data Type Object .coords - Image space coordinates [x,y,z, x,y,z, x,y,z, x,y,z] Type Float32Array .tcoords - Texture coordinates [u,v, u,v, u,v, u,v] Type Float32Array Type Definitions Type Supported image layout types including both single-resolution and multi-resolution formats. image: Standard web image formats (jpg, png, gif, etc.) deepzoom: Microsoft Deep Zoom format with root tile &gt; 1px deepzoom1px: Microsoft Deep Zoom format with 1px root tile google: Google Maps tiling scheme zoomify: Zoomify tiling format iiif: International Image Interoperability Framework iip: Internet Imaging Protocol tarzoom: OpenLIME custom format (single TAR of DeepZoom pyramid) itarzoom: OpenLIME custom interleaved TAR format Type: 'image' | 'deepzoom' | 'deepzoom1px' | 'google' | 'zoomify' | 'iiif' | 'iip' | 'tarzoom' | 'itarzoom' Inherited From: Layout#Type Overrides: Layout#Type Source: LayoutTiles.js, line 26 Events ready The event is fired when a layout is ready to be drawn(the single-resolution image is downloaded or the multi-resolution structure has been initialized). Inherited From: Layout#event:ready Overrides: Layout#event:ready Source: Layout.js, line 158 updateSize The event is fired when a layout size is modified (and the scene extension must be recomputed at canvas level). Inherited From: Layout#event:updateSize Overrides: Layout#event:updateSize Source: LayoutTiles.js, line 234 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"LensDashboard.html":{"id":"LensDashboard.html","title":"Class: LensDashboard","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: LensDashboard LensDashboard LensDashboard class creates an interactive container for a lens interface. It provides: A square HTML container that moves with the lens SVG-based circular lens border with drag interaction for resizing Masking capabilities for controlling content visibility inside/outside the lens Ability to add HTML elements positioned relative to the lens new LensDashboard(viewer [, options]) Creates a new LensDashboard instance. Parameters: Name Type Argument Description viewer Viewer The OpenLIME viewer instance options Object &lt;optional&gt; Configuration options Properties Name Type Argument Default Description containerSpace number &lt;optional&gt; 80 Extra space around the lens for dashboard elements (in pixels) borderColor Array.&lt;number&gt; &lt;optional&gt; [0.078, 0.078, 0.078, 1] RGBA color for lens border borderWidth number &lt;optional&gt; 12 Width of the lens border (in pixels) layerSvgAnnotation LayerSvgAnnotation &lt;optional&gt; null Associated SVG annotation layer Source: LensDashboard.js, line 35 Methods append(elm) Adds an HTML element to the dashboard container. The element should use absolute positioning relative to the container. Example: const button = document.createElement('button'); button.style = 'position: absolute; left: 10px; top: 10px;'; lensDashboard.append(button); Parameters: Name Type Description elm HTMLElement The HTML element to add Source: LensDashboard.js, line 249 removeMaskFromSvgLayer(svg) Removes the lens mask from an SVG element. Returns the element to its normal, unmasked rendering. Parameters: Name Type Description svg SVGElement The SVG element to unmask Source: LensDashboard.js, line 234 setBackgroundRenderingMode(mode) Sets the rendering mode for the background (area outside the lens). Controls whether content outside the lens is shown or hidden. Parameters: Name Type Description mode RenderingMode The rendering mode to use Source: LensDashboard.js, line 267 setLayerSvgAnnotation(layer) Associates a LayerSvgAnnotation with the dashboard. This enables proper masking of SVG annotations within the lens area. Parameters: Name Type Description layer LayerSvgAnnotation The SVG annotation layer to associate Source: LensDashboard.js, line 146 setLensRenderingMode(mode) Sets the rendering mode for the lens area. Controls whether content inside the lens is shown or hidden. Parameters: Name Type Description mode RenderingMode The rendering mode to use Source: LensDashboard.js, line 258 setMaskOnSvgLayer(svg) Applies the lens mask to an SVG element. Elements with the mask will only be visible within the lens area (or outside, depending on mask configuration). Parameters: Name Type Description svg SVGElement The SVG element to mask Source: LensDashboard.js, line 225 toggle() Toggles the visibility of the dashboard UI elements. Uses CSS classes to show/hide the interface. Source: LensDashboard.js, line 136 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"LensDashboardNavigator.html":{"id":"LensDashboardNavigator.html","title":"Class: LensDashboardNavigator","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: LensDashboardNavigator LensDashboardNavigator LensDashboardNavigator class creates an interactive lens dashboard with navigation controls. Provides: Camera movement control Light direction control Annotation switching and navigation Toolbar UI elements positioned around the lens new LensDashboardNavigator(viewer [, options]) Creates a new LensDashboardNavigator instance. Parameters: Name Type Argument Description viewer Viewer The OpenLIME viewer instance options Object &lt;optional&gt; Configuration options Properties Name Type Argument Default Description toolboxHeight number &lt;optional&gt; 22 Height of the toolbox UI elements in pixels angleToolbar number &lt;optional&gt; 30 Angle of toolbar position in degrees actions Object &lt;optional&gt; Configuration for toolbar actions Properties Name Type Argument Description camera Object &lt;optional&gt; Camera control action Properties Name Type Description label string Action identifier task function Callback for camera action light Object &lt;optional&gt; Light control action Properties Name Type Description label string Action identifier task function Callback for light action annoswitch Object &lt;optional&gt; Annotation toggle action Properties Name Type Description label string Action identifier type string Action type ('toggle') toggleClass string CSS class for toggle element task function Callback for annotation toggle prev Object &lt;optional&gt; Previous annotation action Properties Name Type Description label string Action identifier task function Callback for previous action down Object &lt;optional&gt; Download annotation action Properties Name Type Description label string Action identifier task function Callback for download action next Object &lt;optional&gt; Next annotation action Properties Name Type Description label string Action identifier task function Callback for next action updateCb function &lt;optional&gt; Callback fired during lens updates updateEndCb function &lt;optional&gt; Callback fired when lens movement ends Source: LensDashboardNavigator.js, line 19 Extends LensDashboard Methods append(elm) Adds an HTML element to the dashboard container. The element should use absolute positioning relative to the container. Example: const button = document.createElement('button'); button.style = 'position: absolute; left: 10px; top: 10px;'; lensDashboard.append(button); Parameters: Name Type Description elm HTMLElement The HTML element to add Inherited From: LensDashboard#append Overrides: LensDashboard#append Source: LensDashboard.js, line 249 removeMaskFromSvgLayer(svg) Removes the lens mask from an SVG element. Returns the element to its normal, unmasked rendering. Parameters: Name Type Description svg SVGElement The SVG element to unmask Inherited From: LensDashboard#removeMaskFromSvgLayer Overrides: LensDashboard#removeMaskFromSvgLayer Source: LensDashboard.js, line 234 setActionEnabled(label [, enable]) Enables or disables a specific action button. Parameters: Name Type Argument Default Description label string The action label to modify enable boolean &lt;optional&gt; true Whether to enable or disable the action Source: LensDashboardNavigator.js, line 548 setBackgroundRenderingMode(mode) Sets the rendering mode for the background (area outside the lens). Controls whether content outside the lens is shown or hidden. Parameters: Name Type Description mode RenderingMode The rendering mode to use Inherited From: LensDashboard#setBackgroundRenderingMode Overrides: LensDashboard#setBackgroundRenderingMode Source: LensDashboard.js, line 267 setLayerSvgAnnotation(layer) Associates a LayerSvgAnnotation with the dashboard. This enables proper masking of SVG annotations within the lens area. Parameters: Name Type Description layer LayerSvgAnnotation The SVG annotation layer to associate Inherited From: LensDashboard#setLayerSvgAnnotation Overrides: LensDashboard#setLayerSvgAnnotation Source: LensDashboard.js, line 146 setLensRenderingMode(mode) Sets the rendering mode for the lens area. Controls whether content inside the lens is shown or hidden. Parameters: Name Type Description mode RenderingMode The rendering mode to use Inherited From: LensDashboard#setLensRenderingMode Overrides: LensDashboard#setLensRenderingMode Source: LensDashboard.js, line 258 setMaskOnSvgLayer(svg) Applies the lens mask to an SVG element. Elements with the mask will only be visible within the lens area (or outside, depending on mask configuration). Parameters: Name Type Description svg SVGElement The SVG element to mask Inherited From: LensDashboard#setMaskOnSvgLayer Overrides: LensDashboard#setMaskOnSvgLayer Source: LensDashboard.js, line 225 toggle() Toggles the visibility of the dashboard UI elements. Uses CSS classes to show/hide the interface. Inherited From: LensDashboard#toggle Overrides: LensDashboard#toggle Source: LensDashboard.js, line 136 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"LensDashboardNavigatorRadial.html":{"id":"LensDashboardNavigatorRadial.html","title":"Class: LensDashboardNavigatorRadial","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: LensDashboardNavigatorRadial LensDashboardNavigatorRadial LensDashboardNavigatorRadial class creates a circular lens dashboard with radially arranged controls. Provides: Circular arrangement of controls around the lens Grouped tool positioning Animated visibility transitions Background arc for visual grouping new LensDashboardNavigatorRadial(viewer [, options]) Creates a new LensDashboardNavigatorRadial instance. Parameters: Name Type Argument Description viewer Viewer The OpenLIME viewer instance options Object &lt;optional&gt; Configuration options Properties Name Type Argument Default Description toolSize number &lt;optional&gt; 34 Size of tool buttons in pixels toolPadding number &lt;optional&gt; 0 Padding between tool buttons group Array.&lt;number&gt; &lt;optional&gt; [-65, 0] Angle positions for tool groups in degrees actions Object &lt;optional&gt; Configuration for toolbar actions Properties Name Type Argument Description camera Object &lt;optional&gt; Camera control action Properties Name Type Description label string Action identifier group number Group index for positioning angle number Angle offset within group task function Callback for camera action light Object &lt;optional&gt; Light control action (same properties as camera) annoswitch Object &lt;optional&gt; Annotation toggle action Properties Name Type Description type string Action type ('toggle') toggleClass string CSS class for toggle element prev Object &lt;optional&gt; Previous annotation action (same properties as camera) down Object &lt;optional&gt; Download annotation action (same properties as camera) next Object &lt;optional&gt; Next annotation action (same properties as camera) updateCb function &lt;optional&gt; Callback fired during lens updates updateEndCb function &lt;optional&gt; Callback fired when lens movement ends Source: LensDashboardNavigatorRadial.js, line 19 Extends LensDashboard Methods append(elm) Adds an HTML element to the dashboard container. The element should use absolute positioning relative to the container. Example: const button = document.createElement('button'); button.style = 'position: absolute; left: 10px; top: 10px;'; lensDashboard.append(button); Parameters: Name Type Description elm HTMLElement The HTML element to add Inherited From: LensDashboard#append Overrides: LensDashboard#append Source: LensDashboard.js, line 249 getAction(label) Retrieves an action configuration by its label. Parameters: Name Type Description label string The action label to find Source: LensDashboardNavigatorRadial.js, line 602 Returns: The action configuration object or null if not found Type Object | null removeMaskFromSvgLayer(svg) Removes the lens mask from an SVG element. Returns the element to its normal, unmasked rendering. Parameters: Name Type Description svg SVGElement The SVG element to unmask Inherited From: LensDashboard#removeMaskFromSvgLayer Overrides: LensDashboard#removeMaskFromSvgLayer Source: LensDashboard.js, line 234 setActionEnabled(label [, enable]) Enables or disables a specific action button. Parameters: Name Type Argument Default Description label string The action label to modify enable boolean &lt;optional&gt; true Whether to enable or disable the action Source: LensDashboardNavigatorRadial.js, line 618 setBackgroundRenderingMode(mode) Sets the rendering mode for the background (area outside the lens). Controls whether content outside the lens is shown or hidden. Parameters: Name Type Description mode RenderingMode The rendering mode to use Inherited From: LensDashboard#setBackgroundRenderingMode Overrides: LensDashboard#setBackgroundRenderingMode Source: LensDashboard.js, line 267 setLayerSvgAnnotation(layer) Associates a LayerSvgAnnotation with the dashboard. This enables proper masking of SVG annotations within the lens area. Parameters: Name Type Description layer LayerSvgAnnotation The SVG annotation layer to associate Inherited From: LensDashboard#setLayerSvgAnnotation Overrides: LensDashboard#setLayerSvgAnnotation Source: LensDashboard.js, line 146 setLensRenderingMode(mode) Sets the rendering mode for the lens area. Controls whether content inside the lens is shown or hidden. Parameters: Name Type Description mode RenderingMode The rendering mode to use Inherited From: LensDashboard#setLensRenderingMode Overrides: LensDashboard#setLensRenderingMode Source: LensDashboard.js, line 258 setMaskOnSvgLayer(svg) Applies the lens mask to an SVG element. Elements with the mask will only be visible within the lens area (or outside, depending on mask configuration). Parameters: Name Type Description svg SVGElement The SVG element to mask Inherited From: LensDashboard#setMaskOnSvgLayer Overrides: LensDashboard#setMaskOnSvgLayer Source: LensDashboard.js, line 225 toggle() Toggles the visibility of the dashboard UI elements. Uses CSS classes to show/hide the interface. Inherited From: LensDashboard#toggle Overrides: LensDashboard#toggle Source: LensDashboard.js, line 136 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"LightSphereController.html":{"id":"LightSphereController.html","title":"Class: LightSphereController","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: LightSphereController LightSphereController LightSphereController creates an interactive sphere UI for light direction control. Features: Circular interface with gradient background Pointer-based interaction for light direction Configurable size, position, and colors Minimum theta angle constraint Visual feedback with gradient and marker new LightSphereController(parent [, options]) Creates a new LightSphereController instance. Parameters: Name Type Argument Description parent HTMLElement | string Parent element or selector where the controller will be mounted options Object &lt;optional&gt; Configuration options Properties Name Type Argument Default Description width number &lt;optional&gt; 128 Width of the controller in pixels height number &lt;optional&gt; 128 Height of the controller in pixels top number &lt;optional&gt; 60 Top position offset in pixels right number &lt;optional&gt; 0 Right position offset in pixels thetaMin number &lt;optional&gt; 0 Minimum theta angle in degrees (constrains interaction radius) colorSpot string &lt;optional&gt; '#ffffff' Color of the central spot in the gradient colorBkg string &lt;optional&gt; '#0000ff' Color of the outer edge of the gradient colorMark string &lt;optional&gt; '#ff0000' Color of the position marker Source: LightSphereController.js, line 17 Methods addLayer(layer) Adds a layer to be controlled by this light sphere. The layer must support light control operations. Parameters: Name Type Description layer Layer Layer to be controlled Source: LightSphereController.js, line 113 hide() Hides the controller. Source: LightSphereController.js, line 129 Returns: The visibility style value Type string show() Makes the controller visible. Source: LightSphereController.js, line 121 Returns: The visibility style value Type string × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"module-PointerManager.html":{"id":"module-PointerManager.html","title":"Module: PointerManager","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Module: PointerManager The PointerManager class is a high-level event manager that interprets low-level pointer interactions (mouse, touch, and stylus) into higher-level gestures such as taps, holds, panning, and pinching. It simplifies the process of handling user interactions on devices with touch screens or trackpads by converting raw pointer events (e.g., pointerdown, pointermove, pointerup) into easy-to-use gestures. Key features include: Event Management: Registers, unregisters, and broadcasts event handlers for gestures like single/double tap, hold, panning, and pinching. Gesture Recognition: Automatically detects and handles gestures such as finger taps, holds (long press), panning (drag), and pinch (zoom). Idle Detection: Detects periods of inactivity and can trigger events based on user idleness. Multiple Pointer Support: Manages multiple pointers simultaneously, supporting interactions like pinch-to-zoom. Utility Methods: Includes helper methods for tasks like calculating device pixels per millimeter (useful for different screen densities). Common use cases for PointerManager include applications that require touch gestures, such as image or map manipulation, or any interactive web application that benefits from handling complex pointer-based interactions. Source: PointerManager.js, line 1 Classes PointerManager × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"module-PointerManager-PointerManager.html":{"id":"module-PointerManager-PointerManager.html","title":"Class: PointerManager","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: PointerManager PointerManager~ PointerManager High-level event manager for handling pointer interactions. Captures and classifies PointerEvents (mouse/touch) into higher-level gestures. new PointerManager(target [, options]) Creates a new PointerManager instance. Parameters: Name Type Argument Description target HTMLElement DOM element to attach event listeners to options Object &lt;optional&gt; Configuration options Properties Name Type Argument Default Description pinchMaxInterval number &lt;optional&gt; 250 Maximum time (ms) between touches to trigger pinch idleTime number &lt;optional&gt; 60 Seconds of inactivity before idle event Source: PointerManager.js, line 51 Fires: PointerManager#event:fingerHover - When pointer moves over target PointerManager#event:fingerSingleTap - On quick press/touch PointerManager#event:fingerDoubleTap - On two quick presses/touches PointerManager#event:fingerHold - When press/touch held for &gt;600ms PointerManager#event:mouseWheel - On mouse wheel rotation PointerManager#event:panStart - When pan gesture begins PointerManager#event:panMove - During pan gesture PointerManager#event:panEnd - When pan gesture ends PointerManager#event:pinchStart - When pinch gesture begins PointerManager#event:pinchMove - During pinch gesture PointerManager#event:pinchEnd - When pinch gesture ends Example // Create manager and attach event handler const canvas = document.querySelector('canvas'); const pointerManager = new PointerManager(canvas); const handler = { priority: 10, fingerSingleTap: (e) =&gt; { console.log(\"SINGLE TAP at\", e.clientX, e.clientY); }, fingerHold: (e) =&gt; { console.log(\"HOLD at\", e.clientX, e.clientY); } }; pointerManager.onEvent(handler); Members &lt;static, readonly&gt; ANYPOINTER :number Constant for targeting all pointers. Type: number Source: PointerManager.js, line 91 Methods &lt;static&gt; splitStr(str) Splits a string into an array based on whitespace. Parameters: Name Type Description str string The input string to split. Source: PointerManager.js, line 101 Returns: An array of strings split by whitespace. Type Array.&lt;string&gt; off(eventTypes, callback [, idx]) Unregisters event handlers. Parameters: Name Type Argument Default Description eventTypes string Space-separated list of event types callback Object | function Handler to remove idx number &lt;optional&gt; ANYPOINTER Pointer index to target Source: PointerManager.js, line 173 on(eventTypes, obj [, idx]) Registers event handlers. Parameters: Name Type Argument Default Description eventTypes string Space-separated list of event types obj Object | function Handler object or function idx number &lt;optional&gt; ANYPOINTER Pointer index to target, or ANYPOINTER for all Source: PointerManager.js, line 145 Returns: Handler object Type Object onEvent(handler) Registers a complete event handler with multiple callbacks. Parameters: Name Type Description handler Object Handler object Properties Name Type Argument Description priority number Handler priority (higher = earlier execution) fingerHover function &lt;optional&gt; Hover callback fingerSingleTap function &lt;optional&gt; Single tap callback fingerDoubleTap function &lt;optional&gt; Double tap callback fingerHold function &lt;optional&gt; Hold callback mouseWheel function &lt;optional&gt; Mouse wheel callback panStart function &lt;optional&gt; Pan start callback panMove function &lt;optional&gt; Pan move callback panEnd function &lt;optional&gt; Pan end callback pinchStart function &lt;optional&gt; Pinch start callback pinchMove function &lt;optional&gt; Pinch move callback pinchEnd function &lt;optional&gt; Pinch end callback Source: PointerManager.js, line 204 Throws: If handler lacks priority or required callbacks Type Error onPan(handler) Registers pan gesture callbacks. Parameters: Name Type Description handler Object The handler object with pan callbacks. Source: PointerManager.js, line 228 Throws: If the handler is missing any required pan callbacks. Type Error onPinch(handler) Registers pinch gesture callbacks. Parameters: Name Type Description handler Object The handler object with pinch callbacks. Source: PointerManager.js, line 255 Throws: If the handler is missing any required pinch callbacks. Type Error × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"Raster.html":{"id":"Raster.html","title":"Class: Raster","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: Raster Raster Raster is a provider of image and/or plane of coefficients. It support all file formats supported by Layout. An object literal with Raster options can be specified. @param {Object} [options] An object literal describing the raster content. new Raster() Parameters: Name Type Default Description options.format Raster#Format 'vec3' The color format of the image. Source: Raster.js, line 18 Methods &lt;async&gt; loadImage(tile, gl) Gets a tile. Parameters: Name Type Description tile Tile A tile. gl WebGLRenderingContext The WebGL rendering context . Source: Raster.js, line 35 Returns: A pair (tex,size). Type '[tex, size]' Type Definitions Format An Raster Format describes the way that the images in textures and renderbuffers store their data. 'vec3' format must be specified if the image is RGB (without alpha). 'vec4' is related to RGBA images. 'float' is for file containg coefficients. Type: 'vec3' | 'vec4' | 'float' Source: Raster.js, line 1 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"Shader.html":{"id":"Shader.html","title":"Class: Shader","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: Shader Shader The Shader class allows shader programs to be linked and used. This class supports shader programs written in the OpenGL/ES Shading Language (GLSL/ES) with 2.0 amd 3.0 specifications. The Shader class keeps the programmer away from the details of compiling and linking vertex and fragment shaders. The following example creates a fragment shader program using the supplied source code. Once compiled and linked, the shader program is activated in the current WebGLContext. const shader = new OpenLIME.Shader({ 'label': 'Rgb', 'samplers': [{ id: 0, name: 'kd' }] }); // The fragment shader script shader.fragShaderSrc = function (gl) { let gl2 = !(gl instanceof WebGLRenderingContext); let str = `${gl2 ? '#version 300 es' : ''} precision highp float; precision highp int; uniform sampler2D kd; uniform float u_colorFactor; ... return str; }; // Declares a uniform. shader.uniforms = { u_colorFactor: { type: 'float', needsUpdate: true, size: 1, value: 0.0 }, }; // Adds the shader to the Layer and set it as the current one. this.shaders['bw'] = shader; this.setShader('bw'); new Shader( [options]) Instantiates a Shader class. An object literal with Shader options can be specified. Parameters: Name Type Argument Description options Object &lt;optional&gt; An object literal describing the shader content. Properties Name Type Description samplers Array.&lt;Shader#Sampler&gt; An array of pointers to 2D textures. modes Array.&lt;string&gt; An optional array of labels that identify different shader behaviors. Source: Shader.js, line 56 Methods fragShaderSrc(gl) Gets the fragment shader script. This is a virtual function and MUST be redefined in derived classes. Parameters: Name Type Description gl * Thegl context. Source: Shader.js, line 336 Returns: The vertex shader script. Type string setMode(mode) Sets the current mode of the shader Parameters: Name Type Description mode string The mode identifier Source: Shader.js, line 107 setUniform(name, value) Sets the value of a uniform variable. Parameters: Name Type Description name string The name of the uniform variable. value * The value to assign. Source: Shader.js, line 129 vertShaderSrc(gl) Gets the vertex shader script. By default it only applies the view matrix and passes the texture coordinates to the fragment shader. Parameters: Name Type Description gl * Thegl context. Source: Shader.js, line 310 Returns: The vertex shader script. Type string Type Definitions Sampler A reference to a 2D texture. Type: Object Properties: Name Type Description id number A sampler unique identifier. name string The sampler name (the texture reference name in the shader program). label string used for menu samplers array array of rasters {id:, type: } color, normals, etc. * samplers: array of rasters {id:, type: } color, normals, etc. bind: false will not used in preparegl load: false will not be loaded from raster both options are used in neural where the coefficients are loaded, but used by tf uniforms: array type = &lt;vec4|vec3|vec2|float|int&gt;, needsUpdate controls when updated in gl, size is unused, value is and array or a float, we also want to support interpolation: source (value is the target), start, end are the timing (same as camera interpolation) Source: Shader.js, line 4 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"ShaderBRDF.html":{"id":"ShaderBRDF.html","title":"Class: ShaderBRDF","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: ShaderBRDF ShaderBRDF new ShaderBRDF(options) Parameters: Name Type Description options object mode: default is color, can be [color, diffuse, specular, normals] color implements ward Source: ShaderBRDF.js, line 9 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"ShaderCombiner.html":{"id":"ShaderCombiner.html","title":"Class: ShaderCombiner","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: ShaderCombiner ShaderCombiner The ShaderCombiner class specifies a shader that computes an output texture as a combination of two input textures. It defines four modes (shader behaviors): 'first' assigns the first texture as output (draws the first texture). The color of each fragment is cout=c1 'second' assigns the second texture as output (draws the second texture). The color of each fragment is cout=c2 'mean' calculates the average color of the two textures. The color of each fragment is cout=(c1+c2)/2.0 'diff' calculates the difference between the color of the textures. Color of each fragment is cout=c2.rgb-c1.rgb Extends Shader. new ShaderCombiner( [options]) Instantiates a ShaderCombiner class. An object literal with ShaderCombiner options can be specified. Parameters: Name Type Argument Description options Object &lt;optional&gt; An object literal with options that inherits from Shader. Source: ShaderCombiner.js, line 13 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"ShaderNeural.html":{"id":"ShaderNeural.html","title":"Class: ShaderNeural","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: ShaderNeural ShaderNeural Extends Shader, initialized with a Neural .json ( new ShaderNeural() Source: ShaderNeural.js, line 7 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"ShaderRTI.html":{"id":"ShaderRTI.html","title":"Class: ShaderRTI","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: ShaderRTI ShaderRTI Extends Shader, initialized with a relight .json (see: relight on github for details). Supported modes are light: relightable images depending on light direction normals: shows a normal map diffuse: remove albedo and display only the geometry with a white material. specular: specular enhancement From the .json configuration the type of basis used: ('ptm', 'hsh', rbf', 'bln'), and the colorspace ('lrgb', 'rgb', 'mrgb', 'mycc') along with all the other parameters. new ShaderRTI(options) Parameters: Name Type Description options object compose: compose operation: add, subtract, multiply, etc. Source: ShaderRTI.js, line 20 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"Skin.html":{"id":"Skin.html","title":"Class: Skin","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: Skin Skin The static class Skin implements some utilities for handling the skin file. A skin file is a SVG file containing SVG icons that are used by *UIBasic for customizing the visual appearance of the user interface (i.e., icons for buttons, menu, toolbar, dialog...). Each SVG drawing element must be tagged with a 'class' attribute whose name must begin with openlime-: for instance, the HOME icon is a SVG element tagged with class=\"openlime-home\". new Skin() Source: Skin.js, line 13 Methods &lt;async, static&gt; appendIcon(container, elm) Appends the selected SVG element to the container. Parameters: Name Type Description container HTMLElement A HTML DOM node. elm SVGElement | string An SVGElement or a CSS selector (e.g. a class name). Source: Skin.js, line 52 Returns: A pointer to the SVG icon referenced by the elm. Type SVGElement &lt;async, static&gt; getElement(selector) Gets the SVG element with a specific CSS selector. Parameters: Name Type Description selector string A CSS selector (e.g. a class name). Source: Skin.js, line 40 Returns: The SVGElement referenced by the selector. Type SVGElement &lt;async, static&gt; loadSvg() Loads the SVG skin file and converts it into a global DOM SVGElement ready for use in a web page. Source: Skin.js, line 23 &lt;static&gt; setUrl(u) Sets the URL of the SVG skin file. By default it is 'skin/skin.svg'; Parameters: Name Type Description u string The URL of the SVG skin file. Source: Skin.js, line 18 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"TextToSpeechPlayer.html":{"id":"TextToSpeechPlayer.html","title":"Class: TextToSpeechPlayer","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: TextToSpeechPlayer TextToSpeechPlayer The TextToSpeechPlayer class is responsible for text-to-speech functionality in the application. It handles voice selection, speech synthesis, and various audio controls. new TextToSpeechPlayer( [options]) Creates an TextToSpeechPlayer. Additionally, an object literal with TextToSpeechPlayer options can be specified. Parameters: Name Type Argument Description options Object &lt;optional&gt; Properties Name Type Argument Default Description language string &lt;optional&gt; 'it-IT' The language for speech synthesis. rate number &lt;optional&gt; 1.12 The speech rate. volume number &lt;optional&gt; 1.0 The speech volume. cleanText boolean &lt;optional&gt; true Whether to clean the text before speech synthesis. voiceSelected number &lt;optional&gt; -1 The index of the selected voice. Source: TextToSpeechPlayer.js, line 5 Methods activate() Activates the TextToSpeechPlayer. Source: TextToSpeechPlayer.js, line 73 &lt;async&gt; initialize() Initializes the TextToSpeechPlayer by loading the voice and checking offline capability. Source: TextToSpeechPlayer.js, line 39 Returns: Type Promise.&lt;void&gt; mute(enable) Mutes or unmutes the audio playback. Parameters: Name Type Description enable boolean True to mute, false to unmute. Source: TextToSpeechPlayer.js, line 271 pauseSpeaking(enable) Pauses or resumes the current speech synthesis. Parameters: Name Type Description enable boolean True to pause, false to resume. Source: TextToSpeechPlayer.js, line 243 &lt;async&gt; speakText(text) Speaks the provided text using speech synthesis. Parameters: Name Type Description text string The text to speak. Source: TextToSpeechPlayer.js, line 163 Returns: Type Promise.&lt;void&gt; stopSpeaking() Stops the current speech synthesis. Source: TextToSpeechPlayer.js, line 283 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"Transform.html":{"id":"Transform.html","title":"Class: Transform","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: Transform Transform The class Transform implements a 2D affine map to convert coordinates between two systems. The map is internally represented by four values: x the x-component of the translation vector y the y-component of the translation vector a the rotation angle around the z-axis (in degrees) z the scale factor A transformation between a point P to P' is defined by P' = z*rot(a)*P + t where z is the scale factor, a is the rotation angle, and t(x,y) is the translation vector. The class implements a set of geometric transformations useful to position the camera, create animations, etc... new Transform( [options]) Instantiates a Transform object. Parameters: Name Type Argument Description options Object &lt;optional&gt; An object literal with Transform parameters. Properties Name Type Default Description x number 0 The x-component of the translation vector. y number 0 The y-component of the translation vector. a number 0 The rotation angle (in degrees). z number 1 The scale factor. t time 0 The current time. Source: Transform.js, line 34 Methods &lt;static&gt; interpolate(source, target, time, easing) Computes the interpolated transform at time time between source and target Parameters: Name Type Description source Transform The source transform. target Transform The target transform. time time The time at which to compute the interpolation. easing Transform#Easing The easing function. Source: Transform.js, line 179 Returns: The interpolated transform. Type Transform &lt;static&gt; normalizeAngle(a) Maps an angle a to range from 0 to 360 degrees. Parameters: Name Type Description a number The angle (in degrees). Source: Transform.js, line 92 Returns: The normalized angle. Type number &lt;static&gt; rotate(x, y, a) Computes the rotation of a point P(x,y) by an angle a around the z-axis to get P'(x',y'). Parameters: Name Type Description x * x-coordinate of the point P. y * y-coordinate of the point P. a * The rotation angle (in degrees) Source: Transform.js, line 105 Returns: The point P'. Type Object apply(x, y) Applies this Transform to a point P(x,y) to get P'(x',y'). Parameters: Name Type Description x number x-coordinate of the point P. y number y-coordinate of the point P. Source: Transform.js, line 69 Returns: The point P'. Type Object compose(transform) Composes (multiplies) this Transform with an other transform. Parameters: Name Type Description transform Transform Source: Transform.js, line 118 Returns: The result of the composition. Type Transform copy() Gets a copy of this Transform. Source: Transform.js, line 57 Returns: The copy of the Transform. Type Transform getInverseBox(viewport) Gets the bounding box (in image coordinate space) of the vieport. The viewport y-axis points up. The image and screen transform has y pointing down. Parameters: Name Type Description viewport Viewport Source: Transform.js, line 150 Returns: The bounding box. Type BoundingBox inverse() Computes the inverse of this Transform. Source: Transform.js, line 82 Returns: The inverse Transform. Type Transform projectionMatrix(viewport) Combines this Transform with the viewport to get the WebGL projection matrix. Parameters: Name Type Description viewport Viewport The viewport. Source: Transform.js, line 207 Returns: The result. Type Array.&lt;number&gt; sceneToViewportCoords(viewport, p) Transforms the point p from scene (0 at image center) to [0,wh] . Parameters: Name Type Description viewport Viewport The viewport. p APoint The point in scene (0,0 at image center) Source: Transform.js, line 237 Returns: The point in range [0..w-1,0..h-1] Type APoint transformBox(lbox) Applyes this Transform to a bounding box. Parameters: Name Type Description lbox BoundingBox Source: Transform.js, line 134 Returns: The result. Type BoundingBox viewportToSceneCoords(viewport, p) Transforms the point p from [0,wh] to scene (0 at image center). Parameters: Name Type Description viewport Viewport The viewport. p APoint The point in range [0..w-1,0..h-1] Source: Transform.js, line 249 Returns: The point in scene (0,0 at image center) Type APoint Type Definitions Easing The type Easing defines the function that regulates the movement of the camera Type: 'linear' | 'ease-out' | 'ease-in-out' Source: Transform.js, line 166 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"UIBasic.html":{"id":"UIBasic.html","title":"Class: UIBasic","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: UIBasic UIBasic UIBasic is a flexible and easy-to-use class that implements a complete user interface to bind to the viewer The interface is associated with a CSS file (skin.css) that defines the style of the HTML DOM and a graphic file (skin.svg) that specifies the geometric characteristics of the tool buttons. The class provides a set of default ready-to-use tools (called actions): home resets the camera. fullscreen enables the fullscreen mode. layers displays the layer menu. zoomin performs a camera zoom-in. zoomout performs a camera zoom-out. rotate rotates the camera around the z-axis (by 45-degs steps). light enables light manipulation. help displays a help dialog box. In the following example a UIBasic interface is created and binded to the lime viewer. The light action is disabled, and the zoomin and zoomout actions are enabled. // Creates an User Interface const ui = new OpenLIME.UIBasic(lime); // Removes light from the toolbar ui.actions.light.display=false; // Adds zoomin and zoomout to the toolbar ui.actions.zoomin.display=true; ui.actions.zoomout.display=true; new UIBasic(viewer [, options]) Instantiates a UIBasic object. Parameters: Name Type Argument Description viewer Viewer The OpenLIME viewer. options Object &lt;optional&gt; An object literal with UIBasic parameters. Properties Name Type Default Description skin string 'skin/skin.svg' The file name of the vector image defining the tool buttons. autofit bool true Whether the initial position of the camera is set to fit the scene model. priority number 0 Higher priority controllers are invoked first. actions Object An Object of UIBasic#Action. A set of default actions are ready to be used. pixelSize number Spatial resolution: physical size represented by a single pixel in mm attribution string Some information related to data attribution or credits. menu Array.&lt;UIBasic#MenuEntry&gt; The interface menu structure. enableTooltip bool true Whether to enable tool button tooltip. showLightDirections bool false Whether to draw light direction vectors. Source: UIBasic.js, line 85 Type Definitions Action An Action describes the behaviour of a tool button. Type: Object Properties: Name Type Description title string The nameof the action. display bool Whether to show the action in the toolbar. key string The shortcut key. task callback The callback executed by the action. Source: UIBasic.js, line 9 Action A MenuEntry describes an entry for the menu. Type: Object Properties: Name Type Description title string The menu title. section string The section title. html string A HTML text. task callback The callback executed by the action. Source: UIBasic.js, line 18 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"UIDialog.html":{"id":"UIDialog.html","title":"Class: UIDialog","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: UIDialog UIDialog A UIDialog is a top-level window used for communications with the user. It may be modal or modeless. The content of the dialog can be either an HTML text or a pre-built DOM element. When hidden, a dialog emits a 'closed' event. new UIDialog(container [, options]) Instatiates a UIDialog object. Parameters: Name Type Argument Description container HTMLElement The HTMLElement on which the dialog is focused options Object &lt;optional&gt; An object literal with UIDialog parameters. Properties Name Type Description modal bool Whether the dialog is modal. Source: UIBasic.js, line 689 Methods fade(on) Adds fading effect to the dialog. Parameters: Name Type Description on bool Whether the fading effect is enabled. Source: UIBasic.js, line 786 hide() Hides the dialog. Source: UIBasic.js, line 772 setContent(html) Sets the content of the dialog. Parameters: Name Type Description html string | HTMLElement The content of the dialog (a HTML text or element). Source: UIBasic.js, line 754 show() Shows the dialog. Source: UIBasic.js, line 764 toggle(force) Toggles the display of the dialog. Parameters: Name Type Description force bool Whether to turn the dialog into a one way-only operation. Source: UIBasic.js, line 794 Events closed The event is fired when the dialog is closed. Source: UIBasic.js, line 773 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"Viewer.html":{"id":"Viewer.html","title":"Class: Viewer","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Class: Viewer Viewer Viewer* is the central class of the OpenLIME framework. It is used to create a viewer on a web page and manipulate it. In the following example, after instantiating a Viewer, a LayerImage is added to it. // Create an OpenLIME canvas into .openlime const lime = new OpenLIME.Viewer('.openlime'); // Create an image layer and add it to the canvans const layer = new OpenLIME.Layer({ layout: 'image', type: 'image', url: '../../assets/lime/image/lime.jpg' }); lime.addLayer('Base', layer); // Access to internal structures const camera = lime.camera; const canvas = lime.canvas; const layers = canvas.layers; new Viewer(div [, options]) Instantiates a viewer object given the div element or a DOM selector of a div element. Additionally, an object literal with Viewer options can be specified. The class creates the canvas, enables the WebGL context and takes care of the content redrawing when needed. Viewer is the main class of the OpenLIME framework. It allows access to all the internal structures that make up the system. Parameters: Name Type Argument Description div HTMLElement | string A DOM element or a selector (es. '#openlime' or '.openlime'). options Object &lt;optional&gt; An object literal describing the viewer content. Properties Name Type Default Description background color CSS style for background (it overwrites CSS if present). autofit bool true Whether the initial position of the camera is set to fit the scene model. Source: Viewer.js, line 28 Methods addController(controller) Adds a device event controller to the viewer. Parameters: Name Type Description controller Controller An OpenLIME controller. Source: Viewer.js, line 97 addLayer(id, layer) Adds the given layer to the Viewer. Parameters: Name Type Description id string A label to identify the layer. layer Layer An OpenLIME Layer object. Source: Viewer.js, line 105 redraw() Schedules a redrawing. Source: Viewer.js, line 148 removeLayer(layer) Remove the given layer from the Viewer. Parameters: Name Type Description layer Layer | string An OpenLIME Layer or a Layer identifier. Source: Viewer.js, line 113 × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "},"tutorial-getting-started.html":{"id":"tutorial-getting-started.html","title":"Tutorial: Getting started with OpenLIME","body":" OpenLIMEs Namespaces Cache Modules PointerManager Classes AnnotationAudioPlayerBoundingBoxCameraCanvasColorColormapColormapLegendControllerController2DControllerFocusContextControllerLensControllerPanZoomCoordinateSystemDraggableEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerDstretchLayerImageLayerLensLayerMaskedImageLayerNeuralRTILayerRTILayerSvgAnnotationLayoutLayoutTileImagesLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialLightSphereControllerPointerManager~PointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayerAnnotation#event:readyLayerAnnotation#event:updateLayerAnnotationImage#event:readyLayerAnnotationImage#event:updateLayerBRDF#event:readyLayerBRDF#event:updateLayerCombiner#event:readyLayerCombiner#event:updateLayerDstretch#event:readyLayerDstretch#event:updateLayerImage#event:readyLayerImage#event:updateLayerLens#event:readyLayerLens#event:updateLayerMaskedImage#event:readyLayerMaskedImage#event:updateLayerNeuralRTI#event:readyLayerNeuralRTI#event:updateLayerRTI#event:readyLayerRTI#event:updateLayerSvgAnnotation#event:readyLayerSvgAnnotation#event:updateLayout#event:readyLayout#event:updateSizeLayout#ready Fired when the layout is ready for rendering. This occurs when: - Single-resolution image is fully downloaded - Multi-resolution structure is initialized and validated - Tile pyramid information is computedevent:Layout#ready Fired when the layout is ready for rendering. This occurs when: - Tile descriptors are loaded from annotation file - Tile descriptors are set programmaticallyevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Image dimensions are determined - Pyramid levels are initialized - Bounding boxes are computedevent:Layout#updateSize Fired when the layout size changes and scene extension needs updating. This occurs when: - Tile descriptors are loaded and bounding box is computedevent:LayoutTileImages#event:readyLayoutTileImages#event:updateSizeLayoutTiles#event:readyLayoutTiles#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global RenderingModesimplifysmoothsmoothToPathtaskCallback Getting started with OpenLIME The OpenLIME framework is designed to make image viewers easy to use, even for inexperienced users. A very simple interface allows you to create visualisation tools without having to deal with the complexity of the application. Here is how to get a complete viewer in a few lines of code! const lime = new OpenLIME('#openlime', { background: 'black', canvas: { preserveDrawingBuffer: true} }); const layer0 = new Layer({layout: 'deepzoom1px', type: 'image', url: './img/duck.dzi'}); lime.canvas.addLayer('img', layer0); const ui = new UIBasic(lime); lime.draw(); Useful videos × Search results Close ISTI - CNR &amp; CRS4 - ViC Documentation generated by JSDoc 3.6.7 on 2024-11-02T10:50:59+00:00 using the DocStrap template. "}}
     </script>
 
     <script type="text/javascript">
diff --git a/tutorial-getting-started.html b/tutorial-getting-started.html
index 3135ce7b..49884153 100644
--- a/tutorial-getting-started.html
+++ b/tutorial-getting-started.html
@@ -175,7 +175,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:26+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/tutorials.list.html b/tutorials.list.html
index cbca4b54..a26f7527 100644
--- a/tutorials.list.html
+++ b/tutorials.list.html
@@ -4379,7 +4379,7 @@ <h4 class="modal-title">Search results</h4>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
 	
-		on 2024-11-02T10:46:25+00:00
+		on 2024-11-02T10:50:59+00:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>