add scenes search to app.html

Author: vyrnix9582046173

app.html

@@ -604,6 +604,7 @@
   interfaceHtml,
   labelHtml,
   searchSitesJson,
+  searchScenesJson,
   keyboardHighlightCanvasCtx,
   keyMap,
   fontJson,
@@ -661,6 +662,30 @@
           }
         };
       }),
+    fetch('scenes.json')
+      .then(res => res.json())
+      .then(scenesJson => {
+        return s => {
+          console.log("scenes.json");
+          const maxResults = 12;
+          if (s) {
+            const regexps = s.split(/\s/).filter(s => !!s).map(s => new RegExp(escapeRegExp(s), 'i'));
+            const results = [];
+            for (let i = 0; i < scenesJson.length; i++) {
+              const site = scenesJson[i];
+              if (regexps.some(regexp => regexp.test(site.label) || regexp.test(site.url))) {
+                results.push(site);
+                if (results.length >= maxResults) {
+                  break;
+                }
+              }
+            }
+            return results;
+          } else {
+            return scenesJson.slice(0, maxResults);
+          }
+        };
+      }),
     new Promise((accept, reject) => {
       const img = new Image();
       img.crossOrigin = 'Anonymous';
@@ -3257,7 +3282,12 @@
     }
   };
 
-  const searchResults = searchSitesJson(searchString);
+  console.log(" ------ selectedTab = " + selectedTab);
+  if (selectedTab === 1) {
+    var searchResults = searchSitesJson(searchString);
+  } else if (selectedTab === 2) {
+    var searchResults = searchScenesJson(searchString);
+  }
 
   uiIframe.contentWindow.postMessage({
     method: 'render',
@@ -3350,28 +3380,42 @@
 
   let items = [];
   let text = 'https://';
-  const measures = [];
-  let cursor = text.length;
+  let sceneText = '';
+  const urlMeasures = [];
+  const sceneMeasures = [];
+  let urlCursor = text.length;
+  let sceneCursor = sceneText.length;
   const canvas = document.createElement('canvas');
   canvas.width = uiSize;
   canvas.height = uiSize;
   const ctx = canvas.getContext('2d');
   ctx.font = '300 80px Open Sans';
-  const _updateMeasures = () => {
-    measures.length = 0;
-    measures.push(0);
+  const _updateUrlMeasures = () => {
+    urlMeasures.length = 0;
+    urlMeasures.push(0);
     const {width: barWidth} = ctx.measureText('[');
     for (let i = 1; i <= text.length; i++) {
       const {width} = ctx.measureText('[' + text.slice(0, i) + ']');
-      measures.push(width - barWidth*2);
+      urlMeasures.push(width - barWidth*2);
+    }
+  };
+  _updateUrlMeasures();
+  const _updateSceneMeasures = () => {
+    sceneMeasures.length = 0;
+    sceneMeasures.push(0);
+    const {width: barWidth} = ctx.measureText('[');
+    for (let i = 1; i <= sceneText.length; i++) {
+      const {width} = ctx.measureText('[' + sceneText.slice(0, i) + ']');
+      sceneMeasures.push(width - barWidth*2);
     }
   };
-  _updateMeasures();
+  _updateSceneMeasures();
 
   const urlInputPadding = [40, 53];
+  const sceneInputPadding = [40, 53];
   const _updateTextureStatic = () => {
-    const urlInputAnchor = anchors.find(anchor => anchor.id === 'url-input');
 
+    const urlInputAnchor = anchors.find(anchor => anchor.id === 'url-input');
     if (urlInputAnchor) {
       ctx.fillStyle = '#f2f3f5';
       ctx.fillRect(urlInputAnchor.x + urlInputPadding[0] - 4, urlInputAnchor.y + urlInputAnchor.height*0.2, urlInputAnchor.width - urlInputPadding[0]*2 + 4, urlInputAnchor.height*0.6);
@@ -3381,7 +3425,21 @@
       ctx.fillText(text, urlInputAnchor.x + urlInputPadding[0], urlInputAnchor.bottom - urlInputPadding[1]);
 
       if (keyboardFocus) {
-        ctx.fillRect(urlInputAnchor.x + urlInputPadding[0] + measures[cursor] - 4, urlInputAnchor.y + urlInputAnchor.height*0.2, 6, urlInputAnchor.height*0.6);
+        ctx.fillRect(urlInputAnchor.x + urlInputPadding[0] + urlMeasures[urlCursor] - 4, urlInputAnchor.y + urlInputAnchor.height*0.2, 6, urlInputAnchor.height*0.6);
+      }
+    }
+
+    const sceneInputAnchor = anchors.find(anchor => anchor.id === 'scene-input');
+    if (sceneInputAnchor) {
+      ctx.fillStyle = '#f2f3f5';
+      ctx.fillRect(sceneInputAnchor.x + sceneInputPadding[0] - 4, sceneInputAnchor.y + sceneInputAnchor.height*0.2, sceneInputAnchor.width - sceneInputPadding[0]*2 + 4, sceneInputAnchor.height*0.6);
+
+      ctx.fillStyle = 'black';
+      ctx.textBaseline = 'bottom';
+      ctx.fillText(sceneText, sceneInputAnchor.x + sceneInputPadding[0], sceneInputAnchor.bottom - sceneInputPadding[1]);
+
+      if (keyboardFocus) {
+        ctx.fillRect(sceneInputAnchor.x + sceneInputPadding[0] + sceneMeasures[sceneCursor] - 4, sceneInputAnchor.y + sceneInputAnchor.height*0.2, 6, sceneInputAnchor.height*0.6);
       }
     }
 
@@ -3585,7 +3643,18 @@
 
       const urlInputAnchor = anchors.find(anchor => anchor.id === 'url-input');
       const xOffset = x - urlInputAnchor.x - urlInputPadding[0];
-      cursor = measures.map((measure, index) => [Math.abs(xOffset - measure), index]).sort((a, b) => a[0] - b[0])[0][1];
+      urlCursor = urlMeasures.map((measure, index) => [Math.abs(xOffset - measure), index]).sort((a, b) => a[0] - b[0])[0][1];
+    } else if (id === 'scene-input') {
+      const {x, y} = intersectionSpec;
+
+      keyboardFocus = {
+        textMesh: mesh,
+        caretMesh: mesh,
+      };
+
+      const sceneInputAnchor = anchors.find(anchor => anchor.id === 'scene-input');
+      const xOffset = x - sceneInputAnchor.x - sceneInputPadding[0];
+      sceneCursor = sceneMeasures.map((measure, index) => [Math.abs(xOffset - measure), index]).sort((a, b) => a[0] - b[0])[0][1];
     } else if (id === 'tab-1') {
       _selectTab(1);
     } else if (id === 'tab-2') {
@@ -3662,15 +3731,40 @@
     } */
   };
 
-  mesh.getText = () => text;
+  mesh.getText = () => {
+    if (selectedTab === 1){
+      return text;
+    } else if (selectedTab === 2) {
+      return sceneText;
+    }
+  }
   mesh.setText = newText => {
-    text = newText;
-    _updateMeasures();
+    if (selectedTab === 1){
+      text = newText;
+      _updateUrlMeasures();
+    } else if (selectedTab === 2) {
+      sceneText = newText;
+      _updateSceneMeasures();
+    }
     _updateTextureDynamic();
   };
-  mesh.getValue = () => cursor;
+  mesh.getValue = () => {
+    if (selectedTab === 1){
+      console.log("getValue of urlCursor = " + urlCursor);
+      return urlCursor;
+    } else if (selectedTab === 2) {
+      console.log("getValue of sceneCursor = " + sceneCursor);
+      return sceneCursor;
+    }
+  };
   mesh.setValue = newValue => {
-    cursor = newValue;
+    if (selectedTab === 1){
+      urlCursor = newValue;
+      console.log("set urlCursor = " + newValue);
+    } else if (selectedTab === 2) {
+      sceneCursor = newValue;
+      console.log("set sceneCursor = " + newValue);
+    }
     _updateTextureStatic();
   };
   mesh.refresh = _updateTextureStatic;
@@ -3828,7 +3922,9 @@
 
     return object;
   })();
-  mesh.add(keyboardMesh);
+  if (fakeXrDisplay) {
+    mesh.add(keyboardMesh);
+  }
 
   const appIconMeshes = new THREE.Object3D();
   scene.add(appIconMeshes);