add index-bot page

add loadFromJSON function to streetmix-loader
3DStreet · Sep 26, 2023 · 0c281e5 · 0c281e5
1 parent c2705b5
commit 0c281e5
Show file tree

Hide file tree

Showing 3 changed files with 170 additions and 21 deletions.
diff --git a/index-bot.html b/index-bot.html
@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <!-- aframe -->
+    <script src="https://aframe.io/releases/1.4.2/aframe.min.js"></script>
+
+    <!-- 3dstreet -->
+    <script src="./dist/aframe-street-component.js"></script>
+
+    <!-- mapbox -->
+    <script src="https://github.3dstreet.org/src/lib/aframe-mapbox-component.min.js"></script>
+
+    <!-- save / load -->
+    <script src="./src/json-utils.js"></script>
+
+    <!-- ocean -->
+    <script src="https://github.3dstreet.org/src/components/ocean-plane.js"></script>
+
+    <title>3DStreet</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" type="image/x-icon" href="ui_assets/favicon.ico">
+    <link rel="stylesheet" href="src/viewer-styles.css">
+
+  </head>
+
+  <body>
+
+    <!-- viewer ui start -->
+    <div class="viewer-header-wrapper">
+      <button class="viewer-logo-start-editor-button" onclick="startEditor()">
+        <img class="viewer-logo-img" alt="3DStreet Viewer" src="ui_assets/3DStreet-Viewer-Start-Editor.svg">
+      </button>
+    </div>
+
+    <div class="right-fixed">
+      <ul class="right-menu">
+        <li onclick="buttonScreenshotTock()"> <a class="camera"  href="#"> <span> Capture image as PNG </span> <img src="ui_assets/camera-icon.svg"> </a></li>
+        <li onclick="inputStreetmix()"> <a class="load"  href="#"> <span> Load Streetmix URL </span> <img src="ui_assets/streetmix-logo.svg"> </a></li>
+        <!-- <li onclick="inputJSON()"> <a class="load"  href="#"> <span> Load JSON String </span> <img src="assets/ui_assets/upload-icon.svg"> </a></li> -->
+        <li><a class="load"> <label for="inputfile" style="display: inherit; align-items: center; cursor: pointer"> <input type="file" id="inputfile" style="display:none" accept=".js, .json, .txt"> <span> Load JSON File </span> <img src="ui_assets/upload-icon.svg"></label></a></li>
+        <li> <a id="custom-enter-vr-button" class="vr" href="#"> <span class="vr">Enter VR mode</span> <img src="ui_assets/vr-icon.svg"> </a></li>
+      </ul>
+    </div>
+
+    <a-scene
+      vr-mode-ui="enterVRButton: #custom-enter-vr-button;"
+      vr-mode-ui-if-headset
+      renderer="colorManagement: true; physicallyCorrectLights: true;"
+      inspector="url: //3dstreet.app/dist/3dstreet-editor.js"
+      notify
+      metadata
+      >
+      <a-assets>
+        <!-- uncomment the line below to load assets from local github submodule -->
+        <!-- <street-assets url="./assets/"></street-assets>   -->
+        <!-- uncomment the line below to load all possible asset categories -->
+        <!-- <street-assets categories="sidewalk-props people people-rigged vehicles vehicles-rigged buildings intersection-props segment-textures segment-colors lane-separator stencils vehicles-transit dividers sky grounds"></street-assets>   -->
+        <!-- a reduced set of assets for non-animated streetmix streets without intersections -->
+        <street-assets categories="loud-bicycle sidewalk-props people vehicles vehicles-rigged buildings segment-textures segment-colors lane-separator stencils vehicles-transit dividers sky grounds"></street-assets>
+      </a-assets>
+
+      <a-entity id="cameraRig" position="0 10 30" data-layer-name="Viewer" cursor-teleport="cameraRig: #cameraRig; cameraHead: #camera;" look-controls="reverseMouseDrag: true" wasd-controls="enabled: true">
+        <a-entity id="camera" camera="far: 1000" position="0 1.6 0" ></a-entity>
+        <a-entity id="leftHand" hand-controls="hand: left; handModelStyle: lowPoly; color: #ffccff"></a-entity>
+        <a-entity id="rightHand" hand-controls="hand: right; handModelStyle: lowPoly; color: #ffccff"></a-entity>
+        <a-entity id="screenshot" class="no-pause" screentock visible="false"></a-entity>
+      </a-entity>
+
+      <a-entity id="environment" data-layer-name="Environment" street-environment="preset: day;"></a-entity>
+
+      <a-entity id="street-container" data-layer-name="3D Street Layers" data-layer-show-children>
+        <a-entity id="default-street" street streetmix-loader set-loader-from-hash></a-entity>
+      </a-entity>
+
+      <a-entity id="reference-layers" data-layer-name="Reference Layers" data-layer-show-children>
+
+    </a-scene>
+  </body>
+  <script>
+
+    // --- streetmix-JSON for generate street ---
+/*
+    const streetmixJSON = {{street_json}};
+
+    document.querySelector('a-scene').addEventListener('loaded', function () {
+      AFRAME.scenes[0].setAttribute('streetmix-loader', 'streetmixJSON', streetmixJSON);
+    })
+*/
+    document.getElementById('inputfile')
+            .addEventListener('change', fileJSON);
+
+    // only show VR button if headset connected
+    AFRAME.registerComponent('vr-mode-ui-if-headset', {
+      dependencies: ['vr-mode-ui'],
+      init: function () {
+        if (!AFRAME.utils.device.checkHeadsetConnected()) {
+          this.el.setAttribute('vr-mode-ui', 'enabled', false);
+        }
+      }
+    })
+
+    function buttonScreenshotTock() {
+      const screenshotEl = document.getElementById('screenshot');
+      screenshotEl.play(); // double check playing in case we're in editor mode
+      screenshotEl.setAttribute('screentock', 'type', 'jpg');
+      screenshotEl.setAttribute('screentock', 'takeScreenshot', true);
+    }
+
+    function startEditor() {
+      var sceneEl = document.querySelector('a-scene');
+      sceneEl.components.inspector.openInspector();
+      document.querySelector('.viewer-header-wrapper').style.display = 'none';
+    }
+
+    AFRAME.registerComponent('timed-inspector', {
+      init: function() {
+        setTimeout( function () {
+          window.postMessage('INJECT_AFRAME_INSPECTOR')
+        }, this.data * 1000)
+      }
+    });  
+
+  </script>
+</html>
diff --git a/src/index.js b/src/index.js
@@ -51,14 +51,49 @@ AFRAME.registerComponent('streetmix-loader', {
     streetmixStreetURL: { type: 'string' },
     streetmixAPIURL: { type: 'string' },
     showBuildings: { default: true },
-    name: { default: '' }
+    name: { default: '' },
+    streetmixJSON: { type: 'string', default: '' }
+  },
+  loadFromJSON: function (streetmixResponseObject) {
+    if (!streetmixResponseObject) {
+      console.log("No JSON provided")
+      return;
+    }
+    const data = this.data;
+    const el = this.el;
+    const streetmixSegments = streetmixResponseObject.data.street.segments;
+    const streetmixName = streetmixResponseObject.name;
+    console.log('streetmixName', streetmixName);
+    el.setAttribute('streetmix-loader', 'name', streetmixName);
+
+    const currentSceneTitle = AFRAME.scenes[0].getAttribute('metadata').sceneTitle;
+    if (!currentSceneTitle) { // only set title from streetmix if none exists
+      AFRAME.scenes[0].setAttribute('metadata', 'sceneTitle', streetmixName);
+      console.log('therefore setting metadata sceneTitle as streetmixName', streetmixName);
+    }
+
+    if (data.showBuildings) {
+      el.setAttribute('street', 'right', streetmixResponseObject.data.street.rightBuildingVariant);
+      el.setAttribute('street', 'left', streetmixResponseObject.data.street.leftBuildingVariant);
+    }
+    el.setAttribute('street', 'type', 'streetmixSegmentsFeet');
+    // set JSON attribute last or it messes things up
+    el.setAttribute('street', 'JSON', JSON.stringify({ streetmixSegmentsFeet: streetmixSegments }));
+    el.emit('streetmix-loader-street-loaded');
   },
   update: function (oldData) { // fired at start and at each subsequent change of any schema value
     // This method may fire a few times when viewing a streetmix street in 3dstreet:
     // First to find the proper path, once to actually load the street, and then subsequent updates such as street name
     var data = this.data;
     var el = this.el;
 
+    // load street from provided JSON with streetmix format
+    if (data.streetmixJSON !== '') {
+      this.loadFromJSON(data.streetmixJSON);
+      data.streetmixJSON == '';
+      return;
+    }
+
     // if the loader has run once already, and upon update neither URL has changed, do not take action
     if ((oldData.streetmixStreetURL === data.streetmixStreetURL) && (oldData.streetmixAPIURL === data.streetmixAPIURL)) {
       // console.log('[streetmix-loader]', 'Neither streetmixStreetURL nor streetmixAPIURL have changed in this component data update, not reloading street.')
@@ -85,29 +120,11 @@ AFRAME.registerComponent('streetmix-loader', {
       if (this.status >= 200 && this.status < 400) {
         // Connection success
         const streetmixResponseObject = JSON.parse(this.response);
-        const streetmixSegments = streetmixResponseObject.data.street.segments;
-        const streetmixName = streetmixResponseObject.name;
-        console.log('streetmixName', streetmixName);
-        el.setAttribute('streetmix-loader', 'name', streetmixName);
-
-        const currentSceneTitle = AFRAME.scenes[0].getAttribute('metadata').sceneTitle;
-        if (!currentSceneTitle) { // only set title from streetmix if none exists
-          AFRAME.scenes[0].setAttribute('metadata', 'sceneTitle', streetmixName);
-          console.log('therefore setting metadata sceneTitle as streetmixName', streetmixName);
-        }
-
-        if (data.showBuildings) {
-          el.setAttribute('street', 'right', streetmixResponseObject.data.street.rightBuildingVariant);
-          el.setAttribute('street', 'left', streetmixResponseObject.data.street.leftBuildingVariant);
-        }
-        el.setAttribute('street', 'type', 'streetmixSegmentsFeet');
-        // set JSON attribute last or it messes things up
-        el.setAttribute('street', 'JSON', JSON.stringify({ streetmixSegmentsFeet: streetmixSegments }));
-        el.emit('streetmix-loader-street-loaded');
+        this.loadFromJSON(streetmixResponseObject);
       } else {
         // We reached our target server, but it returned an error
         console.log('[streetmix-loader]', 'Loading Error: We reached the target server, but it returned an error');
-      }
+      }        
     };
     request.onerror = function () {
       // There was a connection error of some sort

diff --git a/src/json-utils.js b/src/json-utils.js
@@ -441,6 +441,14 @@ AFRAME.registerComponent('set-loader-from-hash', {
           'streetmixStreetURL',
           streetURL
         );
+      } else if (streetURL.startsWith('streetmix-json:')){
+
+        const JSONString = decodeURIComponent(streetURL.split('streetmix-json:')[1]);
+        console.log(JSONString)
+        const streetmixJSON = JSON.parse(JSONString);
+        console.log(streetmixJSON);
+        this.el.setAttribute('streetmix-loader', 'streetmixJSON', streetmixJSON);
+
       } else {
         // try to load JSON file from remote resource
         console.log(