From da6870b065e720ef6c412ecb73811b9a001937bf Mon Sep 17 00:00:00 2001 From: Kieran Farr Date: Sat, 9 Sep 2023 21:03:39 -0700 Subject: [PATCH 1/4] streetmix-loader set metadata sceneTitle if none --- src/index.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/index.js b/src/index.js index 9d71b3110..48273d37d 100644 --- a/src/index.js +++ b/src/index.js @@ -88,6 +88,12 @@ AFRAME.registerComponent('streetmix-loader', { const streetmixSegments = streetmixResponseObject.data.street.segments; const streetmixName = streetmixResponseObject.name; el.setAttribute('streetmix-loader', 'name', streetmixName); + + let currentSceneTitle = AFRAME.scenes[0].getAttribute('metadata', 'sceneTitle'); + if (!currentSceneTitle) { // only set title from streetmix if none exists + AFRAME.scenes[0].setAttribute('metadata', 'sceneTitle', streetmixName); + } + if (data.showBuildings) { el.setAttribute('street', 'right', streetmixResponseObject.data.street.rightBuildingVariant); el.setAttribute('street', 'left', streetmixResponseObject.data.street.leftBuildingVariant); From 932b0c0106c9d5b77b96da90b5094878d885eb59 Mon Sep 17 00:00:00 2001 From: Kieran Farr Date: Sat, 9 Sep 2023 22:30:14 -0700 Subject: [PATCH 2/4] set scene name from json, sceneid from path --- index.html | 54 ++++++++++++++++++++++++++++++++++++++++++++++++---- src/index.js | 6 ++++-- 2 files changed, 54 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 140e0e480..15e7e1ba1 100644 --- a/index.html +++ b/index.html @@ -46,6 +46,7 @@ renderer="colorManagement: true; physicallyCorrectLights: true;" inspector="url: //3dstreet.app/dist/3dstreet-editor.js" notify + metadata > @@ -109,6 +110,11 @@ // } }, fetchJSON: function (requestURL) { + let sceneId = getUUIDFromPath(requestURL); + if (sceneId) { + console.log('sceneId from fetchJSON from url hash loader', sceneId); + AFRAME.scenes[0].setAttribute('metadata', 'sceneId', sceneId); + } const request = new XMLHttpRequest(); request.open('GET', requestURL, true); request.onload = function () { @@ -120,6 +126,11 @@ console.log('[set-loader-from-hash]', '200 response received and JSON parsed, now createElementsFromJSON'); createElementsFromJSON(jsonData); + let sceneId = getUUIDFromPath(requestURL); + if (sceneId) { + console.log('sceneId from fetchJSON from url hash loader', sceneId); + AFRAME.scenes[0].setAttribute('metadata', 'sceneId', sceneId); + } } }; request.onerror = function () { @@ -142,11 +153,36 @@ sceneEl.components.inspector.openInspector(); document.querySelector('.viewer-header-wrapper').style.display = 'none'; } - // uncomment the below to autostart the editor within 2 seconds of page load - // setTimeout(() => { - // startEditor(); - // }, "2000") + AFRAME.registerComponent('timed-inspector', { + init: function() { + setTimeout( function () { + window.postMessage('INJECT_AFRAME_INSPECTOR') + }, this.data * 1000) + } + }); + + AFRAME.registerComponent('metadata', { + schema: { + sceneTitle: {default: ''}, + sceneId: {default: ''} + }, + init: function() { + } + }) + + function getUUIDFromPath(path) { + // UUID regex pattern: [0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12} + const uuidPattern = /[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}/; + + const match = path.match(uuidPattern); + if (match) { + return match[0]; + } + + return null; // return null or whatever default value you prefer if no UUID found + } + function inputStreetmix() { streetmixURL = prompt("Please enter a Streetmix URL", "https://streetmix.net/kfarr/3/example-street"); setTimeout(function() { window.location.hash = streetmixURL; }); @@ -154,6 +190,8 @@ while (streetContainerEl.firstChild) { streetContainerEl.removeChild(streetContainerEl.lastChild); } + AFRAME.scenes[0].setAttribute('metadata', 'sceneId', ''); + AFRAME.scenes[0].setAttribute('metadata', 'sceneTitle', ''); streetContainerEl.innerHTML = ''; } @@ -175,6 +213,12 @@ streetObject = streetJSON; } + let sceneTitle = streetObject.title; + if (sceneTitle) { + console.log('sceneTitle from createElementsFromJSON', sceneTitle); + AFRAME.scenes[0].setAttribute('metadata', 'sceneTitle', sceneTitle); + } + streetContainerEl = document.getElementById('street-container'); while (streetContainerEl.firstChild) { streetContainerEl.removeChild(streetContainerEl.lastChild); @@ -194,6 +238,8 @@ function fileJSON() { let reader=new FileReader(); reader.onload=function(){ + AFRAME.scenes[0].setAttribute('metadata', 'sceneId', ''); + AFRAME.scenes[0].setAttribute('metadata', 'sceneTitle', ''); createElementsFromJSON(reader.result); } reader.readAsText(this.files[0]); diff --git a/src/index.js b/src/index.js index 48273d37d..d843b420b 100644 --- a/src/index.js +++ b/src/index.js @@ -87,11 +87,13 @@ AFRAME.registerComponent('streetmix-loader', { 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); - let currentSceneTitle = AFRAME.scenes[0].getAttribute('metadata', 'sceneTitle'); + let currentSceneTitle = AFRAME.scenes[0].getAttribute('metadata').sceneTitle; if (!currentSceneTitle) { // only set title from streetmix if none exists - AFRAME.scenes[0].setAttribute('metadata', 'sceneTitle', streetmixName); + AFRAME.scenes[0].setAttribute('metadata', 'sceneTitle', streetmixName); + console.log('therefore setting metadata sceneTitle as streetmixName', streetmixName) } if (data.showBuildings) { From 458d561b0736d3b50e28bdeee10a96faaa9f131c Mon Sep 17 00:00:00 2001 From: Kieran Farr Date: Sun, 10 Sep 2023 20:32:38 -0700 Subject: [PATCH 3/4] moving more things from index.html into json-utils.js --- index.html | 145 ++------------------------------------------- src/json-utils.js | 147 ++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 151 insertions(+), 141 deletions(-) diff --git a/index.html b/index.html index 15e7e1ba1..30a3c6ba0 100644 --- a/index.html +++ b/index.html @@ -75,6 +75,10 @@ diff --git a/src/json-utils.js b/src/json-utils.js index 76b6c53fa..943a9600f 100644 --- a/src/json-utils.js +++ b/src/json-utils.js @@ -368,3 +368,150 @@ function createEntityFromObj (entityData, parentEl) { } } } + +/* + Code imported from index.html, mix of save load utils and some ui functions +*/ + + +AFRAME.registerComponent('metadata', { + schema: { + sceneTitle: {default: ''}, + sceneId: {default: ''} + }, + init: function() { + } +}) + +AFRAME.registerComponent('set-loader-from-hash', { + dependencies: ['streetmix-loader'], + schema: { + defaultURL: { type: 'string' } + }, + init: function () { + // get hash from window + const streetURL = window.location.hash.substring(1); + if (!streetURL) { + return; + } + if (streetURL.includes('//streetmix.net')) { + console.log('[set-loader-from-hash]','Set streetmix-loader streetmixStreetURL to', streetURL) + this.el.setAttribute('streetmix-loader', 'streetmixStreetURL', streetURL); + } else { + // try to load JSON file from remote resource + console.log('[set-loader-from-hash]','Load 3DStreet scene with fetchJSON from', streetURL) + this.fetchJSON(streetURL); + } + // else { + // console.log('[set-loader-from-hash]','Using default URL', this.data.defaultURL) + // this.el.setAttribute('streetmix-loader', 'streetmixStreetURL', this.data.defaultURL); + // } + }, + fetchJSON: function (requestURL) { + let sceneId = getUUIDFromPath(requestURL); + if (sceneId) { + console.log('sceneId from fetchJSON from url hash loader', sceneId); + AFRAME.scenes[0].setAttribute('metadata', 'sceneId', sceneId); + } + const request = new XMLHttpRequest(); + request.open('GET', requestURL, true); + 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'); + createElementsFromJSON(jsonData); + let sceneId = getUUIDFromPath(requestURL); + if (sceneId) { + console.log('sceneId from fetchJSON from url hash loader', sceneId); + AFRAME.scenes[0].setAttribute('metadata', 'sceneId', sceneId); + } + } + }; + request.onerror = function () { + // There was a connection error of some sort + console.log('Loading Error: There was a connection error during JSON loading'); + }; + request.send(); + } +}); + +function getUUIDFromPath(path) { + // UUID regex pattern: [0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12} + const uuidPattern = /[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}/; + + const match = path.match(uuidPattern); + if (match) { + return match[0]; + } + + return null; // return null or whatever default value you prefer if no UUID found +} + +// this use os text input prompt, delete current scene, then load streetmix file +function inputStreetmix() { + streetmixURL = prompt("Please enter a Streetmix URL", "https://streetmix.net/kfarr/3/example-street"); + setTimeout(function() { window.location.hash = streetmixURL; }); + streetContainerEl = document.getElementById('street-container'); + while (streetContainerEl.firstChild) { + streetContainerEl.removeChild(streetContainerEl.lastChild); + } + AFRAME.scenes[0].setAttribute('metadata', 'sceneId', ''); + AFRAME.scenes[0].setAttribute('metadata', 'sceneTitle', ''); + streetContainerEl.innerHTML = ''; +} + +// JSON loading starts here +function getValidJSON(stringJSON) { + // Preserve newlines, etc. - use valid JSON + // Remove non-printable and other non-valid JSON characters + return stringJSON.replace(/\'/g, "") + .replace(/\n/g, "") + .replace(/[\u0000-\u0019]+/g,""); +} + +function createElementsFromJSON(streetJSON) { + let streetObject = {}; + if (typeof streetJSON == 'string') { + const validJSONString = getValidJSON(streetJSON); + streetObject = JSON.parse(validJSONString); + } else if (typeof streetJSON == 'object') { + streetObject = streetJSON; + } + + let sceneTitle = streetObject.title; + if (sceneTitle) { + console.log('sceneTitle from createElementsFromJSON', sceneTitle); + AFRAME.scenes[0].setAttribute('metadata', 'sceneTitle', sceneTitle); + } + + streetContainerEl = document.getElementById('street-container'); + while (streetContainerEl.firstChild) { + streetContainerEl.removeChild(streetContainerEl.lastChild); + } + + createEntities(streetObject.data, streetContainerEl); + AFRAME.scenes[0].components['notify'].message('Scene loaded from JSON', 'success') +} + +// viewer widget click to paste json string of 3dstreet scene +function inputJSON() { + const stringJSON = prompt("Please paste 3DStreet JSON string"); + if (stringJSON) { + createElementsFromJSON(stringJSON); + } +} + +// handle viewer widget click to open 3dstreet json scene +function fileJSON() { + let reader=new FileReader(); + reader.onload=function(){ + AFRAME.scenes[0].setAttribute('metadata', 'sceneId', ''); + AFRAME.scenes[0].setAttribute('metadata', 'sceneTitle', ''); + createElementsFromJSON(reader.result); + } + reader.readAsText(this.files[0]); +} From 5937130ef3e8a79c1910e0eaafd24e2b091d5dd7 Mon Sep 17 00:00:00 2001 From: Kieran Farr Date: Sun, 10 Sep 2023 21:05:21 -0700 Subject: [PATCH 4/4] increase notyf font size, width, and time on screen https://github.com/3DStreet/3dstreet/issues/333 --- src/components/notify.js | 2 +- src/viewer-styles.css | 8 ++++++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/notify.js b/src/components/notify.js index d6221f4c2..3acdc589d 100644 --- a/src/components/notify.js +++ b/src/components/notify.js @@ -3,7 +3,7 @@ var { Notyf } = require('../lib/notyf.min.js'); AFRAME.registerComponent('notify', { schema: { - duration: { type: 'number', default: 2000 }, + duration: { type: 'number', default: 6000 }, ripple: { type: 'boolean', default: true }, position: { type: 'string', diff --git a/src/viewer-styles.css b/src/viewer-styles.css index 754ad4ce3..0418d02d9 100644 --- a/src/viewer-styles.css +++ b/src/viewer-styles.css @@ -18,6 +18,14 @@ body { margin: 0; } +/* notification hack */ +.notyf__message { font-size: 20px !important; } + +/* notification width hack */ +.notyf__toast { + max-width: 66.66vw !important; /* 2/3rds of viewport width */ + width: auto !important; /* Resetting any specific width, if set */ +} /********* viewer header css *********/