Add toggle for recording video

tools/spatialAnalytics/VideoToggle.js

@@ -0,0 +1,71 @@
+export class VideoToggle {
+    constructor() {
+        this.toggleDivContainer = document.getElementById('toggleModeDivContainer');
+        this.onToggle = null;
+        this.videoMode = true;
+
+        this.create();
+        this.add();
+    }
+
+    create() {
+        this.toggleDiv = document.createElement('div');
+        this.toggleDiv.setAttribute('id', 'toggleModeDiv');
+        this.toggleDiv.className = 'toggleModeDiv';
+
+        const toggleModeSlider = document.createElement('div');
+        toggleModeSlider.setAttribute('id', 'toggleModeSlider');
+        toggleModeSlider.className = 'toggleModeSlider';
+        toggleModeSlider.classList.add('mode_right');
+        this.toggleDiv.appendChild(toggleModeSlider);
+
+        const noVideoIcon = document.createElement('div');
+        noVideoIcon.setAttribute('id', 'captureNoVideo');
+        noVideoIcon.classList.add('inactiveToggle', 'toggleIcon');
+
+        const noVideoImg = document.createElement('img');
+        noVideoImg.src = 'sprites/no-video.png';
+        noVideoIcon.appendChild(noVideoImg);
+
+        this.toggleDiv.appendChild(noVideoIcon);
+
+        const videoIcon = document.createElement('div');
+        videoIcon.setAttribute('id', 'captureVideo');
+        videoIcon.classList.add('activeToggle', 'toggleIcon');
+
+        const videoImg = document.createElement('img');
+        videoImg.src = 'sprites/video.png';
+        videoImg.style.paddingLeft = '2px';
+        videoIcon.appendChild(videoImg);
+
+        this.toggleDiv.appendChild(videoIcon);
+
+        this.toggleDiv.addEventListener('pointerup', () => {
+            this.toggleMode(toggleModeSlider, noVideoIcon, videoIcon);
+            this.videoMode = !this.videoMode;
+
+            if (this.onToggle) {
+                this.onToggle(this.videoMode);
+            }
+        });
+    }
+    add() {
+        this.toggleDivContainer.appendChild(this.toggleDiv);
+    }
+    remove() {
+        if (this.toggleDiv.parentElement) {
+            this.toggleDivContainer.removeChild(this.toggleDiv);
+        }
+    }
+    toggleMode(toggleModeSlider, icon_left, icon_right) {
+        if (toggleModeSlider.classList.contains('mode_left')) {
+            toggleModeSlider.classList.replace('mode_left', 'mode_right');
+            icon_right.classList.replace('inactiveToggle', 'activeToggle');
+            icon_left.classList.replace('activeToggle', 'inactiveToggle');
+        } else {
+            toggleModeSlider.classList.replace('mode_right', 'mode_left');
+            icon_right.classList.replace('activeToggle', 'inactiveToggle');
+            icon_left.classList.replace('inactiveToggle', 'activeToggle');
+        }
+    }
+}

tools/spatialAnalytics/index.css

