Skip to content

Commit

Permalink
fix loading streetmix from prompt
Browse files Browse the repository at this point in the history
  • Loading branch information
@Algorush
Algorush committed Oct 25, 2023
1 parent 3984920 commit e91994a
Show file tree
Hide file tree
Showing 2 changed files with 60 additions and 39 deletions.
14 changes: 13 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
<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="document.querySelector('#default-street').addEventListener('loaded', (evt)=> {evt.target.setAttribute('streetmix-loader', 'inputStreetmix')})"> <a class="load" href="#"> <span> Load Streetmix URL </span> <img src="ui_assets/streetmix-logo.svg"> </a></li>
<li> <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>
Expand Down Expand Up @@ -73,6 +73,18 @@
</body>
<script>

document.querySelector('.load').addEventListener('click', ()=> {
const defaultStreetElem = document.getElementById('default-street');
if (defaultStreetElem) {
const streetmixURL = prompt(
'Please enter a Streetmix URL',
'https://streetmix.net/kfarr/3/example-street'
);
// set inputStreetmix attribute with any value to call input prompt
defaultStreetElem.setAttribute('streetmix-loader', 'inputStreetmix', streetmixURL);
}
});

// only show VR button if headset connected
AFRAME.registerComponent('vr-mode-ui-if-headset', {
dependencies: ['vr-mode-ui'],
Expand Down
85 changes: 47 additions & 38 deletions src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,17 @@ AFRAME.registerSystem('json-3dstreet', {
jsonURL: { type: 'string' }
},
init: function() {},
fileJSON: function () {
// handle viewer widget click to open 3dstreet json scene
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]);

},
loadFromURL: function (fileURL) {
// load JSON file from URL
console.log(fileURL)
Expand Down Expand Up @@ -123,67 +134,49 @@ AFRAME.registerComponent('streetmix-loader', {
showBuildings: { default: true },
name: { default: '' }
},
prepareStreetElements: function() {
createStreetElements: function() {
const streetContainerEl = jsonUtils.prepareStreetContainer();

let defaultStreet = streetContainerEl.querySelector('#default-street');
const defaultStreet = streetContainerEl.querySelector('#default-street');
if (!defaultStreet) {
defaultStreet = document.createElement("a-entity");
streetContainerEl.appendChild(defaultStreet);
defaultStreet.setAttribute('id', 'default-street');
}
this.defaultStreet = defaultStreet;
return
},
// this use os text input prompt, delete current scene, then load streetmix file
inputStreetmix: function () {
streetmixURL = prompt(
'Please enter a Streetmix URL',
'https://streetmix.net/kfarr/3/example-street'
);
// load streetmix street from input prompt, delete current scene, then load streetmix file
setURLFromPrompt: function () {
const streetmixURL = this.data.inputStreetmix;
setTimeout(function () {
window.location.hash = streetmixURL;
});

AFRAME.scenes[0].setAttribute('metadata', 'sceneId', '');
AFRAME.scenes[0].setAttribute('metadata', 'sceneTitle', '');

this.prepareStreetElements();
this.defaultStreet.setAttribute('streetmix-loader', 'streetmixStreetURL', streetmixURL);
this.data.streetmixStreetURL = streetmixURL;
this.data.streetmixAPIURL = '';
this.data.inputStreetmix = '';

},
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;

this.prepareStreetElements();
const el = this.defaultStreet;

if ((data.inputStreetmix !== '') && (data.streetmixStreetURL === '') && (data.streetmixAPIURL === '')) {
this.inputStreetmix();
data.inputStreetmix = '';
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.')
return;
}
create3DStreet: function () {
// create 3dStreet object from streetmix JSON, received via URL
const data = this.data;
const el = this.el;

// if no value for 'streetmixAPIURL' then let's see if there's a streetmixURL
if (data.streetmixAPIURL.length === 0) {
if (data.streetmixStreetURL.length > 0) {
const streetmixAPIURL = streetmixUtils.streetmixUserToAPI(data.streetmixStreetURL);
console.log('[streetmix-loader]', 'setting `streetmixAPIURL` to', streetmixAPIURL);
el.setAttribute('streetmix-loader', 'streetmixAPIURL', streetmixAPIURL);
data.streetmixAPIURL = streetmixUtils.streetmixUserToAPI(data.streetmixStreetURL);
console.log('[streetmix-loader]', 'setting `streetmixAPIURL` to', data.streetmixAPIURL);
} else {
console.log('[streetmix-loader]', 'Neither `streetmixAPIURL` nor `streetmixStreetURL` properties provided, please provide at least one.');
return;
}
console.log('[streetmix-loader]', 'Neither `streetmixAPIURL` nor `streetmixStreetURL` properties provided, please provide at least one.');
return;
}

var request = new XMLHttpRequest();
const request = new XMLHttpRequest();
console.log('[streetmix-loader]', 'GET ' + data.streetmixAPIURL);

request.open('GET', data.streetmixAPIURL, true);
Expand All @@ -194,7 +187,8 @@ AFRAME.registerComponent('streetmix-loader', {
const streetmixSegments = streetmixResponseObject.data.street.segments;
const streetmixName = streetmixResponseObject.name;
console.log('streetmixName', streetmixName);
el.setAttribute('streetmix-loader', 'name', streetmixName);
//el.setAttribute('streetmix-loader', 'name', streetmixName);
data.name = streetmixName;

const currentSceneTitle = AFRAME.scenes[0].getAttribute('metadata').sceneTitle;
if (!currentSceneTitle) { // only set title from streetmix if none exists
Expand All @@ -219,7 +213,22 @@ AFRAME.registerComponent('streetmix-loader', {
// There was a connection error of some sort
console.log('[streetmix-loader]', 'Loading Error: There was a connection error of some sort');
};
request.send();
request.send();
},
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
if (this.data.inputStreetmix !== '') {
this.setURLFromPrompt();
}

// if the loader has run once already, and upon update neither URL has changed, do not take action
if ((oldData.streetmixStreetURL === this.data.streetmixStreetURL) && (oldData.streetmixAPIURL === this.data.streetmixAPIURL)) {
// console.log('[streetmix-loader]', 'Neither streetmixStreetURL nor streetmixAPIURL have changed in this component data update, not reloading street.')
return;
}
this.create3DStreet();

}
});

Expand Down

0 comments on commit e91994a

Please sign in to comment.