@avs/go 0.13.71760 → 0.13.71762

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@avs/go",
-  "version": "0.13.71760",
+  "version": "0.13.71762",
   "description": "AVS Go",
   "keywords": [
     "polymer",

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, CAMERA, PLAY, COPY, RESET, DELETE} from './logo.js';
+import {LOGO, PLAY, CAMERA, TIMELAPSE, HOME, DELETE, COPY, LINK} from './logo.js';
 import {Euler, Vector3, Quaternion} from 'three';
 
 /**
@@ -75,7 +75,7 @@ export class AvsGoDataViz extends AvsDataSourceMixin(AvsStreamMixin(AvsHttpMixin
           width:100%;
           height:100%;
         }
-        #animationControls {
+        #motionCapture {
           display: none;
           position:absolute;
           top: 8px;
@@ -84,26 +84,28 @@ export class AvsGoDataViz extends AvsDataSourceMixin(AvsStreamMixin(AvsHttpMixin
           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);
+          background:var(--avs-motion-capture-background, rgba(80,80,80,0.75));
+          color:var(--avs-motion-capture-color, #ffffff);
+          font-family:var(--avs-motion-capture-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);
+          user-select: none;
         }
-        #animationControlsTitle {
-          margin-bottom: 8px;
+        #motionCaptureTitle {
+          margin-bottom: 4px;
           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);
+          margin: 2px;
+          background:var(--avs-motion-capture-control-background, white);
+          color:var(--avs-motion-capture-control-color, black);
           display: inline-flex;
           align-items: center;
           box-shadow: 0 2px 2px #00000024,0 3px 1px -2px #0000001f,0 1px 5px #0003;
+        }
+        a.btn {
           cursor: pointer;
-          user-select: none;
         }
         .btn.disabled {
           cursor: default;
@@ -112,28 +114,28 @@ export class AvsGoDataViz extends AvsDataSourceMixin(AvsStreamMixin(AvsHttpMixin
           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;
+        #motionCaptureSnapshotIcon, #motionCaptureDelayIcon {
+          height: 24px;
         }
-        #animationDelay:disabled {
-          pointer-events: none;
-          box-shadow: none;
-          background-color: darkgrey;
-          color: grey;
+        #motionCaptureSnapshotLabel, #motionCaptureDelayLabel {
+          margin-left: 4px;
+          height: 14px;
         }
-        #animationSnapshotIcon {
+        #motionCaptureDelayWheel {
+          display: flex;
+          flex-direction: column;
+          margin: 0 4px;
           height: 24px;
+          gap: 2px;
         }
-        #animationSnapshotLabel {
-          margin-left: 4px;
-          height: 16px;
+        #motionCaptureDelayIncrease, #motionCaptureDelayDecrease {
+          height: 8px;
+          text-align: center;
+          font-weight: 700;
+          cursor: pointer;
+        }
+        #motionCaptureReset, #motionCaptureCopyData {
+          margin-left: 12px;
         }
         #sceneImage {
           width:100%;
@@ -161,7 +163,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, #animationTooltip {
+        #tooltip, #motionCaptureTooltip, #motionCaptureAlert {
           position:absolute;
           opacity:0;
           transition:opacity ease 0.3s;
@@ -176,6 +178,11 @@ export class AvsGoDataViz extends AvsDataSourceMixin(AvsStreamMixin(AvsHttpMixin
           font-weight:var(--avs-tooltip-font-weight);
           font-style:var(--avs-tooltip-font-style);
         }
+        #motionCaptureAlert {
+          left: 50%;
+          top: 50%;
+          transform: translate(-50%, -50%);
+        }
         #spinnerDiv {
           position:absolute;
           left:var(--avs-spinner-left, 50%);
@@ -200,25 +207,30 @@ 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>
+        <div id="motionCapture">
+          <div style="display: flex; justify-content: center" id="motionCaptureTitle">Motion Capture</div>
+          <div>
+            <a class="btn disabled" id="motionCapturePlay" data-tooltip="Play motion capture"></a>
+            <a class="btn" id="motionCaptureSnapshot" data-tooltip="Take snapshot">
+              <div id="motionCaptureSnapshotIcon"></div>
+              <div id="motionCaptureSnapshotLabel">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 class="btn disabled" id="motionCaptureDelay" data-tooltip="Frame delay (seconds)">
+              <div id="motionCaptureDelayIcon"></div>
+              <div id="motionCaptureDelayLabel">0</div>
+              <div id="motionCaptureDelayWheel">
+                <a id="motionCaptureDelayIncrease">+</a>
+                <a id="motionCaptureDelayDecrease">-</a>
+              </div>
+            </div>
+            <a class="btn" id="motionCaptureReset" data-tooltip="Reset transform"></a>
+            <a class="btn disabled" id="motionCaptureClear" data-tooltip="Clear motion capture frame"></a>
+            <a class="btn disabled" id="motionCaptureCopyData" data-tooltip="Copy motion capture data to clipboard"></a>
+            <a class="btn disabled" id="motionCaptureCopyUrl" data-tooltip="Copy motion capture URL to clipboard"></a>
           </div>
         </div>
-        <div id="animationTooltip"></div>
+        <div id="motionCaptureTooltip"></div>
+        <div id="motionCaptureAlert"></div>
         <div id="zoomOverlay"></div>
         <div id="spinnerDiv">
           <div id="spinner"></div>
@@ -506,11 +518,11 @@ export class AvsGoDataViz extends AvsDataSourceMixin(AvsStreamMixin(AvsHttpMixin
         observer: "_transformValueChanged"
       },
       /**
-       * Transform animation encoded string.
+       * Motion capture data or URL.
        */
