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..a13417bbf 100644 --- a/src/json-utils_1.1.js +++ b/src/json-utils_1.1.js @@ -536,6 +536,18 @@ 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 if (streetURL.startsWith('3dstreet-json:')){ + + const JSONString = decodeURIComponent(streetURL.split('3dstreet-json:')[1]); + console.log(JSONString) + this.createStreetFromJSONData(JSONString); } else { // try to load JSON file from remote resource console.log( @@ -551,22 +563,31 @@ 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); + }, 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 - ); - - console.log( - '[set-loader-from-hash]', - '200 response received and JSON parsed, now createElementsFromJSON' - ); - STREET.utils.createElementsFromJSON(jsonData); + const successMessage = + '200 response received and JSON parsed, now createElementsFromJSON'; + createStreetFromJSONData(this.response, successMessage); const sceneId = getUUIDFromPath(requestURL); if (sceneId) { console.log('sceneId from fetchJSON from url hash loader', sceneId);