[WIP] Search scenes

app.html

@@ -611,6 +611,7 @@
   interfaceHtml,
   labelHtml,
   searchSitesJson,
+  searchScenesJson,
   keyboardHighlightCanvasCtx,
   keyMap,
   fontJson,
@@ -668,6 +669,31 @@
           }
         };
       }),
+    fetch('scenes.json')
+      .then(res => res.json())
+      .then(scenesJson => {
+        return s => {
+          const maxResults = 9;
+          if (s) {
+            const regexps = s.split(/\s/).filter(s => !!s).map(s => new RegExp(escapeRegExp(s), 'i'));
+            const sceneResults = [];
+            for (let i = 0; i < scenesJson.length; i++) {
+              const site = scenesJson[i];
+              if (regexps.some(regexp => regexp.test(site.label) || regexp.test(site.url))) {
+                sceneResults.push(site);
+                if (sceneResults.length >= maxResults) {
+                  break;
+                }
+              }
+            }
+            console.log("scenes.json --- sceneResults = " + sceneResults);
+            return sceneResults;
+          } else {
+            console.log("scenes.json --- maxResults = " + maxResults);
+            return scenesJson.slice(0, maxResults);
+          }
+        };
+      }),
     new Promise((accept, reject) => {
       const img = new Image();
       img.crossOrigin = 'Anonymous';
@@ -3276,14 +3302,19 @@
     }
   };
 
-  const searchResults = searchSitesJson(searchString);
+  if (selectedTab === 1) {
+    var searchResults = searchSitesJson(searchString);
+  } else if (selectedTab === 2) {
+    var sceneResults = searchScenesJson(searchString);
+  }
 
   uiIframe.contentWindow.postMessage({
     method: 'render',
     id: ++renderIds,
     htmlString: interfaceHtml,
     templateData: {
       searchResults,
+      sceneResults,
       tab1: selectedTab === 1,
       tab2: selectedTab === 2,
       tab3: selectedTab === 3,
@@ -3372,28 +3403,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);
     }
   };
-  _updateMeasures();
+  _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);
+    }
+  };
+  _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);
@@ -3403,7 +3448,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);
       }
     }
 
