Add label; Remove unused code

ptcrealitylab · Mar 25, 2024 · f9027c1 · f9027c1
1 parent d7d511b
commit f9027c1
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 95 deletions.
diff --git a/tools/spatialAnalytics/index.css b/tools/spatialAnalytics/index.css
@@ -1,3 +1,7 @@
+body {
+    font-family: "Open Sans", Helvetica Neue, Helvetica, Arial, sans-serif;
+}
+
 img {
     width: 100%;
     height: 100%;
@@ -15,68 +19,6 @@ img {
     color: white;
 }
 
-.analytics-region-card {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 2px;
-    font-size: 14px;
-    font-family: "Futura", Helvetica Neue, Helvetica, Arial, sans-serif;
-    line-height: 22px;
-
-    border-radius: 22px;
-    background-color: rgba(0, 0, 0, 0.7);
-    padding: 14px;
-
-    position: relative;
-    margin: 10px 0;
-    width: fit-content;
-}
-
-.analytics-region-card.minimized > *:not(.analytics-region-card-title) {
-    display: none;
-}
-
-.analytics-region-card.minimized {
-    padding: 14px;
-    height: 14px;
-    line-height: 14px;
-    white-space: nowrap;
-}
-
-.analytics-region-card-title {
-    grid-column-start: span 3;
-}
-
-.analytics-region-card-subtitle {
-    grid-column-start: span 3;
-    border-bottom: 1px solid #999;
-    padding-bottom: 4px;
-    margin-bottom: 4px;
-}
-
-.analytics-region-card-graph-section-title {
-    grid-column: 1;
-}
-
-.analytics-region-card-graph-section-sparkline {
-    grid-column-start: span 2;
-    stroke: white;
-    fill: none;
-}
-
-.analytics-region-card-graph-section-value {
-}
-
-.analytics-region-card-pin, .analytics-region-card-enter {
-    grid-column: 1;
-    text-decoration: none;
-    color: white;
-}
-
-.analytics-region-card-pin:visited, .analytics-region-card-enter:visited {
-    color: white;
-}
-
 .iconContainer {
     position: fixed;
     transform: translateX(-50%);
@@ -151,16 +93,48 @@ img {
     filter: brightness(0.5);
 }
 
-.tool-color-gradient {
-    /*animation: tool-color-gradient-anim 0.3s infinite alternate;*/
+.ar-icon-layout {
+    vertical-align: middle;
+}
+
+/*** copied from user-interface/index.css ***/
+.minimizedEnvelopeIcon {
+    display: inline-block;
+    width: 260px;
+    height: 260px;
+    border-radius: 50px;
+    vertical-align: middle;
     background: linear-gradient(90deg, #000000,#000000, #00ffff, #ee7752, #e73c7e, #23a6d5, #23d5ab,#000000, #000000);
     background-size: 2000% 200%;
     animation: gradient 10s infinite;
-    border-radius: 50px;
 }
 
 @keyframes gradient {
     0% { background-position: 0% 50%; }
     50% { background-position: 100% 50%; }
     100% { background-position: 0% 50%; }
 }
+
+#label {
+    display: inline-block;
+    width: calc(100% - 400px);
+    background-color: rgba(225,225,225,0.7);
+    border-radius: 50px;
+    vertical-align: middle;
+    padding-left: 20px;
+    margin: 30px 30px 30px 40px;
+}
+
+#labelTitle {
+    display: inline-block;
+    white-space: nowrap;
+    overflow-x: hidden;
+    overflow-y: visible;
+    width: calc(100% - 120px);
+    font-size: 100px;
+    margin: 40px;
+}
+
+.longTitle {
+    text-overflow: ellipsis;
+}
diff --git a/tools/spatialAnalytics/index.html b/tools/spatialAnalytics/index.html
@@ -6,8 +6,13 @@
     <link rel="stylesheet" href="index.css">
 </head>
 <body>
-    <div id="launchButton" class="tool-color-gradient" style="width: 400px; height: 400px;">
-        <img id="launchIcon" src="launchIcon.svg" />
+    <div id="layout" class="ar-icon-layout">
+        <div id="toolIcon" class="minimizedEnvelopeIcon">
+            <img id="minimizedIcon" src="launchIcon.svg" class="minimizedIcon" />
+        </div>
+        <div id="label">
+            <div id="labelTitle">Message</div>
+        </div>
     </div>
     <div id="envelopeContainer">
         <div id="iconContainer" class="iconContainer">

diff --git a/tools/spatialAnalytics/index.js b/tools/spatialAnalytics/index.js
@@ -1,10 +1,13 @@
 /* global Envelope, SpatialInterface, isDesktop */
+const MINIMIZED_TOOL_WIDTH = 1200;
+const MINIMIZED_TOOL_HEIGHT = 600;
 
 let spatialInterface;
 
 let startTime = Date.now(); // 1675809876408 - 20
 let endTime = -1; // 1675809963335 + 3 * 60 * 60 * 1000;
 let data = {
+    title: '',
     regionCards: [],
     videoUrls: null,
 };
@@ -14,7 +17,7 @@ if (!spatialInterface) {
     spatialInterface = new SpatialInterface();
 }
 
-const launchButton = document.getElementById('launchButton');
+const launchButton = document.getElementById('layout');
 launchButton.addEventListener('pointerup', function () {
     envelope.open();
 }, false);
@@ -86,6 +89,15 @@ recordingIcon.addEventListener('pointerup', function() {
         });
         writePublicData();
 
+        if (!data.title) {
+            const dateTimeFormat = new Intl.DateTimeFormat('default', {
+                timeStyle: 'short',
+                hour12: false,
+            });
+            data.title = 'Study ' + dateTimeFormat.format(new Date());
+            setLabelTitle(data.title);
+        }
+
         spatialInterface.startVirtualizerRecording();
         break;
     case RecordingState.recording:
@@ -237,33 +249,6 @@ spatialInterface.onSpatialInterfaceLoaded(function() {
             } else {
                 setRecordingState(RecordingState.done);
             }
-            if (status.summary) {
-                const container = document.createElement('div');
-                container.id = 'summaryContainer';
-                // TODO if the socket io connection is compromised then this is
-                // compromised too
-                container.innerHTML = status.summary;
-                launchButton.appendChild(container);
-                launchButton.style.width = '2400px';
-                launchButton.style.height = '1600px';
-                spatialInterface.changeFrameSize(2400, 1600);
-                const card = container.querySelector('.analytics-region-card');
-                card.setAttribute('style', '');
-                // card.classList.add('minimized');
-                // card.addEventListener('pointermove', () => { // should be `over`
-                //     card.classList.remove('minimized');
-                // });
-                // card.addEventListener('pointerout', () => {
-                //     card.classList.add('minimized');
-                // });
-                let pin = container.querySelector('.analytics-region-card-pin');
-                pin.parentNode.removeChild(pin);
-                let enter = container.querySelector('.analytics-region-card-enter');
-                enter.parentNode.removeChild(enter);
-
-                const launchIcon = document.getElementById('launchIcon');
-                launchIcon.parentNode.removeChild(launchIcon);
-            }
         }
     });
 
