From 4727ead891431dee8f09becf666dc661c668fbe4 Mon Sep 17 00:00:00 2001
From: thera2002 <thera2002@users.noreply.github.com>
Date: Tue, 15 Oct 2024 07:04:44 +0000
Subject: [PATCH] deploy: b384ada6591752d76d526824cadab8af98c66ca4

---
 TextToSpeechPlayer.js.html | 4 ++--
 quicksearch.html           | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/TextToSpeechPlayer.js.html b/TextToSpeechPlayer.js.html
index cf806d61..a80b972d 100644
--- a/TextToSpeechPlayer.js.html
+++ b/TextToSpeechPlayer.js.html
@@ -110,7 +110,7 @@ <h1 class="page-title">Source: TextToSpeechPlayer.js</h1>
   constructor(options) {
     Object.assign(this, {
       language: 'it-IT',
-      rate: 1.12,
+      rate: 1.0,
       volume: 1.0,
       cleanText: true,
       voiceSelected: -1
@@ -310,7 +310,7 @@ <h1 class="page-title">Source: TextToSpeechPlayer.js</h1>
             reject(new Error("Speech synthesis timeout"));
           }
         }, maxSpeechTime);
-        // Workaround to resume speech every 14 seconds
+        // Workaround to resume speech every 10 seconds
         this.resumeTimer = setInterval(() => {
           console.log(speechSynthesis.speaking);
           if (!speechSynthesis.speaking) {
diff --git a/quicksearch.html b/quicksearch.html
index 537b80c4..228549be 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":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Source: Cache.js /* * The singleton class **Cache** implements a cache for faster retrieval of the tiles required by layers. * @class Cache */ /** @ignore */ class _Cache { /** * Instantiates a Cache object. Tiles to be fetched are stored in an ordered `queue` in {Layer}. * @param {Object} [options] An object literal with cache parameters. * @param {number} options.capacity=536870912 The total cache capacity (in bytes). * @param {number} options.maxRequest=6 Max number of concurrent HTTP requests. Most common browsers allow six connections per domain. */ 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. } /** * Determines which tiles of a given `layer` are candidates to be downloaded. * Cleans up the cache and schedules the web data fetch. * @param {Layer} layer A layer. */ setCandidates(layer) { if(!this.layers.includes(layer)) this.layers.push(layer); setTimeout(() =&gt; { this.update(); }, 0); //ensure all the queues are set before updating. } /** @ignore */ 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; } /** @ignore */ 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); } /* Finds the best tile to be downloaded */ /** @ignore */ 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; } /* Finds the worst tile to be dropped */ /** @ignore */ 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; } /** @ignore */ loadTile(layer, tile) { this.requested++; (async () =&gt; { layer.loadTile(tile, (size) =&gt; { this.size += size; this.requested--; this.update(); } ); })(); } /** @ignore */ dropTile(layer, tile) { this.size -= tile.size; layer.dropTile(tile); } /** * Flushes all tiles for a `layer`. * @param {Layer} layer A layer. */ flushLayer(layer) { if(!this.layers.includes(layer)) return; for(let tile of layer.tiles.values()) this.dropTile(layer, tile); } } /** * Instantiates a Cache object. Tiles to be fetched are stored in an ordered `queue` in {Layer}. * @classdesc The singleton class **Cache** implements a cache for faster retrieval of the tiles required by layers. * @class Cache * @param {Object} [options] An object literal to define cache parameters. * @param {number} options.capacity=536870912 The total cache capacity (in bytes). * @param {number} options.maxRequest=6 Max number of concurrent HTTP requests. Most common browsers allow six connections per domain. */ let Cache = new _Cache; /** * Flushes all tiles for a `layer`. * @function flushLayer * @memberof Cache * @instance * @param {Layer} layer A layer. */ /** * Determines which tiles of a given `layer` are candidates to be downloaded. * Cleans up the cache and schedules the web data fetch. * @function setCandidates * @memberof Cache * @instance * @param {Layer} layer A layer. */ export { Cache } × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"Annotation.js.html":{"id":"Annotation.js.html","title":"Source: Annotation.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Source: Annotation.js import { BoundingBox } from './BoundingBox.js' /** * An annotation is a decoration (text, graphics element, glyph) to be drawn in an overlay mode on the canvas. * Its purpose is to provide additional information useful for the interpretation of the underlying drawings. * This calls defines the content of an annotation which is represented by its unique identifier and additional * information (such as description, annotation category or class, drawing style, labels, etc.). */ class Annotation { /** * Instantiates an **Annotation** object. An object literal with Annotation `options` can be specified. * Note that the developer is free to define additional elements characterizing a custom annotation by adding new options to the constructor. * @param {Object} [options] An object literal with Annotation options (freely adjustable). * @param {string} options.label A string containing an annotation label. * @param {string} option.description A HTML text containg a comprehensive description of the annotation. * @param {string} option.class A class or category to cluster annotations. * @param {Object} option.state=null An object literal with state variables. */ 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!!! } /** @ignore */ 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); }); } /** * Gets the bounding box of the annotation. * Note that the coordinates for annotations are always relative to the top left corner of the canvas. * @returns {BoundingBox} The bounding box */ 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; } ///////////////////////////////// /* The class also provides functions for importing and exporting from and to files in JSON format. */ /* * Copies an entry of a JSON file into an **Annotation** object. * @param {string} entry A JSON string representing an annotation. * @returns {Annotation} The annotation. */ /** @ignore */ 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); } /* * Exports an Annotation to a JSON entry */ /** @ignore */ 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 "},"LayerSvgAnnotation.js.html":{"id":"LayerSvgAnnotation.js.html","title":"Source: LayerSvgAnnotation.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Source: LayerSvgAnnotation.js import { Util } from './Util' import { Layer } from './Layer' import { Annotation } from './Annotation' import { LayerAnnotation } from './LayerAnnotation' import { CoordinateSystem } from './CoordinateSystem'; /** * Elements to classify the annotations. * @typedef {Object} AnnotationClass * @property {color} stroke The CSS color of a line, text or outline SVG element. * @property {string} label The class name. */ /** * Annotation classes. * @typedef {Object.&lt;string, AnnotationClass&gt;} AnnotationClasses */ /** * An annotation layer that draws SVG elements directly on the canvas (outside the WebGL context). * * Here you will find a tutorial to learn how to build a client-server architecture to manage annotations in OpenLIME. //FIXME * * Extends {@link LayerAnnotation}. */ class LayerSvgAnnotation extends LayerAnnotation { /** * Instantiates a LayerSvgAnnotation object. * @param {Object} [options] An object literal with options that inherits from {@link LayerAnnotation}. * @param {AnnotationClasses} options.classes An object literal definying colors and labels of the annotation classes. * @param {Function} options.onClick The callback to fire when the an annotation is clicked on the canvas. The callback is passed an object containing the selected annotation. * @param {bool} options.shadow=true Whether to insert SVG elements in a shadow DOM. */ 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.createOverlaySVGElement(); //this.setLayout(this.layout); } /** @ignore */ 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 a value that indicates whether the layer is visible. * @param {bool} visible The value. */ setVisible(visible) { if (this.svgElement) this.svgElement.style.display = visible ? 'block' : 'none'; super.setVisible(visible); } /** @ignore */ clearSelected() { if (!this.svgElement) this.createOverlaySVGElement(); // return; this.svgGroup.querySelectorAll('[data-annotation]').forEach((e) =&gt; e.classList.remove('selected')); super.clearSelected(); } /** * Selects/deselects an annotation * @param {Annotation} anno The annotation. * @param {bool} on=true Whether to select the annotation. */ setSelected(anno, on = true) { for (let a of this.svgElement.querySelectorAll(`[data-annotation=\"${anno.id}\"]`)) a.classList.toggle('selected', on); super.setSelected(anno, on); } /** @ignore */ newAnnotation(annotation) { let svg = Util.createSVGElement('svg'); if (!annotation) annotation = new Annotation({ element: svg, selector_type: 'SvgSelector' }); return super.newAnnotation(annotation) } /** @ignore */ 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; } /** * Return the string containing the transform for drawing the svg group in the proper position * @param {Transform} transform current transform parameter of the draw function * @param {bool} inverse when its false return the transform needed to draw the svgGroup * @returns string with svgroup transform */ 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})`; } /** @ignore */ 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); } } //utils /* let parser = new DOMParser(); let use = createElement('use', { 'xlink:href': '#' + a.id, 'stroke-width': 10, 'pointer-events': 'stroke' }); //let use = parser.parseFromString(`&lt;use xlink:href=\"${a.id}\" stroke-width=\"10\" pointer-events=\"stroke\"/&gt;`, \"image/svg+xml\"); this.svgGroup.appendChild(use); */ } } } } Layer.prototype.types['svg_annotations'] = (options) =&gt; { return new LayerSvgAnnotation(options); } export { LayerSvgAnnotation } × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"Transform.js.html":{"id":"Transform.js.html","title":"Source: Transform.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "},"Simplify.js.html":{"id":"Simplify.js.html","title":"Source: Simplify.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "},"BoundingBox.js.html":{"id":"BoundingBox.js.html","title":"Source: BoundingBox.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Source: BoundingBox.js /** * The bounding box is a rectangular box that is wrapped as tightly as possible around a geometric element. It is oriented parallel to the axes. * It is defined by two opposite vertices. The class It includes a comprehensive set of functions for various processing tasks related to bounding boxes. * */ class BoundingBox { /** * Instantiates a **BoundingBox** object. * @param {Object} [options] An object literal defining the bounding box. * @param {number} xLow=1e20 The x coordinate of the low corner a rectangle. * @param {number} yLow=1e20 The y coordinate of the low corner a rectangle. * @param {number} xHigh=-1e20 The x coordinate of the high corner a rectangle. * @param {number} xHigh=-1e20 The y coordinate of the high corner a rectangle. */ constructor(options) { Object.assign(this, { xLow: 1e20, yLow: 1e20, xHigh: -1e20, yHigh: -1e20 }); Object.assign(this, options); } /** * Defines a bonding box from an array of four elements. * @param {Array&lt;number&gt;} x The array of four elements with the two corners ([xLow, yLow, xHigh, yHigh]). */ fromArray(x) { this.xLow = x[0]; this.yLow = x[1]; this.xHigh = x[2]; this.yHigh = x[3]; } /** * Empties a bounding box. */ toEmpty() { this.xLow = 1e20; this.yLow = 1e20; this.xHigh = -1e20; this.yHigh = -1e20; } /** * Tests weather the bounding box is empty. * @returns {bool} The test result. */ isEmpty() { return this.xLow &gt; this.xHigh || this.yLow &gt; this.yHigh; } /** * Returns an array of four elements containg the low and high corners. * @returns {Array&lt;number&gt;} The array of corners. */ toArray() { return [this.xLow, this.yLow, this.xHigh, this. yHigh]; } /** * Returns a text string with the corner coordinates separated by a space. * @returns {string} The string of corners. */ toString() { return this.xLow.toString() + \" \" + this.yLow.toString() + \" \" + this.xHigh.toString() + \" \" + this.yHigh.toString(); } /** * Merges a `box` to `this` BoundingBox. * @param {BoundingBox} box The bounding box to be merged. */ 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); } } /** * Merges a point `p`{x, y} to `this` BoundingBox. * @param {{x, y}} p The point to be merged. */ 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); } /** * Translates the bounding box by a displacement vector (dx, dy). * @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; } /** * Divides by `side` and truncates the corner coordinates. * @param {*} side The value to divide 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; } /** * Returns the bounding box width. * @returns {number} The width value. */ width() { return this.xHigh - this.xLow; } /** * Returns the bounding box height. * @returns {number} The height value. */ height() { return this.yHigh - this.yLow; } /** * Returns the bounding box center. * @returns {number} The center value. */ center() { return { x: (this.xLow+this.xHigh)/2, y: (this.yLow+this.yHigh)/2 }; } /** * Returns the i-th corner. * @param {number} i The index of the corner. * @returns {Array&lt;number&gt;} A [x, y] pair. */ 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)] }; } 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 out the bounding box corners in the console. */ 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 "},"Camera.js.html":{"id":"Camera.js.html","title":"Source: Camera.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Source: Camera.js import { Transform } from './Transform.js' import { BoundingBox } from './BoundingBox.js' import { addSignals } from './Signals.js' /** * The type Viewport defines a rectangular viewing region inside a (wxh) area * @typedef {Object} Viewport * @property {number} x x-component of the lower left corner. * @property {number} y y-component of the lower left corner. * @property {number} dx x-component of the top right corner. * @property {number} dy y-component of the top right corner. * @property {number} w the viewport width. * @property {number} w the viewport height. */ /** * The class Camera does not have an operational role, but it is rather a container of parameters * needed by the system to define the viewport, the camera position and to calculate the appropriate view. * * To enable the animation, a camera contains two view matrices (two {@link Transform} objects): a `source` with the * current position and a `target` with the position the camera will arrive at in a time `dt`. * * The member function `setPosition()` takes care of defining the target, the OpenLIME system automatically animates the * camera to bring it from source to target, unless the user manually interrupts the current animation. * * User-generated device events (such as touch events or mouse events) can modify camera parameters via an appropriate {@link Controller}. */ class Camera { /** * Creates a scene's camera. An update event is issued when the camera has completed its positioning. * Additionally, an object literal with Viewer `options` can be specified. * @param {Object} [options] * @param {bool} options.bounded=true Weather to limit the translation of the camera to the boundary of the scene. * @param {number} options.maxFixedZoom=2 The maximum pixel size. * @param {number} options.minScreenFraction=1 The minimum portion of the screen to zoom in. */ 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'; } /** * Defines the copy constructor. * @returns A copy of the Camera. */ copy() { let camera = new Camera(); Object.assign(camera, this); return camera; } /** * Sets the viewport and updates the camera position as close as possible to the previuos 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; } } /** * Gets the current viewport (in device coordinates). * @return the current viewport */ glViewport() { let d = window.devicePixelRatio; let viewport = {}; for (let i in this.viewport) viewport[i] = this.viewport[i] * d; return viewport; } /** * Map coordinate relative to the canvas into scene coords using the specified transform. * @return {Object} {X, Y} in scene coordinates (relative to the center of the viewport). */ 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 }; } /** * Map coordinate relative to the scene into canvas coords using the specified transform. * @return {Object} {X, Y} in canvas coordinates. */ 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 (position, rotation, ) * @param {number} dt The animation duration in millisecond. * @param {*} x The x-component of the translation vector. * @param {*} y The y-component of the translation vector. * @param {*} z The zoom factor. * @param {*} a The rotation angle (in degrees). * @param {Easing} easing The function aimed at making the camera movement less severe or pronounced. */ 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'); } /** * Pan the camera (in canvas coords) * @param {number} dt The animation duration in millisecond. * @param {number} dx The horizontal displancement. * @param {number} dy The 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); } /** Zoom in or out at a specific point (in canvas coords) * @param {number} dt The animation duration in millisecond. * @param {number} z The distance of the camera from the canvas. * @param {number} x The x coord to zoom in|out * @param {number} y The y coord to zoom in|out */ 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); } /** * Rotate the camera around its z-axis by an `a` angle (in degrees) * @param {number} dt The animation duration in millisecond. * @param {angle} a The 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); } /** Zoom in or out at a specific point (in canvas coords) * @param {number} dt The animation duration in millisecond. * @param {number} dz The scroll amount for the z-axis. * @param {number} x=0 The x coord to zoom in|out * @param {number} y=0 The y coord to zoom in|out */ 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 `time` in canvas coords. * @param {time} time The current time (a DOMHighResTimeStamp variable, as in `performance.now()`). * @returns {Transform} The current transform */ 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 `time` in device coords. * @param {time} time The current time (a DOMHighResTimeStamp variable, as in `performance.now()`). * @returns {Transform} The current transform */ getGlCurrentTransform(time) { const pos = this.getCurrentTransform(time); pos.x *= window.devicePixelRatio; pos.y *= window.devicePixelRatio; pos.z *= window.devicePixelRatio; return pos; } /** * Modify the camera settings to frame the specified `box` * @param {BoundingBox} box The specified rectangle [minx, miny, maxx, maxy] in the canvas. * @param {number} dt The animation duration in millisecond */ 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); } /** * Modify the camera settings to the factory values (home). * @param {number} dt animation duration in millisecond */ fitCameraBox(dt) { this.fit(this.boundingBox, dt); } /** @ignore */ 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 "},"Shader.js.html":{"id":"Shader.js.html","title":"Source: Shader.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "},"Canvas.js.html":{"id":"Canvas.js.html","title":"Source: Canvas.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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)); }; /** * Creates the WebGL context for the `canvas`. It stores information related to the `overlay` DOM element and the `camera` of the scene. * Signals are triggered in case of scene modifications. * Additionally, an object literal with Canvas `options` can be specified. * @param {(element|string)} canvas DOM element or selector for a `&lt;canvas&gt;`. * @param {(element|string)} overlay DOM element or selector for overlay decorations (i.e. annotations, glyphs, etc...) * @param {Camera} camera The scene's camera. * @param {Object} [options] An object literal. * @param {Object} options.layers Object specifies layers (see. {@link Layer}) * @param {bool} options.preserveDrawingBuffer=false Whether to preserve the buffers until manually cleared or overwritten. Needed for screenshots * (otherwise is just a performance penalty). * */ class Canvas { 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')); } 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); } /* * Adds a Canvas Event * @param {*} event A label to identify the event. * @param {*} callback The event callback function. */ /** @ignore */ 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(); }}); } /** * Sets the state variables of all the system * @param {Object} state An object with state variables. * @param {number} dt The animation duration in millisecond. * @param {Easing} easing The function aimed at making the camera movement or control adjustments less severe or pronounced. */ 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); } } /** * Gets the state variables of all the system as described in the stateMask * @return {Object} An object with state variables. */ 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; } /** @ignore */ 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 the given layer to the Canvas and connects the layer's events to it. * @param {string} id A label to identify the layer. * @param {Layer} layer An OpenLIME Layer object. */ addLayer(id, layer) { /** * The event is fired if a layer is updated, added or removed. * @event Canvas#update */ /** * The event is fired when all the layers are ready (i.e. initialized and with data ready to be displayed). * @event Canvas#ready */ 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(); } /** Remove the given layer from the Canvas * @param {Layer} layer An OpenLIME Layer object. * * @example * let layer0 = new Layer(options); * canvas.addLayer('kdmap', layer0); * ... * canvas.removeLayer(layer0); */ removeLayer(layer) { layer.clear(); //order is important. delete this.layers[layer.id]; delete Cache.layers[layer]; this.prefetch(); } /** @ignore */ updateSize() { /** * The event is fired if a layout changes its size or position (the event forces the re-computation of the layer bounding boxes). * @event Canvas#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'); } /** @ignore */ 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; } /* * This function have each layer to check which tiles are needed and schedule them for download. * @param {object} transform is the camera position (layer will combine with local transform). */ /** @ignore */ 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()); } } } } addSignals(Canvas, 'update', 'updateSize', 'ready'); export { Canvas } × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"Colormap.js.html":{"id":"Colormap.js.html","title":"Source: Colormap.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Source: Colormap.js class Spline { 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); } /** * inspired by https://stackoverflow.com/a/40850313/4417327 */ 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; } 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; } } class Color { 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); } value() { return [this.r, this.g, this.b, this.a]; } 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; } toHex() { const rgb = this.toRGB(); return Color.rgbToHex(rgb[0], rgb[1], rgb[2]); } toHexa() { const rgba = this.toRGBA(); return Color.rgbToHexa(rgba[0], rgba[1], rgba[2], rgba[3]); } 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; } } class Colormap { 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); rangeDomain() { return [this.domain[0], this.domain[this.domain.length - 1]]; } 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; } 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; } 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)); } 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; } /** Precision as parameter for future dev */ 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 }; } } class ColormapLegend { 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(); } 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; } } 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 "},"Controller.js.html":{"id":"Controller.js.html","title":"Source: Controller.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Source: Controller.js /** * **Controller** is a virtual base class that handles user interaction via device events (mouse/touch events). * It 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. * * In the example below a **ControllerPanZoom** object (derived from **Controller**) is created and associated with the `pointerManager` of the `viewer`. * ``` * const panzoom = new OpenLIME.ControllerPanZoom(viewer.camera, { * priority: -1000, * activeModifiers: [0, 1] * }); * viewer.pointerManager.onEvent(panzoom); * ``` */ class Controller { /** * Instantiates a Controller object. * @param {Object} [options] An object literal with controller parameters. * @param {number} options.panDelay=50 Inertial value of the movement in ms for panning movements. * @param {number} options.zoomDelay=200 A zoom event is smoothed over this delay in ms, * @param {number} options.priority=0 Higher priority controllers are invoked first. */ constructor(options) { Object.assign(this, { active: true, debug: false, panDelay: 50, zoomDelay: 200, priority: 0, activeModifiers: [0] }); Object.assign(this, options); } /** * Returns the modifier state of the event `e`. Modifiers are keyboard events that happens simultaneously * with a device event (e.g. shift + left mouse button). * The modifiers handled by a controller are: * * NoModifiers = 0 * * CrtlModifier = 1 * * ShiftModifier = 2 * * AltModifier = 4 * * The modifier state is the sum of values above corresponding to the key pressed (CTRL, SHIFT or ALT). * @param {Event} e * @returns {number} The modifier state. */ modifierState(e) { let state = 0; if(e.ctrlKey) state += 1; if(e.shiftKey) state += 2; if(e.altKey) state += 4; return state; } /** @ignore */ captureEvents() { this.capture = true; } /** @ignore */ releaseEvents() { this.capture = false; } } export { Controller } × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"Controller2D.js.html":{"id":"Controller2D.js.html","title":"Source: Controller2D.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Source: Controller2D.js import { BoundingBox } from './BoundingBox.js'; import { Controller } from './Controller.js' /** * Callback invoked when the position (x, y) is updated. * @callback updatePosition * @param {number} x The x coordinate. * @param {number} y The y coordinate. */ function clamp(value, min, max) { return Math.max(min, Math.min(max, value)); } /** **Controller2D** intercepts pan and single-tap events in the canvas and updates a 2D position (x, y) of the device pointer. * If `options.relative` is false the coordinates are both mapped between [-1, 1] with origin in the bottom left corner of the canvas, * otherwise the coordinates have origin in the initial position of the panning and ranges both between [-1, 1] according to the distance * from the local origin (multiplied by a `options.speed` value). * When updated, the (x, y) position is passed to a `callback` for further custom computations. */ class Controller2D extends Controller { /** * Instantiates a Controller2D object. * @param {updatePosition} callback The callback invoked when the postion (x, y) is updated. * @param {Object} [options] An object literal with controller parameters. * @param {bool} options.relative=false Whether the coordinate system is local. * @param {number} options.speed=2.0 Enhancement factor for computation of local coordinates. */ 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; } /** * Stores the final position for local coordinate system. This is a convenience function to be used in callback. * @param {number} x The x-axis coordinate. * @param {number} y The y-axis coordinate. */ setPosition(x, y) { this.current_x = x; this.current_y = y; this.callback(x, y); } /* * Computes the mapping between the canvas pixel coordinates to [-1, 1]. * @param {event} e The device event. * @returns {{x, y}} The projected position. */ /** @ignore */ 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] } /** @ignore */ 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]; } /** @ignore */ 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(); } /** @ignore */ panMove(e) { if(!this.panning) return false; this.callback(...this.rangeCoords(e)); } /** @ignore */ 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)); } /** @ignore */ 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 "},"ControllerFocusContext.js.html":{"id":"ControllerFocusContext.js.html","title":"Source: ControllerFocusContext.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Source: ControllerFocusContext.js import {ControllerLens} from './ControllerLens.js' import { CoordinateSystem } from './CoordinateSystem.js'; import { FocusContext } from './FocusContext.js'; class ControllerFocusContext extends ControllerLens { static callUpdate(param) { param.update(); } 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}; } 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); } 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); } } 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(); } 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; } } } } pinchEnd(e, x, y, scale) { this.zooming = false; } /** * Start zoom operation clicking on lens border. Call it on pointerdown event on lens border * @param {*} p pixel position in 0,wh (y up) */ 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); } } /** * Zoom dragging lens border. Call it during pointermove event on lens border * @param {*} p pixel position in 0,wh (y up) */ 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); } } /** @ignore */ 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); } } /** * Called at end of zoom border drag operation */ zoomEnd() { if (this.lensLayer.visible) { super.zoomEnd(); // Stop calling zoomUpdate clearTimeout(this.timeOut); } } 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(); } /** * Multiply lens radius of dz. Consequently adjust camera in order to keep Focus &amp; Context condition verified. * At the end of the operation lens radius could be * @param {*} dz factor to multiply lens radius */ 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); } 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); } panEnd() { if (this.panning) { clearTimeout(this.timeOut); } this.panning = false; this.panningCamera = false; this.zooming = false; } 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]; } } 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; } setDatasetDimensions(width, height) { this.imageSize = {w: width, h:height}; } 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 "},"ControllerLens.js.html":{"id":"ControllerLens.js.html","title":"Source: ControllerLens.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Source: ControllerLens.js import {Controller} from './Controller.js' import {CoordinateSystem} from './CoordinateSystem.js' import { FocusContext } from './FocusContext.js'; class ControllerLens extends Controller { 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; } 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(); } } 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(); } // else if (this.zooming) { // const p = this.getPixelPosition(e); // this.zoomMove(p); // } } panEnd(e) { this.panning = false; this.zooming = false; } 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(); } } 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); } pinchEnd(e, x, y, scale) { this.zooming = false; } 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; } /** * Start zoom operation clicking on lens border. Call it at start of pointerdown event on lens border * @param {*} pe pixel position in CanvasHtml */ 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; } /** * Zoom dragging lens border. Call it during pointermove event on lens border * @param {*} pe pixel position CanvasHTml */ 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); } } /** * End of zoom operation on lens border */ zoomEnd() { this.zooming = false; } getFocus() { const p = this.lensLayer.getCurrentCenter(); const r = this.lensLayer.getRadius(); return {position: p, radius: r} } 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}; } /** * Convert position from CanvasHtml to Viewport * @param {*} e contain offsetX,offsetY position in CanvasHtml (0,0 top,left, y Down) * @returns Position in Viewport (0,0 at bottom,left, y Up) */ getPixelPosition(e) { const p = {x: e.offsetX, y: e.offsetY}; return CoordinateSystem.fromCanvasHtmlToViewport(p, this.camera, this.useGL); } /** * Convert position from CanvasHtml to Scene * @param {*} e must contain offsetX,offsetY position in CanvasHtml (0,0 top,left, y Down) * @returns Point in Scene coordinates (0,0 at center, y Up) */ getScenePosition(e) { const p = {x: e.offsetX, y: e.offsetY}; return CoordinateSystem.fromCanvasHtmlToScene(p, this.camera, this.useGL); } 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 "},"ControllerPanZoom.js.html":{"id":"ControllerPanZoom.js.html","title":"Source: ControllerPanZoom.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Source: ControllerPanZoom.js import { Controller } from './Controller.js' import { CoordinateSystem } from './CoordinateSystem.js'; import { addSignals } from './Signals.js' /** **ControllerPanZoom** intercepts pan, zoom, single tap, and wheel events in the canvas and updates the scene camera parameters. */ class ControllerPanZoom extends Controller { /** * Instantiates a ControllerPanZoom object. * @param {Camera} camera The scene camera. * @param {Object} [options] An object literal with controller parameters. * @param {number} options.zoomAmount=1.2 The incremental value for zoom in/out. */ 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); } /** @ignore */ 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(); } /** @ignore */ 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); } /** @ignore */ panEnd(e) { this.panning = false; } /** @ignore */ distance(e1, e2) { return Math.sqrt(Math.pow(e1.x - e2.x, 2) + Math.pow(e1.y - e2.y, 2)); } /** @ignore */ pinchStart(e1, e2) { this.zooming = true; this.initialDistance = Math.max(30, this.distance(e1, e2)); e1.preventDefault(); //e2.preventDefault(); //TODO this is optional? } /** @ignore */ 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(); } /** @ignore */ pinchEnd(e, x, y, scale) { this.zooming = false; e.preventDefault(); } /** @ignore */ 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(); } /** @ignore */ 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 "},"CoordinateSystem.js.html":{"id":"CoordinateSystem.js.html","title":"Source: CoordinateSystem.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "},"EditorSvgAnnotation.js.html":{"id":"EditorSvgAnnotation.js.html","title":"Source: EditorSvgAnnotation.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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' /** * Callback for create/update/delete annotations. * @function crudCallback * @param {Annotation} anno The current annotation entry. */ /** * Callback implementing custom state annotations. * @function customStateCallback * @param {Annotation} anno The current annotation entry. */ /** * Callback to customize the annotation data object. * @function customDataCallback * @param {Annotation} anno The current annotation entry. */ /** * Callback executed when an annotation is selcted on the user interface. * @function selectedCallback * @param {Annotation} anno The current annotation entry. */ /** * **EditorSvgAnnotation** enables the {@link UIBasic} interface to edit (create/update/delete) SVG annotations. * This class is a mere utility that acts as an adapter between the annotation database and the OpenLIME system. * * Here you will find a tutorial to learn how to use the SVG annotation editor. //FIXME * * For the experienced developer this class can be used as an example to design more complex editors. * * In the following example an **EditorSvgAnnotation** is instatiated and connected to the annotation database * through three callbacks implementing database operations (create/update/delete). * ``` * // Creates an annotation layer and add it to the canvans * const anno = new OpenLIME.Layer(aOptions); * lime.addLayer('anno', anno); * * // Creates a SVG annotation Editor * const editor = new OpenLIME.EditorSvgAnnotation(lime, anno, { * viewer: lime, * classes: classParam * }); * editor.createCallback = (anno) =&gt; { console.log(\"Created annotation: \", anno); processRequest(anno, 'create'); return true; }; * editor.updateCallback = (anno) =&gt; { console.log(\"Updated annotation: \", anno); processRequest(anno, 'update'); return true; }; * editor.deleteCallback = (anno) =&gt; { console.log(\"Deleted annotation: \", anno); processRequest(anno, 'delete'); return true; }; * ``` */ class EditorSvgAnnotation { /** * Instatiates a EditorSvgAnnotation object. * @param {Viewer} viewer The OpenLIME viewer. * @param {LayerSvgAnnotation} layer The annotation layer on which to operate. * @param {Object} [options] An object literal with SVG editor parameters. * @param {AnnotationClasses} options.classes An object literal definying colors and labels of the annotation classes. * @param {crudCallback} options.createCallback The callback to implement annotation creation. * @param {crudCallback} options.updateCallback The callback to implement annotation update. * @param {crudCallback} options.deleteCallback The callback to implement annotation deletion. * @param {bool} options.enableState=false Whether to enable custom annotation state. This allows to include some state variables into an annotation item (such as camera, light or lens position). * @param {customStateCallback} options.customState The callback implementing custom state annotations. * @param {customDataCallback} options.customData The callback to customize the annotation data object. * @param {selectedCallback} options.selectedCallback The callback executed when an annotation is selcted on the user interface. */ 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; } } /** @ignore */ 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; } /** @ignore */ 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); } /** @ignore */ 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); } /** @ignore */ 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(); } /** @ignore */ 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'); } /** @ignore */ 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 /** @ignore */ 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(); } } /** @ignore */ 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(); } } /** @ignore */ 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(); } /** @ignore */ 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 "},"FocusContext.js.html":{"id":"FocusContext.js.html","title":"Source: FocusContext.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Source: FocusContext.js import { Transform } from \"./Transform\"; import { CoordinateSystem } from \"./CoordinateSystem\"; /** * The FocusContext class is responsible for identifying a good Focus and Context situation. * During interaction it distributes user inputs on lens, into camera and lens movement * in order to keep the lens in focus and context situation, within the viewport, with enough * space between the lens and the viewport boundaries, for both panning and zooming actions. * It also computes a good transform given a lens to properly display the lens within * the current viewport (used for stored annotations) */ class FocusContext { /** * Subdivide pan amount (delta) between lens (focus) and camera transform (context). * @param {*} viewport {x, y, dx, dy, w, h} * @param {*} focus lens : {position,radius}. Contain current lens in dataset coords, which will be updated to translated lens * @param {Transform} context Contain current transform, which will be updated to translated context * @param {Number} delta amount of pan in dataset pixels * @param {*} imageSize {w,h} Size of the dataset width height (to clamp movement on boundaries) */ 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); } } /** * Distribute scale between radius and camera scale in order to keep focus and context situation * @param {Camera} camera * @param {*} focus lens : {position,radius}. Contain current lens in dataset coords, which will be updated to translated lens * @param {Transform} context Contain current transform, which will be updated to translated context * @param {Number} dz amount of scale (which should multiply scale) */ 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; } /** * Adapt context in order to have focus &amp; context condition satisfied for the requested focus * @param {*} viewport {x, y, dx, dy, w, h} * @param {*} focus lens : {position,radius}. Contain current lens in dataset coords * @param {Transform} context Contain current transform, which will be updated to translated context * @param {Number} desiredScale context desired scale (which will be clamped within min max scale) */ 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); } /** * Fix context scale to make projected lens fit within viewport. * @param {*} viewport {x, y, dx, dy, w, h} * @param {*} focus lens : {position,radius}. Contain current lens in dataset coords * @param {Transform} context Contain current transform, whose scale will be updated to keep lens in focus and context after scale */ 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; } } /** * Translate context in order to put lens (focus) in focus and context condition * @param {*} viewport {x,y,dx,dy,w,h} * @param {*} focus lens : {position,radius} * @param {Transform} context */ 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; } /** * @ignore */ 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)) / (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; } /** * @ignore */ 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 } /** * @ignore */ 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; } /** * @ignore */ 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}; } /** * @ignore */ 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 "},"Layer.js.html":{"id":"Layer.js.html","title":"Source: Layer.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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' /** * The Layer class is responsible for drawing slides in the OpenLIME viewer. * Layers can directly draw their contents on the viewer or be combined with each other to obtain more complex visualizations. * 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. * * A Layer takes raster data (images) as input which are managed by the layout. A layer stores all the information * and functions needed to render the graphics (shaders, shader parameters, data structures, etc.), and takes care * of data prefetching and communication with the cache. * * The Layer is a kind of primitive class from which other Layer classes can inherit. * Each derived class \"registers\" on the Layer base class, the user can then use an instance of * Layer by indicating the chosen `type` in the `options`. * * In the example below a Layer of type 'rti' is created, then a LayerRTI (class derived from Layer) is instantiated and added to the viewer's layer stack. * * @example * const layer1 = new OpenLIME.Layer({ * layout: 'deepzoom', * label: 'Ancient Roman coin', * type: 'rti', * url: '../../assets/rti/hsh/info.json', * normals: false * }); * viewer.addLayer('coin1', layer1); */ //FIXME: prefetchborder and mipmapbias should probably go into layout 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); /* //create members from options. this.rasters = this.rasters.map((raster) =&gt; new Raster(raster)); //layout needs to be the same for all rasters if(this.rasters.length) { if(typeof(this.layout) != 'object') this.layout = new Layout(this.rasters[0].url, this.layout) this.setLayout(this.layout) if(this.rasters.length) for(let raster in this.rasters) raster.layout = this.layout; } if(this.shader) this.shader = new Shader(this.shader); */ } /** @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); } } setViewport(view) { this.viewport = view; this.emit('update'); } addShaderFilter(f) { if (!this.shader) throw \"Shader not implemented\"; this.shader.addFilter(f); } removeShaderFilter(name) { if (!this.shader) throw \"Shader not implemented\"; this.shader.removeFilter(name); } clearShaderFilters() { if (!this.shader) throw \"Shader not implemented\"; this.shader.clearFilters(); } /** * Sets the state of the layer */ 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 state variables of the layer. * @return {Object} An object with state variables */ 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'); }); } // OK setTransform(tx) { //FIXME this.transform = tx; this.emit('updateSize'); } /** * Sets the shader to use * @param {*} id the current shader identifier (the shader must already be registered in the `shaders` array) */ 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 mode. * @returns {string} the shader mode */ getMode() { if (this.shader) return this.shader.mode; return null; } /** * Gets an arrays of all the modes implemented in the current shader. * @returns {string[]} arrays of modes */ getModes() { if (this.shader) return this.shader.modes; return []; } /** * Set the mode of the current shader. * @param {string} mode the mode of the current shader. */ setMode(mode) { this.shader.setMode(mode); this.emit('update'); } /** * Sets a value that indicates whether the layer is visible. * @param {bool} visible The value. */ setVisible(visible) { this.visible = visible; this.previouslyNeeded = null; this.emit('update'); } /** * Sets the layer zindex value (stack ordering value for the rendering of layers). * @param {int} zindex The value. */ setZindex(zindex) { this.zindex = zindex; this.emit('update'); } /** * Computes the minum scale value of the `layers`. * @param {Layer[]} layers * @param {bool} discardHidden Whether hidden layers are not to be included in the computation. * @returns {number} the minimum scale. * @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 the scale of the layer transformation * @returns {number} The scale */ scale() { // FIXME: this do not consider children layers return this.transform.z; } /** * Transform-adjusted spatial resolution for this layer * @return {number} size of a single pixel in mm */ pixelSizePerMM() { return this.pixelSize * this.transform.z; } /** * Gets the layer bounding box (&lt;FIXME&gt; Change name: box is in scene coordinates) * @returns {BoundingBox} The 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 the merge bounding box of all the 'layers` * @param {Layer[]} layers * @param {bool} discardHidden Whether hidden layers are not to be included in the computation. * @returns {BoundingBox} The 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 new shader parameter control. * @param {string} name The name of the control. * @param {*} value The value for initialization. */ 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' }; } /** * Set a shader parameter control with new value * @param {*} name The name of the control. * @param {*} value The value for initialization. * @param {time} dt Duration of the interpolation (0=no interpolation). */ 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'); } /** * Update the current values of the parameter controls. * @returns {bool} Weather the interpolation is finished (the time has now gone). */ 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); } /** @ignore */ 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; } /** @ignore */ 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); } /** @ignore */ 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 "},"LayerAnnotation.js.html":{"id":"LayerAnnotation.js.html","title":"Source: LayerAnnotation.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Source: LayerAnnotation.js import { Annotation } from './Annotation.js'; import { Layer } from './Layer.js' import { addSignals } from './Signals.js'; /** * An annotation layer is a layer used to display decorations (text, graphics elements, glyphs, etc...) on top of other layers. * Its purpose is to provide additional information useful for the interpretation of the underlying layers. * An object literal with `options` can be specified. * * Here you will find a tutorial to learn how to build a client-server architecture to manage annotations in OpenLIME. //FIXME * * Extends {@link Layer}. */ 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); })(); } } /** @ignore */ 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'); } /** @ignore */ 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; } /** @ignore */ 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(); } } } /** @ignore */ 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); } }); } /** @ignore */ 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;`; } /** * Gets an annotation by its `id` * @param {string} id * @returns {Annotation} The annotation. */ getAnnotationById(id) { for(const anno of this.annotations) if(anno.id == id) return anno; return null; } /** @ignore */ clearSelected() { this.annotationsListEntry.element.parentElement.querySelectorAll(`[data-annotation]`).forEach((e) =&gt; e.classList.remove('selected')); this.selected.clear(); } /** * Selects/deselects an annotation * @param {Annotation} anno The annotation. * @param {bool} on=true Whether to select the annotation. */ 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 "},"LayerAnnotationImage.js.html":{"id":"LayerAnnotationImage.js.html","title":"Source: LayerAnnotationImage.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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'; /** * Class which extend LayerAnnotation. Support Image Annotations. * Each annotation corresponds to a tile (currently single resolution) */ class LayerAnnotationImage extends LayerAnnotation { 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); } length() { return this.annotations.length; } setTileVisible(index, visible) { this.layout.setTileVisible(index, visible); //this.annotations[index].needsUpdate = true; //this.emit('update'); } setAllTilesVisible(visible) { this.layout.setAllTilesVisible(visible); // for(let a of this.annotations) { // a.needsUpdate = true; // } //this.emit('update'); } 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); } 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 "},"LayerBRDF.js.html":{"id":"LayerBRDF.js.html","title":"Source: LayerBRDF.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Source: LayerBRDF.js import { Layer } from './Layer.js' import { Raster } from './Raster.js' import { ShaderBRDF } from './ShaderBRDF.js' /** * Extends {@link Layer}. * @param {options} options Same as {@link Layer}, but channels(ks,kd,normals,gloss) are required. */ class LayerBRDF extends Layer { 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'); } 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]; } // Idea from SGI trackball, siggraph 1988 (e.g., http://gxsm.sourceforge.net/gxsmsrcdoxy/html/d2/db2/gxsm_2trackball_8C-source.html) // The point is projected to a sphere in the center, and deformed to a // hyperbolic sheet of rotation away from it in order to avoid // the acceleration due to projection on an increasingly vertical // surface 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]; } setLight(light, dt, easing='linear') { this.setControl('light', light, dt, easing); } 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; } } Layer.prototype.types['brdf'] = (options) =&gt; { return new LayerBRDF(options); } export { LayerBRDF } × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"LayerCombiner.js.html":{"id":"LayerCombiner.js.html","title":"Source: LayerCombiner.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Source: LayerCombiner.js import { Layer } from './Layer.js' /** * Combines other layers (in the framebuffer) using a custom shader. {@link LayerLens} is an example. * The class LayerImage can also be instantiated via the Layer parent class and `options.type='combiner'`. * * Extends {@link Layer}. * @param {options} options Same as {@link Layer}, but `options.layers` are required * @example * // Instantiate the LayerCombiner class and set the two inputs (layer0 and layer1) * const combiner = new OpenLIME.Layer({ * type: 'combiner', * visible: true, * layers: [layer0, layer1] * }); * * // Instantiate the ShaderCombiner class (a custom shader) and select 'diff' as default mode (for visualization purposes) * const shader = new OpenLIME.ShaderCombiner(); * shader.mode = 'diff'; * * // Assign the newly created shader to the combiner (labelling it 'standard') and enable it * combiner.shaders = { 'standard': shader }; * combiner.setShader('standard'); * * // Add the combiner to the canvas * lime.addLayer('combiner', combiner); */ class LayerCombiner extends Layer { 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'; } /** @ignore */ 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); } /** @ignore */ 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 /** @ignore */ deleteFramebuffers() { } /** @ignore */ 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; } /** @ignore */ 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; } } Layer.prototype.types['combiner'] = (options) =&gt; { return new LayerCombiner(options); } export { LayerCombiner } × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"LayerImage.js.html":{"id":"LayerImage.js.html","title":"Source: LayerImage.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Source: LayerImage.js import { Layer } from './Layer.js' import { Raster } from './Raster.js' import { Shader } from './Shader.js' /** * The class LayerImage is derived from Layer and it is responsible for the rendering of simple images. * * @example * // 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); */ class LayerImage extends Layer { /** * Displays a simple image. * An object literal with Layer `options` can be specified. * The class LayerImage can also be instantiated via the Layer parent class and `options.type='image'`. * Extends {@link Layer}. * @param {Object} options an object literal with Layer options {@link Layer}, but `options.url` and `options.layout` are required. * @param {string} options.url The URL of the image * @param {(string|Layout)} options.layout='image' The layout (the format of the input raster images). */ 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'); } } Layer.prototype.types['image'] = (options) =&gt; { return new LayerImage(options); } export { LayerImage } × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"LayerLens.js.html":{"id":"LayerLens.js.html","title":"Source: LayerLens.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Source: LayerLens.js import { CoordinateSystem } from './CoordinateSystem.js'; import { Layer } from './Layer.js' import {LayerCombiner} from './LayerCombiner.js' import {ShaderLens} from './ShaderLens.js' /** * Displays a lens on the canvas. */ class LayerLens extends LayerCombiner { 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; } setVisible(visible) { if(this.dashboard) { if(visible) { this.dashboard.container.style.display = 'block'; } else { this.dashboard.container.style.display = 'none'; } } super.setVisible(visible); } removeOverlayLayer() { this.layers.length = 1; this.shader.setOverlayLayerEnabled(false); } setBaseLayer(l) { this.layers[0] = l; this.emit('update'); } setOverlayLayer(l) { this.layers[1] = l; this.layers[1].setVisible(true); this.shader.setOverlayLayerEnabled(true); this.regenerateFrameBuffers(); } 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(); } setRadius(r, delayms = 100, easing='linear') { this.setControl('radius', [r, 0], delayms, easing); } getRadius() { return this.controls['radius'].current.value[0]; } setCenter(x, y, delayms = 100, easing='linear') { this.setControl('center', [x, y], delayms, easing); } getCurrentCenter() { const p = this.controls['center'].current.value; return {x:p[0], y:p[1]}; } getTargetCenter() { const p = this.controls['center'].target.value; return {x:p[0], y:p[1]}; } getBorderColor() { return this.controls['borderColor'].current.value; } getBorderWidth() { return this.controls['borderWidth'].current.value[0]; } 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; } 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}; } 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; } 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 }; } 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()]; } } Layer.prototype.types['lens'] = (options) =&gt; { return new LayerLens(options); } export {LayerLens} × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"LayerRTI.js.html":{"id":"LayerRTI.js.html","title":"Source: LayerRTI.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Source: LayerRTI.js import { Layer } from './Layer.js' import { Raster } from './Raster.js' import { ShaderRTI } from './ShaderRTI.js' import { Transform } from './Transform.js' /** * Extends {@link Layer}, and can display a relightable images (RTI) using the 'relight' data format (see: * [relight on github]{@link https://github.com/cnr-isti-vclab/relight} for details). * This web-friendly format is composed of a info.json with RTI parametets and a set of images * (plane_0.jpg, plane_1.jpg etc.) with encoded coefficients. * As with all other layers Deepzoom and other {@link Layout}s can be used. * * The ligh direction can be changed programmatically using setLight. * * @param {options} options Same as {@link Layer}, but url and layout are required. * **url**: points to a relight .json * **layout**: one of image, deepzoom, google, iiif, zoomify, tarzoom, itarzoom */ class LayerRTI extends Layer { 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); } /* * Internal function to assemble the url needed to retrieve the image or the image tile. */ 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); } } /* * Alias for setControl, changes light direction. * @param {Array} light light direction as an array [x, y] * @param {number} dt in ms, interpolation duration. */ setLight(light, dt) { this.setControl('light', light, dt); } 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; }); } /* * Internal function: light control maps to light direction in the shader. */ 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; } draw(transform, viewport) { this.worldRotation = transform.a + this.transform.a; return super.draw(transform, viewport); } } Layer.prototype.types['rti'] = (options) =&gt; { return new LayerRTI(options); } export { LayerRTI } × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"Layout.js.html":{"id":"Layout.js.html","title":"Source: Layout.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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) /** * 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). */ /** * The type of the image. All web single-resolution image types (*jpg*, *png*, *gif*, etc...) are supported * as well as the most common multi-resolution image formats (*deepzoom*, *zoomify*, *IIIF*, *google maps*). * @typedef {('image'|'deepzoom'|'deepzoom1px'|'google'|'zoomify'|'iiif'|'tarzoom'|'itarzoom')} Layout#Type */ /** * 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} * * **iiif** - According to the standard, the URL is the address of a IIIF server (for instance, 'https://myiiifserver.example/'). * See: {@link https://iipimage.sourceforge.io/ IIP Server}, {@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. */ class Layout { /** * Creates a Layout, a container for a raster image. * A layout is defined by a `url` of the image and a `type`. * Additionally, an object literal with Layout `options` can be specified. * Signals are triggered when the layout is ready to be drawn or its size is modified. * @param {string} url URL of the image. * @param {Layout#Type} type The type of the image. * @param {Object} [options] An object literal describing the layout content. * @param {number} options.width The total width of the original, unsplit image. This parameter must only be specified for the 'google' layout type. * @param {number} options.height The total height of the original, unsplit image. This parameter must only be specified for the 'google' layout type. * @param {string} options.suffix='jpg' The filename suffix of the tiles. * @param {string} options.subdomains='abc' The ('a'|'b'|'c') *s* subdomain of a Google template URL (for instance: 'https:{s}.my.example//{z}/{x}/{y}.png'). */ 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\"; } getTileSize() { return [this.width, this.height]; } setDefaults(type) { Object.assign(this, { type: type, width: 0, height: 0, suffix: 'jpg', urls: [], status: null, subdomains: 'abc' }); } 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'; } /** @ignore */ 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'); } imageUrl(url, plane) { let path = url.substring(0, url.lastIndexOf('/')+1); return path + plane + '.jpg'; } /** * Gets the URL of a specific tile. The function must be implemented for each layout type supported by OpenLIME. * @param {number} id The channel id. * @param {Tile} tile The tile. */ getTileURL(id, tile) { throw Error(\"Layout not defined or ready.\"); } /** * Gets the layout bounding box. * @returns {BoundingBox} The layout bounding box. */ 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}); } /** * Returns the coordinates of the tile (in [0, 0, w h] image coordinate system) and the texture coords associated. * @returns the tile coordinates (image coords and texture coords) */ 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 }; } newTile(index) { let tile = new Tile(); tile.index = index; return tile; } /** returns the list of tiles required for a rendering, sorted by priority, max */ 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 []; } /** returns the list of tiles available for a rendering */ 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; } 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 "},"LayoutTiles.js.html":{"id":"LayoutTiles.js.html","title":"Source: LayoutTiles.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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) /** * 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). */ /** * The type of the image. All web single-resolution image types (*jpg*, *png*, *gif*, etc...) are supported * as well as the most common multi-resolution image formats (*deepzoom*, *zoomify*, *IIIF*, *google maps*). * @typedef {('image'|'deepzoom'|'deepzoom1px'|'google'|'zoomify'|'iiif'|'tarzoom'|'itarzoom')} Layout#Type */ /** * 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. */ class LayoutTiles extends Layout { /** * Creates a Layout, a container for a raster image. * A layout is defined by a `url` of the image and a `type`. * Additionally, an object literal with Layout `options` can be specified. * Signals are triggered when the layout is ready to be drawn or its size is modified. * @param {string} url URL of the image. * @param {Layout#Type} type The type of the image. * @param {Object} [options] An object literal describing the layout content. * @param {number} options.width The total width of the original, unsplit image. This parameter must only be specified for the 'google' layout type. * @param {number} options.height The total height of the original, unsplit image. This parameter must only be specified for the 'google' layout type. * @param {string} options.suffix='jpg' The filename suffix of the tiles. * @param {string} options.subdomains='abc' The ('a'|'b'|'c') *s* subdomain of a Google template URL (for instance: 'https:{s}.my.example//{z}/{x}/{y}.png'). * @param {number} options.cachelevels Number of levels above the current level which will be loaded. Lowering will reduce number of http requests, but image will have tile missing while loading. */ constructor(url, type, options) { super(url, null, options); this.setDefaults(type); this.init(url, type, options); } 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, }); } /** @ignore */ 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; }); } /* * Internal function to assemble the url needed to retrieve the image or the image tile. */ 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); } } getTileSize() { return [this.tilesize, this.tilesize]; } /** * Each tile is assigned an unique number. */ /** @ignore */ 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; } 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 }; } /* * Compute all the bounding boxes (this.bbox and this.qbox). * @return number of tiles in the dataset */ /** @ignore */ 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'); } /** * Returns the coordinates of the tile (in [0, 0, w h] image coordinate system) and the texture coords associated. * @returns the tile coordinates (image coords and texture coords) */ 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 } } newTile(index) { let tile = super.newTile(index) tile.index = index; Object.assign(tile, this.reverseIndex(index)); return tile; } /** returns the list of tiles required for a rendering, sorted by priority, max */ 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; } /** returns the list of tiles available for a rendering */ 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 the tiles needed for each level, given a viewport and a transform. * @param {Viewport} viewport The viewport. * @param {Transform} transform The current transform. * @param {Transform} layerTransform The transform of the calling layer * @param {number} border The threshold (in tile units) around the current camera position for which to prefetch tiles. * @param {number} bias 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. * @returns {Object} level: the optimal level in the pyramid, pyramid: array of bounding boxes in tile units. */ 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 the URL of a specific tile. The function must be implemented for each layout type supported by OpenLIME. * @param {number} id The channel id. * @param {Tile} tile The tile. */ getTileURL(id, tile) { throw Error(\"Layout not defined or ready.\"); } /* * Witdh and height can be recovered once the image is downloaded. */ /** @ignore */ async initImage() { this.getTileURL = (rasterid, tile) =&gt; { return this.urls[rasterid]; } this.nlevels = 1; this.tilesize = 0; } /* * url points to the folder (without /) * width and height must be defined */ /** @ignore */ 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; }; } /* * Expects the url to point to .dzi config file */ /** @ignore */ 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; }; } /** @ignore */ 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; }; } /** @ignore */ 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; }; } /* * Expects the url to point to ImageProperties.xml file. */ /** @ignore */ 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; }; } /** @ignore */ 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`; }; } 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; }; } } let factory = (url, type, options) =&gt; { return new LayoutTiles(url, type, options); }; 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 "},"LayoutTileImages.js.html":{"id":"LayoutTileImages.js.html","title":"Source: LayoutTileImages.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Source: LayoutTileImages.js import { Layout } from './Layout.js'; import { BoundingBox } from './BoundingBox.js'; import { Tile } from './Tile.js'; import { Annotation } from './Annotation.js'; class LayoutTileImages extends 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); } } getTileSize() { return [0, 0]; } 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'); } /** * Gets the layout bounding box. * @returns {BoundingBox} The layout bounding box. */ 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); } } boundingBox() { return this.box; } 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/\"; } setTileDescriptors(tileDescriptors) { this.tileDescriptors = tileDescriptors; this.status = 'ready'; this.emit('ready'); } /** * Gets the URL of a specific tile. The function must be implemented for each layout type supported by OpenLIME. * @param {number} id The channel id. * @param {Tile} tile The tile. */ getTileURL(id, tile) { const url = this.path + '/' + this.tileDescriptors[id].image; return url; } setTileVisible(index, visible) { this.tileDescriptors[index].visible = visible; } setAllTilesVisible(visible) { const N = this.tileCount(); for(let i = 0; i &lt; N; ++i) { this.tileDescriptors[i].visible = visible; } } index(level, x, y) { // Map x to index (flat list) return x; } 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]) }; } 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; } /** returns the list of tiles available for a rendering */ 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; } 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; } 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; } tileCount() { return this.tileDescriptors.length; } } 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 "},"LensDashboard.js.html":{"id":"LensDashboard.js.html","title":"Source: LensDashboard.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Source: LensDashboard.js import { CoordinateSystem } from \"./CoordinateSystem\"; import { Util } from \"./Util\" /** * RenderingMode for lens and background. Currently implemented only draw and hide. */ 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. */ /** * The LensDashboard class is an optional element that can be embedded in an instance of {@link LayerLens}. * It represents a square HTML container of sufficient size to hold the lens that is positioned solidly against it. * Its main use is to allow the creation of a dashboard of HTML elements positioned around the lens. * * In the example below a simple HTML button is positioned close to the top-left corner of the dashboard: * * @example * * const lensDashboard = new OpenLIME.LensDashboard(lime); * const lensLayer = new OpenLIME.Layer({ * type: \"lens\", * layers: [layerIn], * camera: lime.camera, * radius: 200, * border: 10, * dashboard: lensDashboard, * visible: true * }); * lime.addLayer('lens', lensLayer); * * const btn = document.createElement('button'); * btn.innerHTML = \"Click Me\"; * btn.style = `position: absolute; * left: 0px; * top: 0px; * display: inline-block; * cursor: pointer; * pointer-events: auto;`; * lensDashboard.append(btn); */ class LensDashboard { /** * Manages creation and update of a lens dashboard. * An object literal with Layer `options` can be specified. * This class instatiates an optional element of {@link LayerLens} * @param {Object} options An object literal with Lensdashboard parameters. * @param {number} options.borderWidth=30 The extra border thickness (in pixels) around the square including the lens. */ 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; } /** * Setup the event listener to update lens radius by dragging lens border. * Call the lens controller to update lens radius. * @param {*} circle lens svg 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(); } }); } /** * Call this to set the corresponding LayerSvgAnnotation * @param {LayerSvgAnnotation} l */ setLayerSvgAnnotation(l) { this.layerSvgAnnotation = l; this.svgElement = this.layerSvgAnnotation.svgElement; } /** @ignore */ 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); } /** @ignore */ 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); } } } /** * Set mask property on the svg element which need to be displayed with the lens * @param {*} svg element which need to be displayed within the lens */ setMaskOnSvgLayer(svg) { svg.setAttributeNS(null, 'mask', this.svgMaskUrl); } /** * Remove mask attribute from svg element * @param {*} svg element from which remove the mask attribute */ removeMaskFromSvgLayer(svg) { svg.removeAttribute('mask'); } /** * Appends a HTML element to the dashboard. The element must be positioned in 'absolute' mode. * @param {*} elm A HTML element */ append(elm) { this.container.appendChild(elm); } /** * Set rendering mode within the lens. * @param {RenderingMode} mode RenderingMode.draw or RenderingMode.hide */ setLensRenderingMode(mode) { this.inMask.setAttributeNS(null, 'style', mode); } /** * Set the background rendering mode within the lens. * @param {RenderingMode} mode RenderingMode.draw or RenderingMode.hide */ setBackgroundRenderingMode(mode) { this.outMask.setAttributeNS(null, 'style', mode); } /** @ignore */ 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 } } 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); } } export {LensDashboard} export {RenderingMode} × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"LensDashboardNavigator.js.html":{"id":"LensDashboardNavigator.js.html","title":"Source: LensDashboardNavigator.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Source: LensDashboardNavigator.js import { Util } from \"./Util\" import { LensDashboard } from \"./LensDashboard\" class LensDashboardNavigator extends LensDashboard { /** * Manages creation and update of a lens dashboard. * An object literal with Layer `options` can be specified. * This class instatiates an optional element of {@link LayerLens} * @param {Object} options An object literal with Lensdashboard parameters. * @param {number} options.toolboxHeight=25 The extra border thickness (in pixels) around the square including the lens. */ 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('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.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'); } getAction(label) { let result = null; for (let [name, action] of Object.entries(this.actions)) { if (action.label === label) { result = action; break; } } return result; } setActionEnabled(label, enable = true) { const action = this.getAction(label); if (action) { action.element.classList.toggle('enabled', enable); } } 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 } } toggle() { this.container.classList.toggle('closed'); } /** @ignore */ 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 "},"LensDashboardNavigatorRadial.js.html":{"id":"LensDashboardNavigatorRadial.js.html","title":"Source: LensDashboardNavigatorRadial.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Source: LensDashboardNavigatorRadial.js import { Util } from \"./Util\" import { LensDashboard } from \"./LensDashboard\" class LensDashboardNavigatorRadial extends LensDashboard { /** * Manages creation and update of a lens dashboard. * An object literal with Layer `options` can be specified. * This class instatiates an optional element of {@link LayerLens} * @param {Object} options An object literal with Lensdashboard parameters. * @param {number} options.toolboxHeight=25 The extra border thickness (in pixels) around the square including the lens. */ 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); } 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'); } static degToRadians(angle) { return angle * (Math.PI / 180.0); } 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)) }; } 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; } 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`); } 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); } getAction(label) { let result = null; for (let [name, action] of Object.entries(this.actions)) { if (action.label === label) { result = action; break; } } return result; } setActionEnabled(label, enable = true) { const action = this.getAction(label); if (action) { action.element.classList.toggle('enabled', enable); } } 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 } } 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`; } } } } toggle() { const t = this.container.classList.toggle('closed'); this.setToggleClassVisibility(!t); } 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++; } } } /** @ignore */ 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 "},"PointerManager.js.html":{"id":"PointerManager.js.html","title":"Source: PointerManager.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Source: PointerManager.js /** * A **PointerManager** is a high-level class for handling simultaneous events from a DOM `target`. * It captures PointerEvent (MouseEvent and TouchEvent) generated by the `target`, classifies them as \"gestures\" and provides a simple interface * to work with them. * * The high-level events (gestures) that are detected and emitted are: * * `fingerHover(e)` It is fired when a pointing device is used to move the cursor on the target * * `fingerSingleTap(e)` It is fired when the user presses a mouse button quickly or touches the screen shortly with a finger * * `fingerDoubleTap(e)` It is fired when the user quickly presses a mouse button twice or shortly touches the screen with a finger twice. * * `fingerHold(e)` It is fired when the user keeps pressing a mouse button or touching the screen longer than a threshold (600 ms). * * `mouseWheel(e)` It is fired when the user rotates the mouse wheel button. * * `panStart(e)` It is fired when the pan gesture is starting. * * `panMove(e)` It is fired when the pan gesture is in progress. * * `panEnd(e)` It is fired when the pan gesture is finished. * * `pinchStart(e1, e2)` It is fired when the pinch gesture is starting. * * `pinchMove(e1, e2)` It is fired when the pinch gesture is in progress. * * `pinchEnd(e1, e2)` It is fired when the pinch gesture is finished. * * In the following example a `pointerManager` object is created and connected to the `canvas`. Then a callback to handle a fingerSingleTap and a fingerHold event is defined * and connected to the `pointerManager`. * ``` * const canvas = document.querySelector('canvas'); * const pointerManager = new PointerManager(canvas); * const handler = { * priority: 10, * fingerSingleTap: (e) =&gt; { * console.log(\"SINGLE TAP in \", e.clientX, e.clientY); * }); * fingerHold: (e) =&gt; { * console.log(\"FINGER HOLD in \", e.clientX, e.clientY); * }); * }; * pointerManager.onEvent(handler); * ``` */ class PointerManager { /** * Instatiates a PointerManager object. * @param {HTMLElement} target The DOM element from which the events are generated * @param {Object} [options] An object literal with class parameters. * @param {number} options.pinchMaxInterval=200 fingerDown event max distance in time to trigger a pinch (in ms). */ 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); } /////////////////////////////////////////////////////////// /// Constants static get ANYPOINTER() { return -1; } /////////////////////////////////////////////////////////// /// Utilities static splitStr(str) { return str.trim().split(/\\s+/g); } 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 // register pointer handlers. 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; } // unregister pointer handlers 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 the 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 the 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 the 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(); } } class SinglePointerHandler { 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; } } class CircularBuffer { 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 "},"Signals.js.html":{"id":"Signals.js.html","title":"Source: Signals.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "},"Raster.js.html":{"id":"Raster.js.html","title":"Source: Raster.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "},"ShaderBRDF.js.html":{"id":"ShaderBRDF.js.html","title":"Source: ShaderBRDF.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "},"ShaderCombiner.js.html":{"id":"ShaderCombiner.js.html","title":"Source: ShaderCombiner.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "},"ShaderFilter.js.html":{"id":"ShaderFilter.js.html","title":"Source: ShaderFilter.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "},"ShaderNeural.js.html":{"id":"ShaderNeural.js.html","title":"Source: ShaderNeural.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "},"ShaderRTI.js.html":{"id":"ShaderRTI.js.html","title":"Source: ShaderRTI.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "},"Skin.js.html":{"id":"Skin.js.html","title":"Source: Skin.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "},"TextToSpeechPlayer.js.html":{"id":"TextToSpeechPlayer.js.html","title":"Source: TextToSpeechPlayer.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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.12, 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 14 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 "},"Tile.js.html":{"id":"Tile.js.html","title":"Source: Tile.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "},"UIBasic.js.html":{"id":"UIBasic.js.html","title":"Source: UIBasic.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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! }, 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(); })().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 "},"Viewer.js.html":{"id":"Viewer.js.html","title":"Source: Viewer.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "},"global.html":{"id":"global.html","title":"Global","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Global Members &lt;constant&gt; RenderingMode RenderingMode for lens and background. Currently implemented only draw and hide. Source: LensDashboard.js, line 7 Methods crudCallback(anno) Callback for create/update/delete annotations. Parameters: Name Type Description anno Annotation The current annotation entry. Source: EditorSvgAnnotation.js, line 7 customDataCallback(anno) Callback to customize the annotation data object. Parameters: Name Type Description anno Annotation The current annotation entry. Source: EditorSvgAnnotation.js, line 19 customStateCallback(anno) Callback implementing custom state annotations. Parameters: Name Type Description anno Annotation The current annotation entry. Source: EditorSvgAnnotation.js, line 13 selectedCallback(anno) Callback executed when an annotation is selcted on the user interface. Parameters: Name Type Description anno Annotation The current annotation entry. Source: EditorSvgAnnotation.js, line 25 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 12 Type Definitions AnnotationClass Elements to classify the annotations. Type: Object Properties: Name Type Description stroke color The CSS color of a line, text or outline SVG element. label string The class name. Source: LayerSvgAnnotation.js, line 7 AnnotationClasses Annotation classes. 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 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 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: Layout.js, line 8 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: 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 updatePosition(x, y) Callback invoked when the position (x, y) is updated. Parameters: Name Type Description x number The x coordinate. y number The y coordinate. Source: Controller2D.js, line 4 Viewport The type Viewport defines a rectangular viewing region inside a (wxh) area Type: Object Properties: Name Type Description x number x-component of the lower left corner. y number y-component of the lower left corner. dx number x-component of the top right corner. dy number y-component of the top right corner. w number the viewport width. w number the viewport height. Source: Camera.js, line 5 × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"classes.list.html":{"id":"classes.list.html","title":"Classes","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Classes Classes Annotation BoundingBox Cache Camera Canvas Controller Controller2D ControllerPanZoom CoordinateSystem EditorSvgAnnotation FocusContext Layer LayerAnnotation LayerAnnotationImage LayerBRDF LayerCombiner LayerImage LayerLens LayerRTI LayerSvgAnnotation Layout LayoutTiles LensDashboard LensDashboardNavigator LensDashboardNavigatorRadial PointerManager Raster Shader ShaderBRDF ShaderCombiner ShaderNeural ShaderRTI Skin TextToSpeechPlayer Transform UIBasic UIDialog Viewer Events update The event is fired when the camera target is changed. Source: Camera.js, line 129 update The event is fired when a uniform shader variable is changed. Source: Shader.js, line 130 ready The event is fired when all the layers are ready (i.e. initialized and with data ready to be displayed). Source: Canvas.js, line 184 update The event is fired if a layer is updated, added or removed. Source: Canvas.js, line 179 updateSize The event is fired if a layout changes its size or position (the event forces the re-computation of the layer bounding boxes). Source: Canvas.js, line 225 ready The event is fired when a layer is initialized. Source: Layer.js, line 191 update The event is fired if a redraw is needed. Source: Layer.js, line 195 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 115 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 94 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 172 closed The event is fired when the dialog is closed. Source: UIBasic.js, line 772 × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"tutorials.list.html":{"id":"tutorials.list.html","title":"Howto","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Howto Classes Annotation BoundingBox Cache Camera Canvas Controller Controller2D ControllerPanZoom CoordinateSystem EditorSvgAnnotation FocusContext Layer LayerAnnotation LayerAnnotationImage LayerBRDF LayerCombiner LayerImage LayerLens LayerRTI LayerSvgAnnotation Layout LayoutTiles LensDashboard LensDashboardNavigator LensDashboardNavigatorRadial PointerManager Raster Shader ShaderBRDF ShaderCombiner ShaderNeural ShaderRTI Skin TextToSpeechPlayer Transform UIBasic UIDialog Viewer Events update The event is fired when the camera target is changed. Source: Camera.js, line 129 update The event is fired when a uniform shader variable is changed. Source: Shader.js, line 130 ready The event is fired when all the layers are ready (i.e. initialized and with data ready to be displayed). Source: Canvas.js, line 184 update The event is fired if a layer is updated, added or removed. Source: Canvas.js, line 179 updateSize The event is fired if a layout changes its size or position (the event forces the re-computation of the layer bounding boxes). Source: Canvas.js, line 225 ready The event is fired when a layer is initialized. Source: Layer.js, line 191 update The event is fired if a redraw is needed. Source: Layer.js, line 195 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 115 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 94 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 172 closed The event is fired when the dialog is closed. Source: UIBasic.js, line 772 × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"index.html":{"id":"index.html","title":"Index","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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: { } } × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"Annotation.html":{"id":"Annotation.html","title":"Class: Annotation","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Class: Annotation Annotation An annotation is a decoration (text, graphics element, glyph) to be drawn in an overlay mode on the canvas. Its purpose is to provide additional information useful for the interpretation of the underlying drawings. This calls defines the content of an annotation which is represented by its unique identifier and additional information (such as description, annotation category or class, drawing style, labels, etc.). new Annotation( [options]) Instantiates an Annotation object. An object literal with Annotation options can be specified. Note that the developer is free to define additional elements characterizing a custom annotation by adding new options to the constructor. Parameters: Name Type Argument Default Description options Object &lt;optional&gt; An object literal with Annotation options (freely adjustable). Properties Name Type Description label string A string containing an annotation label. option.description string A HTML text containg a comprehensive description of the annotation. option.class string A class or category to cluster annotations. option.state Object null An object literal with state variables. Source: Annotation.js, line 9 Methods getBBoxFromElements() Gets the bounding box of the annotation. Note that the coordinates for annotations are always relative to the top left corner of the canvas. Source: Annotation.js, line 60 Returns: The bounding box Type BoundingBox × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"BoundingBox.html":{"id":"BoundingBox.html","title":"Class: BoundingBox","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Class: BoundingBox BoundingBox The bounding box is a rectangular box that is wrapped as tightly as possible around a geometric element. It is oriented parallel to the axes. It is defined by two opposite vertices. The class It includes a comprehensive set of functions for various processing tasks related to bounding boxes. new BoundingBox( [options], xLow, yLow, xHigh, xHigh) Instantiates a BoundingBox object. Parameters: Name Type Argument Default Description options Object &lt;optional&gt; An object literal defining the bounding box. xLow number 1e20 The x coordinate of the low corner a rectangle. yLow number 1e20 The y coordinate of the low corner a rectangle. xHigh number -1e20 The x coordinate of the high corner a rectangle. xHigh number -1e20 The y coordinate of the high corner a rectangle. Source: BoundingBox.js, line 6 Methods center() Returns the bounding box center. Source: BoundingBox.js, line 141 Returns: The center value. Type number corner(i) Returns the i-th corner. Parameters: Name Type Description i number The index of the corner. Source: BoundingBox.js, line 150 Returns: A [x, y] pair. Type Array.&lt;number&gt; fromArray(x) Defines a bonding box from an array of four elements. Parameters: Name Type Description x Array.&lt;number&gt; The array of four elements with the two corners ([xLow, yLow, xHigh, yHigh]). Source: BoundingBox.js, line 28 height() Returns the bounding box height. Source: BoundingBox.js, line 133 Returns: The height value. Type number isEmpty() Tests weather the bounding box is empty. Source: BoundingBox.js, line 49 Returns: The test result. Type bool mergeBox(box) Merges a box to this BoundingBox. Parameters: Name Type Description box BoundingBox The bounding box to be merged. Source: BoundingBox.js, line 73 mergePoint(p) Merges a point p{x, y} to this BoundingBox. Parameters: Name Type Description p Object The point to be merged. Source: BoundingBox.js, line 91 print() Prints out the bounding box corners in the console. Source: BoundingBox.js, line 162 quantize(side) Divides by side and truncates the corner coordinates. Parameters: Name Type Description side * The value to divide by. Source: BoundingBox.js, line 114 shift(dx, dy) Translates the bounding box by a displacement vector (dx, dy). Parameters: Name Type Description dx number Displacement along the x-axis. dy number Displacement along the y-axis. Source: BoundingBox.js, line 103 toArray() Returns an array of four elements containg the low and high corners. Source: BoundingBox.js, line 57 Returns: The array of corners. Type Array.&lt;number&gt; toEmpty() Empties a bounding box. Source: BoundingBox.js, line 38 toString() Returns a text string with the corner coordinates separated by a space. Source: BoundingBox.js, line 65 Returns: The string of corners. Type string width() Returns the bounding box width. Source: BoundingBox.js, line 125 Returns: The width value. Type number × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"Cache.html":{"id":"Cache.html","title":"Class: Cache","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Class: Cache Cache The singleton class Cache implements a cache for faster retrieval of the tiles required by layers. new Cache( [options]) Instantiates a Cache object. Tiles to be fetched are stored in an ordered queue in {Layer}. Parameters: Name Type Argument Description options Object &lt;optional&gt; An object literal to define cache parameters. Properties Name Type Default Description capacity number 536870912 The total cache capacity (in bytes). maxRequest number 6 Max number of concurrent HTTP requests. Most common browsers allow six connections per domain. Source: Cache.js, line 153 Methods flushLayer(layer) Flushes all tiles for a layer. Parameters: Name Type Description layer Layer A layer. Source: Cache.js, line 163 setCandidates(layer) Determines which tiles of a given layer are candidates to be downloaded. Cleans up the cache and schedules the web data fetch. Parameters: Name Type Description layer Layer A layer. Source: Cache.js, line 171 × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"Camera.html":{"id":"Camera.html","title":"Class: Camera","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Class: Camera Camera The class Camera does not have an operational role, but it is rather a container of parameters needed by the system to define the viewport, the camera position and to calculate the appropriate view. To enable the animation, a camera contains two view matrices (two Transform objects): a source with the current position and a target with the position the camera will arrive at in a time dt. The member function setPosition() takes care of defining the target, the OpenLIME system automatically animates the camera to bring it from source to target, unless the user manually interrupts the current animation. User-generated device events (such as touch events or mouse events) can modify camera parameters via an appropriate Controller. new Camera( [options]) Creates a scene's camera. An update event is issued when the camera has completed its positioning. Additionally, an object literal with Viewer options can be specified. Parameters: Name Type Argument Description options Object &lt;optional&gt; Properties Name Type Default Description bounded bool true Weather to limit the translation of the camera to the boundary of the scene. maxFixedZoom number 2 The maximum pixel size. minScreenFraction number 1 The minimum portion of the screen to zoom in. Source: Camera.js, line 30 Methods copy() Defines the copy constructor. Source: Camera.js, line 59 Returns: A copy of the Camera. deltaZoom(dt, dz, x, y) Zoom in or out at a specific point (in canvas coords) Parameters: Name Type Default Description dt number The animation duration in millisecond. dz number The scroll amount for the z-axis. x number 0 The x coord to zoom in|out y number 0 The y coord to zoom in|out Source: Camera.js, line 229 fit(box, dt) Modify the camera settings to frame the specified box Parameters: Name Type Description box BoundingBox The specified rectangle [minx, miny, maxx, maxy] in the canvas. dt number The animation duration in millisecond Source: Camera.js, line 281 fitCameraBox(dt) Modify the camera settings to the factory values (home). Parameters: Name Type Description dt number animation duration in millisecond Source: Camera.js, line 301 getCurrentTransform(time) Gets the camera transform at time in canvas coords. Parameters: Name Type Description time time The current time (a DOMHighResTimeStamp variable, as in performance.now()). Source: Camera.js, line 257 Returns: The current transform Type Transform getGlCurrentTransform(time) Gets the camera transform at time in device coords. Parameters: Name Type Description time time The current time (a DOMHighResTimeStamp variable, as in performance.now()). Source: Camera.js, line 267 Returns: The current transform Type Transform glViewport() Gets the current viewport (in device coordinates). Source: Camera.js, line 84 Returns: the current viewport mapToScene() Map coordinate relative to the canvas into scene coords using the specified transform. Source: Camera.js, line 96 Returns: {X, Y} in scene coordinates (relative to the center of the viewport). Type Object pan(dt, dx, dy) Pan the camera (in canvas coords) Parameters: Name Type Description dt number The animation duration in millisecond. dx number The horizontal displancement. dy number The vertical displacement. Source: Camera.js, line 178 rotate(dt, a) Rotate the camera around its z-axis by an a angle (in degrees) Parameters: Name Type Description dt number The animation duration in millisecond. a angle The rotation angle (in degrees). Source: Camera.js, line 215 sceneToCanvas() Map coordinate relative to the scene into canvas coords using the specified transform. Source: Camera.js, line 112 Returns: {X, Y} in canvas coordinates. Type Object setPosition(dt, x, y, z, a, easing) Sets the camera target parameters (position, rotation, ) Parameters: Name Type Description dt number The animation duration in millisecond. x * The x-component of the translation vector. y * The y-component of the translation vector. z * The zoom factor. a * The rotation angle (in degrees). easing Easing The function aimed at making the camera movement less severe or pronounced. Source: Camera.js, line 128 setViewport(view) Sets the viewport and updates the camera position as close as possible to the previuos one. Parameters: Name Type Description view Viewport The new viewport (in CSS coordinates). Source: Camera.js, line 69 zoom(dt, z, x, y) Zoom in or out at a specific point (in canvas coords) Parameters: Name Type Description dt number The animation duration in millisecond. z number The distance of the camera from the canvas. x number The x coord to zoom in|out y number The y coord to zoom in|out Source: Camera.js, line 192 Events update The event is fired when the camera target is changed. Source: Camera.js, line 129 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 "},"Canvas.html":{"id":"Canvas.html","title":"Class: Canvas","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Class: Canvas Canvas Creates the WebGL context for the canvas. It stores information related to the overlay DOM element and the camera of the scene. Signals are triggered in case of scene modifications. Additionally, an object literal with Canvas options can be specified. new Canvas(canvas, overlay, camera [, options]) Parameters: Name Type Argument Description canvas element | string DOM element or selector for a &lt;canvas&gt;. overlay element | string DOM element or selector for overlay decorations (i.e. annotations, glyphs, etc...) camera Camera The scene's camera. options Object &lt;optional&gt; An object literal. Properties Name Type Default Description layers Object Object specifies layers (see. Layer) preserveDrawingBuffer bool false Whether to preserve the buffers until manually cleared or overwritten. Needed for screenshots (otherwise is just a performance penalty). Source: Canvas.js, line 26 Methods addLayer(id, layer) Adds the given layer to the Canvas and connects the layer's events to it. Parameters: Name Type Description id string A label to identify the layer. layer Layer An OpenLIME Layer object. Source: Canvas.js, line 178 getState() Gets the state variables of all the system as described in the stateMask Source: Canvas.js, line 140 Returns: An object with state variables. Type Object removeLayer(layer) Remove the given layer from the Canvas Parameters: Name Type Description layer Layer An OpenLIME Layer object. Source: Canvas.js, line 215 Example let layer0 = new Layer(options); canvas.addLayer('kdmap', layer0); ... canvas.removeLayer(layer0); setState(state, dt, easing) Sets the state variables of all the system Parameters: Name Type Default Description state Object An object with state variables. dt number The animation duration in millisecond. easing Easing linear The function aimed at making the camera movement or control adjustments less severe or pronounced. Source: Canvas.js, line 123 Events ready The event is fired when all the layers are ready (i.e. initialized and with data ready to be displayed). Source: Canvas.js, line 184 update The event is fired if a layer is updated, added or removed. Source: Canvas.js, line 179 updateSize The event is fired if a layout changes its size or position (the event forces the re-computation of the layer bounding boxes). Source: Canvas.js, line 225 × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"Controller.html":{"id":"Controller.html","title":"Class: Controller","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Class: Controller Controller Controller is a virtual base class that handles user interaction via device events (mouse/touch events). It 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. In the example below a ControllerPanZoom object (derived from Controller) is created and associated with the pointerManager of the viewer. const panzoom = new OpenLIME.ControllerPanZoom(viewer.camera, { priority: -1000, activeModifiers: [0, 1] }); viewer.pointerManager.onEvent(panzoom); new Controller( [options]) Instantiates a Controller object. Parameters: Name Type Argument Description options Object &lt;optional&gt; An object literal with controller parameters. Properties Name Type Default Description panDelay number 50 Inertial value of the movement in ms for panning movements. zoomDelay number 200 A zoom event is smoothed over this delay in ms, priority number 0 Higher priority controllers are invoked first. Source: Controller.js, line 31 Methods modifierState(e) Returns the modifier state of the event e. Modifiers are keyboard events that happens simultaneously with a device event (e.g. shift + left mouse button). The modifiers handled by a controller are: NoModifiers = 0 CrtlModifier = 1 ShiftModifier = 2 AltModifier = 4 The modifier state is the sum of values above corresponding to the key pressed (CTRL, SHIFT or ALT). Parameters: Name Type Description e Event Source: Controller.js, line 66 Returns: The modifier state. Type number × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"Controller2D.html":{"id":"Controller2D.html","title":"Class: Controller2D","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Class: Controller2D Controller2D Controller2D* intercepts pan and single-tap events in the canvas and updates a 2D position (x, y) of the device pointer. If options.relative is false the coordinates are both mapped between [-1, 1] with origin in the bottom left corner of the canvas, otherwise the coordinates have origin in the initial position of the panning and ranges both between [-1, 1] according to the distance from the local origin (multiplied by a options.speed value). When updated, the (x, y) position is passed to a callback for further custom computations. new Controller2D(callback [, options]) Instantiates a Controller2D object. Parameters: Name Type Argument Description callback updatePosition The callback invoked when the postion (x, y) is updated. options Object &lt;optional&gt; An object literal with controller parameters. Properties Name Type Default Description relative bool false Whether the coordinate system is local. speed number 2.0 Enhancement factor for computation of local coordinates. Source: Controller2D.js, line 21 Methods setPosition(x, y) Stores the final position for local coordinate system. This is a convenience function to be used in callback. Parameters: Name Type Description x number The x-axis coordinate. y number The y-axis coordinate. Source: Controller2D.js, line 58 × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"ControllerPanZoom.html":{"id":"ControllerPanZoom.html","title":"Class: ControllerPanZoom","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Class: ControllerPanZoom ControllerPanZoom ControllerPanZoom* intercepts pan, zoom, single tap, and wheel events in the canvas and updates the scene camera parameters. new ControllerPanZoom(camera [, options]) Instantiates a ControllerPanZoom object. Parameters: Name Type Argument Description camera Camera The scene camera. options Object &lt;optional&gt; An object literal with controller parameters. Properties Name Type Default Description zoomAmount number 1.2 The incremental value for zoom in/out. Source: ControllerPanZoom.js, line 9 × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"CoordinateSystem.html":{"id":"CoordinateSystem.html","title":"Class: CoordinateSystem","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "},"EditorSvgAnnotation.html":{"id":"EditorSvgAnnotation.html","title":"Class: EditorSvgAnnotation","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Class: EditorSvgAnnotation EditorSvgAnnotation EditorSvgAnnotation enables the UIBasic interface to edit (create/update/delete) SVG annotations. This class is a mere utility that acts as an adapter between the annotation database and the OpenLIME system. Here you will find a tutorial to learn how to use the SVG annotation editor. //FIXME For the experienced developer this class can be used as an example to design more complex editors. In the following example an EditorSvgAnnotation is instatiated and connected to the annotation database through three callbacks implementing database operations (create/update/delete). // Creates an annotation layer and add it to the canvans const anno = new OpenLIME.Layer(aOptions); lime.addLayer('anno', anno); // Creates a SVG annotation Editor const editor = new OpenLIME.EditorSvgAnnotation(lime, anno, { viewer: lime, classes: classParam }); editor.createCallback = (anno) =&gt; { console.log(\"Created annotation: \", anno); processRequest(anno, 'create'); return true; }; editor.updateCallback = (anno) =&gt; { console.log(\"Updated annotation: \", anno); processRequest(anno, 'update'); return true; }; editor.deleteCallback = (anno) =&gt; { console.log(\"Deleted annotation: \", anno); processRequest(anno, 'delete'); return true; }; new EditorSvgAnnotation(viewer, layer [, options]) Instatiates a EditorSvgAnnotation object. Parameters: Name Type Argument Description viewer Viewer The OpenLIME viewer. layer LayerSvgAnnotation The annotation layer on which to operate. options Object &lt;optional&gt; An object literal with SVG editor parameters. Properties Name Type Default Description classes AnnotationClasses An object literal definying colors and labels of the annotation classes. createCallback crudCallback The callback to implement annotation creation. updateCallback crudCallback The callback to implement annotation update. deleteCallback crudCallback The callback to implement annotation deletion. enableState bool false Whether to enable custom annotation state. This allows to include some state variables into an annotation item (such as camera, light or lens position). customState customStateCallback The callback implementing custom state annotations. customData customDataCallback The callback to customize the annotation data object. selectedCallback selectedCallback The callback executed when an annotation is selcted on the user interface. Source: EditorSvgAnnotation.js, line 56 × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"FocusContext.html":{"id":"FocusContext.html","title":"Class: FocusContext","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Class: FocusContext FocusContext The FocusContext class is responsible for identifying a good Focus and Context situation. During interaction it distributes user inputs on lens, into camera and lens movement in order to keep the lens in focus and context situation, within the viewport, with enough space between the lens and the viewport boundaries, for both panning and zooming actions. It also computes a good transform given a lens to properly display the lens within the current viewport (used for stored annotations) new FocusContext() Source: FocusContext.js, line 12 Methods &lt;static&gt; adaptContext(viewport, focus, context, desiredScale) Adapt context in order to have focus &amp; context condition satisfied for the requested focus Parameters: Name Type Description viewport * {x, y, dx, dy, w, h} focus * lens : {position,radius}. Contain current lens in dataset coords context Transform Contain current transform, which will be updated to translated context desiredScale Number context desired scale (which will be clamped within min max scale) Source: FocusContext.js, line 105 &lt;static&gt; adaptContextPosition(viewport, focus, context) Translate context in order to put lens (focus) in focus and context condition Parameters: Name Type Description viewport * {x,y,dx,dy,w,h} focus * lens : {position,radius} context Transform Source: FocusContext.js, line 153 &lt;static&gt; adaptContextScale(viewport, focus, context) Fix context scale to make projected lens fit within viewport. Parameters: Name Type Description viewport * {x, y, dx, dy, w, h} focus * lens : {position,radius}. Contain current lens in dataset coords context Transform Contain current transform, whose scale will be updated to keep lens in focus and context after scale Source: FocusContext.js, line 133 &lt;static&gt; pan(viewport, focus, context, delta, imageSize) Subdivide pan amount (delta) between lens (focus) and camera transform (context). Parameters: Name Type Description viewport * {x, y, dx, dy, w, h} focus * lens : {position,radius}. Contain current lens in dataset coords, which will be updated to translated lens context Transform Contain current transform, which will be updated to translated context delta Number amount of pan in dataset pixels imageSize * {w,h} Size of the dataset width height (to clamp movement on boundaries) Source: FocusContext.js, line 22 &lt;static&gt; scale(camera, focus, context, dz) Distribute scale between radius and camera scale in order to keep focus and context situation Parameters: Name Type Description camera Camera focus * lens : {position,radius}. Contain current lens in dataset coords, which will be updated to translated lens context Transform Contain current transform, which will be updated to translated context dz Number amount of scale (which should multiply scale) Source: FocusContext.js, line 55 × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"Layer.html":{"id":"Layer.html","title":"Class: Layer","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Class: Layer Layer The Layer class is responsible for drawing slides in the OpenLIME viewer. Layers can directly draw their contents on the viewer or be combined with each other to obtain more complex visualizations. 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. A Layer takes raster data (images) as input which are managed by the layout. A layer stores all the information and functions needed to render the graphics (shaders, shader parameters, data structures, etc.), and takes care of data prefetching and communication with the cache. The Layer is a kind of primitive class from which other Layer classes can inherit. Each derived class \"registers\" on the Layer base class, the user can then use an instance of Layer by indicating the chosen type in the options. In the example below a Layer of type 'rti' is created, then a LayerRTI (class derived from Layer) is instantiated and added to the viewer's layer stack. 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 37 Example const layer1 = new OpenLIME.Layer({ layout: 'deepzoom', label: 'Ancient Roman coin', type: 'rti', url: '../../assets/rti/hsh/info.json', normals: false }); viewer.addLayer('coin1', layer1); Methods &lt;static&gt; computeLayersBBox(layers, discardHidden) Computes the merge bounding box of all the 'layers` Parameters: Name Type Description layers Array.&lt;Layer&gt; discardHidden bool Whether hidden layers are not to be included in the computation. Source: Layer.js, line 352 Returns: The bounding box Type BoundingBox &lt;static&gt; computeLayersMinScale(layers, discardHidden) Computes the minum scale value of the layers. Parameters: Name Type Description layers Array.&lt;Layer&gt; discardHidden bool Whether hidden layers are not to be included in the computation. Source: Layer.js, line 294 Returns: the minimum scale. Type number addControl(name, value) Adds a new shader parameter control. Parameters: Name Type Description name string The name of the control. value * The value for initialization. Source: Layer.js, line 387 boundingBox() Gets the layer bounding box ( Change name: box is in scene coordinates) Source: Layer.js, line 332 Returns: The bounding box Type BoundingBox 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 373 getMode() Gets the current shader mode. Source: Layer.js, line 243 Returns: the shader mode Type string getModes() Gets an arrays of all the modes implemented in the current shader. Source: Layer.js, line 253 Returns: arrays of modes Type Array.&lt;string&gt; getState() Gets the state variables of the layer. Source: Layer.js, line 176 Returns: An object with state variables Type Object interpolateControls() Update the current values of the parameter controls. Source: Layer.js, line 419 Returns: Weather the interpolation is finished (the time has now gone). Type bool pixelSizePerMM() Transform-adjusted spatial resolution for this layer Source: Layer.js, line 323 Returns: size of a single pixel in mm Type number scale() Gets the scale of the layer transformation Source: Layer.js, line 313 Returns: The scale Type number setControl(name, value, dt) Set a shader parameter control with new value Parameters: Name Type Description name * The name of the control. value * The value for initialization. dt time Duration of the interpolation (0=no interpolation). Source: Layer.js, line 400 setMode(mode) Set the mode of the current shader. Parameters: Name Type Description mode string the mode of the current shader. Source: Layer.js, line 263 setShader(id) Sets the shader to use Parameters: Name Type Description id * the current shader identifier (the shader must already be registered in the shaders array) Source: Layer.js, line 231 setState() Sets the state of the layer Source: Layer.js, line 162 setVisible(visible) Sets a value that indicates whether the layer is visible. Parameters: Name Type Description visible bool The value. Source: Layer.js, line 272 setZindex(zindex) Sets the layer zindex value (stack ordering value for the rendering of layers). Parameters: Name Type Description zindex int The value. Source: Layer.js, line 282 Events ready The event is fired when a layer is initialized. Source: Layer.js, line 191 update The event is fired if a redraw is needed. Source: Layer.js, line 195 × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"LayerAnnotation.html":{"id":"LayerAnnotation.html","title":"Class: LayerAnnotation","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Class: LayerAnnotation LayerAnnotation An annotation layer is a layer used to display decorations (text, graphics elements, glyphs, etc...) on top of other layers. Its purpose is to provide additional information useful for the interpretation of the underlying layers. An object literal with options can be specified. Here you will find a tutorial to learn how to build a client-server architecture to manage annotations in OpenLIME. //FIXME Extends Layer. 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 14 Methods getAnnotationById(id) Gets an annotation by its id Parameters: Name Type Description id string Source: LayerAnnotation.js, line 145 Returns: The annotation. Type Annotation setSelected(anno, on) Selects/deselects an annotation Parameters: Name Type Default Description anno Annotation The annotation. on bool true Whether to select the annotation. Source: LayerAnnotation.js, line 163 × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"LayerAnnotationImage.html":{"id":"LayerAnnotationImage.html","title":"Class: LayerAnnotationImage","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Class: LayerAnnotationImage LayerAnnotationImage Class which extend LayerAnnotation. Support Image Annotations. Each annotation corresponds to a tile (currently single resolution) new LayerAnnotationImage() Source: LayerAnnotationImage.js, line 12 × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"LayerBRDF.html":{"id":"LayerBRDF.html","title":"Class: LayerBRDF","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Class: LayerBRDF LayerBRDF Extends Layer. new LayerBRDF(options) Parameters: Name Type Description options options Same as Layer, but channels(ks,kd,normals,gloss) are required. Source: LayerBRDF.js, line 10 × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"LayerCombiner.html":{"id":"LayerCombiner.html","title":"Class: LayerCombiner","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Class: LayerCombiner LayerCombiner Combines other layers (in the framebuffer) using a custom shader. LayerLens is an example. The class LayerImage can also be instantiated via the Layer parent class and options.type='combiner'. Extends Layer. new LayerCombiner(options) Parameters: Name Type Description options options Same as Layer, but options.layers are required Source: LayerCombiner.js, line 28 Example // Instantiate the LayerCombiner class and set the two inputs (layer0 and layer1) const combiner = new OpenLIME.Layer({ type: 'combiner', visible: true, layers: [layer0, layer1] }); // Instantiate the ShaderCombiner class (a custom shader) and select 'diff' as default mode (for visualization purposes) const shader = new OpenLIME.ShaderCombiner(); shader.mode = 'diff'; // Assign the newly created shader to the combiner (labelling it 'standard') and enable it combiner.shaders = { 'standard': shader }; combiner.setShader('standard'); // Add the combiner to the canvas lime.addLayer('combiner', combiner); × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"LayerImage.html":{"id":"LayerImage.html","title":"Class: LayerImage","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Class: LayerImage LayerImage The class LayerImage is derived from Layer and it is responsible for the rendering of simple images. new LayerImage(options) Displays a simple image. An object literal with Layer options can be specified. The class LayerImage can also be instantiated via the Layer parent class and options.type='image'. Extends Layer. Parameters: Name Type Description options Object an object literal with Layer options Layer, but options.url and options.layout are required. Properties Name Type Default Description url string The URL of the image layout string | Layout 'image' The layout (the format of the input raster images). Source: LayerImage.js, line 17 Example // 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); × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"LayerLens.html":{"id":"LayerLens.html","title":"Class: LayerLens","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Class: LayerLens LayerLens Displays a lens on the canvas. new LayerLens() Source: LayerLens.js, line 9 × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"LayerRTI.html":{"id":"LayerRTI.html","title":"Class: LayerRTI","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Class: LayerRTI LayerRTI Extends Layer, and can display a relightable images (RTI) using the 'relight' data format (see: relight on github for details). This web-friendly format is composed of a info.json with RTI parametets and a set of images (plane_0.jpg, plane_1.jpg etc.) with encoded coefficients. As with all other layers Deepzoom and other Layouts can be used. The ligh direction can be changed programmatically using setLight. new LayerRTI(options) Parameters: Name Type Description options options Same as Layer, but url and layout are required. url: points to a relight .json layout: one of image, deepzoom, google, iiif, zoomify, tarzoom, itarzoom Source: LayerRTI.js, line 20 × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"LayerSvgAnnotation.html":{"id":"LayerSvgAnnotation.html","title":"Class: LayerSvgAnnotation","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Class: LayerSvgAnnotation LayerSvgAnnotation An annotation layer that draws SVG elements directly on the canvas (outside the WebGL context). Here you will find a tutorial to learn how to build a client-server architecture to manage annotations in OpenLIME. //FIXME Extends LayerAnnotation. new LayerSvgAnnotation( [options]) Instantiates a LayerSvgAnnotation object. Parameters: Name Type Argument Description options Object &lt;optional&gt; An object literal with options that inherits from LayerAnnotation. Properties Name Type Default Description classes AnnotationClasses An object literal definying colors and labels of the annotation classes. onClick function The callback to fire when the an annotation is clicked on the canvas. The callback is passed an object containing the selected annotation. shadow bool true Whether to insert SVG elements in a shadow DOM. Source: LayerSvgAnnotation.js, line 26 Methods getSvgGroupTransform(transform, inverse) Return the string containing the transform for drawing the svg group in the proper position Parameters: Name Type Default Description transform Transform current transform parameter of the draw function inverse bool false when its false return the transform needed to draw the svgGroup Source: LayerSvgAnnotation.js, line 147 Returns: string with svgroup transform setSelected(anno, on) Selects/deselects an annotation Parameters: Name Type Default Description anno Annotation The annotation. on bool true Whether to select the annotation. Source: LayerSvgAnnotation.js, line 115 setVisible(visible) Sets a value that indicates whether the layer is visible. Parameters: Name Type Description visible bool The value. Source: LayerSvgAnnotation.js, line 96 × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"Layout.html":{"id":"Layout.html","title":"Class: Layout","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Class: Layout Layout 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 iiif - According to the standard, the URL is the address of a IIIF server (for instance, 'https://myiiifserver.example/'). See: IIP Server, 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 Layout(url, type [, options]) Creates a Layout, a container for a raster image. A layout is defined by a url of the image and a type. Additionally, an object literal with Layout options can be specified. Signals are triggered when the layout is ready to be drawn or its size is modified. Parameters: Name Type Argument Description url string URL of the image. type Layout#Type The type of the image. options Object &lt;optional&gt; An object literal describing the layout content. Properties Name Type Default Description width number The total width of the original, unsplit image. This parameter must only be specified for the 'google' layout type. height number The total height of the original, unsplit image. This parameter must only be specified for the 'google' layout type. suffix string 'jpg' The filename suffix of the tiles. subdomains string 'abc' The ('a'|'b'|'c') s subdomain of a Google template URL (for instance: 'https:{s}.my.example//{z}/{x}/{y}.png'). Source: Layout.js, line 56 Methods available() returns the list of tiles available for a rendering Source: Layout.js, line 183 boundingBox() Gets the layout bounding box. Source: Layout.js, line 143 Returns: The layout bounding box. Type BoundingBox getTileURL(id, tile) Gets the URL of a specific tile. The function must be implemented for each layout type supported by OpenLIME. Parameters: Name Type Description id number The channel id. tile Tile The tile. Source: Layout.js, line 135 needed() returns the list of tiles required for a rendering, sorted by priority, max Source: Layout.js, line 171 tileCoords() Returns the coordinates of the tile (in [0, 0, w h] image coordinate system) and the texture coords associated. Source: Layout.js, line 152 Returns: the tile coordinates (image coords and texture coords) Type Definitions Type The type of the image. All web single-resolution image types (jpg, png, gif, etc...) are supported as well as the most common multi-resolution image formats (deepzoom, zoomify, IIIF, google maps). Type: 'image' | 'deepzoom' | 'deepzoom1px' | 'google' | 'zoomify' | 'iiif' | 'tarzoom' | 'itarzoom' Source: Layout.js, line 26 Type The type of the image. All web single-resolution image types (jpg, png, gif, etc...) are supported as well as the most common multi-resolution image formats (deepzoom, zoomify, IIIF, google maps). Type: 'image' | 'deepzoom' | 'deepzoom1px' | 'google' | 'zoomify' | 'iiif' | 'tarzoom' | 'itarzoom' Source: LayoutTiles.js, line 25 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 115 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 94 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 172 × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"LayoutTiles.html":{"id":"LayoutTiles.html","title":"Class: LayoutTiles","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 Layout, a container for a raster image. A layout is defined by a url of the image and a type. Additionally, an object literal with Layout options can be specified. Signals are triggered when the layout is ready to be drawn or its size is modified. Parameters: Name Type Argument Description url string URL of the image. type Layout#Type The type of the image. options Object &lt;optional&gt; An object literal describing the layout content. Properties Name Type Default Description width number The total width of the original, unsplit image. This parameter must only be specified for the 'google' layout type. height number The total height of the original, unsplit image. This parameter must only be specified for the 'google' layout type. suffix string 'jpg' The filename suffix of the tiles. subdomains string 'abc' The ('a'|'b'|'c') s subdomain of a Google template URL (for instance: 'https:{s}.my.example//{z}/{x}/{y}.png'). cachelevels number Number of levels above the current level which will be loaded. Lowering will reduce number of http requests, but image will have tile missing while loading. Source: LayoutTiles.js, line 59 Methods available() returns the list of tiles available for a rendering Source: LayoutTiles.js, line 303 getTileURL(id, tile) Gets the URL of a specific tile. The function must be implemented for each layout type supported by OpenLIME. Parameters: Name Type Description id number The channel id. tile Tile The tile. Source: LayoutTiles.js, line 383 needed() returns the list of tiles required for a rendering, sorted by priority, max Source: LayoutTiles.js, line 268 neededBox(viewport, transform, layerTransform, border, bias) Computes the tiles needed for each level, given a viewport and a transform. Parameters: Name Type Description viewport Viewport The viewport. transform Transform The current transform. layerTransform Transform The transform of the calling layer border number The threshold (in tile units) around the current camera position for which to prefetch tiles. bias number 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. Source: LayoutTiles.js, line 348 Returns: level: the optimal level in the pyramid, pyramid: array of bounding boxes in tile units. Type Object tileCoords() Returns the coordinates of the tile (in [0, 0, w h] image coordinate system) and the texture coords associated. Source: LayoutTiles.js, line 208 Returns: the tile coordinates (image coords and texture coords) × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"LensDashboard.html":{"id":"LensDashboard.html","title":"Class: LensDashboard","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Class: LensDashboard LensDashboard The LensDashboard class is an optional element that can be embedded in an instance of LayerLens. It represents a square HTML container of sufficient size to hold the lens that is positioned solidly against it. Its main use is to allow the creation of a dashboard of HTML elements positioned around the lens. In the example below a simple HTML button is positioned close to the top-left corner of the dashboard: new LensDashboard(options) Manages creation and update of a lens dashboard. An object literal with Layer options can be specified. This class instatiates an optional element of LayerLens Parameters: Name Type Description options Object An object literal with Lensdashboard parameters. Properties Name Type Default Description borderWidth number 30 The extra border thickness (in pixels) around the square including the lens. Source: LensDashboard.js, line 49 Example const lensDashboard = new OpenLIME.LensDashboard(lime); const lensLayer = new OpenLIME.Layer({ type: \"lens\", layers: [layerIn], camera: lime.camera, radius: 200, border: 10, dashboard: lensDashboard, visible: true }); lime.addLayer('lens', lensLayer); const btn = document.createElement('button'); btn.innerHTML = \"Click Me\"; btn.style = `position: absolute; left: 0px; top: 0px; display: inline-block; cursor: pointer; pointer-events: auto;`; lensDashboard.append(btn); Methods append(elm) Appends a HTML element to the dashboard. The element must be positioned in 'absolute' mode. Parameters: Name Type Description elm * A HTML element Source: LensDashboard.js, line 227 removeMaskFromSvgLayer(svg) Remove mask attribute from svg element Parameters: Name Type Description svg * element from which remove the mask attribute Source: LensDashboard.js, line 219 setBackgroundRenderingMode(mode) Set the background rendering mode within the lens. Parameters: Name Type Description mode RenderingMode RenderingMode.draw or RenderingMode.hide Source: LensDashboard.js, line 243 setLayerSvgAnnotation(l) Call this to set the corresponding LayerSvgAnnotation Parameters: Name Type Description l LayerSvgAnnotation Source: LensDashboard.js, line 148 setLensRenderingMode(mode) Set rendering mode within the lens. Parameters: Name Type Description mode RenderingMode RenderingMode.draw or RenderingMode.hide Source: LensDashboard.js, line 235 setMaskOnSvgLayer(svg) Set mask property on the svg element which need to be displayed with the lens Parameters: Name Type Description svg * element which need to be displayed within the lens Source: LensDashboard.js, line 211 setupCircleInteraction(circle) Setup the event listener to update lens radius by dragging lens border. Call the lens controller to update lens radius. Parameters: Name Type Description circle * lens svg border. Source: LensDashboard.js, line 97 × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"LensDashboardNavigator.html":{"id":"LensDashboardNavigator.html","title":"Class: LensDashboardNavigator","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Class: LensDashboardNavigator LensDashboardNavigator new LensDashboardNavigator(options) Manages creation and update of a lens dashboard. An object literal with Layer options can be specified. This class instatiates an optional element of LayerLens Parameters: Name Type Description options Object An object literal with Lensdashboard parameters. Properties Name Type Default Description toolboxHeight number 25 The extra border thickness (in pixels) around the square including the lens. Source: LensDashboardNavigator.js, line 12 × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"LensDashboardNavigatorRadial.html":{"id":"LensDashboardNavigatorRadial.html","title":"Class: LensDashboardNavigatorRadial","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Class: LensDashboardNavigatorRadial LensDashboardNavigatorRadial new LensDashboardNavigatorRadial(options) Manages creation and update of a lens dashboard. An object literal with Layer options can be specified. This class instatiates an optional element of LayerLens Parameters: Name Type Description options Object An object literal with Lensdashboard parameters. Properties Name Type Default Description toolboxHeight number 25 The extra border thickness (in pixels) around the square including the lens. Source: LensDashboardNavigatorRadial.js, line 12 × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"PointerManager.html":{"id":"PointerManager.html","title":"Class: PointerManager","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Class: PointerManager PointerManager A PointerManager is a high-level class for handling simultaneous events from a DOM target. It captures PointerEvent (MouseEvent and TouchEvent) generated by the target, classifies them as \"gestures\" and provides a simple interface to work with them. The high-level events (gestures) that are detected and emitted are: fingerHover(e) It is fired when a pointing device is used to move the cursor on the target fingerSingleTap(e) It is fired when the user presses a mouse button quickly or touches the screen shortly with a finger fingerDoubleTap(e) It is fired when the user quickly presses a mouse button twice or shortly touches the screen with a finger twice. fingerHold(e) It is fired when the user keeps pressing a mouse button or touching the screen longer than a threshold (600 ms). mouseWheel(e) It is fired when the user rotates the mouse wheel button. panStart(e) It is fired when the pan gesture is starting. panMove(e) It is fired when the pan gesture is in progress. panEnd(e) It is fired when the pan gesture is finished. pinchStart(e1, e2) It is fired when the pinch gesture is starting. pinchMove(e1, e2) It is fired when the pinch gesture is in progress. pinchEnd(e1, e2) It is fired when the pinch gesture is finished. In the following example a pointerManager object is created and connected to the canvas. Then a callback to handle a fingerSingleTap and a fingerHold event is defined and connected to the pointerManager. const canvas = document.querySelector('canvas'); const pointerManager = new PointerManager(canvas); const handler = { priority: 10, fingerSingleTap: (e) =&gt; { console.log(\"SINGLE TAP in \", e.clientX, e.clientY); }); fingerHold: (e) =&gt; { console.log(\"FINGER HOLD in \", e.clientX, e.clientY); }); }; pointerManager.onEvent(handler); new PointerManager(target [, options]) Instatiates a PointerManager object. Parameters: Name Type Argument Description target HTMLElement The DOM element from which the events are generated options Object &lt;optional&gt; An object literal with class parameters. Properties Name Type Default Description pinchMaxInterval number 200 fingerDown event max distance in time to trigger a pinch (in ms). Source: PointerManager.js, line 36 × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"Raster.html":{"id":"Raster.html","title":"Class: Raster","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "},"Shader.html":{"id":"Shader.html","title":"Class: Shader","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "},"ShaderBRDF.html":{"id":"ShaderBRDF.html","title":"Class: ShaderBRDF","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "},"ShaderCombiner.html":{"id":"ShaderCombiner.html","title":"Class: ShaderCombiner","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "},"ShaderNeural.html":{"id":"ShaderNeural.html","title":"Class: ShaderNeural","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "},"ShaderRTI.html":{"id":"ShaderRTI.html","title":"Class: ShaderRTI","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "},"Skin.html":{"id":"Skin.html","title":"Class: Skin","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "},"TextToSpeechPlayer.html":{"id":"TextToSpeechPlayer.html","title":"Class: TextToSpeechPlayer","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "},"Transform.html":{"id":"Transform.html","title":"Class: Transform","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "},"UIBasic.html":{"id":"UIBasic.html","title":"Class: UIBasic","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "},"UIDialog.html":{"id":"UIDialog.html","title":"Class: UIDialog","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 688 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 785 hide() Hides the dialog. Source: UIBasic.js, line 771 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 753 show() Shows the dialog. Source: UIBasic.js, line 763 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 793 Events closed The event is fired when the dialog is closed. Source: UIBasic.js, line 772 × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"Viewer.html":{"id":"Viewer.html","title":"Class: Viewer","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "},"tutorial-getting-started.html":{"id":"tutorial-getting-started.html","title":"Tutorial: Getting started with OpenLIME","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "}}
+    {"Cache.js.html":{"id":"Cache.js.html","title":"Source: Cache.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Source: Cache.js /* * The singleton class **Cache** implements a cache for faster retrieval of the tiles required by layers. * @class Cache */ /** @ignore */ class _Cache { /** * Instantiates a Cache object. Tiles to be fetched are stored in an ordered `queue` in {Layer}. * @param {Object} [options] An object literal with cache parameters. * @param {number} options.capacity=536870912 The total cache capacity (in bytes). * @param {number} options.maxRequest=6 Max number of concurrent HTTP requests. Most common browsers allow six connections per domain. */ 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. } /** * Determines which tiles of a given `layer` are candidates to be downloaded. * Cleans up the cache and schedules the web data fetch. * @param {Layer} layer A layer. */ setCandidates(layer) { if(!this.layers.includes(layer)) this.layers.push(layer); setTimeout(() =&gt; { this.update(); }, 0); //ensure all the queues are set before updating. } /** @ignore */ 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; } /** @ignore */ 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); } /* Finds the best tile to be downloaded */ /** @ignore */ 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; } /* Finds the worst tile to be dropped */ /** @ignore */ 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; } /** @ignore */ loadTile(layer, tile) { this.requested++; (async () =&gt; { layer.loadTile(tile, (size) =&gt; { this.size += size; this.requested--; this.update(); } ); })(); } /** @ignore */ dropTile(layer, tile) { this.size -= tile.size; layer.dropTile(tile); } /** * Flushes all tiles for a `layer`. * @param {Layer} layer A layer. */ flushLayer(layer) { if(!this.layers.includes(layer)) return; for(let tile of layer.tiles.values()) this.dropTile(layer, tile); } } /** * Instantiates a Cache object. Tiles to be fetched are stored in an ordered `queue` in {Layer}. * @classdesc The singleton class **Cache** implements a cache for faster retrieval of the tiles required by layers. * @class Cache * @param {Object} [options] An object literal to define cache parameters. * @param {number} options.capacity=536870912 The total cache capacity (in bytes). * @param {number} options.maxRequest=6 Max number of concurrent HTTP requests. Most common browsers allow six connections per domain. */ let Cache = new _Cache; /** * Flushes all tiles for a `layer`. * @function flushLayer * @memberof Cache * @instance * @param {Layer} layer A layer. */ /** * Determines which tiles of a given `layer` are candidates to be downloaded. * Cleans up the cache and schedules the web data fetch. * @function setCandidates * @memberof Cache * @instance * @param {Layer} layer A layer. */ export { Cache } × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"Annotation.js.html":{"id":"Annotation.js.html","title":"Source: Annotation.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Source: Annotation.js import { BoundingBox } from './BoundingBox.js' /** * An annotation is a decoration (text, graphics element, glyph) to be drawn in an overlay mode on the canvas. * Its purpose is to provide additional information useful for the interpretation of the underlying drawings. * This calls defines the content of an annotation which is represented by its unique identifier and additional * information (such as description, annotation category or class, drawing style, labels, etc.). */ class Annotation { /** * Instantiates an **Annotation** object. An object literal with Annotation `options` can be specified. * Note that the developer is free to define additional elements characterizing a custom annotation by adding new options to the constructor. * @param {Object} [options] An object literal with Annotation options (freely adjustable). * @param {string} options.label A string containing an annotation label. * @param {string} option.description A HTML text containg a comprehensive description of the annotation. * @param {string} option.class A class or category to cluster annotations. * @param {Object} option.state=null An object literal with state variables. */ 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!!! } /** @ignore */ 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); }); } /** * Gets the bounding box of the annotation. * Note that the coordinates for annotations are always relative to the top left corner of the canvas. * @returns {BoundingBox} The bounding box */ 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; } ///////////////////////////////// /* The class also provides functions for importing and exporting from and to files in JSON format. */ /* * Copies an entry of a JSON file into an **Annotation** object. * @param {string} entry A JSON string representing an annotation. * @returns {Annotation} The annotation. */ /** @ignore */ 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); } /* * Exports an Annotation to a JSON entry */ /** @ignore */ 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 "},"LayerSvgAnnotation.js.html":{"id":"LayerSvgAnnotation.js.html","title":"Source: LayerSvgAnnotation.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Source: LayerSvgAnnotation.js import { Util } from './Util' import { Layer } from './Layer' import { Annotation } from './Annotation' import { LayerAnnotation } from './LayerAnnotation' import { CoordinateSystem } from './CoordinateSystem'; /** * Elements to classify the annotations. * @typedef {Object} AnnotationClass * @property {color} stroke The CSS color of a line, text or outline SVG element. * @property {string} label The class name. */ /** * Annotation classes. * @typedef {Object.&lt;string, AnnotationClass&gt;} AnnotationClasses */ /** * An annotation layer that draws SVG elements directly on the canvas (outside the WebGL context). * * Here you will find a tutorial to learn how to build a client-server architecture to manage annotations in OpenLIME. //FIXME * * Extends {@link LayerAnnotation}. */ class LayerSvgAnnotation extends LayerAnnotation { /** * Instantiates a LayerSvgAnnotation object. * @param {Object} [options] An object literal with options that inherits from {@link LayerAnnotation}. * @param {AnnotationClasses} options.classes An object literal definying colors and labels of the annotation classes. * @param {Function} options.onClick The callback to fire when the an annotation is clicked on the canvas. The callback is passed an object containing the selected annotation. * @param {bool} options.shadow=true Whether to insert SVG elements in a shadow DOM. */ 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.createOverlaySVGElement(); //this.setLayout(this.layout); } /** @ignore */ 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 a value that indicates whether the layer is visible. * @param {bool} visible The value. */ setVisible(visible) { if (this.svgElement) this.svgElement.style.display = visible ? 'block' : 'none'; super.setVisible(visible); } /** @ignore */ clearSelected() { if (!this.svgElement) this.createOverlaySVGElement(); // return; this.svgGroup.querySelectorAll('[data-annotation]').forEach((e) =&gt; e.classList.remove('selected')); super.clearSelected(); } /** * Selects/deselects an annotation * @param {Annotation} anno The annotation. * @param {bool} on=true Whether to select the annotation. */ setSelected(anno, on = true) { for (let a of this.svgElement.querySelectorAll(`[data-annotation=\"${anno.id}\"]`)) a.classList.toggle('selected', on); super.setSelected(anno, on); } /** @ignore */ newAnnotation(annotation) { let svg = Util.createSVGElement('svg'); if (!annotation) annotation = new Annotation({ element: svg, selector_type: 'SvgSelector' }); return super.newAnnotation(annotation) } /** @ignore */ 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; } /** * Return the string containing the transform for drawing the svg group in the proper position * @param {Transform} transform current transform parameter of the draw function * @param {bool} inverse when its false return the transform needed to draw the svgGroup * @returns string with svgroup transform */ 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})`; } /** @ignore */ 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); } } //utils /* let parser = new DOMParser(); let use = createElement('use', { 'xlink:href': '#' + a.id, 'stroke-width': 10, 'pointer-events': 'stroke' }); //let use = parser.parseFromString(`&lt;use xlink:href=\"${a.id}\" stroke-width=\"10\" pointer-events=\"stroke\"/&gt;`, \"image/svg+xml\"); this.svgGroup.appendChild(use); */ } } } } Layer.prototype.types['svg_annotations'] = (options) =&gt; { return new LayerSvgAnnotation(options); } export { LayerSvgAnnotation } × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"Transform.js.html":{"id":"Transform.js.html","title":"Source: Transform.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "},"Simplify.js.html":{"id":"Simplify.js.html","title":"Source: Simplify.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "},"BoundingBox.js.html":{"id":"BoundingBox.js.html","title":"Source: BoundingBox.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Source: BoundingBox.js /** * The bounding box is a rectangular box that is wrapped as tightly as possible around a geometric element. It is oriented parallel to the axes. * It is defined by two opposite vertices. The class It includes a comprehensive set of functions for various processing tasks related to bounding boxes. * */ class BoundingBox { /** * Instantiates a **BoundingBox** object. * @param {Object} [options] An object literal defining the bounding box. * @param {number} xLow=1e20 The x coordinate of the low corner a rectangle. * @param {number} yLow=1e20 The y coordinate of the low corner a rectangle. * @param {number} xHigh=-1e20 The x coordinate of the high corner a rectangle. * @param {number} xHigh=-1e20 The y coordinate of the high corner a rectangle. */ constructor(options) { Object.assign(this, { xLow: 1e20, yLow: 1e20, xHigh: -1e20, yHigh: -1e20 }); Object.assign(this, options); } /** * Defines a bonding box from an array of four elements. * @param {Array&lt;number&gt;} x The array of four elements with the two corners ([xLow, yLow, xHigh, yHigh]). */ fromArray(x) { this.xLow = x[0]; this.yLow = x[1]; this.xHigh = x[2]; this.yHigh = x[3]; } /** * Empties a bounding box. */ toEmpty() { this.xLow = 1e20; this.yLow = 1e20; this.xHigh = -1e20; this.yHigh = -1e20; } /** * Tests weather the bounding box is empty. * @returns {bool} The test result. */ isEmpty() { return this.xLow &gt; this.xHigh || this.yLow &gt; this.yHigh; } /** * Returns an array of four elements containg the low and high corners. * @returns {Array&lt;number&gt;} The array of corners. */ toArray() { return [this.xLow, this.yLow, this.xHigh, this. yHigh]; } /** * Returns a text string with the corner coordinates separated by a space. * @returns {string} The string of corners. */ toString() { return this.xLow.toString() + \" \" + this.yLow.toString() + \" \" + this.xHigh.toString() + \" \" + this.yHigh.toString(); } /** * Merges a `box` to `this` BoundingBox. * @param {BoundingBox} box The bounding box to be merged. */ 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); } } /** * Merges a point `p`{x, y} to `this` BoundingBox. * @param {{x, y}} p The point to be merged. */ 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); } /** * Translates the bounding box by a displacement vector (dx, dy). * @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; } /** * Divides by `side` and truncates the corner coordinates. * @param {*} side The value to divide 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; } /** * Returns the bounding box width. * @returns {number} The width value. */ width() { return this.xHigh - this.xLow; } /** * Returns the bounding box height. * @returns {number} The height value. */ height() { return this.yHigh - this.yLow; } /** * Returns the bounding box center. * @returns {number} The center value. */ center() { return { x: (this.xLow+this.xHigh)/2, y: (this.yLow+this.yHigh)/2 }; } /** * Returns the i-th corner. * @param {number} i The index of the corner. * @returns {Array&lt;number&gt;} A [x, y] pair. */ 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)] }; } 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 out the bounding box corners in the console. */ 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 "},"Camera.js.html":{"id":"Camera.js.html","title":"Source: Camera.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Source: Camera.js import { Transform } from './Transform.js' import { BoundingBox } from './BoundingBox.js' import { addSignals } from './Signals.js' /** * The type Viewport defines a rectangular viewing region inside a (wxh) area * @typedef {Object} Viewport * @property {number} x x-component of the lower left corner. * @property {number} y y-component of the lower left corner. * @property {number} dx x-component of the top right corner. * @property {number} dy y-component of the top right corner. * @property {number} w the viewport width. * @property {number} w the viewport height. */ /** * The class Camera does not have an operational role, but it is rather a container of parameters * needed by the system to define the viewport, the camera position and to calculate the appropriate view. * * To enable the animation, a camera contains two view matrices (two {@link Transform} objects): a `source` with the * current position and a `target` with the position the camera will arrive at in a time `dt`. * * The member function `setPosition()` takes care of defining the target, the OpenLIME system automatically animates the * camera to bring it from source to target, unless the user manually interrupts the current animation. * * User-generated device events (such as touch events or mouse events) can modify camera parameters via an appropriate {@link Controller}. */ class Camera { /** * Creates a scene's camera. An update event is issued when the camera has completed its positioning. * Additionally, an object literal with Viewer `options` can be specified. * @param {Object} [options] * @param {bool} options.bounded=true Weather to limit the translation of the camera to the boundary of the scene. * @param {number} options.maxFixedZoom=2 The maximum pixel size. * @param {number} options.minScreenFraction=1 The minimum portion of the screen to zoom in. */ 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'; } /** * Defines the copy constructor. * @returns A copy of the Camera. */ copy() { let camera = new Camera(); Object.assign(camera, this); return camera; } /** * Sets the viewport and updates the camera position as close as possible to the previuos 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; } } /** * Gets the current viewport (in device coordinates). * @return the current viewport */ glViewport() { let d = window.devicePixelRatio; let viewport = {}; for (let i in this.viewport) viewport[i] = this.viewport[i] * d; return viewport; } /** * Map coordinate relative to the canvas into scene coords using the specified transform. * @return {Object} {X, Y} in scene coordinates (relative to the center of the viewport). */ 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 }; } /** * Map coordinate relative to the scene into canvas coords using the specified transform. * @return {Object} {X, Y} in canvas coordinates. */ 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 (position, rotation, ) * @param {number} dt The animation duration in millisecond. * @param {*} x The x-component of the translation vector. * @param {*} y The y-component of the translation vector. * @param {*} z The zoom factor. * @param {*} a The rotation angle (in degrees). * @param {Easing} easing The function aimed at making the camera movement less severe or pronounced. */ 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'); } /** * Pan the camera (in canvas coords) * @param {number} dt The animation duration in millisecond. * @param {number} dx The horizontal displancement. * @param {number} dy The 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); } /** Zoom in or out at a specific point (in canvas coords) * @param {number} dt The animation duration in millisecond. * @param {number} z The distance of the camera from the canvas. * @param {number} x The x coord to zoom in|out * @param {number} y The y coord to zoom in|out */ 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); } /** * Rotate the camera around its z-axis by an `a` angle (in degrees) * @param {number} dt The animation duration in millisecond. * @param {angle} a The 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); } /** Zoom in or out at a specific point (in canvas coords) * @param {number} dt The animation duration in millisecond. * @param {number} dz The scroll amount for the z-axis. * @param {number} x=0 The x coord to zoom in|out * @param {number} y=0 The y coord to zoom in|out */ 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 `time` in canvas coords. * @param {time} time The current time (a DOMHighResTimeStamp variable, as in `performance.now()`). * @returns {Transform} The current transform */ 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 `time` in device coords. * @param {time} time The current time (a DOMHighResTimeStamp variable, as in `performance.now()`). * @returns {Transform} The current transform */ getGlCurrentTransform(time) { const pos = this.getCurrentTransform(time); pos.x *= window.devicePixelRatio; pos.y *= window.devicePixelRatio; pos.z *= window.devicePixelRatio; return pos; } /** * Modify the camera settings to frame the specified `box` * @param {BoundingBox} box The specified rectangle [minx, miny, maxx, maxy] in the canvas. * @param {number} dt The animation duration in millisecond */ 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); } /** * Modify the camera settings to the factory values (home). * @param {number} dt animation duration in millisecond */ fitCameraBox(dt) { this.fit(this.boundingBox, dt); } /** @ignore */ 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 "},"Shader.js.html":{"id":"Shader.js.html","title":"Source: Shader.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "},"Canvas.js.html":{"id":"Canvas.js.html","title":"Source: Canvas.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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)); }; /** * Creates the WebGL context for the `canvas`. It stores information related to the `overlay` DOM element and the `camera` of the scene. * Signals are triggered in case of scene modifications. * Additionally, an object literal with Canvas `options` can be specified. * @param {(element|string)} canvas DOM element or selector for a `&lt;canvas&gt;`. * @param {(element|string)} overlay DOM element or selector for overlay decorations (i.e. annotations, glyphs, etc...) * @param {Camera} camera The scene's camera. * @param {Object} [options] An object literal. * @param {Object} options.layers Object specifies layers (see. {@link Layer}) * @param {bool} options.preserveDrawingBuffer=false Whether to preserve the buffers until manually cleared or overwritten. Needed for screenshots * (otherwise is just a performance penalty). * */ class Canvas { 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')); } 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); } /* * Adds a Canvas Event * @param {*} event A label to identify the event. * @param {*} callback The event callback function. */ /** @ignore */ 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(); }}); } /** * Sets the state variables of all the system * @param {Object} state An object with state variables. * @param {number} dt The animation duration in millisecond. * @param {Easing} easing The function aimed at making the camera movement or control adjustments less severe or pronounced. */ 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); } } /** * Gets the state variables of all the system as described in the stateMask * @return {Object} An object with state variables. */ 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; } /** @ignore */ 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 the given layer to the Canvas and connects the layer's events to it. * @param {string} id A label to identify the layer. * @param {Layer} layer An OpenLIME Layer object. */ addLayer(id, layer) { /** * The event is fired if a layer is updated, added or removed. * @event Canvas#update */ /** * The event is fired when all the layers are ready (i.e. initialized and with data ready to be displayed). * @event Canvas#ready */ 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(); } /** Remove the given layer from the Canvas * @param {Layer} layer An OpenLIME Layer object. * * @example * let layer0 = new Layer(options); * canvas.addLayer('kdmap', layer0); * ... * canvas.removeLayer(layer0); */ removeLayer(layer) { layer.clear(); //order is important. delete this.layers[layer.id]; delete Cache.layers[layer]; this.prefetch(); } /** @ignore */ updateSize() { /** * The event is fired if a layout changes its size or position (the event forces the re-computation of the layer bounding boxes). * @event Canvas#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'); } /** @ignore */ 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; } /* * This function have each layer to check which tiles are needed and schedule them for download. * @param {object} transform is the camera position (layer will combine with local transform). */ /** @ignore */ 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()); } } } } addSignals(Canvas, 'update', 'updateSize', 'ready'); export { Canvas } × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"Colormap.js.html":{"id":"Colormap.js.html","title":"Source: Colormap.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Source: Colormap.js class Spline { 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); } /** * inspired by https://stackoverflow.com/a/40850313/4417327 */ 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; } 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; } } class Color { 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); } value() { return [this.r, this.g, this.b, this.a]; } 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; } toHex() { const rgb = this.toRGB(); return Color.rgbToHex(rgb[0], rgb[1], rgb[2]); } toHexa() { const rgba = this.toRGBA(); return Color.rgbToHexa(rgba[0], rgba[1], rgba[2], rgba[3]); } 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; } } class Colormap { 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); rangeDomain() { return [this.domain[0], this.domain[this.domain.length - 1]]; } 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; } 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; } 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)); } 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; } /** Precision as parameter for future dev */ 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 }; } } class ColormapLegend { 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(); } 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; } } 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 "},"Controller.js.html":{"id":"Controller.js.html","title":"Source: Controller.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Source: Controller.js /** * **Controller** is a virtual base class that handles user interaction via device events (mouse/touch events). * It 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. * * In the example below a **ControllerPanZoom** object (derived from **Controller**) is created and associated with the `pointerManager` of the `viewer`. * ``` * const panzoom = new OpenLIME.ControllerPanZoom(viewer.camera, { * priority: -1000, * activeModifiers: [0, 1] * }); * viewer.pointerManager.onEvent(panzoom); * ``` */ class Controller { /** * Instantiates a Controller object. * @param {Object} [options] An object literal with controller parameters. * @param {number} options.panDelay=50 Inertial value of the movement in ms for panning movements. * @param {number} options.zoomDelay=200 A zoom event is smoothed over this delay in ms, * @param {number} options.priority=0 Higher priority controllers are invoked first. */ constructor(options) { Object.assign(this, { active: true, debug: false, panDelay: 50, zoomDelay: 200, priority: 0, activeModifiers: [0] }); Object.assign(this, options); } /** * Returns the modifier state of the event `e`. Modifiers are keyboard events that happens simultaneously * with a device event (e.g. shift + left mouse button). * The modifiers handled by a controller are: * * NoModifiers = 0 * * CrtlModifier = 1 * * ShiftModifier = 2 * * AltModifier = 4 * * The modifier state is the sum of values above corresponding to the key pressed (CTRL, SHIFT or ALT). * @param {Event} e * @returns {number} The modifier state. */ modifierState(e) { let state = 0; if(e.ctrlKey) state += 1; if(e.shiftKey) state += 2; if(e.altKey) state += 4; return state; } /** @ignore */ captureEvents() { this.capture = true; } /** @ignore */ releaseEvents() { this.capture = false; } } export { Controller } × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"Controller2D.js.html":{"id":"Controller2D.js.html","title":"Source: Controller2D.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Source: Controller2D.js import { BoundingBox } from './BoundingBox.js'; import { Controller } from './Controller.js' /** * Callback invoked when the position (x, y) is updated. * @callback updatePosition * @param {number} x The x coordinate. * @param {number} y The y coordinate. */ function clamp(value, min, max) { return Math.max(min, Math.min(max, value)); } /** **Controller2D** intercepts pan and single-tap events in the canvas and updates a 2D position (x, y) of the device pointer. * If `options.relative` is false the coordinates are both mapped between [-1, 1] with origin in the bottom left corner of the canvas, * otherwise the coordinates have origin in the initial position of the panning and ranges both between [-1, 1] according to the distance * from the local origin (multiplied by a `options.speed` value). * When updated, the (x, y) position is passed to a `callback` for further custom computations. */ class Controller2D extends Controller { /** * Instantiates a Controller2D object. * @param {updatePosition} callback The callback invoked when the postion (x, y) is updated. * @param {Object} [options] An object literal with controller parameters. * @param {bool} options.relative=false Whether the coordinate system is local. * @param {number} options.speed=2.0 Enhancement factor for computation of local coordinates. */ 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; } /** * Stores the final position for local coordinate system. This is a convenience function to be used in callback. * @param {number} x The x-axis coordinate. * @param {number} y The y-axis coordinate. */ setPosition(x, y) { this.current_x = x; this.current_y = y; this.callback(x, y); } /* * Computes the mapping between the canvas pixel coordinates to [-1, 1]. * @param {event} e The device event. * @returns {{x, y}} The projected position. */ /** @ignore */ 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] } /** @ignore */ 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]; } /** @ignore */ 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(); } /** @ignore */ panMove(e) { if(!this.panning) return false; this.callback(...this.rangeCoords(e)); } /** @ignore */ 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)); } /** @ignore */ 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 "},"ControllerFocusContext.js.html":{"id":"ControllerFocusContext.js.html","title":"Source: ControllerFocusContext.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Source: ControllerFocusContext.js import {ControllerLens} from './ControllerLens.js' import { CoordinateSystem } from './CoordinateSystem.js'; import { FocusContext } from './FocusContext.js'; class ControllerFocusContext extends ControllerLens { static callUpdate(param) { param.update(); } 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}; } 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); } 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); } } 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(); } 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; } } } } pinchEnd(e, x, y, scale) { this.zooming = false; } /** * Start zoom operation clicking on lens border. Call it on pointerdown event on lens border * @param {*} p pixel position in 0,wh (y up) */ 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); } } /** * Zoom dragging lens border. Call it during pointermove event on lens border * @param {*} p pixel position in 0,wh (y up) */ 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); } } /** @ignore */ 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); } } /** * Called at end of zoom border drag operation */ zoomEnd() { if (this.lensLayer.visible) { super.zoomEnd(); // Stop calling zoomUpdate clearTimeout(this.timeOut); } } 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(); } /** * Multiply lens radius of dz. Consequently adjust camera in order to keep Focus &amp; Context condition verified. * At the end of the operation lens radius could be * @param {*} dz factor to multiply lens radius */ 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); } 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); } panEnd() { if (this.panning) { clearTimeout(this.timeOut); } this.panning = false; this.panningCamera = false; this.zooming = false; } 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]; } } 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; } setDatasetDimensions(width, height) { this.imageSize = {w: width, h:height}; } 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 "},"ControllerLens.js.html":{"id":"ControllerLens.js.html","title":"Source: ControllerLens.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Source: ControllerLens.js import {Controller} from './Controller.js' import {CoordinateSystem} from './CoordinateSystem.js' import { FocusContext } from './FocusContext.js'; class ControllerLens extends Controller { 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; } 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(); } } 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(); } // else if (this.zooming) { // const p = this.getPixelPosition(e); // this.zoomMove(p); // } } panEnd(e) { this.panning = false; this.zooming = false; } 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(); } } 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); } pinchEnd(e, x, y, scale) { this.zooming = false; } 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; } /** * Start zoom operation clicking on lens border. Call it at start of pointerdown event on lens border * @param {*} pe pixel position in CanvasHtml */ 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; } /** * Zoom dragging lens border. Call it during pointermove event on lens border * @param {*} pe pixel position CanvasHTml */ 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); } } /** * End of zoom operation on lens border */ zoomEnd() { this.zooming = false; } getFocus() { const p = this.lensLayer.getCurrentCenter(); const r = this.lensLayer.getRadius(); return {position: p, radius: r} } 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}; } /** * Convert position from CanvasHtml to Viewport * @param {*} e contain offsetX,offsetY position in CanvasHtml (0,0 top,left, y Down) * @returns Position in Viewport (0,0 at bottom,left, y Up) */ getPixelPosition(e) { const p = {x: e.offsetX, y: e.offsetY}; return CoordinateSystem.fromCanvasHtmlToViewport(p, this.camera, this.useGL); } /** * Convert position from CanvasHtml to Scene * @param {*} e must contain offsetX,offsetY position in CanvasHtml (0,0 top,left, y Down) * @returns Point in Scene coordinates (0,0 at center, y Up) */ getScenePosition(e) { const p = {x: e.offsetX, y: e.offsetY}; return CoordinateSystem.fromCanvasHtmlToScene(p, this.camera, this.useGL); } 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 "},"ControllerPanZoom.js.html":{"id":"ControllerPanZoom.js.html","title":"Source: ControllerPanZoom.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Source: ControllerPanZoom.js import { Controller } from './Controller.js' import { CoordinateSystem } from './CoordinateSystem.js'; import { addSignals } from './Signals.js' /** **ControllerPanZoom** intercepts pan, zoom, single tap, and wheel events in the canvas and updates the scene camera parameters. */ class ControllerPanZoom extends Controller { /** * Instantiates a ControllerPanZoom object. * @param {Camera} camera The scene camera. * @param {Object} [options] An object literal with controller parameters. * @param {number} options.zoomAmount=1.2 The incremental value for zoom in/out. */ 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); } /** @ignore */ 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(); } /** @ignore */ 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); } /** @ignore */ panEnd(e) { this.panning = false; } /** @ignore */ distance(e1, e2) { return Math.sqrt(Math.pow(e1.x - e2.x, 2) + Math.pow(e1.y - e2.y, 2)); } /** @ignore */ pinchStart(e1, e2) { this.zooming = true; this.initialDistance = Math.max(30, this.distance(e1, e2)); e1.preventDefault(); //e2.preventDefault(); //TODO this is optional? } /** @ignore */ 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(); } /** @ignore */ pinchEnd(e, x, y, scale) { this.zooming = false; e.preventDefault(); } /** @ignore */ 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(); } /** @ignore */ 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 "},"CoordinateSystem.js.html":{"id":"CoordinateSystem.js.html","title":"Source: CoordinateSystem.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "},"EditorSvgAnnotation.js.html":{"id":"EditorSvgAnnotation.js.html","title":"Source: EditorSvgAnnotation.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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' /** * Callback for create/update/delete annotations. * @function crudCallback * @param {Annotation} anno The current annotation entry. */ /** * Callback implementing custom state annotations. * @function customStateCallback * @param {Annotation} anno The current annotation entry. */ /** * Callback to customize the annotation data object. * @function customDataCallback * @param {Annotation} anno The current annotation entry. */ /** * Callback executed when an annotation is selcted on the user interface. * @function selectedCallback * @param {Annotation} anno The current annotation entry. */ /** * **EditorSvgAnnotation** enables the {@link UIBasic} interface to edit (create/update/delete) SVG annotations. * This class is a mere utility that acts as an adapter between the annotation database and the OpenLIME system. * * Here you will find a tutorial to learn how to use the SVG annotation editor. //FIXME * * For the experienced developer this class can be used as an example to design more complex editors. * * In the following example an **EditorSvgAnnotation** is instatiated and connected to the annotation database * through three callbacks implementing database operations (create/update/delete). * ``` * // Creates an annotation layer and add it to the canvans * const anno = new OpenLIME.Layer(aOptions); * lime.addLayer('anno', anno); * * // Creates a SVG annotation Editor * const editor = new OpenLIME.EditorSvgAnnotation(lime, anno, { * viewer: lime, * classes: classParam * }); * editor.createCallback = (anno) =&gt; { console.log(\"Created annotation: \", anno); processRequest(anno, 'create'); return true; }; * editor.updateCallback = (anno) =&gt; { console.log(\"Updated annotation: \", anno); processRequest(anno, 'update'); return true; }; * editor.deleteCallback = (anno) =&gt; { console.log(\"Deleted annotation: \", anno); processRequest(anno, 'delete'); return true; }; * ``` */ class EditorSvgAnnotation { /** * Instatiates a EditorSvgAnnotation object. * @param {Viewer} viewer The OpenLIME viewer. * @param {LayerSvgAnnotation} layer The annotation layer on which to operate. * @param {Object} [options] An object literal with SVG editor parameters. * @param {AnnotationClasses} options.classes An object literal definying colors and labels of the annotation classes. * @param {crudCallback} options.createCallback The callback to implement annotation creation. * @param {crudCallback} options.updateCallback The callback to implement annotation update. * @param {crudCallback} options.deleteCallback The callback to implement annotation deletion. * @param {bool} options.enableState=false Whether to enable custom annotation state. This allows to include some state variables into an annotation item (such as camera, light or lens position). * @param {customStateCallback} options.customState The callback implementing custom state annotations. * @param {customDataCallback} options.customData The callback to customize the annotation data object. * @param {selectedCallback} options.selectedCallback The callback executed when an annotation is selcted on the user interface. */ 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; } } /** @ignore */ 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; } /** @ignore */ 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); } /** @ignore */ 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); } /** @ignore */ 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(); } /** @ignore */ 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'); } /** @ignore */ 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 /** @ignore */ 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(); } } /** @ignore */ 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(); } } /** @ignore */ 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(); } /** @ignore */ 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 "},"FocusContext.js.html":{"id":"FocusContext.js.html","title":"Source: FocusContext.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Source: FocusContext.js import { Transform } from \"./Transform\"; import { CoordinateSystem } from \"./CoordinateSystem\"; /** * The FocusContext class is responsible for identifying a good Focus and Context situation. * During interaction it distributes user inputs on lens, into camera and lens movement * in order to keep the lens in focus and context situation, within the viewport, with enough * space between the lens and the viewport boundaries, for both panning and zooming actions. * It also computes a good transform given a lens to properly display the lens within * the current viewport (used for stored annotations) */ class FocusContext { /** * Subdivide pan amount (delta) between lens (focus) and camera transform (context). * @param {*} viewport {x, y, dx, dy, w, h} * @param {*} focus lens : {position,radius}. Contain current lens in dataset coords, which will be updated to translated lens * @param {Transform} context Contain current transform, which will be updated to translated context * @param {Number} delta amount of pan in dataset pixels * @param {*} imageSize {w,h} Size of the dataset width height (to clamp movement on boundaries) */ 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); } } /** * Distribute scale between radius and camera scale in order to keep focus and context situation * @param {Camera} camera * @param {*} focus lens : {position,radius}. Contain current lens in dataset coords, which will be updated to translated lens * @param {Transform} context Contain current transform, which will be updated to translated context * @param {Number} dz amount of scale (which should multiply scale) */ 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; } /** * Adapt context in order to have focus &amp; context condition satisfied for the requested focus * @param {*} viewport {x, y, dx, dy, w, h} * @param {*} focus lens : {position,radius}. Contain current lens in dataset coords * @param {Transform} context Contain current transform, which will be updated to translated context * @param {Number} desiredScale context desired scale (which will be clamped within min max scale) */ 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); } /** * Fix context scale to make projected lens fit within viewport. * @param {*} viewport {x, y, dx, dy, w, h} * @param {*} focus lens : {position,radius}. Contain current lens in dataset coords * @param {Transform} context Contain current transform, whose scale will be updated to keep lens in focus and context after scale */ 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; } } /** * Translate context in order to put lens (focus) in focus and context condition * @param {*} viewport {x,y,dx,dy,w,h} * @param {*} focus lens : {position,radius} * @param {Transform} context */ 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; } /** * @ignore */ 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)) / (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; } /** * @ignore */ 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 } /** * @ignore */ 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; } /** * @ignore */ 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}; } /** * @ignore */ 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 "},"Layer.js.html":{"id":"Layer.js.html","title":"Source: Layer.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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' /** * The Layer class is responsible for drawing slides in the OpenLIME viewer. * Layers can directly draw their contents on the viewer or be combined with each other to obtain more complex visualizations. * 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. * * A Layer takes raster data (images) as input which are managed by the layout. A layer stores all the information * and functions needed to render the graphics (shaders, shader parameters, data structures, etc.), and takes care * of data prefetching and communication with the cache. * * The Layer is a kind of primitive class from which other Layer classes can inherit. * Each derived class \"registers\" on the Layer base class, the user can then use an instance of * Layer by indicating the chosen `type` in the `options`. * * In the example below a Layer of type 'rti' is created, then a LayerRTI (class derived from Layer) is instantiated and added to the viewer's layer stack. * * @example * const layer1 = new OpenLIME.Layer({ * layout: 'deepzoom', * label: 'Ancient Roman coin', * type: 'rti', * url: '../../assets/rti/hsh/info.json', * normals: false * }); * viewer.addLayer('coin1', layer1); */ //FIXME: prefetchborder and mipmapbias should probably go into layout 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); /* //create members from options. this.rasters = this.rasters.map((raster) =&gt; new Raster(raster)); //layout needs to be the same for all rasters if(this.rasters.length) { if(typeof(this.layout) != 'object') this.layout = new Layout(this.rasters[0].url, this.layout) this.setLayout(this.layout) if(this.rasters.length) for(let raster in this.rasters) raster.layout = this.layout; } if(this.shader) this.shader = new Shader(this.shader); */ } /** @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); } } setViewport(view) { this.viewport = view; this.emit('update'); } addShaderFilter(f) { if (!this.shader) throw \"Shader not implemented\"; this.shader.addFilter(f); } removeShaderFilter(name) { if (!this.shader) throw \"Shader not implemented\"; this.shader.removeFilter(name); } clearShaderFilters() { if (!this.shader) throw \"Shader not implemented\"; this.shader.clearFilters(); } /** * Sets the state of the layer */ 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 state variables of the layer. * @return {Object} An object with state variables */ 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'); }); } // OK setTransform(tx) { //FIXME this.transform = tx; this.emit('updateSize'); } /** * Sets the shader to use * @param {*} id the current shader identifier (the shader must already be registered in the `shaders` array) */ 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 mode. * @returns {string} the shader mode */ getMode() { if (this.shader) return this.shader.mode; return null; } /** * Gets an arrays of all the modes implemented in the current shader. * @returns {string[]} arrays of modes */ getModes() { if (this.shader) return this.shader.modes; return []; } /** * Set the mode of the current shader. * @param {string} mode the mode of the current shader. */ setMode(mode) { this.shader.setMode(mode); this.emit('update'); } /** * Sets a value that indicates whether the layer is visible. * @param {bool} visible The value. */ setVisible(visible) { this.visible = visible; this.previouslyNeeded = null; this.emit('update'); } /** * Sets the layer zindex value (stack ordering value for the rendering of layers). * @param {int} zindex The value. */ setZindex(zindex) { this.zindex = zindex; this.emit('update'); } /** * Computes the minum scale value of the `layers`. * @param {Layer[]} layers * @param {bool} discardHidden Whether hidden layers are not to be included in the computation. * @returns {number} the minimum scale. * @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 the scale of the layer transformation * @returns {number} The scale */ scale() { // FIXME: this do not consider children layers return this.transform.z; } /** * Transform-adjusted spatial resolution for this layer * @return {number} size of a single pixel in mm */ pixelSizePerMM() { return this.pixelSize * this.transform.z; } /** * Gets the layer bounding box (&lt;FIXME&gt; Change name: box is in scene coordinates) * @returns {BoundingBox} The 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 the merge bounding box of all the 'layers` * @param {Layer[]} layers * @param {bool} discardHidden Whether hidden layers are not to be included in the computation. * @returns {BoundingBox} The 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 new shader parameter control. * @param {string} name The name of the control. * @param {*} value The value for initialization. */ 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' }; } /** * Set a shader parameter control with new value * @param {*} name The name of the control. * @param {*} value The value for initialization. * @param {time} dt Duration of the interpolation (0=no interpolation). */ 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'); } /** * Update the current values of the parameter controls. * @returns {bool} Weather the interpolation is finished (the time has now gone). */ 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); } /** @ignore */ 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; } /** @ignore */ 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); } /** @ignore */ 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 "},"LayerAnnotation.js.html":{"id":"LayerAnnotation.js.html","title":"Source: LayerAnnotation.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Source: LayerAnnotation.js import { Annotation } from './Annotation.js'; import { Layer } from './Layer.js' import { addSignals } from './Signals.js'; /** * An annotation layer is a layer used to display decorations (text, graphics elements, glyphs, etc...) on top of other layers. * Its purpose is to provide additional information useful for the interpretation of the underlying layers. * An object literal with `options` can be specified. * * Here you will find a tutorial to learn how to build a client-server architecture to manage annotations in OpenLIME. //FIXME * * Extends {@link Layer}. */ 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); })(); } } /** @ignore */ 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'); } /** @ignore */ 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; } /** @ignore */ 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(); } } } /** @ignore */ 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); } }); } /** @ignore */ 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;`; } /** * Gets an annotation by its `id` * @param {string} id * @returns {Annotation} The annotation. */ getAnnotationById(id) { for(const anno of this.annotations) if(anno.id == id) return anno; return null; } /** @ignore */ clearSelected() { this.annotationsListEntry.element.parentElement.querySelectorAll(`[data-annotation]`).forEach((e) =&gt; e.classList.remove('selected')); this.selected.clear(); } /** * Selects/deselects an annotation * @param {Annotation} anno The annotation. * @param {bool} on=true Whether to select the annotation. */ 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 "},"LayerAnnotationImage.js.html":{"id":"LayerAnnotationImage.js.html","title":"Source: LayerAnnotationImage.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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'; /** * Class which extend LayerAnnotation. Support Image Annotations. * Each annotation corresponds to a tile (currently single resolution) */ class LayerAnnotationImage extends LayerAnnotation { 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); } length() { return this.annotations.length; } setTileVisible(index, visible) { this.layout.setTileVisible(index, visible); //this.annotations[index].needsUpdate = true; //this.emit('update'); } setAllTilesVisible(visible) { this.layout.setAllTilesVisible(visible); // for(let a of this.annotations) { // a.needsUpdate = true; // } //this.emit('update'); } 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); } 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 "},"LayerBRDF.js.html":{"id":"LayerBRDF.js.html","title":"Source: LayerBRDF.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Source: LayerBRDF.js import { Layer } from './Layer.js' import { Raster } from './Raster.js' import { ShaderBRDF } from './ShaderBRDF.js' /** * Extends {@link Layer}. * @param {options} options Same as {@link Layer}, but channels(ks,kd,normals,gloss) are required. */ class LayerBRDF extends Layer { 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'); } 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]; } // Idea from SGI trackball, siggraph 1988 (e.g., http://gxsm.sourceforge.net/gxsmsrcdoxy/html/d2/db2/gxsm_2trackball_8C-source.html) // The point is projected to a sphere in the center, and deformed to a // hyperbolic sheet of rotation away from it in order to avoid // the acceleration due to projection on an increasingly vertical // surface 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]; } setLight(light, dt, easing='linear') { this.setControl('light', light, dt, easing); } 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; } } Layer.prototype.types['brdf'] = (options) =&gt; { return new LayerBRDF(options); } export { LayerBRDF } × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"LayerCombiner.js.html":{"id":"LayerCombiner.js.html","title":"Source: LayerCombiner.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Source: LayerCombiner.js import { Layer } from './Layer.js' /** * Combines other layers (in the framebuffer) using a custom shader. {@link LayerLens} is an example. * The class LayerImage can also be instantiated via the Layer parent class and `options.type='combiner'`. * * Extends {@link Layer}. * @param {options} options Same as {@link Layer}, but `options.layers` are required * @example * // Instantiate the LayerCombiner class and set the two inputs (layer0 and layer1) * const combiner = new OpenLIME.Layer({ * type: 'combiner', * visible: true, * layers: [layer0, layer1] * }); * * // Instantiate the ShaderCombiner class (a custom shader) and select 'diff' as default mode (for visualization purposes) * const shader = new OpenLIME.ShaderCombiner(); * shader.mode = 'diff'; * * // Assign the newly created shader to the combiner (labelling it 'standard') and enable it * combiner.shaders = { 'standard': shader }; * combiner.setShader('standard'); * * // Add the combiner to the canvas * lime.addLayer('combiner', combiner); */ class LayerCombiner extends Layer { 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'; } /** @ignore */ 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); } /** @ignore */ 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 /** @ignore */ deleteFramebuffers() { } /** @ignore */ 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; } /** @ignore */ 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; } } Layer.prototype.types['combiner'] = (options) =&gt; { return new LayerCombiner(options); } export { LayerCombiner } × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"LayerImage.js.html":{"id":"LayerImage.js.html","title":"Source: LayerImage.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Source: LayerImage.js import { Layer } from './Layer.js' import { Raster } from './Raster.js' import { Shader } from './Shader.js' /** * The class LayerImage is derived from Layer and it is responsible for the rendering of simple images. * * @example * // 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); */ class LayerImage extends Layer { /** * Displays a simple image. * An object literal with Layer `options` can be specified. * The class LayerImage can also be instantiated via the Layer parent class and `options.type='image'`. * Extends {@link Layer}. * @param {Object} options an object literal with Layer options {@link Layer}, but `options.url` and `options.layout` are required. * @param {string} options.url The URL of the image * @param {(string|Layout)} options.layout='image' The layout (the format of the input raster images). */ 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'); } } Layer.prototype.types['image'] = (options) =&gt; { return new LayerImage(options); } export { LayerImage } × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"LayerLens.js.html":{"id":"LayerLens.js.html","title":"Source: LayerLens.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Source: LayerLens.js import { CoordinateSystem } from './CoordinateSystem.js'; import { Layer } from './Layer.js' import {LayerCombiner} from './LayerCombiner.js' import {ShaderLens} from './ShaderLens.js' /** * Displays a lens on the canvas. */ class LayerLens extends LayerCombiner { 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; } setVisible(visible) { if(this.dashboard) { if(visible) { this.dashboard.container.style.display = 'block'; } else { this.dashboard.container.style.display = 'none'; } } super.setVisible(visible); } removeOverlayLayer() { this.layers.length = 1; this.shader.setOverlayLayerEnabled(false); } setBaseLayer(l) { this.layers[0] = l; this.emit('update'); } setOverlayLayer(l) { this.layers[1] = l; this.layers[1].setVisible(true); this.shader.setOverlayLayerEnabled(true); this.regenerateFrameBuffers(); } 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(); } setRadius(r, delayms = 100, easing='linear') { this.setControl('radius', [r, 0], delayms, easing); } getRadius() { return this.controls['radius'].current.value[0]; } setCenter(x, y, delayms = 100, easing='linear') { this.setControl('center', [x, y], delayms, easing); } getCurrentCenter() { const p = this.controls['center'].current.value; return {x:p[0], y:p[1]}; } getTargetCenter() { const p = this.controls['center'].target.value; return {x:p[0], y:p[1]}; } getBorderColor() { return this.controls['borderColor'].current.value; } getBorderWidth() { return this.controls['borderWidth'].current.value[0]; } 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; } 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}; } 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; } 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 }; } 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()]; } } Layer.prototype.types['lens'] = (options) =&gt; { return new LayerLens(options); } export {LayerLens} × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"LayerRTI.js.html":{"id":"LayerRTI.js.html","title":"Source: LayerRTI.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Source: LayerRTI.js import { Layer } from './Layer.js' import { Raster } from './Raster.js' import { ShaderRTI } from './ShaderRTI.js' import { Transform } from './Transform.js' /** * Extends {@link Layer}, and can display a relightable images (RTI) using the 'relight' data format (see: * [relight on github]{@link https://github.com/cnr-isti-vclab/relight} for details). * This web-friendly format is composed of a info.json with RTI parametets and a set of images * (plane_0.jpg, plane_1.jpg etc.) with encoded coefficients. * As with all other layers Deepzoom and other {@link Layout}s can be used. * * The ligh direction can be changed programmatically using setLight. * * @param {options} options Same as {@link Layer}, but url and layout are required. * **url**: points to a relight .json * **layout**: one of image, deepzoom, google, iiif, zoomify, tarzoom, itarzoom */ class LayerRTI extends Layer { 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); } /* * Internal function to assemble the url needed to retrieve the image or the image tile. */ 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); } } /* * Alias for setControl, changes light direction. * @param {Array} light light direction as an array [x, y] * @param {number} dt in ms, interpolation duration. */ setLight(light, dt) { this.setControl('light', light, dt); } 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; }); } /* * Internal function: light control maps to light direction in the shader. */ 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; } draw(transform, viewport) { this.worldRotation = transform.a + this.transform.a; return super.draw(transform, viewport); } } Layer.prototype.types['rti'] = (options) =&gt; { return new LayerRTI(options); } export { LayerRTI } × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"Layout.js.html":{"id":"Layout.js.html","title":"Source: Layout.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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) /** * 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). */ /** * The type of the image. All web single-resolution image types (*jpg*, *png*, *gif*, etc...) are supported * as well as the most common multi-resolution image formats (*deepzoom*, *zoomify*, *IIIF*, *google maps*). * @typedef {('image'|'deepzoom'|'deepzoom1px'|'google'|'zoomify'|'iiif'|'tarzoom'|'itarzoom')} Layout#Type */ /** * 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} * * **iiif** - According to the standard, the URL is the address of a IIIF server (for instance, 'https://myiiifserver.example/'). * See: {@link https://iipimage.sourceforge.io/ IIP Server}, {@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. */ class Layout { /** * Creates a Layout, a container for a raster image. * A layout is defined by a `url` of the image and a `type`. * Additionally, an object literal with Layout `options` can be specified. * Signals are triggered when the layout is ready to be drawn or its size is modified. * @param {string} url URL of the image. * @param {Layout#Type} type The type of the image. * @param {Object} [options] An object literal describing the layout content. * @param {number} options.width The total width of the original, unsplit image. This parameter must only be specified for the 'google' layout type. * @param {number} options.height The total height of the original, unsplit image. This parameter must only be specified for the 'google' layout type. * @param {string} options.suffix='jpg' The filename suffix of the tiles. * @param {string} options.subdomains='abc' The ('a'|'b'|'c') *s* subdomain of a Google template URL (for instance: 'https:{s}.my.example//{z}/{x}/{y}.png'). */ 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\"; } getTileSize() { return [this.width, this.height]; } setDefaults(type) { Object.assign(this, { type: type, width: 0, height: 0, suffix: 'jpg', urls: [], status: null, subdomains: 'abc' }); } 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'; } /** @ignore */ 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'); } imageUrl(url, plane) { let path = url.substring(0, url.lastIndexOf('/')+1); return path + plane + '.jpg'; } /** * Gets the URL of a specific tile. The function must be implemented for each layout type supported by OpenLIME. * @param {number} id The channel id. * @param {Tile} tile The tile. */ getTileURL(id, tile) { throw Error(\"Layout not defined or ready.\"); } /** * Gets the layout bounding box. * @returns {BoundingBox} The layout bounding box. */ 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}); } /** * Returns the coordinates of the tile (in [0, 0, w h] image coordinate system) and the texture coords associated. * @returns the tile coordinates (image coords and texture coords) */ 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 }; } newTile(index) { let tile = new Tile(); tile.index = index; return tile; } /** returns the list of tiles required for a rendering, sorted by priority, max */ 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 []; } /** returns the list of tiles available for a rendering */ 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; } 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 "},"LayoutTiles.js.html":{"id":"LayoutTiles.js.html","title":"Source: LayoutTiles.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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) /** * 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). */ /** * The type of the image. All web single-resolution image types (*jpg*, *png*, *gif*, etc...) are supported * as well as the most common multi-resolution image formats (*deepzoom*, *zoomify*, *IIIF*, *google maps*). * @typedef {('image'|'deepzoom'|'deepzoom1px'|'google'|'zoomify'|'iiif'|'tarzoom'|'itarzoom')} Layout#Type */ /** * 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. */ class LayoutTiles extends Layout { /** * Creates a Layout, a container for a raster image. * A layout is defined by a `url` of the image and a `type`. * Additionally, an object literal with Layout `options` can be specified. * Signals are triggered when the layout is ready to be drawn or its size is modified. * @param {string} url URL of the image. * @param {Layout#Type} type The type of the image. * @param {Object} [options] An object literal describing the layout content. * @param {number} options.width The total width of the original, unsplit image. This parameter must only be specified for the 'google' layout type. * @param {number} options.height The total height of the original, unsplit image. This parameter must only be specified for the 'google' layout type. * @param {string} options.suffix='jpg' The filename suffix of the tiles. * @param {string} options.subdomains='abc' The ('a'|'b'|'c') *s* subdomain of a Google template URL (for instance: 'https:{s}.my.example//{z}/{x}/{y}.png'). * @param {number} options.cachelevels Number of levels above the current level which will be loaded. Lowering will reduce number of http requests, but image will have tile missing while loading. */ constructor(url, type, options) { super(url, null, options); this.setDefaults(type); this.init(url, type, options); } 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, }); } /** @ignore */ 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; }); } /* * Internal function to assemble the url needed to retrieve the image or the image tile. */ 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); } } getTileSize() { return [this.tilesize, this.tilesize]; } /** * Each tile is assigned an unique number. */ /** @ignore */ 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; } 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 }; } /* * Compute all the bounding boxes (this.bbox and this.qbox). * @return number of tiles in the dataset */ /** @ignore */ 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'); } /** * Returns the coordinates of the tile (in [0, 0, w h] image coordinate system) and the texture coords associated. * @returns the tile coordinates (image coords and texture coords) */ 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 } } newTile(index) { let tile = super.newTile(index) tile.index = index; Object.assign(tile, this.reverseIndex(index)); return tile; } /** returns the list of tiles required for a rendering, sorted by priority, max */ 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; } /** returns the list of tiles available for a rendering */ 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 the tiles needed for each level, given a viewport and a transform. * @param {Viewport} viewport The viewport. * @param {Transform} transform The current transform. * @param {Transform} layerTransform The transform of the calling layer * @param {number} border The threshold (in tile units) around the current camera position for which to prefetch tiles. * @param {number} bias 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. * @returns {Object} level: the optimal level in the pyramid, pyramid: array of bounding boxes in tile units. */ 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 the URL of a specific tile. The function must be implemented for each layout type supported by OpenLIME. * @param {number} id The channel id. * @param {Tile} tile The tile. */ getTileURL(id, tile) { throw Error(\"Layout not defined or ready.\"); } /* * Witdh and height can be recovered once the image is downloaded. */ /** @ignore */ async initImage() { this.getTileURL = (rasterid, tile) =&gt; { return this.urls[rasterid]; } this.nlevels = 1; this.tilesize = 0; } /* * url points to the folder (without /) * width and height must be defined */ /** @ignore */ 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; }; } /* * Expects the url to point to .dzi config file */ /** @ignore */ 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; }; } /** @ignore */ 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; }; } /** @ignore */ 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; }; } /* * Expects the url to point to ImageProperties.xml file. */ /** @ignore */ 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; }; } /** @ignore */ 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`; }; } 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; }; } } let factory = (url, type, options) =&gt; { return new LayoutTiles(url, type, options); }; 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 "},"LayoutTileImages.js.html":{"id":"LayoutTileImages.js.html","title":"Source: LayoutTileImages.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Source: LayoutTileImages.js import { Layout } from './Layout.js'; import { BoundingBox } from './BoundingBox.js'; import { Tile } from './Tile.js'; import { Annotation } from './Annotation.js'; class LayoutTileImages extends 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); } } getTileSize() { return [0, 0]; } 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'); } /** * Gets the layout bounding box. * @returns {BoundingBox} The layout bounding box. */ 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); } } boundingBox() { return this.box; } 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/\"; } setTileDescriptors(tileDescriptors) { this.tileDescriptors = tileDescriptors; this.status = 'ready'; this.emit('ready'); } /** * Gets the URL of a specific tile. The function must be implemented for each layout type supported by OpenLIME. * @param {number} id The channel id. * @param {Tile} tile The tile. */ getTileURL(id, tile) { const url = this.path + '/' + this.tileDescriptors[id].image; return url; } setTileVisible(index, visible) { this.tileDescriptors[index].visible = visible; } setAllTilesVisible(visible) { const N = this.tileCount(); for(let i = 0; i &lt; N; ++i) { this.tileDescriptors[i].visible = visible; } } index(level, x, y) { // Map x to index (flat list) return x; } 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]) }; } 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; } /** returns the list of tiles available for a rendering */ 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; } 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; } 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; } tileCount() { return this.tileDescriptors.length; } } 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 "},"LensDashboard.js.html":{"id":"LensDashboard.js.html","title":"Source: LensDashboard.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Source: LensDashboard.js import { CoordinateSystem } from \"./CoordinateSystem\"; import { Util } from \"./Util\" /** * RenderingMode for lens and background. Currently implemented only draw and hide. */ 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. */ /** * The LensDashboard class is an optional element that can be embedded in an instance of {@link LayerLens}. * It represents a square HTML container of sufficient size to hold the lens that is positioned solidly against it. * Its main use is to allow the creation of a dashboard of HTML elements positioned around the lens. * * In the example below a simple HTML button is positioned close to the top-left corner of the dashboard: * * @example * * const lensDashboard = new OpenLIME.LensDashboard(lime); * const lensLayer = new OpenLIME.Layer({ * type: \"lens\", * layers: [layerIn], * camera: lime.camera, * radius: 200, * border: 10, * dashboard: lensDashboard, * visible: true * }); * lime.addLayer('lens', lensLayer); * * const btn = document.createElement('button'); * btn.innerHTML = \"Click Me\"; * btn.style = `position: absolute; * left: 0px; * top: 0px; * display: inline-block; * cursor: pointer; * pointer-events: auto;`; * lensDashboard.append(btn); */ class LensDashboard { /** * Manages creation and update of a lens dashboard. * An object literal with Layer `options` can be specified. * This class instatiates an optional element of {@link LayerLens} * @param {Object} options An object literal with Lensdashboard parameters. * @param {number} options.borderWidth=30 The extra border thickness (in pixels) around the square including the lens. */ 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; } /** * Setup the event listener to update lens radius by dragging lens border. * Call the lens controller to update lens radius. * @param {*} circle lens svg 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(); } }); } /** * Call this to set the corresponding LayerSvgAnnotation * @param {LayerSvgAnnotation} l */ setLayerSvgAnnotation(l) { this.layerSvgAnnotation = l; this.svgElement = this.layerSvgAnnotation.svgElement; } /** @ignore */ 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); } /** @ignore */ 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); } } } /** * Set mask property on the svg element which need to be displayed with the lens * @param {*} svg element which need to be displayed within the lens */ setMaskOnSvgLayer(svg) { svg.setAttributeNS(null, 'mask', this.svgMaskUrl); } /** * Remove mask attribute from svg element * @param {*} svg element from which remove the mask attribute */ removeMaskFromSvgLayer(svg) { svg.removeAttribute('mask'); } /** * Appends a HTML element to the dashboard. The element must be positioned in 'absolute' mode. * @param {*} elm A HTML element */ append(elm) { this.container.appendChild(elm); } /** * Set rendering mode within the lens. * @param {RenderingMode} mode RenderingMode.draw or RenderingMode.hide */ setLensRenderingMode(mode) { this.inMask.setAttributeNS(null, 'style', mode); } /** * Set the background rendering mode within the lens. * @param {RenderingMode} mode RenderingMode.draw or RenderingMode.hide */ setBackgroundRenderingMode(mode) { this.outMask.setAttributeNS(null, 'style', mode); } /** @ignore */ 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 } } 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); } } export {LensDashboard} export {RenderingMode} × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"LensDashboardNavigator.js.html":{"id":"LensDashboardNavigator.js.html","title":"Source: LensDashboardNavigator.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Source: LensDashboardNavigator.js import { Util } from \"./Util\" import { LensDashboard } from \"./LensDashboard\" class LensDashboardNavigator extends LensDashboard { /** * Manages creation and update of a lens dashboard. * An object literal with Layer `options` can be specified. * This class instatiates an optional element of {@link LayerLens} * @param {Object} options An object literal with Lensdashboard parameters. * @param {number} options.toolboxHeight=25 The extra border thickness (in pixels) around the square including the lens. */ 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('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.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'); } getAction(label) { let result = null; for (let [name, action] of Object.entries(this.actions)) { if (action.label === label) { result = action; break; } } return result; } setActionEnabled(label, enable = true) { const action = this.getAction(label); if (action) { action.element.classList.toggle('enabled', enable); } } 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 } } toggle() { this.container.classList.toggle('closed'); } /** @ignore */ 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 "},"LensDashboardNavigatorRadial.js.html":{"id":"LensDashboardNavigatorRadial.js.html","title":"Source: LensDashboardNavigatorRadial.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Source: LensDashboardNavigatorRadial.js import { Util } from \"./Util\" import { LensDashboard } from \"./LensDashboard\" class LensDashboardNavigatorRadial extends LensDashboard { /** * Manages creation and update of a lens dashboard. * An object literal with Layer `options` can be specified. * This class instatiates an optional element of {@link LayerLens} * @param {Object} options An object literal with Lensdashboard parameters. * @param {number} options.toolboxHeight=25 The extra border thickness (in pixels) around the square including the lens. */ 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); } 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'); } static degToRadians(angle) { return angle * (Math.PI / 180.0); } 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)) }; } 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; } 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`); } 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); } getAction(label) { let result = null; for (let [name, action] of Object.entries(this.actions)) { if (action.label === label) { result = action; break; } } return result; } setActionEnabled(label, enable = true) { const action = this.getAction(label); if (action) { action.element.classList.toggle('enabled', enable); } } 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 } } 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`; } } } } toggle() { const t = this.container.classList.toggle('closed'); this.setToggleClassVisibility(!t); } 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++; } } } /** @ignore */ 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 "},"PointerManager.js.html":{"id":"PointerManager.js.html","title":"Source: PointerManager.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Source: PointerManager.js /** * A **PointerManager** is a high-level class for handling simultaneous events from a DOM `target`. * It captures PointerEvent (MouseEvent and TouchEvent) generated by the `target`, classifies them as \"gestures\" and provides a simple interface * to work with them. * * The high-level events (gestures) that are detected and emitted are: * * `fingerHover(e)` It is fired when a pointing device is used to move the cursor on the target * * `fingerSingleTap(e)` It is fired when the user presses a mouse button quickly or touches the screen shortly with a finger * * `fingerDoubleTap(e)` It is fired when the user quickly presses a mouse button twice or shortly touches the screen with a finger twice. * * `fingerHold(e)` It is fired when the user keeps pressing a mouse button or touching the screen longer than a threshold (600 ms). * * `mouseWheel(e)` It is fired when the user rotates the mouse wheel button. * * `panStart(e)` It is fired when the pan gesture is starting. * * `panMove(e)` It is fired when the pan gesture is in progress. * * `panEnd(e)` It is fired when the pan gesture is finished. * * `pinchStart(e1, e2)` It is fired when the pinch gesture is starting. * * `pinchMove(e1, e2)` It is fired when the pinch gesture is in progress. * * `pinchEnd(e1, e2)` It is fired when the pinch gesture is finished. * * In the following example a `pointerManager` object is created and connected to the `canvas`. Then a callback to handle a fingerSingleTap and a fingerHold event is defined * and connected to the `pointerManager`. * ``` * const canvas = document.querySelector('canvas'); * const pointerManager = new PointerManager(canvas); * const handler = { * priority: 10, * fingerSingleTap: (e) =&gt; { * console.log(\"SINGLE TAP in \", e.clientX, e.clientY); * }); * fingerHold: (e) =&gt; { * console.log(\"FINGER HOLD in \", e.clientX, e.clientY); * }); * }; * pointerManager.onEvent(handler); * ``` */ class PointerManager { /** * Instatiates a PointerManager object. * @param {HTMLElement} target The DOM element from which the events are generated * @param {Object} [options] An object literal with class parameters. * @param {number} options.pinchMaxInterval=200 fingerDown event max distance in time to trigger a pinch (in ms). */ 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); } /////////////////////////////////////////////////////////// /// Constants static get ANYPOINTER() { return -1; } /////////////////////////////////////////////////////////// /// Utilities static splitStr(str) { return str.trim().split(/\\s+/g); } 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 // register pointer handlers. 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; } // unregister pointer handlers 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 the 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 the 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 the 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(); } } class SinglePointerHandler { 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; } } class CircularBuffer { 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 "},"Signals.js.html":{"id":"Signals.js.html","title":"Source: Signals.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "},"Raster.js.html":{"id":"Raster.js.html","title":"Source: Raster.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "},"ShaderBRDF.js.html":{"id":"ShaderBRDF.js.html","title":"Source: ShaderBRDF.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "},"ShaderCombiner.js.html":{"id":"ShaderCombiner.js.html","title":"Source: ShaderCombiner.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "},"ShaderFilter.js.html":{"id":"ShaderFilter.js.html","title":"Source: ShaderFilter.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "},"ShaderNeural.js.html":{"id":"ShaderNeural.js.html","title":"Source: ShaderNeural.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "},"ShaderRTI.js.html":{"id":"ShaderRTI.js.html","title":"Source: ShaderRTI.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "},"Skin.js.html":{"id":"Skin.js.html","title":"Source: Skin.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "},"TextToSpeechPlayer.js.html":{"id":"TextToSpeechPlayer.js.html","title":"Source: TextToSpeechPlayer.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "},"Tile.js.html":{"id":"Tile.js.html","title":"Source: Tile.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "},"UIBasic.js.html":{"id":"UIBasic.js.html","title":"Source: UIBasic.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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! }, 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(); })().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 "},"Viewer.js.html":{"id":"Viewer.js.html","title":"Source: Viewer.js","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "},"global.html":{"id":"global.html","title":"Global","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Global Members &lt;constant&gt; RenderingMode RenderingMode for lens and background. Currently implemented only draw and hide. Source: LensDashboard.js, line 7 Methods crudCallback(anno) Callback for create/update/delete annotations. Parameters: Name Type Description anno Annotation The current annotation entry. Source: EditorSvgAnnotation.js, line 7 customDataCallback(anno) Callback to customize the annotation data object. Parameters: Name Type Description anno Annotation The current annotation entry. Source: EditorSvgAnnotation.js, line 19 customStateCallback(anno) Callback implementing custom state annotations. Parameters: Name Type Description anno Annotation The current annotation entry. Source: EditorSvgAnnotation.js, line 13 selectedCallback(anno) Callback executed when an annotation is selcted on the user interface. Parameters: Name Type Description anno Annotation The current annotation entry. Source: EditorSvgAnnotation.js, line 25 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 12 Type Definitions AnnotationClass Elements to classify the annotations. Type: Object Properties: Name Type Description stroke color The CSS color of a line, text or outline SVG element. label string The class name. Source: LayerSvgAnnotation.js, line 7 AnnotationClasses Annotation classes. 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 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 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: Layout.js, line 8 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: 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 updatePosition(x, y) Callback invoked when the position (x, y) is updated. Parameters: Name Type Description x number The x coordinate. y number The y coordinate. Source: Controller2D.js, line 4 Viewport The type Viewport defines a rectangular viewing region inside a (wxh) area Type: Object Properties: Name Type Description x number x-component of the lower left corner. y number y-component of the lower left corner. dx number x-component of the top right corner. dy number y-component of the top right corner. w number the viewport width. w number the viewport height. Source: Camera.js, line 5 × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"classes.list.html":{"id":"classes.list.html","title":"Classes","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Classes Classes Annotation BoundingBox Cache Camera Canvas Controller Controller2D ControllerPanZoom CoordinateSystem EditorSvgAnnotation FocusContext Layer LayerAnnotation LayerAnnotationImage LayerBRDF LayerCombiner LayerImage LayerLens LayerRTI LayerSvgAnnotation Layout LayoutTiles LensDashboard LensDashboardNavigator LensDashboardNavigatorRadial PointerManager Raster Shader ShaderBRDF ShaderCombiner ShaderNeural ShaderRTI Skin TextToSpeechPlayer Transform UIBasic UIDialog Viewer Events update The event is fired when the camera target is changed. Source: Camera.js, line 129 update The event is fired when a uniform shader variable is changed. Source: Shader.js, line 130 ready The event is fired when all the layers are ready (i.e. initialized and with data ready to be displayed). Source: Canvas.js, line 184 update The event is fired if a layer is updated, added or removed. Source: Canvas.js, line 179 updateSize The event is fired if a layout changes its size or position (the event forces the re-computation of the layer bounding boxes). Source: Canvas.js, line 225 ready The event is fired when a layer is initialized. Source: Layer.js, line 191 update The event is fired if a redraw is needed. Source: Layer.js, line 195 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 115 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 94 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 172 closed The event is fired when the dialog is closed. Source: UIBasic.js, line 772 × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"tutorials.list.html":{"id":"tutorials.list.html","title":"Howto","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Howto Classes Annotation BoundingBox Cache Camera Canvas Controller Controller2D ControllerPanZoom CoordinateSystem EditorSvgAnnotation FocusContext Layer LayerAnnotation LayerAnnotationImage LayerBRDF LayerCombiner LayerImage LayerLens LayerRTI LayerSvgAnnotation Layout LayoutTiles LensDashboard LensDashboardNavigator LensDashboardNavigatorRadial PointerManager Raster Shader ShaderBRDF ShaderCombiner ShaderNeural ShaderRTI Skin TextToSpeechPlayer Transform UIBasic UIDialog Viewer Events update The event is fired when the camera target is changed. Source: Camera.js, line 129 update The event is fired when a uniform shader variable is changed. Source: Shader.js, line 130 ready The event is fired when all the layers are ready (i.e. initialized and with data ready to be displayed). Source: Canvas.js, line 184 update The event is fired if a layer is updated, added or removed. Source: Canvas.js, line 179 updateSize The event is fired if a layout changes its size or position (the event forces the re-computation of the layer bounding boxes). Source: Canvas.js, line 225 ready The event is fired when a layer is initialized. Source: Layer.js, line 191 update The event is fired if a redraw is needed. Source: Layer.js, line 195 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 115 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 94 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 172 closed The event is fired when the dialog is closed. Source: UIBasic.js, line 772 × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"index.html":{"id":"index.html","title":"Index","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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: { } } × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"Annotation.html":{"id":"Annotation.html","title":"Class: Annotation","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Class: Annotation Annotation An annotation is a decoration (text, graphics element, glyph) to be drawn in an overlay mode on the canvas. Its purpose is to provide additional information useful for the interpretation of the underlying drawings. This calls defines the content of an annotation which is represented by its unique identifier and additional information (such as description, annotation category or class, drawing style, labels, etc.). new Annotation( [options]) Instantiates an Annotation object. An object literal with Annotation options can be specified. Note that the developer is free to define additional elements characterizing a custom annotation by adding new options to the constructor. Parameters: Name Type Argument Default Description options Object &lt;optional&gt; An object literal with Annotation options (freely adjustable). Properties Name Type Description label string A string containing an annotation label. option.description string A HTML text containg a comprehensive description of the annotation. option.class string A class or category to cluster annotations. option.state Object null An object literal with state variables. Source: Annotation.js, line 9 Methods getBBoxFromElements() Gets the bounding box of the annotation. Note that the coordinates for annotations are always relative to the top left corner of the canvas. Source: Annotation.js, line 60 Returns: The bounding box Type BoundingBox × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"BoundingBox.html":{"id":"BoundingBox.html","title":"Class: BoundingBox","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Class: BoundingBox BoundingBox The bounding box is a rectangular box that is wrapped as tightly as possible around a geometric element. It is oriented parallel to the axes. It is defined by two opposite vertices. The class It includes a comprehensive set of functions for various processing tasks related to bounding boxes. new BoundingBox( [options], xLow, yLow, xHigh, xHigh) Instantiates a BoundingBox object. Parameters: Name Type Argument Default Description options Object &lt;optional&gt; An object literal defining the bounding box. xLow number 1e20 The x coordinate of the low corner a rectangle. yLow number 1e20 The y coordinate of the low corner a rectangle. xHigh number -1e20 The x coordinate of the high corner a rectangle. xHigh number -1e20 The y coordinate of the high corner a rectangle. Source: BoundingBox.js, line 6 Methods center() Returns the bounding box center. Source: BoundingBox.js, line 141 Returns: The center value. Type number corner(i) Returns the i-th corner. Parameters: Name Type Description i number The index of the corner. Source: BoundingBox.js, line 150 Returns: A [x, y] pair. Type Array.&lt;number&gt; fromArray(x) Defines a bonding box from an array of four elements. Parameters: Name Type Description x Array.&lt;number&gt; The array of four elements with the two corners ([xLow, yLow, xHigh, yHigh]). Source: BoundingBox.js, line 28 height() Returns the bounding box height. Source: BoundingBox.js, line 133 Returns: The height value. Type number isEmpty() Tests weather the bounding box is empty. Source: BoundingBox.js, line 49 Returns: The test result. Type bool mergeBox(box) Merges a box to this BoundingBox. Parameters: Name Type Description box BoundingBox The bounding box to be merged. Source: BoundingBox.js, line 73 mergePoint(p) Merges a point p{x, y} to this BoundingBox. Parameters: Name Type Description p Object The point to be merged. Source: BoundingBox.js, line 91 print() Prints out the bounding box corners in the console. Source: BoundingBox.js, line 162 quantize(side) Divides by side and truncates the corner coordinates. Parameters: Name Type Description side * The value to divide by. Source: BoundingBox.js, line 114 shift(dx, dy) Translates the bounding box by a displacement vector (dx, dy). Parameters: Name Type Description dx number Displacement along the x-axis. dy number Displacement along the y-axis. Source: BoundingBox.js, line 103 toArray() Returns an array of four elements containg the low and high corners. Source: BoundingBox.js, line 57 Returns: The array of corners. Type Array.&lt;number&gt; toEmpty() Empties a bounding box. Source: BoundingBox.js, line 38 toString() Returns a text string with the corner coordinates separated by a space. Source: BoundingBox.js, line 65 Returns: The string of corners. Type string width() Returns the bounding box width. Source: BoundingBox.js, line 125 Returns: The width value. Type number × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"Cache.html":{"id":"Cache.html","title":"Class: Cache","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Class: Cache Cache The singleton class Cache implements a cache for faster retrieval of the tiles required by layers. new Cache( [options]) Instantiates a Cache object. Tiles to be fetched are stored in an ordered queue in {Layer}. Parameters: Name Type Argument Description options Object &lt;optional&gt; An object literal to define cache parameters. Properties Name Type Default Description capacity number 536870912 The total cache capacity (in bytes). maxRequest number 6 Max number of concurrent HTTP requests. Most common browsers allow six connections per domain. Source: Cache.js, line 153 Methods flushLayer(layer) Flushes all tiles for a layer. Parameters: Name Type Description layer Layer A layer. Source: Cache.js, line 163 setCandidates(layer) Determines which tiles of a given layer are candidates to be downloaded. Cleans up the cache and schedules the web data fetch. Parameters: Name Type Description layer Layer A layer. Source: Cache.js, line 171 × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"Camera.html":{"id":"Camera.html","title":"Class: Camera","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Class: Camera Camera The class Camera does not have an operational role, but it is rather a container of parameters needed by the system to define the viewport, the camera position and to calculate the appropriate view. To enable the animation, a camera contains two view matrices (two Transform objects): a source with the current position and a target with the position the camera will arrive at in a time dt. The member function setPosition() takes care of defining the target, the OpenLIME system automatically animates the camera to bring it from source to target, unless the user manually interrupts the current animation. User-generated device events (such as touch events or mouse events) can modify camera parameters via an appropriate Controller. new Camera( [options]) Creates a scene's camera. An update event is issued when the camera has completed its positioning. Additionally, an object literal with Viewer options can be specified. Parameters: Name Type Argument Description options Object &lt;optional&gt; Properties Name Type Default Description bounded bool true Weather to limit the translation of the camera to the boundary of the scene. maxFixedZoom number 2 The maximum pixel size. minScreenFraction number 1 The minimum portion of the screen to zoom in. Source: Camera.js, line 30 Methods copy() Defines the copy constructor. Source: Camera.js, line 59 Returns: A copy of the Camera. deltaZoom(dt, dz, x, y) Zoom in or out at a specific point (in canvas coords) Parameters: Name Type Default Description dt number The animation duration in millisecond. dz number The scroll amount for the z-axis. x number 0 The x coord to zoom in|out y number 0 The y coord to zoom in|out Source: Camera.js, line 229 fit(box, dt) Modify the camera settings to frame the specified box Parameters: Name Type Description box BoundingBox The specified rectangle [minx, miny, maxx, maxy] in the canvas. dt number The animation duration in millisecond Source: Camera.js, line 281 fitCameraBox(dt) Modify the camera settings to the factory values (home). Parameters: Name Type Description dt number animation duration in millisecond Source: Camera.js, line 301 getCurrentTransform(time) Gets the camera transform at time in canvas coords. Parameters: Name Type Description time time The current time (a DOMHighResTimeStamp variable, as in performance.now()). Source: Camera.js, line 257 Returns: The current transform Type Transform getGlCurrentTransform(time) Gets the camera transform at time in device coords. Parameters: Name Type Description time time The current time (a DOMHighResTimeStamp variable, as in performance.now()). Source: Camera.js, line 267 Returns: The current transform Type Transform glViewport() Gets the current viewport (in device coordinates). Source: Camera.js, line 84 Returns: the current viewport mapToScene() Map coordinate relative to the canvas into scene coords using the specified transform. Source: Camera.js, line 96 Returns: {X, Y} in scene coordinates (relative to the center of the viewport). Type Object pan(dt, dx, dy) Pan the camera (in canvas coords) Parameters: Name Type Description dt number The animation duration in millisecond. dx number The horizontal displancement. dy number The vertical displacement. Source: Camera.js, line 178 rotate(dt, a) Rotate the camera around its z-axis by an a angle (in degrees) Parameters: Name Type Description dt number The animation duration in millisecond. a angle The rotation angle (in degrees). Source: Camera.js, line 215 sceneToCanvas() Map coordinate relative to the scene into canvas coords using the specified transform. Source: Camera.js, line 112 Returns: {X, Y} in canvas coordinates. Type Object setPosition(dt, x, y, z, a, easing) Sets the camera target parameters (position, rotation, ) Parameters: Name Type Description dt number The animation duration in millisecond. x * The x-component of the translation vector. y * The y-component of the translation vector. z * The zoom factor. a * The rotation angle (in degrees). easing Easing The function aimed at making the camera movement less severe or pronounced. Source: Camera.js, line 128 setViewport(view) Sets the viewport and updates the camera position as close as possible to the previuos one. Parameters: Name Type Description view Viewport The new viewport (in CSS coordinates). Source: Camera.js, line 69 zoom(dt, z, x, y) Zoom in or out at a specific point (in canvas coords) Parameters: Name Type Description dt number The animation duration in millisecond. z number The distance of the camera from the canvas. x number The x coord to zoom in|out y number The y coord to zoom in|out Source: Camera.js, line 192 Events update The event is fired when the camera target is changed. Source: Camera.js, line 129 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 "},"Canvas.html":{"id":"Canvas.html","title":"Class: Canvas","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Class: Canvas Canvas Creates the WebGL context for the canvas. It stores information related to the overlay DOM element and the camera of the scene. Signals are triggered in case of scene modifications. Additionally, an object literal with Canvas options can be specified. new Canvas(canvas, overlay, camera [, options]) Parameters: Name Type Argument Description canvas element | string DOM element or selector for a &lt;canvas&gt;. overlay element | string DOM element or selector for overlay decorations (i.e. annotations, glyphs, etc...) camera Camera The scene's camera. options Object &lt;optional&gt; An object literal. Properties Name Type Default Description layers Object Object specifies layers (see. Layer) preserveDrawingBuffer bool false Whether to preserve the buffers until manually cleared or overwritten. Needed for screenshots (otherwise is just a performance penalty). Source: Canvas.js, line 26 Methods addLayer(id, layer) Adds the given layer to the Canvas and connects the layer's events to it. Parameters: Name Type Description id string A label to identify the layer. layer Layer An OpenLIME Layer object. Source: Canvas.js, line 178 getState() Gets the state variables of all the system as described in the stateMask Source: Canvas.js, line 140 Returns: An object with state variables. Type Object removeLayer(layer) Remove the given layer from the Canvas Parameters: Name Type Description layer Layer An OpenLIME Layer object. Source: Canvas.js, line 215 Example let layer0 = new Layer(options); canvas.addLayer('kdmap', layer0); ... canvas.removeLayer(layer0); setState(state, dt, easing) Sets the state variables of all the system Parameters: Name Type Default Description state Object An object with state variables. dt number The animation duration in millisecond. easing Easing linear The function aimed at making the camera movement or control adjustments less severe or pronounced. Source: Canvas.js, line 123 Events ready The event is fired when all the layers are ready (i.e. initialized and with data ready to be displayed). Source: Canvas.js, line 184 update The event is fired if a layer is updated, added or removed. Source: Canvas.js, line 179 updateSize The event is fired if a layout changes its size or position (the event forces the re-computation of the layer bounding boxes). Source: Canvas.js, line 225 × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"Controller.html":{"id":"Controller.html","title":"Class: Controller","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Class: Controller Controller Controller is a virtual base class that handles user interaction via device events (mouse/touch events). It 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. In the example below a ControllerPanZoom object (derived from Controller) is created and associated with the pointerManager of the viewer. const panzoom = new OpenLIME.ControllerPanZoom(viewer.camera, { priority: -1000, activeModifiers: [0, 1] }); viewer.pointerManager.onEvent(panzoom); new Controller( [options]) Instantiates a Controller object. Parameters: Name Type Argument Description options Object &lt;optional&gt; An object literal with controller parameters. Properties Name Type Default Description panDelay number 50 Inertial value of the movement in ms for panning movements. zoomDelay number 200 A zoom event is smoothed over this delay in ms, priority number 0 Higher priority controllers are invoked first. Source: Controller.js, line 31 Methods modifierState(e) Returns the modifier state of the event e. Modifiers are keyboard events that happens simultaneously with a device event (e.g. shift + left mouse button). The modifiers handled by a controller are: NoModifiers = 0 CrtlModifier = 1 ShiftModifier = 2 AltModifier = 4 The modifier state is the sum of values above corresponding to the key pressed (CTRL, SHIFT or ALT). Parameters: Name Type Description e Event Source: Controller.js, line 66 Returns: The modifier state. Type number × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"Controller2D.html":{"id":"Controller2D.html","title":"Class: Controller2D","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Class: Controller2D Controller2D Controller2D* intercepts pan and single-tap events in the canvas and updates a 2D position (x, y) of the device pointer. If options.relative is false the coordinates are both mapped between [-1, 1] with origin in the bottom left corner of the canvas, otherwise the coordinates have origin in the initial position of the panning and ranges both between [-1, 1] according to the distance from the local origin (multiplied by a options.speed value). When updated, the (x, y) position is passed to a callback for further custom computations. new Controller2D(callback [, options]) Instantiates a Controller2D object. Parameters: Name Type Argument Description callback updatePosition The callback invoked when the postion (x, y) is updated. options Object &lt;optional&gt; An object literal with controller parameters. Properties Name Type Default Description relative bool false Whether the coordinate system is local. speed number 2.0 Enhancement factor for computation of local coordinates. Source: Controller2D.js, line 21 Methods setPosition(x, y) Stores the final position for local coordinate system. This is a convenience function to be used in callback. Parameters: Name Type Description x number The x-axis coordinate. y number The y-axis coordinate. Source: Controller2D.js, line 58 × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"ControllerPanZoom.html":{"id":"ControllerPanZoom.html","title":"Class: ControllerPanZoom","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Class: ControllerPanZoom ControllerPanZoom ControllerPanZoom* intercepts pan, zoom, single tap, and wheel events in the canvas and updates the scene camera parameters. new ControllerPanZoom(camera [, options]) Instantiates a ControllerPanZoom object. Parameters: Name Type Argument Description camera Camera The scene camera. options Object &lt;optional&gt; An object literal with controller parameters. Properties Name Type Default Description zoomAmount number 1.2 The incremental value for zoom in/out. Source: ControllerPanZoom.js, line 9 × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"CoordinateSystem.html":{"id":"CoordinateSystem.html","title":"Class: CoordinateSystem","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "},"EditorSvgAnnotation.html":{"id":"EditorSvgAnnotation.html","title":"Class: EditorSvgAnnotation","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Class: EditorSvgAnnotation EditorSvgAnnotation EditorSvgAnnotation enables the UIBasic interface to edit (create/update/delete) SVG annotations. This class is a mere utility that acts as an adapter between the annotation database and the OpenLIME system. Here you will find a tutorial to learn how to use the SVG annotation editor. //FIXME For the experienced developer this class can be used as an example to design more complex editors. In the following example an EditorSvgAnnotation is instatiated and connected to the annotation database through three callbacks implementing database operations (create/update/delete). // Creates an annotation layer and add it to the canvans const anno = new OpenLIME.Layer(aOptions); lime.addLayer('anno', anno); // Creates a SVG annotation Editor const editor = new OpenLIME.EditorSvgAnnotation(lime, anno, { viewer: lime, classes: classParam }); editor.createCallback = (anno) =&gt; { console.log(\"Created annotation: \", anno); processRequest(anno, 'create'); return true; }; editor.updateCallback = (anno) =&gt; { console.log(\"Updated annotation: \", anno); processRequest(anno, 'update'); return true; }; editor.deleteCallback = (anno) =&gt; { console.log(\"Deleted annotation: \", anno); processRequest(anno, 'delete'); return true; }; new EditorSvgAnnotation(viewer, layer [, options]) Instatiates a EditorSvgAnnotation object. Parameters: Name Type Argument Description viewer Viewer The OpenLIME viewer. layer LayerSvgAnnotation The annotation layer on which to operate. options Object &lt;optional&gt; An object literal with SVG editor parameters. Properties Name Type Default Description classes AnnotationClasses An object literal definying colors and labels of the annotation classes. createCallback crudCallback The callback to implement annotation creation. updateCallback crudCallback The callback to implement annotation update. deleteCallback crudCallback The callback to implement annotation deletion. enableState bool false Whether to enable custom annotation state. This allows to include some state variables into an annotation item (such as camera, light or lens position). customState customStateCallback The callback implementing custom state annotations. customData customDataCallback The callback to customize the annotation data object. selectedCallback selectedCallback The callback executed when an annotation is selcted on the user interface. Source: EditorSvgAnnotation.js, line 56 × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"FocusContext.html":{"id":"FocusContext.html","title":"Class: FocusContext","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Class: FocusContext FocusContext The FocusContext class is responsible for identifying a good Focus and Context situation. During interaction it distributes user inputs on lens, into camera and lens movement in order to keep the lens in focus and context situation, within the viewport, with enough space between the lens and the viewport boundaries, for both panning and zooming actions. It also computes a good transform given a lens to properly display the lens within the current viewport (used for stored annotations) new FocusContext() Source: FocusContext.js, line 12 Methods &lt;static&gt; adaptContext(viewport, focus, context, desiredScale) Adapt context in order to have focus &amp; context condition satisfied for the requested focus Parameters: Name Type Description viewport * {x, y, dx, dy, w, h} focus * lens : {position,radius}. Contain current lens in dataset coords context Transform Contain current transform, which will be updated to translated context desiredScale Number context desired scale (which will be clamped within min max scale) Source: FocusContext.js, line 105 &lt;static&gt; adaptContextPosition(viewport, focus, context) Translate context in order to put lens (focus) in focus and context condition Parameters: Name Type Description viewport * {x,y,dx,dy,w,h} focus * lens : {position,radius} context Transform Source: FocusContext.js, line 153 &lt;static&gt; adaptContextScale(viewport, focus, context) Fix context scale to make projected lens fit within viewport. Parameters: Name Type Description viewport * {x, y, dx, dy, w, h} focus * lens : {position,radius}. Contain current lens in dataset coords context Transform Contain current transform, whose scale will be updated to keep lens in focus and context after scale Source: FocusContext.js, line 133 &lt;static&gt; pan(viewport, focus, context, delta, imageSize) Subdivide pan amount (delta) between lens (focus) and camera transform (context). Parameters: Name Type Description viewport * {x, y, dx, dy, w, h} focus * lens : {position,radius}. Contain current lens in dataset coords, which will be updated to translated lens context Transform Contain current transform, which will be updated to translated context delta Number amount of pan in dataset pixels imageSize * {w,h} Size of the dataset width height (to clamp movement on boundaries) Source: FocusContext.js, line 22 &lt;static&gt; scale(camera, focus, context, dz) Distribute scale between radius and camera scale in order to keep focus and context situation Parameters: Name Type Description camera Camera focus * lens : {position,radius}. Contain current lens in dataset coords, which will be updated to translated lens context Transform Contain current transform, which will be updated to translated context dz Number amount of scale (which should multiply scale) Source: FocusContext.js, line 55 × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"Layer.html":{"id":"Layer.html","title":"Class: Layer","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Class: Layer Layer The Layer class is responsible for drawing slides in the OpenLIME viewer. Layers can directly draw their contents on the viewer or be combined with each other to obtain more complex visualizations. 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. A Layer takes raster data (images) as input which are managed by the layout. A layer stores all the information and functions needed to render the graphics (shaders, shader parameters, data structures, etc.), and takes care of data prefetching and communication with the cache. The Layer is a kind of primitive class from which other Layer classes can inherit. Each derived class \"registers\" on the Layer base class, the user can then use an instance of Layer by indicating the chosen type in the options. In the example below a Layer of type 'rti' is created, then a LayerRTI (class derived from Layer) is instantiated and added to the viewer's layer stack. 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 37 Example const layer1 = new OpenLIME.Layer({ layout: 'deepzoom', label: 'Ancient Roman coin', type: 'rti', url: '../../assets/rti/hsh/info.json', normals: false }); viewer.addLayer('coin1', layer1); Methods &lt;static&gt; computeLayersBBox(layers, discardHidden) Computes the merge bounding box of all the 'layers` Parameters: Name Type Description layers Array.&lt;Layer&gt; discardHidden bool Whether hidden layers are not to be included in the computation. Source: Layer.js, line 352 Returns: The bounding box Type BoundingBox &lt;static&gt; computeLayersMinScale(layers, discardHidden) Computes the minum scale value of the layers. Parameters: Name Type Description layers Array.&lt;Layer&gt; discardHidden bool Whether hidden layers are not to be included in the computation. Source: Layer.js, line 294 Returns: the minimum scale. Type number addControl(name, value) Adds a new shader parameter control. Parameters: Name Type Description name string The name of the control. value * The value for initialization. Source: Layer.js, line 387 boundingBox() Gets the layer bounding box ( Change name: box is in scene coordinates) Source: Layer.js, line 332 Returns: The bounding box Type BoundingBox 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 373 getMode() Gets the current shader mode. Source: Layer.js, line 243 Returns: the shader mode Type string getModes() Gets an arrays of all the modes implemented in the current shader. Source: Layer.js, line 253 Returns: arrays of modes Type Array.&lt;string&gt; getState() Gets the state variables of the layer. Source: Layer.js, line 176 Returns: An object with state variables Type Object interpolateControls() Update the current values of the parameter controls. Source: Layer.js, line 419 Returns: Weather the interpolation is finished (the time has now gone). Type bool pixelSizePerMM() Transform-adjusted spatial resolution for this layer Source: Layer.js, line 323 Returns: size of a single pixel in mm Type number scale() Gets the scale of the layer transformation Source: Layer.js, line 313 Returns: The scale Type number setControl(name, value, dt) Set a shader parameter control with new value Parameters: Name Type Description name * The name of the control. value * The value for initialization. dt time Duration of the interpolation (0=no interpolation). Source: Layer.js, line 400 setMode(mode) Set the mode of the current shader. Parameters: Name Type Description mode string the mode of the current shader. Source: Layer.js, line 263 setShader(id) Sets the shader to use Parameters: Name Type Description id * the current shader identifier (the shader must already be registered in the shaders array) Source: Layer.js, line 231 setState() Sets the state of the layer Source: Layer.js, line 162 setVisible(visible) Sets a value that indicates whether the layer is visible. Parameters: Name Type Description visible bool The value. Source: Layer.js, line 272 setZindex(zindex) Sets the layer zindex value (stack ordering value for the rendering of layers). Parameters: Name Type Description zindex int The value. Source: Layer.js, line 282 Events ready The event is fired when a layer is initialized. Source: Layer.js, line 191 update The event is fired if a redraw is needed. Source: Layer.js, line 195 × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"LayerAnnotation.html":{"id":"LayerAnnotation.html","title":"Class: LayerAnnotation","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Class: LayerAnnotation LayerAnnotation An annotation layer is a layer used to display decorations (text, graphics elements, glyphs, etc...) on top of other layers. Its purpose is to provide additional information useful for the interpretation of the underlying layers. An object literal with options can be specified. Here you will find a tutorial to learn how to build a client-server architecture to manage annotations in OpenLIME. //FIXME Extends Layer. 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 14 Methods getAnnotationById(id) Gets an annotation by its id Parameters: Name Type Description id string Source: LayerAnnotation.js, line 145 Returns: The annotation. Type Annotation setSelected(anno, on) Selects/deselects an annotation Parameters: Name Type Default Description anno Annotation The annotation. on bool true Whether to select the annotation. Source: LayerAnnotation.js, line 163 × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"LayerAnnotationImage.html":{"id":"LayerAnnotationImage.html","title":"Class: LayerAnnotationImage","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Class: LayerAnnotationImage LayerAnnotationImage Class which extend LayerAnnotation. Support Image Annotations. Each annotation corresponds to a tile (currently single resolution) new LayerAnnotationImage() Source: LayerAnnotationImage.js, line 12 × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"LayerBRDF.html":{"id":"LayerBRDF.html","title":"Class: LayerBRDF","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Class: LayerBRDF LayerBRDF Extends Layer. new LayerBRDF(options) Parameters: Name Type Description options options Same as Layer, but channels(ks,kd,normals,gloss) are required. Source: LayerBRDF.js, line 10 × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"LayerCombiner.html":{"id":"LayerCombiner.html","title":"Class: LayerCombiner","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Class: LayerCombiner LayerCombiner Combines other layers (in the framebuffer) using a custom shader. LayerLens is an example. The class LayerImage can also be instantiated via the Layer parent class and options.type='combiner'. Extends Layer. new LayerCombiner(options) Parameters: Name Type Description options options Same as Layer, but options.layers are required Source: LayerCombiner.js, line 28 Example // Instantiate the LayerCombiner class and set the two inputs (layer0 and layer1) const combiner = new OpenLIME.Layer({ type: 'combiner', visible: true, layers: [layer0, layer1] }); // Instantiate the ShaderCombiner class (a custom shader) and select 'diff' as default mode (for visualization purposes) const shader = new OpenLIME.ShaderCombiner(); shader.mode = 'diff'; // Assign the newly created shader to the combiner (labelling it 'standard') and enable it combiner.shaders = { 'standard': shader }; combiner.setShader('standard'); // Add the combiner to the canvas lime.addLayer('combiner', combiner); × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"LayerImage.html":{"id":"LayerImage.html","title":"Class: LayerImage","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Class: LayerImage LayerImage The class LayerImage is derived from Layer and it is responsible for the rendering of simple images. new LayerImage(options) Displays a simple image. An object literal with Layer options can be specified. The class LayerImage can also be instantiated via the Layer parent class and options.type='image'. Extends Layer. Parameters: Name Type Description options Object an object literal with Layer options Layer, but options.url and options.layout are required. Properties Name Type Default Description url string The URL of the image layout string | Layout 'image' The layout (the format of the input raster images). Source: LayerImage.js, line 17 Example // 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); × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"LayerLens.html":{"id":"LayerLens.html","title":"Class: LayerLens","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Class: LayerLens LayerLens Displays a lens on the canvas. new LayerLens() Source: LayerLens.js, line 9 × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"LayerRTI.html":{"id":"LayerRTI.html","title":"Class: LayerRTI","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Class: LayerRTI LayerRTI Extends Layer, and can display a relightable images (RTI) using the 'relight' data format (see: relight on github for details). This web-friendly format is composed of a info.json with RTI parametets and a set of images (plane_0.jpg, plane_1.jpg etc.) with encoded coefficients. As with all other layers Deepzoom and other Layouts can be used. The ligh direction can be changed programmatically using setLight. new LayerRTI(options) Parameters: Name Type Description options options Same as Layer, but url and layout are required. url: points to a relight .json layout: one of image, deepzoom, google, iiif, zoomify, tarzoom, itarzoom Source: LayerRTI.js, line 20 × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"LayerSvgAnnotation.html":{"id":"LayerSvgAnnotation.html","title":"Class: LayerSvgAnnotation","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Class: LayerSvgAnnotation LayerSvgAnnotation An annotation layer that draws SVG elements directly on the canvas (outside the WebGL context). Here you will find a tutorial to learn how to build a client-server architecture to manage annotations in OpenLIME. //FIXME Extends LayerAnnotation. new LayerSvgAnnotation( [options]) Instantiates a LayerSvgAnnotation object. Parameters: Name Type Argument Description options Object &lt;optional&gt; An object literal with options that inherits from LayerAnnotation. Properties Name Type Default Description classes AnnotationClasses An object literal definying colors and labels of the annotation classes. onClick function The callback to fire when the an annotation is clicked on the canvas. The callback is passed an object containing the selected annotation. shadow bool true Whether to insert SVG elements in a shadow DOM. Source: LayerSvgAnnotation.js, line 26 Methods getSvgGroupTransform(transform, inverse) Return the string containing the transform for drawing the svg group in the proper position Parameters: Name Type Default Description transform Transform current transform parameter of the draw function inverse bool false when its false return the transform needed to draw the svgGroup Source: LayerSvgAnnotation.js, line 147 Returns: string with svgroup transform setSelected(anno, on) Selects/deselects an annotation Parameters: Name Type Default Description anno Annotation The annotation. on bool true Whether to select the annotation. Source: LayerSvgAnnotation.js, line 115 setVisible(visible) Sets a value that indicates whether the layer is visible. Parameters: Name Type Description visible bool The value. Source: LayerSvgAnnotation.js, line 96 × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"Layout.html":{"id":"Layout.html","title":"Class: Layout","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Class: Layout Layout 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 iiif - According to the standard, the URL is the address of a IIIF server (for instance, 'https://myiiifserver.example/'). See: IIP Server, 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 Layout(url, type [, options]) Creates a Layout, a container for a raster image. A layout is defined by a url of the image and a type. Additionally, an object literal with Layout options can be specified. Signals are triggered when the layout is ready to be drawn or its size is modified. Parameters: Name Type Argument Description url string URL of the image. type Layout#Type The type of the image. options Object &lt;optional&gt; An object literal describing the layout content. Properties Name Type Default Description width number The total width of the original, unsplit image. This parameter must only be specified for the 'google' layout type. height number The total height of the original, unsplit image. This parameter must only be specified for the 'google' layout type. suffix string 'jpg' The filename suffix of the tiles. subdomains string 'abc' The ('a'|'b'|'c') s subdomain of a Google template URL (for instance: 'https:{s}.my.example//{z}/{x}/{y}.png'). Source: Layout.js, line 56 Methods available() returns the list of tiles available for a rendering Source: Layout.js, line 183 boundingBox() Gets the layout bounding box. Source: Layout.js, line 143 Returns: The layout bounding box. Type BoundingBox getTileURL(id, tile) Gets the URL of a specific tile. The function must be implemented for each layout type supported by OpenLIME. Parameters: Name Type Description id number The channel id. tile Tile The tile. Source: Layout.js, line 135 needed() returns the list of tiles required for a rendering, sorted by priority, max Source: Layout.js, line 171 tileCoords() Returns the coordinates of the tile (in [0, 0, w h] image coordinate system) and the texture coords associated. Source: Layout.js, line 152 Returns: the tile coordinates (image coords and texture coords) Type Definitions Type The type of the image. All web single-resolution image types (jpg, png, gif, etc...) are supported as well as the most common multi-resolution image formats (deepzoom, zoomify, IIIF, google maps). Type: 'image' | 'deepzoom' | 'deepzoom1px' | 'google' | 'zoomify' | 'iiif' | 'tarzoom' | 'itarzoom' Source: Layout.js, line 26 Type The type of the image. All web single-resolution image types (jpg, png, gif, etc...) are supported as well as the most common multi-resolution image formats (deepzoom, zoomify, IIIF, google maps). Type: 'image' | 'deepzoom' | 'deepzoom1px' | 'google' | 'zoomify' | 'iiif' | 'tarzoom' | 'itarzoom' Source: LayoutTiles.js, line 25 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 115 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 94 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 172 × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"LayoutTiles.html":{"id":"LayoutTiles.html","title":"Class: LayoutTiles","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 Layout, a container for a raster image. A layout is defined by a url of the image and a type. Additionally, an object literal with Layout options can be specified. Signals are triggered when the layout is ready to be drawn or its size is modified. Parameters: Name Type Argument Description url string URL of the image. type Layout#Type The type of the image. options Object &lt;optional&gt; An object literal describing the layout content. Properties Name Type Default Description width number The total width of the original, unsplit image. This parameter must only be specified for the 'google' layout type. height number The total height of the original, unsplit image. This parameter must only be specified for the 'google' layout type. suffix string 'jpg' The filename suffix of the tiles. subdomains string 'abc' The ('a'|'b'|'c') s subdomain of a Google template URL (for instance: 'https:{s}.my.example//{z}/{x}/{y}.png'). cachelevels number Number of levels above the current level which will be loaded. Lowering will reduce number of http requests, but image will have tile missing while loading. Source: LayoutTiles.js, line 59 Methods available() returns the list of tiles available for a rendering Source: LayoutTiles.js, line 303 getTileURL(id, tile) Gets the URL of a specific tile. The function must be implemented for each layout type supported by OpenLIME. Parameters: Name Type Description id number The channel id. tile Tile The tile. Source: LayoutTiles.js, line 383 needed() returns the list of tiles required for a rendering, sorted by priority, max Source: LayoutTiles.js, line 268 neededBox(viewport, transform, layerTransform, border, bias) Computes the tiles needed for each level, given a viewport and a transform. Parameters: Name Type Description viewport Viewport The viewport. transform Transform The current transform. layerTransform Transform The transform of the calling layer border number The threshold (in tile units) around the current camera position for which to prefetch tiles. bias number 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. Source: LayoutTiles.js, line 348 Returns: level: the optimal level in the pyramid, pyramid: array of bounding boxes in tile units. Type Object tileCoords() Returns the coordinates of the tile (in [0, 0, w h] image coordinate system) and the texture coords associated. Source: LayoutTiles.js, line 208 Returns: the tile coordinates (image coords and texture coords) × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"LensDashboard.html":{"id":"LensDashboard.html","title":"Class: LensDashboard","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Class: LensDashboard LensDashboard The LensDashboard class is an optional element that can be embedded in an instance of LayerLens. It represents a square HTML container of sufficient size to hold the lens that is positioned solidly against it. Its main use is to allow the creation of a dashboard of HTML elements positioned around the lens. In the example below a simple HTML button is positioned close to the top-left corner of the dashboard: new LensDashboard(options) Manages creation and update of a lens dashboard. An object literal with Layer options can be specified. This class instatiates an optional element of LayerLens Parameters: Name Type Description options Object An object literal with Lensdashboard parameters. Properties Name Type Default Description borderWidth number 30 The extra border thickness (in pixels) around the square including the lens. Source: LensDashboard.js, line 49 Example const lensDashboard = new OpenLIME.LensDashboard(lime); const lensLayer = new OpenLIME.Layer({ type: \"lens\", layers: [layerIn], camera: lime.camera, radius: 200, border: 10, dashboard: lensDashboard, visible: true }); lime.addLayer('lens', lensLayer); const btn = document.createElement('button'); btn.innerHTML = \"Click Me\"; btn.style = `position: absolute; left: 0px; top: 0px; display: inline-block; cursor: pointer; pointer-events: auto;`; lensDashboard.append(btn); Methods append(elm) Appends a HTML element to the dashboard. The element must be positioned in 'absolute' mode. Parameters: Name Type Description elm * A HTML element Source: LensDashboard.js, line 227 removeMaskFromSvgLayer(svg) Remove mask attribute from svg element Parameters: Name Type Description svg * element from which remove the mask attribute Source: LensDashboard.js, line 219 setBackgroundRenderingMode(mode) Set the background rendering mode within the lens. Parameters: Name Type Description mode RenderingMode RenderingMode.draw or RenderingMode.hide Source: LensDashboard.js, line 243 setLayerSvgAnnotation(l) Call this to set the corresponding LayerSvgAnnotation Parameters: Name Type Description l LayerSvgAnnotation Source: LensDashboard.js, line 148 setLensRenderingMode(mode) Set rendering mode within the lens. Parameters: Name Type Description mode RenderingMode RenderingMode.draw or RenderingMode.hide Source: LensDashboard.js, line 235 setMaskOnSvgLayer(svg) Set mask property on the svg element which need to be displayed with the lens Parameters: Name Type Description svg * element which need to be displayed within the lens Source: LensDashboard.js, line 211 setupCircleInteraction(circle) Setup the event listener to update lens radius by dragging lens border. Call the lens controller to update lens radius. Parameters: Name Type Description circle * lens svg border. Source: LensDashboard.js, line 97 × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"LensDashboardNavigator.html":{"id":"LensDashboardNavigator.html","title":"Class: LensDashboardNavigator","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Class: LensDashboardNavigator LensDashboardNavigator new LensDashboardNavigator(options) Manages creation and update of a lens dashboard. An object literal with Layer options can be specified. This class instatiates an optional element of LayerLens Parameters: Name Type Description options Object An object literal with Lensdashboard parameters. Properties Name Type Default Description toolboxHeight number 25 The extra border thickness (in pixels) around the square including the lens. Source: LensDashboardNavigator.js, line 12 × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"LensDashboardNavigatorRadial.html":{"id":"LensDashboardNavigatorRadial.html","title":"Class: LensDashboardNavigatorRadial","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Class: LensDashboardNavigatorRadial LensDashboardNavigatorRadial new LensDashboardNavigatorRadial(options) Manages creation and update of a lens dashboard. An object literal with Layer options can be specified. This class instatiates an optional element of LayerLens Parameters: Name Type Description options Object An object literal with Lensdashboard parameters. Properties Name Type Default Description toolboxHeight number 25 The extra border thickness (in pixels) around the square including the lens. Source: LensDashboardNavigatorRadial.js, line 12 × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"PointerManager.html":{"id":"PointerManager.html","title":"Class: PointerManager","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback Class: PointerManager PointerManager A PointerManager is a high-level class for handling simultaneous events from a DOM target. It captures PointerEvent (MouseEvent and TouchEvent) generated by the target, classifies them as \"gestures\" and provides a simple interface to work with them. The high-level events (gestures) that are detected and emitted are: fingerHover(e) It is fired when a pointing device is used to move the cursor on the target fingerSingleTap(e) It is fired when the user presses a mouse button quickly or touches the screen shortly with a finger fingerDoubleTap(e) It is fired when the user quickly presses a mouse button twice or shortly touches the screen with a finger twice. fingerHold(e) It is fired when the user keeps pressing a mouse button or touching the screen longer than a threshold (600 ms). mouseWheel(e) It is fired when the user rotates the mouse wheel button. panStart(e) It is fired when the pan gesture is starting. panMove(e) It is fired when the pan gesture is in progress. panEnd(e) It is fired when the pan gesture is finished. pinchStart(e1, e2) It is fired when the pinch gesture is starting. pinchMove(e1, e2) It is fired when the pinch gesture is in progress. pinchEnd(e1, e2) It is fired when the pinch gesture is finished. In the following example a pointerManager object is created and connected to the canvas. Then a callback to handle a fingerSingleTap and a fingerHold event is defined and connected to the pointerManager. const canvas = document.querySelector('canvas'); const pointerManager = new PointerManager(canvas); const handler = { priority: 10, fingerSingleTap: (e) =&gt; { console.log(\"SINGLE TAP in \", e.clientX, e.clientY); }); fingerHold: (e) =&gt; { console.log(\"FINGER HOLD in \", e.clientX, e.clientY); }); }; pointerManager.onEvent(handler); new PointerManager(target [, options]) Instatiates a PointerManager object. Parameters: Name Type Argument Description target HTMLElement The DOM element from which the events are generated options Object &lt;optional&gt; An object literal with class parameters. Properties Name Type Default Description pinchMaxInterval number 200 fingerDown event max distance in time to trigger a pinch (in ms). Source: PointerManager.js, line 36 × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"Raster.html":{"id":"Raster.html","title":"Class: Raster","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "},"Shader.html":{"id":"Shader.html","title":"Class: Shader","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "},"ShaderBRDF.html":{"id":"ShaderBRDF.html","title":"Class: ShaderBRDF","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "},"ShaderCombiner.html":{"id":"ShaderCombiner.html","title":"Class: ShaderCombiner","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "},"ShaderNeural.html":{"id":"ShaderNeural.html","title":"Class: ShaderNeural","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "},"ShaderRTI.html":{"id":"ShaderRTI.html","title":"Class: ShaderRTI","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "},"Skin.html":{"id":"Skin.html","title":"Class: Skin","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "},"TextToSpeechPlayer.html":{"id":"TextToSpeechPlayer.html","title":"Class: TextToSpeechPlayer","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "},"Transform.html":{"id":"Transform.html","title":"Class: Transform","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "},"UIBasic.html":{"id":"UIBasic.html","title":"Class: UIBasic","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "},"UIDialog.html":{"id":"UIDialog.html","title":"Class: UIDialog","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 688 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 785 hide() Hides the dialog. Source: UIBasic.js, line 771 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 753 show() Shows the dialog. Source: UIBasic.js, line 763 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 793 Events closed The event is fired when the dialog is closed. Source: UIBasic.js, line 772 × Search results Close ISTI - CNR &amp; CRS4 - ViC "},"Viewer.html":{"id":"Viewer.html","title":"Class: Viewer","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "},"tutorial-getting-started.html":{"id":"tutorial-getting-started.html","title":"Tutorial: Getting started with OpenLIME","body":" OpenLIME Classes AnnotationBoundingBoxCacheCameraCanvasControllerController2DControllerPanZoomCoordinateSystemEditorSvgAnnotationFocusContextLayerLayerAnnotationLayerAnnotationImageLayerBRDFLayerCombinerLayerImageLayerLensLayerRTILayerSvgAnnotationLayoutLayoutTilesLensDashboardLensDashboardNavigatorLensDashboardNavigatorRadialPointerManagerRasterShaderShaderBRDFShaderCombinerShaderNeuralShaderRTISkinTextToSpeechPlayerTransformUIBasicUIDialogViewer Events Camera#event:updateCanvas#event:readyCanvas#event:updateCanvas#event:updateSizeLayer#event:readyLayer#event:updateLayout#event:readyLayout#event:updateSizeUIDialog#event:closed Howto Getting started with OpenLIME Global crudCallbackcustomDataCallbackcustomStateCallbackRenderingModeselectedCallbacksimplifysmoothsmoothToPathtaskCallback 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 "}}
     </script>
 
     <script type="text/javascript">