@@ -3415,7 +3474,11 @@
   let selectedChannel = 1;
   let anchors = [];
   const _updateTextureDynamic = async () => {
-    const result = await _renderUi(text, selectedTab, selectedChannel);
+    if (selectedTab === 1){
+      var result = await _renderUi(text, selectedTab, selectedChannel);
+    } else if (selectedTab === 2){
+      var result = await _renderUi(sceneText, selectedTab, selectedChannel);
+    }
     if (result.data) {
       ctx.putImageData(new ImageData(new Uint8ClampedArray(result.data.buffer, result.data.byteOffset, result.data.byteLength), uiSize, uiSize), 0, 0);
     }
@@ -3601,7 +3664,7 @@
   mesh.click = async (intersectionSpec, controllerIndex) => {
     keyboardFocus = null;
 
-    const {id, href, name} = intersectionSpec;
+    const {id, href, name, url} = intersectionSpec;
     if (id === 'url-input') {
       const {x, y} = intersectionSpec;
 
@@ -3612,7 +3675,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') {
@@ -3625,6 +3699,23 @@
       while (root.firstChild) {
         root.removeChild(root.firstChild);
       }
+    } else if (id === 'action-upload-scene') {
+      const s = root.getHTML();
+      var data = {
+          id: 0,
+          label: "Scene 9",
+          content: s
+        }
+      var jsonData = JSON.stringify(data);
+
+      function download(content, fileName, contentType) {
+          var a = document.createElement("a");
+          var file = new Blob([content], {type: contentType});
+          a.href = URL.createObjectURL(file);
+          a.download = fileName;
+          a.click();
+      }
+      download(jsonData, 'json.txt', 'text/plain');
     } else if (id === 'action-copy-scene') {
       const s = root.getHTML();
       console.log('copy', s);
@@ -3652,6 +3743,49 @@
       _setChannel(2);
     } else if (id === 'channel-global') {
       _setChannel(3);
+    } else if (id === 'action-open-scene') {
+      // let url = 'https://api.myjson.com/bins/bdd2t';
+
+      fetch('scenes.json')
+      .then(res => res.json())
+      .then((out) => {
+        console.log("out = " + JSON.stringify(out));
+        var data = JSON.parse(JSON.stringify(out));
+        console.log("data = " + JSON.parse(JSON.stringify(out)));
+        console.log("data.content = " + data[0].content);
+        const dom = new DOMParser().parseFromString(data[0].content, 'text/html');
+        if (dom.body.childNodes.length === 1 && dom.body.childNodes[0].nodeName === 'XR-SITE') {
+          root.innerHTML = dom.body.childNodes[0].innerHTML;
+        } else {
+          console.log('json fail');
+        }
+      })
+      .catch(err => { throw err });
+    } else if (id === 'action-load-scene') {
+      window.parentPostMessage({
+        method: 'loadScene',
+      });
+    } else if (id === 'action-save-scene') {
+      window.parentPostMessage({
+        method: 'saveScene',
+        html: root.outerHTML,
+      });
+    } else if (id === 'action-open-scene') {
+      const dom = new DOMParser().parseFromString(url, 'text/html');
+      if (dom.body.childNodes.length === 1 && dom.body.childNodes[0].nodeName === 'XR-SITE') {
+        root.innerHTML = dom.body.childNodes[0].innerHTML;
+      } else {
+        console.log('paste fail');
+      }
+    } else if (id === 'action-load-scene') {
+      window.parentPostMessage({
+        method: 'loadScene',
+      });
+    } else if (id === 'action-save-scene') {
+      window.parentPostMessage({
+        method: 'saveScene',
+        html: root.outerHTML,
+      });
     } else if (href) {
       const xrIframe = document.createElement('xr-iframe');
       xrIframe.src = href;
@@ -3702,15 +3836,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;
@@ -3868,7 +4027,9 @@
 
     return object;
   })();
-  mesh.add(keyboardMesh);
+  if (fakeXrDisplay) {
+    mesh.add(keyboardMesh);
+  }
 
   const appIconMeshes = new THREE.Object3D();
   scene.add(appIconMeshes);
@@ -6225,7 +6386,7 @@
     console.warn(err.stack);
   });
 };
-_loadDefaultGltf();
+// _loadDefaultGltf();
 
 function _updateCoord() {
   const {c} = parseQuery(window.location.search);

interface.html

@@ -69,7 +69,7 @@
   align-items: stretch;
   /* box-shadow: 3px 0 3px rgba(0,0,0,0.05); */
 }
-.url-input {
+.url-input, .scene-input {
   margin: 40px;
   padding: 40px;
   background-color: #f2f3f5;
@@ -352,6 +352,16 @@ <h3>New scene</h3>
               <p>Clear your scene</p>
             </div>
           </a>
+          <a id=action-upload-scene class=action>
+            <div class=border></div>
+            <div class=icon>
+              <i class="fal fa-upload"></i>
+            </div>
+            <div class=wrap>
+              <h3>Upload scene</h3>
+              <p>Share your scene</p>
+            </div>
+          </a>
           <br/>
           <a id=action-copy-scene class=action>
             <div class=border></div>
@@ -429,6 +439,22 @@ <h3>Universe</h3>
           </a>
         </section>
       </div>
+      <input type=text class=scene-input id=scene-input>
+      <div class=results>
+        <ul>
+          {{#sceneResults}}
+          <li>
+            <a id=action-open-scene name="{{{label}}}">
+              <img src="{{{icon}}}">
+              <div class=wrap>
+                <h3>{{label}}</h3>
+                <p></p>
+              </div>
+            </a>
+          </li>
+          {{/sceneResults}}
+        </ul>
+      </div>
       {{/tab2}}
       {{#tab3}}
       <div class=playlist>