Skip to content

Commit

Permalink
moving more things from index.html into json-utils.js
Browse files Browse the repository at this point in the history
  • Loading branch information
@kfarr
kfarr committed Sep 11, 2023
1 parent 932b0c0 commit 458d561
Show file tree
Hide file tree
Showing 2 changed files with 151 additions and 141 deletions.
145 changes: 4 additions & 141 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,10 @@
</a-scene>
</body>
<script>

document.getElementById('inputfile')
.addEventListener('change', fileJSON);

// only show VR button if headset connected
AFRAME.registerComponent('vr-mode-ui-if-headset', {
dependencies: ['vr-mode-ui'],
Expand All @@ -85,62 +89,6 @@
}
})

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 buttonScreenshotTock() {
const screenshotEl = document.getElementById('screenshot');
screenshotEl.play(); // double check playing in case we're in editor mode
Expand All @@ -162,90 +110,5 @@
}
});

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; });
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 = '<a-entity street streetmix-loader="streetmixStreetURL: '+streetmixURL+'""></a-entity>';
}

// 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')
}

function inputJSON() {
const stringJSON = prompt("Please paste 3DStreet JSON string");
if (stringJSON) {
createElementsFromJSON(stringJSON);
}
}

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]);
}

document.getElementById('inputfile')
.addEventListener('change', fileJSON);
</script>
</html>
147 changes: 147 additions & 0 deletions src/json-utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = '<a-entity street streetmix-loader="streetmixStreetURL: '+streetmixURL+'""></a-entity>';
}

// 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]);
}

0 comments on commit 458d561

Please sign in to comment.