-      transformAnimation: {
+      motionCapture: {
         type: String,
-        observer: "_transformAnimationValueChanged"
+        observer: "_motionCaptureValueChanged"
       },
       /**
        * Enable the zoom rectangle interactor. Only available when `renderer` is `THREEJS`
@@ -577,11 +589,11 @@ export class AvsGoDataViz extends AvsDataSourceMixin(AvsStreamMixin(AvsHttpMixin
         observer: "_animatedGlyphsEnableChanged"
       },
       /**
-       * Enable animation controls overlay. Only available when `renderer` is `THREEJS`
+       * Enable motion capture controls. Only available when `renderer` is `THREEJS`
        */
-      animationControlsEnable: {
+      motionCaptureControlsEnable: {
         type: Boolean,
-        observer: "_animationControlsEnableChanged"
+        observer: "_motionCaptureControlsEnableChanged"
       }
     }
   }
@@ -992,23 +1004,23 @@ export class AvsGoDataViz extends AvsDataSourceMixin(AvsStreamMixin(AvsHttpMixin
             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.$.motionCapture.style.color = "var(--avs-motion-capture-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 + "))";
+          this.$.motionCaptureTooltip.style.color = "var(--avs-tooltip-color, rgb(" + blendedR + "," + blendedG + "," + blendedB + "))";
         }
         if (json.sceneInfo.color) {
           var col = json.sceneInfo.color.match(/[0-9.]+/gi);
-          this.$.animationControls.style.background = "var(--avs-animation-controls-background, rgba(" + col[0] + "," + col[1] + "," + col[2] + ",0.75))";
+          this.$.motionCapture.style.background = "var(--avs-motion-capture-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] + "))";
+          this.$.motionCaptureTooltip.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.$.motionCapture.style.fontFamily = "var(--avs-motion-capture-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 + ")";
+          this.$.motionCaptureTooltip.style.fontFamily = "var(--avs-tooltip-font-family, " + json.sceneInfo.fontFamily + ")";
         }
       }
 
@@ -1550,35 +1562,41 @@ export class AvsGoDataViz extends AvsDataSourceMixin(AvsStreamMixin(AvsHttpMixin
           }
         });
 