@@ -20,7 +20,7 @@ img {
 }
 
 .iconContainer {
-    position: fixed;
+    position: absolute;
     transform: translateX(-50%);
     bottom: calc(230px - 66px);
     left: 50%;
@@ -79,7 +79,7 @@ img {
 /** device is wide and touch-based */
 @media (min-width: 800px) and (hover: none) {
     .iconContainer {
-        position: fixed;
+        position: absolute;
         left: auto;
         right: 66px;
         transform: none;
@@ -141,3 +141,64 @@ img {
 .longTitle {
     text-overflow: ellipsis;
 }
+
+#toggleModeDivContainer {
+    position: absolute;
+    right: calc(50% + 108px);
+    bottom: calc(230px - 66px + 32px - 24px);
+}
+
+.toggleModeDiv {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+    width: 80px;
+    height: 40px;
+    background-color: #00000080;
+    padding: 3px;
+    border-radius: 40px;
+}
+.toggleModeDiv.disabled {
+    pointer-events: none;
+}
+.toggleModeDiv.disabled p {
+    color:  #4B4B4B;
+}
+.toggleModeDiv p {
+    font-family: OpenSans, sans-serif;
+    margin: auto;
+}
+.toggleModeSlider {
+    border-radius: 50%;
+    border: solid #ffffff 3px;
+    background-color: #FFFFFF50;
+    width: 40px;
+    height: 40px;
+    position: absolute;
+}
+.toggleIcon {
+    display: inline-block;
+    width: 32px;
+    height: 32px;
+}
+.toggleIcon > img {
+    width: 32px;
+    height: 32px;
+}
+.activeToggle {
+    opacity: 1;
+    transition: .4s;
+}
+.inactiveToggle {
+    opacity: .6;
+    transition: .4s;
+}
+.mode_left {
+    left: 0;
+    transition: .4s;
+}
+.mode_right {
+    left: 50%;
+    transition: .4s;
+}

tools/spatialAnalytics/index.html

@@ -15,6 +15,7 @@
         </div>
     </div>
     <div id="envelopeContainer">
+        <div id="toggleModeDivContainer"></div>
         <div id="iconContainer" class="iconContainer">
             <div class="iconBackground" id="analyticsRecordingIcon" >
                 <img class="recordingIcon" src="sprites/empty.png" />

tools/spatialAnalytics/index.js

@@ -1,9 +1,9 @@
 /* global Envelope, SpatialInterface */
+import {VideoToggle} from './VideoToggle.js';
+
 const MINIMIZED_TOOL_WIDTH = 1200;
 const MINIMIZED_TOOL_HEIGHT = 600;
 
-const RECORD_VIDEO = false;
-
 let spatialInterface;
 
 let screenDimensions = null;
@@ -41,6 +41,12 @@ const msIconBackground = document.querySelector('#analyticsMarkStepIcon');
 const labelTitle = document.getElementById('labelTitle');
 const label = document.getElementById('label');
 
+let videoEnabled = true;
+const videoToggle = new VideoToggle();
+videoToggle.onToggle = (newVideoEnabled) => {
+    videoEnabled = newVideoEnabled;
+};
+
 const RecordingState = {
     empty: 'empty',
     recording: 'recording',
@@ -54,25 +60,27 @@ function setRecordingState(newState) {
     switch (recordingState) {
     case RecordingState.empty:
         recordingIcon.src = 'sprites/empty.png';
-        markStepIcon.style.display = 'none';
+        msIconBackground.style.display = 'none';
         break;
     case RecordingState.recording:
         recordingIcon.src = 'sprites/recording.png';
-        markStepIcon.style.display = 'inline';
+        msIconBackground.style.display = '';
         recIconBackground.classList.add('recording');
+        videoToggle.remove();
         break;
     case RecordingState.saving:
         recordingIcon.src = 'sprites/saving.svg';
-        markStepIcon.style.display = 'none';
+        msIconBackground.style.visibility = 'hidden';
         recIconBackground.classList.add('recording');
+        videoToggle.remove();
         break;
 
     case RecordingState.done:
         recordingIcon.style.display = 'none';
-        markStepIcon.style.display = 'none';
         msIconBackground.style.display = 'none';
         recIconBackground.style.display = 'none';
         iconContainer.style.display = 'none';
+        videoToggle.remove();
         break;
     }
 }
@@ -102,7 +110,7 @@ recordingIcon.addEventListener('pointerup', function() {
             spatialInterface.analyticsHydrate(data);
         }
 
-        if (RECORD_VIDEO) {
+        if (videoEnabled) {
             spatialInterface.startVirtualizerRecording();
         }
         break;
@@ -123,7 +131,7 @@ recordingIcon.addEventListener('pointerup', function() {
             });
         }
 
-        if (RECORD_VIDEO) {
+        if (videoEnabled) {
             spatialInterface.stopVirtualizerRecording((baseUrl, recordingId, deviceId) => {
                 setRecordingState(RecordingState.done);
                 const urls = {
@@ -195,7 +203,7 @@ envelope.onOpen(() => {
 let focused = false;
 envelope.onFocus(() => {
     focused = true;
-    iconContainer.style.display = 'block';
+    envelopeContainer.style.display = 'block';
     spatialInterface.analyticsFocus();
     if (lastSetDisplayRegion.startTime !== startTime ||
         lastSetDisplayRegion.endTime !== endTime) {
@@ -214,7 +222,7 @@ envelope.onFocus(() => {
 
 envelope.onBlur(() => {
     focused = false;
-    iconContainer.style.display = 'none';
+    envelopeContainer.style.display = 'none';
     spatialInterface.analyticsBlur();
 });