@avs/go 0.13.71740 → 0.13.71758

package/src/avs-go-dataviz.js

@@ -27,7 +27,7 @@ import {Viewer, TransformInteractor, PanInteractor, ZoomRectangleInteractor, Pic
 import {AvsHttpMixin} from './avs-http-mixin.js';
 import {AvsStreamMixin} from './avs-stream-mixin.js';
 import {AvsDataSourceMixin} from './avs-data-source-mixin.js';
-import {LOGO} from './logo.js';
+import {LOGO, CAMERA, PLAY, COPY, RESET, DELETE} from './logo.js';
 import {Euler, Vector3, Quaternion} from 'three';
 
 /**
@@ -74,7 +74,67 @@ export class AvsGoDataViz extends AvsDataSourceMixin(AvsStreamMixin(AvsHttpMixin
           position:relative;
           width:100%;
           height:100%;
-        }   
+        }
+        #animationControls {
+          display: none;
+          position:absolute;
+          top: 8px;
+          left: 8px;
+          padding: 8px;
+          background-color: rgba(128, 128, 128, 0.8);
+          font-size: 10pt;
+          border-radius: 8px;
+          background:var(--avs-animation-controls-background, rgba(80,80,80,0.75));
+          color:var(--avs-animation-controls-color, #ffffff);
+          font-family:var(--avs-animation-controls-font-family);
+          box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
+        }
+        #animationControlsTitle {
+          margin-bottom: 8px;
+          font-weight: 700;
+        }
+        .btn {
+          padding: 4px;
+          border-radius: 4px;
+          margin: 4px;
+          background:var(--avs-animation-controls-button-background, white);
+          color:var(--avs-animation-controls-button-color, black);
+          display: inline-flex;
+          align-items: center;
+          box-shadow: 0 2px 2px #00000024,0 3px 1px -2px #0000001f,0 1px 5px #0003;
+          cursor: pointer;
+          user-select: none;
+        }
+        .btn.disabled {
+          cursor: default;
+          pointer-events: none;
+          box-shadow: none;
+          background-color: darkgrey;
+          color: grey;
+        }
+        #animationDelay {
+          width: 30px;
+          height: 29px;
+          background:var(--avs-animation-controls-button-background, white);
+          color:var(--avs-animation-controls-button-color, black);
+          border-width: 0;
+          border-radius: 4px;
+          box-shadow: 0 2px 2px #00000024,0 3px 1px -2px #0000001f,0 1px 5px #0003;
+          margin: 4px;
+        }
+        #animationDelay:disabled {
+          pointer-events: none;
+          box-shadow: none;
+          background-color: darkgrey;
+          color: grey;
+        }
+        #animationSnapshotIcon {
+          height: 24px;
+        }
+        #animationSnapshotLabel {
+          margin-left: 4px;
+          height: 16px;
+        }
         #sceneImage {
           width:100%;
           height:100%;
@@ -101,7 +161,7 @@ export class AvsGoDataViz extends AvsDataSourceMixin(AvsStreamMixin(AvsHttpMixin
           font-weight:var(--avs-zoom-overlay-font-weight, bold);
           font-style:var(--avs-zoom-overlay-font-style);
         }
-        #tooltip {
+        #tooltip, #animationTooltip {
           position:absolute;
           opacity:0;
           transition:opacity ease 0.3s;
@@ -140,6 +200,25 @@ export class AvsGoDataViz extends AvsDataSourceMixin(AvsStreamMixin(AvsHttpMixin
       </style>
       <div id="container">
         <div id="dataVizDiv"></div>
+        <div id="animationControls">
+          <div id="animationControlsTitle">Animation Controls</div>
+          <div style="display: flex; justify-content: center">
+            <input type="number" disabled min="1" max="10" value="0" step="1" id="animationDelay" data-tooltip="Frame delay (seconds)">
+            <a class="btn" id="animationSnapshot" data-tooltip="Take snapshot">
+              <div id="animationSnapshotIcon"></div>
+              <div id="animationSnapshotLabel">0</div>
+            </a>
+          </div>
+          <div style="display: flex; justify-content: center">
+            <a class="btn disabled" id="animationPlay" data-tooltip="Play animation"></a>
+            <a class="btn disabled" id="animationCopy" data-tooltip="Copy animation URL to clipboard"></a>
+          </div>
+          <div style="display: flex; justify-content: center">
+            <a class="btn" id="animationReset" data-tooltip="Reset transform"></a>
+            <a class="btn disabled" id="animationClear" data-tooltip="Clear animation"></a>
+          </div>
+        </div>
+        <div id="animationTooltip"></div>
         <div id="zoomOverlay"></div>
         <div id="spinnerDiv">
           <div id="spinner"></div>
@@ -426,6 +505,13 @@ export class AvsGoDataViz extends AvsDataSourceMixin(AvsStreamMixin(AvsHttpMixin
         type: Number,
         observer: "_transformValueChanged"
       },
+      /**
+       * Transform animation encoded string.
+       */
+      transformAnimation: {
+        type: String,
+        observer: "_transformAnimationValueChanged"
+      },
       /**
        * Enable the zoom rectangle interactor. Only available when `renderer` is `THREEJS`
        *
@@ -476,19 +562,26 @@ export class AvsGoDataViz extends AvsDataSourceMixin(AvsStreamMixin(AvsHttpMixin
         observer: "_panMaximumZoomLevelChanged",
         value: 1000
       },
-	  /**
-	   * Show animated glyphs. Only available when `renderer` is `THREEJS`
-	   */
-	  animatedGlyphsVisible: {
+      /**
+       * Show animated glyphs. Only available when `renderer` is `THREEJS`
+       */
+      animatedGlyphsVisible: {
         type: Boolean,
-        observer: "_animatedGlyphsVisibleChanged"		
+        observer: "_animatedGlyphsVisibleChanged"
       },
-	  /**
-	   * Enable animated glyphs. Only available when `renderer` is `THREEJS`
-	   */
-	  animatedGlyphsEnable: {
+      /**
+       * Enable animated glyphs. Only available when `renderer` is `THREEJS`
+       */
+      animatedGlyphsEnable: {
         type: Boolean,
-        observer: "_animatedGlyphsEnableChanged"		
+        observer: "_animatedGlyphsEnableChanged"
+      },
+      /**
+       * Enable animation controls overlay. Only available when `renderer` is `THREEJS`
+       */
+      animationControlsEnable: {
+        type: Boolean,
+        observer: "_animationControlsEnableChanged"
       }
     }
   }
@@ -691,22 +784,7 @@ export class AvsGoDataViz extends AvsDataSourceMixin(AvsStreamMixin(AvsHttpMixin
     this._addDataSourceProperties(model);
 
     if (this.renderer === 'THREEJS') {
-	  this._addStreamProperties(rendererProperties);
-
-      var styleMap = {};
-      this._applyCustomCssProperties(styleMap, style,
-        {
-          "scene": "--avs-scene-animations",
-          "sceneTitle": "--avs-scene-title-animations",
-          "chart": "--avs-chart-animations",
-          "chartTitle": "--avs-chart-title-animations",
-          "axis": "--avs-axis-animations",
-          "legend": "--avs-legend-animations",
-          "legendTitle": "--avs-legend-title-animations",
-          "glyph": "--avs-glyph-animations",
-          "transform": "--avs-transform-animation"
-        } );
-      this.animator.setStyleMap(styleMap);
+      this._addStreamProperties(rendererProperties);
     }
 
     return model;
@@ -901,30 +979,36 @@ export class AvsGoDataViz extends AvsDataSourceMixin(AvsStreamMixin(AvsHttpMixin
          */
         this.dispatchEvent(new CustomEvent('avs-scene-info', sceneEvent));
 
-        // Set tooltip and zoom overlay style to reversed theme
+        // Set animation controls, tooltip and zoom overlay style to reversed theme
         if (json.sceneInfo.backgroundColor) {
           var col = json.sceneInfo.backgroundColor.match(/[0-9.]+/gi);
-          var bgCol = window.getComputedStyle(this.parentNode, null).getPropertyValue("background-color").trim().match(/[0-9.]+/gi);
+          var bgCol = this.getInheritedBackgroundCol(this.parentNode).trim().match(/[0-9.]+/gi);
           var blendedR = (col[0] * col[3]);
           var blendedG = (col[1] * col[3]);
           var blendedB = (col[2] * col[3]);
-		  if (bgCol) {
-            // In case sceneInfo.backgroundColor is transparent, blend with our parent's background color
+		      if (col[3] == 0) {
+            // In case sceneInfo.backgroundColor is transparent, blend with inherited background color
             blendedR += (bgCol[0] * (1 - col[3]));
             blendedG += (bgCol[1] * (1 - col[3]));
             blendedB += (bgCol[2] * (1 - col[3]));
-		  }
+          }
+          this.$.animationControls.style.color = "var(--avs-animation-controls-color, rgb(" + blendedR + ", " + blendedG + ", " + blendedB + "))";
           this.$.zoomOverlay.style.color = "var(--avs-zoom-overlay-color, rgb(" + blendedR + "," + blendedG + "," + blendedB + "))";
           this.$.tooltip.style.color = "var(--avs-tooltip-color, rgb(" + blendedR + "," + blendedG + "," + blendedB + "))";
+          this.$.animationTooltip.style.color = "var(--avs-tooltip-color, rgb(" + blendedR + "," + blendedG + "," + blendedB + "))";
         }
         if (json.sceneInfo.color) {
           var col = json.sceneInfo.color.match(/[0-9.]+/gi);
-          this.$.zoomOverlay.style.background = "var(--avs-zoom-overlay-background, rgba(" + col[0] + "," + col[1] + "," + col[2] + "))";
+          this.$.animationControls.style.background = "var(--avs-animation-controls-background, rgba(" + col[0] + "," + col[1] + "," + col[2] + ",0.75))";
+          this.$.zoomOverlay.style.background = "var(--avs-zoom-overlay-background, rgba(" + col[0] + "," + col[1] + "," + col[2] + ",0.75))";
           this.$.tooltip.style.background = "var(--avs-tooltip-background, rgb(" + col[0] + "," + col[1] + "," + col[2] + "))";
+          this.$.animationTooltip.style.background = "var(--avs-tooltip-background, rgb(" + col[0] + "," + col[1] + "," + col[2] + "))";
         }
         if (json.sceneInfo.fontFamily) {
+          this.$.animationControls.style.fontFamily = "var(--avs-animation-controls-font-family, " + json.sceneInfo.fontFamily + ")";
           this.$.zoomOverlay.style.fontFamily = "var(--avs-zoom-overlay-font-family, " + json.sceneInfo.fontFamily + ")";
           this.$.tooltip.style.fontFamily = "var(--avs-tooltip-font-family, " + json.sceneInfo.fontFamily + ")";
+          this.$.animationTooltip.style.fontFamily = "var(--avs-tooltip-font-family, " + json.sceneInfo.fontFamily + ")";
         }
       }
 
@@ -988,6 +1072,30 @@ export class AvsGoDataViz extends AvsDataSourceMixin(AvsStreamMixin(AvsHttpMixin
     }
   }
 
+  getInheritedBackgroundCol(el) {
+    var defaultStyle = this.getDefaultBackground();
+
+    var bgCol = window.getComputedStyle(el).backgroundColor;
+    if (bgCol != defaultStyle) {
+      return bgCol;
+    }
+
+    if (!el.parentElement) {
+      return defaultStyle;
+    }
+
+    return this.getInheritedBackgroundCol(el.parentElement);
+  }
+
+  getDefaultBackground() {
+    // have to add to the document in order to use getComputedStyle
+    var div = document.createElement("div");
+    document.head.appendChild(div);
+    var bg = window.getComputedStyle(div).backgroundColor;
+    document.head.removeChild(div);
+    return bg;
+  }
+
   /**
    *
    */
@@ -1422,7 +1530,7 @@ export class AvsGoDataViz extends AvsDataSourceMixin(AvsStreamMixin(AvsHttpMixin
     afterNextRender(this, function() {
       if (this.initialized !== true) { 
 
-		this._updateSize();
+		    this._updateSize();
         if (!this.manualUpdate) {
           this.updateViewer(true);
         }
@@ -1442,13 +1550,137 @@ export class AvsGoDataViz extends AvsDataSourceMixin(AvsStreamMixin(AvsHttpMixin
           }
         });
 
-		this._resetTimer();
+        this.$.animationSnapshotIcon.innerHTML = CAMERA;
+        this.$.animationPlay.innerHTML = PLAY;
+        this.$.animationCopy.innerHTML = COPY;
+        this.$.animationReset.innerHTML = RESET;
+        this.$.animationClear.innerHTML = DELETE;
+
+        this.$.animationDelay.addEventListener('change', this._handleAnimationDelayChange.bind(this));
+        this.$.animationSnapshot.addEventListener('click', this._handleAnimationSnapshot.bind(this));
+        this.$.animationPlay.addEventListener('click', this.runAnimation.bind(this));
+        this.$.animationCopy.addEventListener('click', this._handleAnimationCopy.bind(this));
+        this.$.animationReset.addEventListener('click', this.resetTransform.bind(this));
+        this.$.animationClear.addEventListener('click', this._handleAnimationClear.bind(this));
+
+        this.$.animationDelay.addEventListener('pointermove', this._handlePointerEnterAnimationControl.bind(this));
+        this.$.animationSnapshot.addEventListener('pointermove', this._handlePointerEnterAnimationControl.bind(this));
+        this.$.animationPlay.addEventListener('pointermove', this._handlePointerEnterAnimationControl.bind(this));
+        this.$.animationCopy.addEventListener('pointermove', this._handlePointerEnterAnimationControl.bind(this));
+        this.$.animationReset.addEventListener('pointermove', this._handlePointerEnterAnimationControl.bind(this));
+        this.$.animationClear.addEventListener('pointermove', this._handlePointerEnterAnimationControl.bind(this));
+
+        this.$.animationDelay.addEventListener('pointerout', this._handlePointerLeaveAnimationControl.bind(this));
+        this.$.animationSnapshot.addEventListener('pointerout', this._handlePointerLeaveAnimationControl.bind(this));
+        this.$.animationPlay.addEventListener('pointerout', this._handlePointerLeaveAnimationControl.bind(this));
+        this.$.animationCopy.addEventListener('pointerout', this._handlePointerLeaveAnimationControl.bind(this));
+        this.$.animationReset.addEventListener('pointerout', this._handlePointerLeaveAnimationControl.bind(this));
+        this.$.animationClear.addEventListener('pointerout', this._handlePointerLeaveAnimationControl.bind(this));
+
+        this.animationTime = 0;
+        this.transformAnimationFrames ??= [];
+        if (this.transformAnimationFrames.length > 0) {
+          this.$.animationDelay.value = 2;
+          this.$.animationDelay.disabled = false;
+          this.$.animationSnapshotLabel.innerHTML = this.transformAnimationFrames.length;
+          this.$.animationPlay.classList.remove("disabled");
+          this.$.animationCopy.classList.remove("disabled");
+          this.$.animationClear.classList.remove("disabled");
+          this.animationTime = this.transformAnimationFrames[this.transformAnimationFrames.length - 1].time / 1000;
+        }
+
+		    this._resetTimer();
 
         this.initialized = true;
       }
     }); 
   }
 
+  _handlePointerEnterAnimationControl(e) {
+    if (!this.showAnimationTooltip) {
+      var adjustedCoords = this._getAdjustedCoords(e.clientX, e.clientY);
+      var pos = this._calcTooltipPosition(adjustedCoords.x, adjustedCoords.y);
+      this.$.animationTooltip.style.left = pos.x + "px";
+      this.$.animationTooltip.style.top = pos.y + "px";
+      this.$.animationTooltip.style.opacity = 1;
+      this.$.animationTooltip.innerHTML = e.currentTarget.dataset.tooltip ?? e.currentTarget.id;
+      this.showAnimationTooltip = true;
+    }
+  }
+
+  _handlePointerLeaveAnimationControl() {
+    this.$.animationTooltip.style.opacity = 0;
+    this.showAnimationTooltip = false;
+  }
+
+  _round2dp(n) {
+    return Math.round((n + Number.EPSILON) * 100) / 100;
+  }
+
+  _handleAnimationDelayChange() {
+    let delay = Number(this.$.animationDelay.value);
+    if (delay < 1) {
+      delay = 1;
+      this.$.animationDelay.value = delay;
+    }
+    if (delay > 10) {
+      delay = 10;
+      this.$.animationDelay.value = delay;
+    }
+  }
+
+  _handleAnimationSnapshot() {
+    const transform = this._getTransformComponents();
+    const delay = Number(this.$.animationDelay.value);
+    if (this.transformAnimationFrames.length > 0) {
+      this.animationTime += delay;
+    }
+    const frame = {
+      time: this.animationTime * 1000,
+      scale: this._round2dp(transform.scale),
+      position: [this._round2dp(transform.position[0]),
+                 this._round2dp(transform.position[1]),
+                 this._round2dp(transform.position[2])],
+      rotation: [this._round2dp(transform.rotation[0]),
+                 this._round2dp(transform.rotation[1]),
+                 this._round2dp(transform.rotation[2]),
+                 transform.rotation[3]]
+    };
+    this.transformAnimationFrames.push(frame);
+
+    if (this.transformAnimationFrames.length == 1) {
+      this.$.animationDelay.value = 2;
+      this.$.animationDelay.disabled = false;
+      this.$.animationPlay.classList.remove("disabled");
+      this.$.animationCopy.classList.remove("disabled");
+      this.$.animationClear.classList.remove("disabled");
+    }
+    this.$.animationSnapshotLabel.innerHTML = this.transformAnimationFrames.length;
+  }
+
+  _handleAnimationClear() {
+    this.transformAnimationFrames.length = 0;
+    this.$.animationDelay.value = 0;
+    this.$.animationDelay.disabled = true;
+    this.$.animationSnapshotLabel.innerHTML = "0";
+    this.$.animationPlay.classList.add("disabled");
+    this.$.animationCopy.classList.add("disabled");
+    this.$.animationClear.classList.add("disabled");
+    this.animationTime = 0;
+  }
+
+  _handleAnimationCopy() {
+    const json = JSON.stringify(this.transformAnimationFrames);
+    const encoded = btoa(json);
+
+    /**
+     * A transform animation share event occurred.
+     * @event avs-transform-animation-share
+     */
+
+    this.dispatchEvent(new CustomEvent('avs-transform-animation-share', { detail: encoded }));
+  }
+
   _updatePixelRatio(change) {
     const pr = window.devicePixelRatio;
     matchMedia( `(resolution: ${pr}dppx)` ).addEventListener('change', this._updatePixelRatio.bind(this, true), { once: true } );
@@ -1457,6 +1689,18 @@ export class AvsGoDataViz extends AvsDataSourceMixin(AvsStreamMixin(AvsHttpMixin
     }
   }
 
+  /**
+   * Change in 'animation-controls-enable' property.
+   */
+  _animationControlsEnableChanged(newValue, oldValue) {
+    if (newValue) {
+      this.$.animationControls.style.display = "block";
+    }
+    else {
+      this.$.animationControls.style.display = "none";
+    }
+  }
+
   /**
    * Change in 'hidden' property.
    */
@@ -1479,7 +1723,7 @@ export class AvsGoDataViz extends AvsDataSourceMixin(AvsStreamMixin(AvsHttpMixin
     if (this.threeViewer) {
       if (newValue) {
         if (this.transformInteractor === undefined) {
-          this.transformInteractor = new TransformInteractor( this );
+          this.transformInteractor = new TransformInteractor( this.$.dataVizDiv );
         }
         this.threeViewer.addInteractor( this.transformInteractor );
 
@@ -1577,7 +1821,7 @@ export class AvsGoDataViz extends AvsDataSourceMixin(AvsStreamMixin(AvsHttpMixin
     }
   }
 
-  getTransformComponents() {
+  _getTransformComponents() {
     var pos = new Vector3();
     var quat = new Quaternion();
     var scale = new Vector3();
@@ -1602,10 +1846,8 @@ export class AvsGoDataViz extends AvsDataSourceMixin(AvsStreamMixin(AvsHttpMixin
   }
 
   runAnimation() {
-
-    var style = window.getComputedStyle(this, null);
-
     if (this.renderer === 'THREEJS') {
+      var style = window.getComputedStyle(this, null);
       var styleMap = {};
       this._applyCustomCssProperties(styleMap, style,
         {
@@ -1616,11 +1858,12 @@ export class AvsGoDataViz extends AvsDataSourceMixin(AvsStreamMixin(AvsHttpMixin
           "axis": "--avs-axis-animations",
           "legend": "--avs-legend-animations",
           "legendTitle": "--avs-legend-title-animations",
-          "glyph": "--avs-glyph-animations",
-          "transform": "--avs-transform-animation"
-        } );
+          "glyph": "--avs-glyph-animations"
+        });
+      styleMap.transform = this.transformAnimationFrames.length > 0 ? JSON.stringify(this.transformAnimationFrames) : null;
+
       this.animator.setStyleMap(styleMap);
-	  this.threeViewer.runAnimation();
+	    this.threeViewer.runAnimation();
     }
   }
   
@@ -1666,6 +1909,16 @@ export class AvsGoDataViz extends AvsDataSourceMixin(AvsStreamMixin(AvsHttpMixin
     }
   }
 
+  /**
+   * Change in 'transform-animation' property.
+   */
+  _transformAnimationValueChanged(newValue, oldValue) {
+    if (newValue) {
+      const decoded = atob(newValue);
+      this.transformAnimationFrames = JSON.parse(decoded);
+    }
+  }
+
   /**
    * Change in 'zoom-rectangle-enable' property.
    */

package/src/constants.js

@@ -18,4 +18,4 @@
  * Advanced Visual Systems Inc. (http://www.avs.com)
  */
 
-export var VERSION = '0.13.71740';
+export var VERSION = '0.13.71758';

package/src/logo.js

@@ -18,4 +18,10 @@
  * Advanced Visual Systems Inc. (http://www.avs.com)
  */
 
-export var LOGO = "<svg viewBox=\"0 0 12.170833 12.170834\" height=\"46\" width=\"46\"><path d=\"M 7.2486073,9.9076469 H 5.2849946 L 8.4704866,6.123394 6.2360101,3.4130208 7.1885217,2.271515 10.424524,6.122616 Z M 6.0677825,8.6164059 3.9785527,6.1181874 6.0843599,3.5947138 8.1676051,6.1217782 Z M 1.7215741,6.1177086 6.5503222,0.33124232 H 8.5047186 L 3.6754319,6.1184268 5.9155339,8.7972611 4.958833,9.9337997 Z M 7.3399924,2.0900614 9.0019205,0.09856041 H 6.441462 L 1.4175556,6.1188457 4.7994028,10.140329 H 7.3569887 L 10.728423,6.122616 Z\" style=\"display:inline;fill:#2e8cbd;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0598462\" id=\"path22\" /><path d=\"M 7.2486073,9.9076469 H 5.2849946 L 8.4704866,6.123394 6.2360101,3.4130208 7.1885217,2.271515 10.424524,6.122616 Z M 6.0677825,8.6164059 3.9785527,6.1181874 6.0843599,3.5947138 8.1676051,6.1217782 Z M 1.7215741,6.1177086 6.5503222,0.33124232 H 8.5047186 L 3.6754319,6.1184268 5.9155339,8.7972611 4.958833,9.9337997 Z M 7.3399924,2.0900614 9.0019205,0.09856041 H 6.441462 L 1.4175556,6.1188457 4.7994028,10.140329 H 7.3569887 L 10.728423,6.122616 Z\"  style=\"fill:none;stroke:#2e8cbd;stroke-width:0.179539;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1\" id=\"path26\" /><g id=\"g78\" class=\"spinnerBackground\"><path d=\"M 5.0916012,7.2951741 C 4.5581951,6.6568 4.1217726,6.1273448 4.1217726,6.1186069 c 0,-0.022412 1.9511841,-2.3603376 1.9654853,-2.3550616 0.00645,0.00237 0.4481639,0.5337638 0.981573,1.1808488 L 8.0386633,6.1209126 7.7794202,6.4289493 C 7.6368389,6.5983701 7.1955674,7.1235887 6.7988191,7.5961017 6.4020707,8.0686158 6.0738528,8.4553619 6.0694438,8.4555369 6.0650388,8.4557059 5.6250056,7.9335497 5.0916012,7.2951741 Z\" id=\"path39\" /><path d=\"M 5.5264617,9.7764122 C 5.5385577,9.7616559 6.2319291,8.9374956 7.0672769,7.9449584 7.9026265,6.9524246 8.5861155,6.1329723 8.5861409,6.1239554 8.5861681,6.1149485 8.0879549,5.5032753 7.4789997,4.7647 6.8700453,4.0261248 6.3741103,3.4156149 6.3769213,3.4080117 6.3797713,3.4004117 6.562373,3.1774787 6.7827896,2.9126121 7.164399,2.4540426 7.1848936,2.4323657 7.2117806,2.4588741 7.2273026,2.4741751 7.9274525,3.3048587 8.767655,4.3048177 L 10.295296,6.1229243 9.4136171,7.1736012 C 8.9286921,7.751474 8.2336861,8.5795488 7.8691565,9.0137659 L 7.2063776,9.8032561 H 6.3554188 c -0.7939025,0 -0.8494825,-0.00179 -0.8289571,-0.026839 z\" id=\"path41\" /><path d=\"M 3.4382986,7.9881037 C 2.6063322,7.0074024 1.9089456,6.1852746 1.8885531,6.1611518 L 1.8514763,6.1172937 4.2262773,3.2714352 6.6010789,0.42557499 H 7.4490822 8.2970851 L 7.0763447,1.8883334 c -3.0218884,3.6209928 -3.5158893,4.2139972 -3.519859,4.2252855 -0.00231,0.00662 0.4954141,0.6094855 1.1060858,1.3397178 0.6106728,0.7302338 1.1103133,1.3348316 1.1103133,1.3435515 0,0.017734 -0.7956667,0.9718373 -0.8117152,0.9733472 -0.00562,5.108e-4 -0.6909038,-0.80143 -1.522871,-1.7821306 z\" id=\"path43\" /></g></svg>";
+export var LOGO = "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"46px\" viewBox=\"0 0 12.170833 12.170834\" width=\"46px\"><path d=\"M 7.2486073,9.9076469 H 5.2849946 L 8.4704866,6.123394 6.2360101,3.4130208 7.1885217,2.271515 10.424524,6.122616 Z M 6.0677825,8.6164059 3.9785527,6.1181874 6.0843599,3.5947138 8.1676051,6.1217782 Z M 1.7215741,6.1177086 6.5503222,0.33124232 H 8.5047186 L 3.6754319,6.1184268 5.9155339,8.7972611 4.958833,9.9337997 Z M 7.3399924,2.0900614 9.0019205,0.09856041 H 6.441462 L 1.4175556,6.1188457 4.7994028,10.140329 H 7.3569887 L 10.728423,6.122616 Z\" style=\"display:inline;fill:#2e8cbd;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0598462\" id=\"path22\" /><path d=\"M 7.2486073,9.9076469 H 5.2849946 L 8.4704866,6.123394 6.2360101,3.4130208 7.1885217,2.271515 10.424524,6.122616 Z M 6.0677825,8.6164059 3.9785527,6.1181874 6.0843599,3.5947138 8.1676051,6.1217782 Z M 1.7215741,6.1177086 6.5503222,0.33124232 H 8.5047186 L 3.6754319,6.1184268 5.9155339,8.7972611 4.958833,9.9337997 Z M 7.3399924,2.0900614 9.0019205,0.09856041 H 6.441462 L 1.4175556,6.1188457 4.7994028,10.140329 H 7.3569887 L 10.728423,6.122616 Z\"  style=\"fill:none;stroke:#2e8cbd;stroke-width:0.179539;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1\" id=\"path26\" /><g id=\"g78\" class=\"spinnerBackground\"><path d=\"M 5.0916012,7.2951741 C 4.5581951,6.6568 4.1217726,6.1273448 4.1217726,6.1186069 c 0,-0.022412 1.9511841,-2.3603376 1.9654853,-2.3550616 0.00645,0.00237 0.4481639,0.5337638 0.981573,1.1808488 L 8.0386633,6.1209126 7.7794202,6.4289493 C 7.6368389,6.5983701 7.1955674,7.1235887 6.7988191,7.5961017 6.4020707,8.0686158 6.0738528,8.4553619 6.0694438,8.4555369 6.0650388,8.4557059 5.6250056,7.9335497 5.0916012,7.2951741 Z\" id=\"path39\" /><path d=\"M 5.5264617,9.7764122 C 5.5385577,9.7616559 6.2319291,8.9374956 7.0672769,7.9449584 7.9026265,6.9524246 8.5861155,6.1329723 8.5861409,6.1239554 8.5861681,6.1149485 8.0879549,5.5032753 7.4789997,4.7647 6.8700453,4.0261248 6.3741103,3.4156149 6.3769213,3.4080117 6.3797713,3.4004117 6.562373,3.1774787 6.7827896,2.9126121 7.164399,2.4540426 7.1848936,2.4323657 7.2117806,2.4588741 7.2273026,2.4741751 7.9274525,3.3048587 8.767655,4.3048177 L 10.295296,6.1229243 9.4136171,7.1736012 C 8.9286921,7.751474 8.2336861,8.5795488 7.8691565,9.0137659 L 7.2063776,9.8032561 H 6.3554188 c -0.7939025,0 -0.8494825,-0.00179 -0.8289571,-0.026839 z\" id=\"path41\" /><path d=\"M 3.4382986,7.9881037 C 2.6063322,7.0074024 1.9089456,6.1852746 1.8885531,6.1611518 L 1.8514763,6.1172937 4.2262773,3.2714352 6.6010789,0.42557499 H 7.4490822 8.2970851 L 7.0763447,1.8883334 c -3.0218884,3.6209928 -3.5158893,4.2139972 -3.519859,4.2252855 -0.00231,0.00662 0.4954141,0.6094855 1.1060858,1.3397178 0.6106728,0.7302338 1.1103133,1.3348316 1.1103133,1.3435515 0,0.017734 -0.7956667,0.9718373 -0.8117152,0.9733472 -0.00562,5.108e-4 -0.6909038,-0.80143 -1.522871,-1.7821306 z\" id=\"path43\" /></g></svg>";
+
+export var CAMERA = "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"currentColor\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M20 4h-3.17L15 2H9L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V6h4.05l1.83-2h4.24l1.83 2H20v12zM12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0 8c-1.65 0-3-1.35-3-3s1.35-3 3-3 3 1.35 3 3-1.35 3-3 3z\"/></svg>";
+export var PLAY = "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"currentColor\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M10 8.64L15.27 12 10 15.36V8.64M8 5v14l11-7L8 5z\"/></svg>";
+export var COPY = "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"currentColor\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z\"/></svg>";
+export var RESET = "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"currentColor\"><path d=\"M12,5V1L7,6l5,5V7c3.31,0,6,2.69,6,6s-2.69,6-6,6s-6-2.69-6-6H4c0,4.42,3.58,8,8,8s8-3.58,8-8S16.42,5,12,5z\"/></g></svg>";
+export var DELETE = "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"currentColor\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M16 9v10H8V9h8m-1.5-6h-5l-1 1H5v2h14V4h-3.5l-1-1zM18 7H6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7z\"/></svg>";