-        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 ??= [];
+        this.$.motionCapturePlay.innerHTML = PLAY;
+        this.$.motionCaptureSnapshotIcon.innerHTML = CAMERA;
+        this.$.motionCaptureDelayIcon.innerHTML = TIMELAPSE;
+        this.$.motionCaptureReset.innerHTML = HOME;
+        this.$.motionCaptureClear.innerHTML = DELETE;
+        this.$.motionCaptureCopyData.innerHTML = COPY;
+        this.$.motionCaptureCopyUrl.innerHTML = LINK;
+
+        this.$.motionCapturePlay.addEventListener('click', this.runAnimation.bind(this));
+        this.$.motionCaptureSnapshot.addEventListener('click', this._handleMotionCaptureSnapshot.bind(this));
+        this.$.motionCaptureDelayIncrease.addEventListener('click', this._handleMotionCaptureDelayIncrease.bind(this));
+        this.$.motionCaptureDelayDecrease.addEventListener('click', this._handleMotionCaptureDelayDecrease.bind(this));
+        this.$.motionCaptureReset.addEventListener('click', this.resetTransform.bind(this));
+        this.$.motionCaptureClear.addEventListener('click', this._handleMotionCaptureClear.bind(this));
+        this.$.motionCaptureCopyData.addEventListener('click', this._handleMotionCaptureCopyData.bind(this));
+        this.$.motionCaptureCopyUrl.addEventListener('click', this._handleMotionCaptureCopyUrl.bind(this));
+
+        this.$.motionCapturePlay.addEventListener('pointermove', this._handlePointerEnterMotionCaptureControl.bind(this));
+        this.$.motionCaptureSnapshot.addEventListener('pointermove', this._handlePointerEnterMotionCaptureControl.bind(this));
+        this.$.motionCaptureDelay.addEventListener('pointermove', this._handlePointerEnterMotionCaptureControl.bind(this));
+        this.$.motionCaptureReset.addEventListener('pointermove', this._handlePointerEnterMotionCaptureControl.bind(this));
+        this.$.motionCaptureClear.addEventListener('pointermove', this._handlePointerEnterMotionCaptureControl.bind(this));
+        this.$.motionCaptureCopyData.addEventListener('pointermove', this._handlePointerEnterMotionCaptureControl.bind(this));
+        this.$.motionCaptureCopyUrl.addEventListener('pointermove', this._handlePointerEnterMotionCaptureControl.bind(this));
+
+        this.$.motionCapturePlay.addEventListener('pointerout', this._handlePointerLeaveMotionCaptureControl.bind(this));
+        this.$.motionCaptureSnapshot.addEventListener('pointerout', this._handlePointerLeaveMotionCaptureControl.bind(this));
+        this.$.motionCaptureDelay.addEventListener('pointerout', this._handlePointerLeaveMotionCaptureControl.bind(this));
+        this.$.motionCaptureReset.addEventListener('pointerout', this._handlePointerLeaveMotionCaptureControl.bind(this));
+        this.$.motionCaptureClear.addEventListener('pointerout', this._handlePointerLeaveMotionCaptureControl.bind(this));
+        this.$.motionCaptureCopyData.addEventListener('pointerout', this._handlePointerLeaveMotionCaptureControl.bind(this));
+        this.$.motionCaptureCopyUrl.addEventListener('pointerout', this._handlePointerLeaveMotionCaptureControl.bind(this));
+
+        this.motionCaptureTime = 0;
+        this.motionCaptureFrames ??= [];
 
 		    this._resetTimer();
 
@@ -1587,47 +1605,34 @@ export class AvsGoDataViz extends AvsDataSourceMixin(AvsStreamMixin(AvsHttpMixin
     }); 
   }
 
