From 82e704e2ea49e38ec2c5ea31a4ad8bacee657dd0 Mon Sep 17 00:00:00 2001 From: Alexander Goryushkin Date: Fri, 15 Mar 2024 12:02:33 -0300 Subject: [PATCH] load from url encoded streetmix json --- src/index.js | 78 +++++++++++++++++++++++++++---------------- src/json-utils_1.1.js | 45 +++++++++++++++++-------- 2 files changed, 81 insertions(+), 42 deletions(-) diff --git a/src/index.js b/src/index.js index e89b54ee6..f4b5dc256 100644 --- a/src/index.js +++ b/src/index.js @@ -67,7 +67,44 @@ 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; + + // convert units of measurement if necessary + const streetData = streetmixUtils.convertStreetValues(streetmixResponseObject.data.street); + const streetmixSegments = streetData.segments; + + const streetmixName = streetmixResponseObject.name; + console.log('streetmixName', streetmixName); + //el.setAttribute('streetmix-loader', 'name', streetmixName); + + let currentSceneTitle; + if (AFRAME.scenes[0] && AFRAME.scenes[0].getAttribute('metadata')) { + 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); + } + + el.setAttribute('data-layer-name', 'Streetmix • ' + streetmixName); + + if (data.showBuildings) { + el.setAttribute('street', 'right', streetData.rightBuildingVariant); + el.setAttribute('street', 'left', streetData.leftBuildingVariant); + } + el.setAttribute('street', 'type', 'streetmixSegmentsMetric'); + // set JSON attribute last or it messes things up + el.setAttribute('street', 'JSON', JSON.stringify({ streetmixSegmentsMetric: 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: @@ -75,6 +112,13 @@ AFRAME.registerComponent('streetmix-loader', { 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.') @@ -95,39 +139,17 @@ AFRAME.registerComponent('streetmix-loader', { var request = new XMLHttpRequest(); console.log('[streetmix-loader]', 'GET ' + data.streetmixAPIURL); + + // for using inside request callback function + const loadFromJSON = this.loadFromJSON.bind(this); request.open('GET', data.streetmixAPIURL, true); request.onload = function () { if (this.status >= 200 && this.status < 400) { // Connection success const streetmixResponseObject = JSON.parse(this.response); - // convert units of measurement if necessary - const streetData = streetmixUtils.convertStreetValues(streetmixResponseObject.data.street); - const streetmixSegments = streetData.segments; - - const streetmixName = streetmixResponseObject.name; - console.log('streetmixName', streetmixName); - el.setAttribute('streetmix-loader', 'name', streetmixName); - - let currentSceneTitle; - if (AFRAME.scenes[0] && AFRAME.scenes[0].getAttribute('metadata')) { - 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); - } - - el.setAttribute('data-layer-name', 'Streetmix • ' + streetmixName); - - if (data.showBuildings) { - el.setAttribute('street', 'right', streetData.rightBuildingVariant); - el.setAttribute('street', 'left', streetData.leftBuildingVariant); - } - el.setAttribute('street', 'type', 'streetmixSegmentsMetric'); - // set JSON attribute last or it messes things up - el.setAttribute('street', 'JSON', JSON.stringify({ streetmixSegmentsMetric: streetmixSegments })); - el.emit('streetmix-loader-street-loaded'); + + 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'); diff --git a/src/json-utils_1.1.js b/src/json-utils_1.1.js index f4af4e3dd..28f52adac 100644 --- a/src/json-utils_1.1.js +++ b/src/json-utils_1.1.js @@ -536,6 +536,13 @@ 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( @@ -551,27 +558,37 @@ AFRAME.registerComponent('set-loader-from-hash', { // } } }, + // parse JSON street data from string and create Street elements + createStreetFromJSONData: function (stringJSONData, successMessage) { + // remove 'set-loader-from-hash' component from json data + const jsonData = JSON.parse(stringJSONData, (key, value) => + key === 'set-loader-from-hash' ? undefined : value + ); + + console.log( + '[set-loader-from-hash]', + successMessage + ); + STREET.utils.createElementsFromJSON(jsonData); + const sceneId = getUUIDFromPath(requestURL); + if (sceneId) { + console.log('sceneId from fetchJSON from url hash loader', sceneId); + AFRAME.scenes[0].setAttribute('metadata', 'sceneId', sceneId); + } + }, fetchJSON: function (requestURL) { const request = new XMLHttpRequest(); request.open('GET', requestURL, true); + + const createStreetFromJSONData = this.createStreetFromJSONData; + request.onload = function () { if (this.status >= 200 && this.status < 400) { // Connection success - // remove 'set-loader-from-hash' component from json data - const jsonData = JSON.parse(this.response, (key, value) => - key === 'set-loader-from-hash' ? undefined : value - ); + const successMessage = + '200 response received and JSON parsed, now createElementsFromJSON'; + createStreetFromJSONData(this.response, successMessage); - console.log( - '[set-loader-from-hash]', - '200 response received and JSON parsed, now createElementsFromJSON' - ); - STREET.utils.createElementsFromJSON(jsonData); - const sceneId = getUUIDFromPath(requestURL); - if (sceneId) { - console.log('sceneId from fetchJSON from url hash loader', sceneId); - AFRAME.scenes[0].setAttribute('metadata', 'sceneId', sceneId); - } } else if (this.status === 404) { console.error( '[set-loader-from-hash] Error trying to load scene: Resource not found.'