Skip to content

Commit

Permalink
add index-bot page
Browse files Browse the repository at this point in the history 
add loadFromJSON function to streetmix-loader
  • Loading branch information
@Algorush
Algorush committed Sep 26, 2023
1 parent c2705b5 commit 0c281e5
Show file tree
Hide file tree
Showing 3 changed files with 170 additions and 21 deletions.
124 changes: 124 additions & 0 deletions index-bot.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
<!DOCTYPE html>
<html>
<head>
<!-- aframe -->
<script src="https://aframe.io/releases/1.4.2/aframe.min.js"></script>

<!-- 3dstreet -->
<script src="./dist/aframe-street-component.js"></script>

<!-- mapbox -->
<script src="https://github.3dstreet.org/src/lib/aframe-mapbox-component.min.js"></script>

<!-- save / load -->
<script src="./src/json-utils.js"></script>

<!-- ocean -->
<script src="https://github.3dstreet.org/src/components/ocean-plane.js"></script>

<title>3DStreet</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="ui_assets/favicon.ico">
<link rel="stylesheet" href="src/viewer-styles.css">

</head>

<body>

<!-- viewer ui start -->
<div class="viewer-header-wrapper">
<button class="viewer-logo-start-editor-button" onclick="startEditor()">
<img class="viewer-logo-img" alt="3DStreet Viewer" src="ui_assets/3DStreet-Viewer-Start-Editor.svg">
</button>
</div>

<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="inputStreetmix()"> <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>
</ul>
</div>

<a-scene
vr-mode-ui="enterVRButton: #custom-enter-vr-button;"
vr-mode-ui-if-headset
renderer="colorManagement: true; physicallyCorrectLights: true;"
inspector="url: //3dstreet.app/dist/3dstreet-editor.js"
notify
metadata
>
<a-assets>
<!-- uncomment the line below to load assets from local github submodule -->
<!-- <street-assets url="./assets/"></street-assets> -->
<!-- uncomment the line below to load all possible asset categories -->
<!-- <street-assets categories="sidewalk-props people people-rigged vehicles vehicles-rigged buildings intersection-props segment-textures segment-colors lane-separator stencils vehicles-transit dividers sky grounds"></street-assets> -->
<!-- a reduced set of assets for non-animated streetmix streets without intersections -->
<street-assets categories="loud-bicycle sidewalk-props people vehicles vehicles-rigged buildings segment-textures segment-colors lane-separator stencils vehicles-transit dividers sky grounds"></street-assets>
</a-assets>

<a-entity id="cameraRig" position="0 10 30" data-layer-name="Viewer" cursor-teleport="cameraRig: #cameraRig; cameraHead: #camera;" look-controls="reverseMouseDrag: true" wasd-controls="enabled: true">
<a-entity id="camera" camera="far: 1000" position="0 1.6 0" ></a-entity>
<a-entity id="leftHand" hand-controls="hand: left; handModelStyle: lowPoly; color: #ffccff"></a-entity>
<a-entity id="rightHand" hand-controls="hand: right; handModelStyle: lowPoly; color: #ffccff"></a-entity>
<a-entity id="screenshot" class="no-pause" screentock visible="false"></a-entity>
</a-entity>

<a-entity id="environment" data-layer-name="Environment" street-environment="preset: day;"></a-entity>

<a-entity id="street-container" data-layer-name="3D Street Layers" data-layer-show-children>
<a-entity id="default-street" street streetmix-loader set-loader-from-hash></a-entity>
</a-entity>

<a-entity id="reference-layers" data-layer-name="Reference Layers" data-layer-show-children>

</a-scene>
</body>
<script>

// --- streetmix-JSON for generate street ---
/*
const streetmixJSON = {{street_json}};
document.querySelector('a-scene').addEventListener('loaded', function () {
AFRAME.scenes[0].setAttribute('streetmix-loader', 'streetmixJSON', streetmixJSON);
})
*/
document.getElementById('inputfile')
.addEventListener('change', fileJSON);

// only show VR button if headset connected
AFRAME.registerComponent('vr-mode-ui-if-headset', {
dependencies: ['vr-mode-ui'],
init: function () {
if (!AFRAME.utils.device.checkHeadsetConnected()) {
this.el.setAttribute('vr-mode-ui', 'enabled', false);
}
}
})

function buttonScreenshotTock() {
const screenshotEl = document.getElementById('screenshot');
screenshotEl.play(); // double check playing in case we're in editor mode
screenshotEl.setAttribute('screentock', 'type', 'jpg');
screenshotEl.setAttribute('screentock', 'takeScreenshot', true);
}

function startEditor() {
var sceneEl = document.querySelector('a-scene');
sceneEl.components.inspector.openInspector();
document.querySelector('.viewer-header-wrapper').style.display = 'none';
}

AFRAME.registerComponent('timed-inspector', {
init: function() {
setTimeout( function () {
window.postMessage('INJECT_AFRAME_INSPECTOR')
}, this.data * 1000)
}
});

</script>
</html>
59 changes: 38 additions & 21 deletions src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,14 +51,49 @@ 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;
const streetmixSegments = streetmixResponseObject.data.street.segments;
const streetmixName = streetmixResponseObject.name;
console.log('streetmixName', streetmixName);
el.setAttribute('streetmix-loader', 'name', streetmixName);

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

if (data.showBuildings) {
el.setAttribute('street', 'right', streetmixResponseObject.data.street.rightBuildingVariant);
el.setAttribute('street', 'left', streetmixResponseObject.data.street.leftBuildingVariant);
}
el.setAttribute('street', 'type', 'streetmixSegmentsFeet');
// set JSON attribute last or it messes things up
el.setAttribute('street', 'JSON', JSON.stringify({ streetmixSegmentsFeet: 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:
// First to find the proper path, once to actually load the street, and then subsequent updates such as street name
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.')
Expand All @@ -85,29 +120,11 @@ AFRAME.registerComponent('streetmix-loader', {
if (this.status >= 200 && this.status < 400) {
// Connection success
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);

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

if (data.showBuildings) {
el.setAttribute('street', 'right', streetmixResponseObject.data.street.rightBuildingVariant);
el.setAttribute('street', 'left', streetmixResponseObject.data.street.leftBuildingVariant);
}
el.setAttribute('street', 'type', 'streetmixSegmentsFeet');
// set JSON attribute last or it messes things up
el.setAttribute('street', 'JSON', JSON.stringify({ streetmixSegmentsFeet: streetmixSegments }));
el.emit('streetmix-loader-street-loaded');
this.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');
}
}
};
request.onerror = function () {
// There was a connection error of some sort
Expand Down
8 changes: 8 additions & 0 deletions src/json-utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -441,6 +441,14 @@ 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(
Expand Down

0 comments on commit 0c281e5

Please sign in to comment.