-  _handlePointerEnterAnimationControl(e) {
-    if (!this.showAnimationTooltip) {
+  _handlePointerEnterMotionCaptureControl(e) {
+    if (!this.showMotionCaptureTooltip) {
       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;
+      this.$.motionCaptureTooltip.style.left = pos.x + "px";
+      this.$.motionCaptureTooltip.style.top = pos.y + "px";
+      this.$.motionCaptureTooltip.style.opacity = 1;
+      this.$.motionCaptureTooltip.innerHTML = e.currentTarget.dataset.tooltip ?? e.currentTarget.id;
+      this.showMotionCaptureTooltip = true;
     }
   }
 
-  _handlePointerLeaveAnimationControl() {
-    this.$.animationTooltip.style.opacity = 0;
-    this.showAnimationTooltip = false;
+  _handlePointerLeaveMotionCaptureControl() {
+    this.$.motionCaptureTooltip.style.opacity = 0;
+    this.showMotionCaptureTooltip = 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() {
+  _handleMotionCaptureSnapshot() {
     const transform = this._getTransformComponents();
-    const delay = Number(this.$.animationDelay.value);
-    if (this.transformAnimationFrames.length > 0) {
-      this.animationTime += delay;
+    if (this.motionCaptureFrames.length > 0) {
+      this.motionCaptureTime += this.motionCaptureDelay;
     }
     const frame = {
-      time: this.animationTime * 1000,
+      time: this.motionCaptureTime * 1000,
       scale: this._round2dp(transform.scale),
       position: [this._round2dp(transform.position[0]),
                  this._round2dp(transform.position[1]),
@@ -1637,40 +1642,65 @@ export class AvsGoDataViz extends AvsDataSourceMixin(AvsStreamMixin(AvsHttpMixin
                  this._round2dp(transform.rotation[2]),
                  transform.rotation[3]]
     };
-    this.transformAnimationFrames.push(frame);
+    this.motionCaptureFrames.push(frame);
+
+    if (this.motionCaptureFrames.length == 1) {
+      this.$.motionCapturePlay.classList.remove("disabled");
+      this.$.motionCaptureDelay.classList.remove("disabled");
+      this.$.motionCaptureDelayLabel.innerText = "2";
+      this.$.motionCaptureClear.classList.remove("disabled");
+      this.$.motionCaptureCopyData.classList.remove("disabled");
+      this.$.motionCaptureCopyUrl.classList.remove("disabled");
+      this.motionCaptureDelay = 2;
+    }
+    this.$.motionCaptureSnapshotLabel.innerText = this.motionCaptureFrames.length;
+  }
+
+  _handleMotionCaptureDelayIncrease() {
+    this.motionCaptureDelay++;
+    if (this.motionCaptureDelay > 9) {
+      this.motionCaptureDelay = 9;
+    }
+    this.$.motionCaptureDelayLabel.innerText = this.motionCaptureDelay;
+  }
 
-    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");
+  _handleMotionCaptureDelayDecrease() {
+    this.motionCaptureDelay--;
+    if (this.motionCaptureDelay < 1) {
+      this.motionCaptureDelay = 1;
     }
-    this.$.animationSnapshotLabel.innerHTML = this.transformAnimationFrames.length;
+    this.$.motionCaptureDelayLabel.innerText = this.motionCaptureDelay;
   }
 
-  _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;
+  _handleMotionCaptureCopyData() {
+    // Convert to JSON and copy to clipboard
+    const data = JSON.stringify(this.motionCaptureFrames);
+    navigator.clipboard.writeText(data);
+
+    // Show alert
+    this.$.motionCaptureAlert.innerText = "Motion capture data copied to clipboard";
+    this.$.motionCaptureAlert.style.opacity = 1;
+    setTimeout(function () {
+      this.$.motionCaptureAlert.style.opacity = 0;
+    }.bind(this), 2000);
   }
 
-  async _handleAnimationCopy() {
+  async _handleMotionCaptureCopyUrl() {
     // Convert to JSON, compress and base64url encode
-    const json = JSON.stringify(this.transformAnimationFrames);
+    const json = JSON.stringify(this.motionCaptureFrames);
     const compressed = await this._compress(json);
     const encoded = compressed.toBase64().replace('/', '_').replace('+', '-');
 
-    /**
-     * A transform animation share event occurred.
-     * @event avs-transform-animation-share
-     */
-    this.dispatchEvent(new CustomEvent('avs-transform-animation-share', { detail: encoded }));
+    // Create URL and copy to clipboard
+    const url = window.location.origin + window.location.pathname + "?motionCapture=" + encoded;
+    navigator.clipboard.writeText(url);
+
+    // Show alert
+    this.$.motionCaptureAlert.innerText = "Motion capture URL copied to clipboard";
+    this.$.motionCaptureAlert.style.opacity = 1;
+    setTimeout(function () {
+      this.$.motionCaptureAlert.style.opacity = 0;
+    }.bind(this), 2000);
   }
 
   /**
@@ -1734,6 +1764,19 @@ export class AvsGoDataViz extends AvsDataSourceMixin(AvsStreamMixin(AvsHttpMixin
     return new Uint8Array(buffer);
   }
 
+  _handleMotionCaptureClear() {
+    this.motionCaptureFrames.length = 0;
+    this.$.motionCapturePlay.classList.add("disabled");
+    this.$.motionCaptureSnapshotLabel.innerText = "0";
+    this.$.motionCaptureDelay.classList.add("disabled");
+    this.$.motionCaptureDelayLabel.innerText = "0";
+    this.$.motionCaptureClear.classList.add("disabled");
+    this.$.motionCaptureCopyData.classList.add("disabled");
+    this.$.motionCaptureCopyUrl.classList.add("disabled");
+    this.motionCaptureDelay = 0;
+    this.motionCaptureTime = 0;
+  }
+
   _updatePixelRatio(change) {
     const pr = window.devicePixelRatio;
     matchMedia( `(resolution: ${pr}dppx)` ).addEventListener('change', this._updatePixelRatio.bind(this, true), { once: true } );
@@ -1743,14 +1786,14 @@ export class AvsGoDataViz extends AvsDataSourceMixin(AvsStreamMixin(AvsHttpMixin
   }
 
   /**
-   * Change in 'animation-controls-enable' property.
+   * Change in 'motion-capture-controls-enable' property.
    */
-  _animationControlsEnableChanged(newValue, oldValue) {
+  _motionCaptureControlsEnableChanged(newValue, oldValue) {
     if (newValue) {
-      this.$.animationControls.style.display = "block";
+      this.$.motionCapture.style.display = "block";
     }
     else {
-      this.$.animationControls.style.display = "none";
+      this.$.motionCapture.style.display = "none";
     }
   }
 
@@ -1913,7 +1956,7 @@ export class AvsGoDataViz extends AvsDataSourceMixin(AvsStreamMixin(AvsHttpMixin
           "legendTitle": "--avs-legend-title-animations",
           "glyph": "--avs-glyph-animations"
         });
-      styleMap.transform = this.transformAnimationFrames.length > 0 ? JSON.stringify(this.transformAnimationFrames) : null;
+      styleMap.transform = this.motionCaptureFrames.length > 0 ? JSON.stringify(this.motionCaptureFrames) : null;
 
       this.animator.setStyleMap(styleMap);
 	    this.threeViewer.runAnimation();
@@ -1963,36 +2006,46 @@ export class AvsGoDataViz extends AvsDataSourceMixin(AvsStreamMixin(AvsHttpMixin
   }
 
   /**
-   * Change in 'transform-animation' property.
+   * Change in 'motion-capture' property.
    */
-  async _transformAnimationValueChanged(newValue, oldValue) {
+  async _motionCaptureValueChanged(newValue, oldValue) {
     if (newValue) {
-      // Decode from base64url, decompress and parse JSON
-      const decoded = Uint8Array.fromBase64(newValue.replaceAll('_', '/').replaceAll('-', '+'));
-      const decompressed = await this._decompress(decoded);
-      this.transformAnimationFrames = JSON.parse(decompressed);
+      // Try parsing JSON first
+      try {
+        this.motionCaptureFrames = JSON.parse(newValue);
+      }
+      catch {
+        // Decode from base64url, decompress and parse JSON
+        const decoded = Uint8Array.fromBase64(newValue.replaceAll('_', '/').replaceAll('-', '+'));
+        const decompressed = await this._decompress(decoded);
+        this.motionCaptureFrames = JSON.parse(decompressed);
+      }
 
-      if (!this.transformAnimationFrames) {
-        this.transformAnimationFrame = [];
+      if (!this.motionCaptureFrames) {
+        this.motionCaptureFrames = [];
       }
 
-      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;
+      if (this.motionCaptureFrames.length > 0) {
+        this.$.motionCapturePlay.classList.remove("disabled");
+        this.$.motionCaptureSnapshotLabel.innerText = this.motionCaptureFrames.length;
+        this.$.motionCaptureDelay.classList.remove("disabled");
+        this.$.motionCaptureDelayLabel.innerText = "2";
+        this.$.motionCaptureClear.classList.remove("disabled");
+        this.$.motionCaptureCopyData.classList.remove("disabled");
+        this.$.motionCaptureCopyUrl.classList.remove("disabled");
+        this.motionCaptureDelay = 2;
+        this.motionCaptureTime = this.motionCaptureFrames[this.motionCaptureFrames.length - 1].time / 1000;
       }
       else {
-        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;
+        this.$.motionCapturePlay.classList.add("disabled");
+        this.$.motionCaptureSnapshotLabel.innerText = "0";
+        this.$.motionCaptureDelay.classList.add("disabled");
+        this.$.motionCaptureDelayLabel.innerText = "0";
+        this.$.motionCaptureClear.classList.add("disabled");
+        this.$.motionCaptureCopyData.classList.add("disabled");
+        this.$.motionCaptureCopyUrl.classList.add("disabled");
+        this.motionCaptureDelay = 0;
+        this.motionCaptureTime = 0;
       }
     }
   }

package/src/constants.js

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

package/src/logo.js

@@ -20,8 +20,10 @@
 
 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 TIMELAPSE = "<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.24 7.75c-1.17-1.17-2.7-1.76-4.24-1.76v6l-4.24 4.24c2.34 2.34 6.14 2.34 8.49 0 2.34-2.34 2.34-6.14-.01-8.48zM12 1.99c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\"/></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 HOME = "<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=\"M12 5.69l5 4.5V18h-2v-6H9v6H7v-7.81l5-4.5M12 3L2 12h3v8h6v-6h2v6h6v-8h3L12 3z\"/></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>";
+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 LINK = "<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=\"M17 7h-4v2h4c1.65 0 3 1.35 3 3s-1.35 3-3 3h-4v2h4c2.76 0 5-2.24 5-5s-2.24-5-5-5zm-6 8H7c-1.65 0-3-1.35-3-3s1.35-3 3-3h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-2zm-3-4h8v2H8z\"/></svg>";