aframe-babia-components
Version:
A data visualization set of components for A-Frame.
334 lines (277 loc) • 12.7 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>BabiaXR - Babia-boats Demo</title>
<meta name="description" content="BabiaXR CodeCity evolution demo.">
</meta>
<!-- Aframe -->
<script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v7.1.0/dist/aframe-extras.min.js"></script>
<script
src="https://unpkg.com/aframe-environment-component@1.2.0/dist/aframe-environment-component.min.js"></script>
<script
src="../../../dist/aframe-babia-components.js"></script>
<script
src="https://rawgit.com/fernandojsg/aframe-teleport-controls/master/dist/aframe-teleport-controls.min.js"></script>
<script src="https://unpkg.com/aframe-tooltip-component/dist/aframe-tooltip-component.min.js"></script>
<script src="https://supereggbert.github.io/aframe-htmlembed-component/dist/build.js"></script>
<script
src="https://unpkg.com/@editvr/aframe-dialog-popup-component@1.7.3/dist/aframe-dialog-popup-component.min.js"></script>
<!-- Gitlab Corner -->
<link rel="stylesheet" href="../../assets/gitlab-corner.css">
</head>
<body>
<a-scene id="AframeScene">
<a-assets>
<!-- Dummy asset to make the scene sync (WIP)-->
<img src="https://wallpapercave.com/wp/wp2345390.jpg?dummy=8484744">
<img id="sky" src="../../assets/textures/360-panorama.jpg">
<img id="floor" src="../../assets/textures/floor-texture.jpg">
<img id="metalic" src="../../assets/textures/metalic-texture.jpg">
<img id="wall" src="../../assets/textures/concrete.png">
<a-asset-item id="door-obj" src="../../assets/door/door.obj"></a-asset-item>
<a-asset-item id="door-mtl" src="../../assets/door/door.mtl"></a-asset-item>
</a-assets>
<!-- Controls and Camera -->
<a-entity id="cameraRig" position="0 1.5 0" movement-controls="fly: false">
<a-entity id="head" position="0 0 1.6" camera
babia-camera="raycasterMouse: .babiaxraycasterclass;
raycasterHand: .babiaxraycasterclass; teleportCollision: #floorRoom" look-controls
wasd-controls="fly: true">
<a-entity></a-entity>
</a-entity>
</a-entity>
<!-- Slider -->
<a-entity id="nav" babia-navigator position="1.4 1 -1" rotation="0 0 0" scale="0.3 0.3 0.3"></a-entity>
<!-- Querier -->
<a-entity id="querier" babia-queryjson="url:./data.json;"></a-entity>
<!-- 3 Selector -->
<a-entity id="selector" babia-selector="from: querier; controller: nav; state: play"></a-entity>
<!-- Treebuilder -->
<a-entity id="treebuilder" babia-treebuilder="field: file_path; split_by: /; from: selector"></a-entity>
<!-- Boats Visualizer -->
<a-entity id="boats"
babia-boats="from: treebuilder; area: num_funs; height: loc_per_function; color: ccn; height_building_legend: -0.5; legend_scale: 0.25; height_quarter_legend_box: 1; height_quarter_legend_title: 1.5; legend_lookat: [laser-controls]; zone_elevation: 0.01; maxBuildingHeight: 1"
position="-1 0.3 -2" scale="0.015 1 0.015"></a-entity>
<!-- Close tooltips -->
<a-plane id="closelegends" babia-lookat="[laser-controls]" class="babiaxraycasterclass" scale="0.8 0.8 0.8"
position="2 2.5 -2.5" geometry="primitive: plane; width: 2; height: 0.5" color="#012752"
text="value: Close All Tooltips; color: white; align: center; wrapCount: 30; width: 3.6; transparent: false; alphaTest: 6; opacity: 6">
</a-plane>
<!-- Lights -->
<a-entity position="5 50 0" light="type: hemisphere; color: #CEE4F0; intensity: 1; groundColor: #454545">
</a-entity>
<!-- Audio Button -->
<!-- <a-plane id="audio_button" position="1 2.5 0" rotation="0 0 0" height="0.5" width="1.5" color="#800"
scale="0.5 0.5 0.5">
<a-text id="audio_label" value="Stop Audio" color="#fff" width="4" position="-0.5 0 0" rotation="0 0 0">
</a-text>
</a-plane> -->
</a-scene>
<script>
let listenersDone = false;
document.querySelector('a-scene').addEventListener('loaded', function () {
// rotate popups to the camera
let popups = document.querySelectorAll('[dialog-popup]');
if (!listenersDone) {
popups.forEach(function (popup) {
popup.addEventListener('click', function (event) {
let plane = document.getElementById(`${event.target.id}--dialog-plane`);
if (plane) {
// Opened task
hidePopups(popup)
plane.setAttribute("babia-lookat", "[laser-controls]")
} else {
// Closed task
showPopups()
}
}, false);
});
let infoPanel = document.getElementById(`navbarpopup--dialog-plane`);
infoPanel.setAttribute("visible", "true")
listenersDone = true;
}
function hidePopups(popupExcept) {
popups.forEach(popup => {
if (popup !== popupExcept) {
popup.setAttribute("visible", "false")
}
});
}
function showPopups() {
popups.forEach(popup => {
popup.setAttribute("visible", "true")
});
}
})
let exitScene = document.getElementById("exitscene");
document.getElementById("ninesurvey").addEventListener('click', function (event) {
console.log(event)
if (event.target.id === "ninesurvey--close-icon") {
exitScene.setAttribute("visible", "false")
} else if (event.target.id === "ninesurvey") {
exitScene.setAttribute("visible", "true")
}
}, false);
exitScene.addEventListener('click', function (event) {
if (exitScene.getAttribute("visible")) {
window.location.replace("./end_first_vr.html")
}
}, false);
document.getElementById("closelegends").addEventListener('click', function (event) {
let ewl = document.getElementById("boats").components['babia-boats'].entitiesWithLegend
let newEwl = []
for (let i = 0; i < ewl.length; i++) {
newEwl.push(ewl[i])
}
for (let v = 0; v < newEwl.length; v++) {
newEwl[v].entity.click()
}
}, false);
</script>
<script>
document.addEventListener('controllerconnected', (event) => {
let hand_left = document.getElementById('babia-leftHand');
// stop audio left hand
hand_left.addEventListener('gripdown', function (evt) {
let tooltipAudioButton = document.getElementById('babia-tooltip_grip_L')
if (tooltipAudioButton.components.tooltip.data.text === 'Stop Audio') {
NAF.connection.adapter.enableMicrophone(false);
tooltipAudioButton.setAttribute('tooltip', { 'text': "Turn on Audio" });
} else {
NAF.connection.adapter.enableMicrophone(true);
tooltipAudioButton.setAttribute('tooltip', { 'text': "Stop Audio" });
}
})
});
/* Camera */
let rig = document.getElementById('rig')
let avatar = document.getElementById('avatar')
let usernameTag = document.getElementById('username-tag')
let color = getRandomColor();
usernameTag.setAttribute('value', color)
avatar.setAttribute('color', color)
function getRandomColor() {
var digits = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += digits[Math.floor(Math.random() * 16)];
}
return color;
}
/* Audio */
// let audioButton = document.getElementById('audio_button');
// let audioLabel = document.getElementById('audio_label');
// audioButton.addEventListener('click', function (event) {
// if (audioLabel.getAttribute('value') === 'Stop Audio') {
// stopAudio();
// } else {
// turnOnAudio();
// }
// });
function turnOnAudio() {
NAF.connection.adapter.enableMicrophone(true);
audioButton.setAttribute('color', '#800');
audioLabel.setAttribute('color', '#fff');
audioLabel.setAttribute('value', 'Stop Audio');
}
function stopAudio() {
NAF.connection.adapter.enableMicrophone(false);
audioButton.setAttribute('color', '#fff');
audioLabel.setAttribute('color', '#000');
audioLabel.setAttribute('value', 'Turn on Audio');
}
</script>
<script>
NAF.schemas.add({
template: '#selector-template',
components: [
'babia-selector'
]
})
NAF.schemas.add({
template: '#nav-template',
components: [
'babia-navigator'
]
})
/*
NAF.schemas.add({
template: '#controls-template',
components: [
'babia-controls'
]
})*/
// Avatar
NAF.schemas.add({
template: '#rig-template',
components: [
'position',
'rotation'
]
});
NAF.schemas.add({
template: '#camera-template',
components: [
'position',
'rotation'
]
});
NAF.schemas.add({
template: '#avatar-template',
components: [
'position',
'rotation',
'color',
'scale'
]
});
NAF.schemas.add({
template: '#username-tag-template',
components: [
'value',
'color',
'width',
'position',
'rotation'
]
});
</script>
<!-- GITLAB CORNER-->
<div class="gitlab-corner-wrapper"><a
href="https://gitlab.com/babiaxr/aframe-babia-components/-/blob/master/examples/multi_boats/jetuml.html"
class="gitlab-corner" aria-label="View source on GitLab"><svg id="logo_art" data-name="logo art"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 586 559">
<g id="g44">
<path id="path46" class="cls-1"
d="M461.17,301.83l-18.91-58.12L404.84,128.43a6.47,6.47,0,0,0-12.27,0L355.15,243.64H230.82L193.4,128.43a6.46,6.46,0,0,0-12.26,0L143.78,243.64l-18.91,58.19a12.88,12.88,0,0,0,4.66,14.39L293,435,456.44,316.22a12.9,12.9,0,0,0,4.73-14.39" />
</g>
<g id="g48">
<path id="path50" class="cls-2" d="M293,434.91h0l62.16-191.28H230.87L293,434.91Z" />
</g>
<g id="g56">
<path id="path58" class="cls-1" d="M293,434.91,230.82,243.63h-87L293,434.91Z" />
</g>
<g id="g64">
<path id="path66" class="cls-3"
d="M143.75,243.69h0l-18.91,58.12a12.88,12.88,0,0,0,4.66,14.39L293,435,143.75,243.69Z" />
</g>
<g id="g72">
<path id="path74" class="cls-2"
d="M143.78,243.69h87.11L193.4,128.49a6.47,6.47,0,0,0-12.27,0l-37.35,115.2Z" />
</g>
<g id="g76">
<path id="path78" class="cls-1" d="M293,434.91l62.16-191.28H442.3L293,434.91Z" />
</g>
<g id="g80">
<path id="path82" class="cls-3"
d="M442.24,243.69h0l18.91,58.12a12.85,12.85,0,0,1-4.66,14.39L293,434.91l149.2-191.22Z" />
</g>
<g id="g84">
<path id="path86" class="cls-2"
d="M442.28,243.69h-87.1l37.42-115.2a6.46,6.46,0,0,1,12.26,0l37.42,115.2Z" />
</g>
</svg></a></div>
</body>
</html>