@@ -272,6 +257,9 @@ spatialInterface.onSpatialInterfaceLoaded(function() {
         if (data.regionCards.length > 0) {
             spatialInterface.analyticsHydrate(analyticsData);
         }
+        if (data.title) {
+            setLabelTitle(data.title);
+        }
     });
     spatialInterface.addReadPublicDataListener('storage', 'cards', migrateCardData);
 });
@@ -287,3 +275,32 @@ function migrateCardData(cards) {
     spatialInterface.writePublicData('storage', 'cards', null);
     spatialInterface.analyticsHydrate(data);
 }
+
+function calculateFontSize(stringLength, pixelWidth) {
+    return (pixelWidth / stringLength * 2);
+}
+
+function setLabelTitle(titleText) {
+    let labelTitle = document.getElementById('labelTitle');
+    let label = document.getElementById('label');
+
+    labelTitle.innerText = titleText;
+    if (titleText && titleText.length > 0) {
+        label.classList.remove('noTitle');
+    }
+
+    let labelFontSize = 100;
+    if (titleText.length > 6) {
+        let labelWidth = label.getBoundingClientRect().width || MINIMIZED_TOOL_WIDTH;
+        labelFontSize = calculateFontSize(titleText.length,  labelWidth - 180);
+        labelFontSize = Math.max(40, Math.min(100, labelFontSize));
+    }
+    if (titleText.length > 20) {
+        labelTitle.classList.add('longTitle');
+    } else {
+        labelTitle.classList.remove('longTitle');
+    }
+    labelTitle.style.fontSize = `${labelFontSize}px`;
+}
+
+spatialInterface.changeFrameSize(MINIMIZED_TOOL_WIDTH, MINIMIZED_TOOL_HEIGHT);