aframe-babia-components
Version:
A data visualization set of components for A-Frame.
419 lines (369 loc) • 19.5 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>BabiaXR - Multiuser Babia-boats Demo</title>
<meta name="description" content="Babiaxr multiuser demo using babia-boats.">
</meta>
<!-- Aframe -->
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.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>
<!-- Mulituser -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.slim.js"></script>
<script src="./easyrtc.js"></script>
<script src="https://unpkg.com/networked-aframe@^0.8.0/dist/networked-aframe.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" networked-scene="
room: multi_boats_jetuml;
adapter: easyrtc;
debug: true;
audio: true;
serverURL: https://f-l2108-pc02.aulas.etsit.urjc.es:49153/;
">
<a-assets>
<!-- Dummy asset to make the scene sync (WIP)-->
<img src="https://wallpapercave.com/wp/wp2345390.jpg?dummy=8484744">
<img id="sky" src="../demos/1.0.11/assets/360-panorama.jpg">
<img id="floor" src="../demos/1.0.11/assets/floor-texture.jpg">
<img id="metalic" src="../demos/1.0.11/assets/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>
<!-- Templates -->
<!-- Selector and navigator -->
<template id="selector-template">
<a-entity class="selector"></a-entity>
</template>
<template id="nav-template">
<a-entity class="nav"></a-entity>
</template>
<!--<template id="controls-template">
<a-entity class="controls"></a-entity>
</template>
-->
<!-- Camera -->
<template id="rig-template">
<a-entity class="rig"></a-entity>
</template>
<template id="camera-template">
<a-entity class="camera"></a-entity>
</template>
<template id="avatar-template">
<a-sphere class="avatar" networked-audio-source></a-sphere>
</template>
<template id="username-tag-template">
<a-text class="username-tag"></a-text>
</template>
</a-assets>
<!-- Environment -->
<a-sky src="#sky"></a-sky>
<!-- Room -->
<a-entity id="Room">
<a-entity id="floorRoom" material="shader: flat; src: #floor"
geometry="primitive: box; width: 7; depth: 9; height: 0.1"></a-entity>
<a-entity id="ceiling" geometry="primitive: box; width: 7; depth: 9; height: 0.1" position="0 3 0"
material="shader: flat; src: #wall"></a-entity>
<a-entity id="door" obj-model="obj: #door-obj; mtl: #door-mtl" position="3.4 1.2 -2.7" rotation="-90 -90 0"
scale="0.013 0.013 0.011"></a-entity>
<a-entity id="wall1" position="3.65 1.5 0">
<a-entity id="wall1-1" geometry="primitive: box; width: 0.5; depth: 8.7; height: 3"
material="shader: flat; src: #wall"></a-entity>
</a-entity>
<a-entity id="wall2" position="-3.5 1.5 0">
<a-entity id="wall2-1" geometry="primitive: box; width: 0.3; depth: 8.7; height: 1"
material="shader: flat; src: #wall; repeat: 5 1" position="0 -1 0"></a-entity>
<a-entity id="wall2-2" geometry="primitive: box; width: 0.3; depth: 8.7; height: 0.3"
material="shader: flat; src: #wall; repeat: 5 1" position="0 1.35 0"></a-entity>
<a-entity id="wall2-3" geometry="primitive: box; width: 0.3; depth: 0.5; height: 1.7"
material="shader: flat; src: #wall; repeat: 1 3" position="0 0.35 0"></a-entity>
<a-entity id="wall2-4" geometry="primitive: box; width: 0.3; depth: 0.6; height: 1.7"
material="shader: flat; src: #wall; repeat: 1 3" position="0 0.35 4.35"></a-entity>
<a-entity id="wall2-5" geometry="primitive: box; width: 0.3; depth: 0.6; height: 1.7"
material="shader: flat; src: #wall; repeat: 1 3" position="0 0.35 -4.35"></a-entity>
</a-entity>
<a-entity id="wall3" position="0 1.5 -4.5">
<a-entity id="wall3-1" geometry="primitive: box; width: 7; depth: 0.3; height: 3"
material="shader: flat; src: #wall"></a-entity>
<a-entity id="column3" geometry="primitive: box; width: 0.3; depth: 0.3; height: 3"
material="shader: flat; src: #wall; repeat: 1 5" position="0 0 0.15"></a-entity>
</a-entity>
<a-entity id="wall4" position="0 1.5 4.5">
<a-entity id="wall4-1" geometry="primitive: box; width: 7.3; depth: 0.3; height: 1"
material="shader: flat; src: #wall; repeat: 5 1" position="0 -1 0"></a-entity>
<a-entity id="wall4-2" geometry="primitive: box; width: 7.3; depth: 0.3; height: 0.3"
material="shader: flat; src: #wall; repeat: 5 1" position="0 1.35 0"></a-entity>
<a-entity id="wall4-3" geometry="primitive: box; width: 0.5; depth: 0.3; height: 1.7"
material="shader: flat; src: #wall; repeat: 1 3" position="0 0.35 0"></a-entity>
<a-entity id="wall4-4" geometry="primitive: box; width: 0.3; depth: 0.3; height: 1.7"
material="shader: flat; src: #wall; repeat: 1 3" position="-3.2 0.35 0"></a-entity>
<a-entity id="wall4-5" geometry="primitive: box; width: 0.6; depth: 0.3; height: 1.7"
material="shader: flat; src: #wall; repeat: 1 3" position="3.4 0.35 0"></a-entity>
<a-entity id="column4" geometry="primitive: box; width: 0.3; depth: 0.3; height: 3"
material="shader: flat; src: #wall; repeat: 1 5" position="0 0 -0.15"></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"
networked="template:#nav-template; networkId:nav; persistent: true; owner: scene"></a-entity>
<!-- Querier -->
<a-entity id="querier" babia-queryjson="url:../selector_boats/jetuml_from_3_2_to_1_0.json;"></a-entity>
<!-- 3 Selector -->
<a-entity id="selector" babia-selector="from: querier; controller: nav"
networked="template:#selector-template; networkId:selector; persistent: true; owner: scene"></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"
position="-1 0.3 0" scale="0.015 0.015 0.015"></a-entity>
<!-- Lights -->
<a-entity position="5 50 0" light="type: hemisphere; color: #CEE4F0; intensity: 1; groundColor: #454545">
</a-entity>
<!-- Controls and Camera -->
<a-entity id="cameraRig" position="0 1.6 3" networked="template:#rig-template; attachTemplateToLocal:false">
<a-entity id="head" camera babia-camera="raycasterMouse: .babiaxraycasterclass, #audio_button, #navbarpopup, #navbarpopup--close-icon;
raycasterHand: .babiaxraycasterclass, #audio_button, #navbarpopup, #navbarpopup--close-icon; teleportCollision: #floorRoom"
look-controls wasd-controls="fly: false"
networked="template:#camera-template;attachTemplateToLocal:false;">
<a-sphere id="avatar" color="#D3FFE4" scale="0.25 0.25 0.25"
networked="template:#avatar-template;attachTemplateToLocal:false;">
<a-text id="username-tag" networked="template:#username-tag-template; attachTemplateToLocal:false"
position="-0.5 1.5 0" width="5" color="black" value="username"></a-text>
</a-sphere>
</a-entity>
</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>
<!-- Information popup -->
<a-entity id="navbarpopup" position="2.5 1 -0.5" scale="0.3 0.3 0.3"
dialog-popup="
openIconImage: ../assets/popups/info.jpg;
closeIconImage: ../assets/popups/close.jpg;
title: How to use the navigation bar;
titleWrapCount: 30;
titleColor: white;
bodyColor: white;
dialogBoxColor: black;
bodyFont: roboto;
dialogBoxHeight: 8.5;
body: \n In this experiment we want to assess whether it is better to navigate 3D visualizations on-screen or using Virtual Reality (VR) headsets. \n Below you see a 3D representation of JetUML using the City metaphor. If you want to know more, please read the legend on the right of the city. \n
= CONTROLS AND INTERACTIONS \n Look around with your Virtual Reality (VR) headset and walk in the room to explore the city. \n To show a tooltip with additional information on a building, point on it with the cursor. If you press the trigger after pointing on a building, the tooltip will remain open. To show information on a quarter, you need to point on it and press the trigger. To close all tooltips, you can press the dedicated button above the legend on the right. \n To reset the view, please press and hold the Oculus Button. \n
= START THE EXPERIMENT \n Please make sure that your supervisor acitvated both voice and screen recording. When you are ready, close this information dialog by hitting the (X) and press the trigger on the button labeled with (0).; "
babia-lookat="[camera]"></a-entity>
</a-scene>
<script>
let selector = document.getElementById('selector')
let nav = document.getElementById('nav')
document.body.addEventListener('clientConnected', function (event) {
let clientId = event.detail.clientId;
console.log('clientConnected event. clientId =', clientId);
console.log("Selector owner: ", selector.components.networked.data.owner);
let imFirst = true
if (selector.components.networked.data.owner == 'scene'){
for (client in NAF.connection.getConnectedClients()){
let otherTime = NAF.connection.getConnectedClients()[client].roomJoinTime
let myTime = NAF.connection.adapter._myRoomJoinTime
console.log("Other: ", otherTime)
console.log("Mine: ", myTime)
if (myTime > otherTime){
imFirst = false;
}
}
if (imFirst) {
NAF.utils.takeOwnership(selector)
NAF.utils.takeOwnership(nav)
} else {
console.log("I'm not first")
makeInvisible()
}
} else if (selector.components.networked.data.owner != NAF.clientId){
makeInvisible();
}
});
nav.addEventListener('click', function (e) {
if (!NAF.utils.isMine(selector) && nav.components.networked.data.owner != 'scene'){
if (Object.keys(NAF.connection.connectedClients).length > 0){
NAF.utils.takeOwnership(selector)
NAF.utils.takeOwnership(nav)
}
}
})
selector.addEventListener('ownership-gained', e => {
console.log("Selector ownership gained");
makeVisible();
});
selector.addEventListener('ownership-lost', e => {
console.log("Selector ownership lost");
makeInvisible();
});
function makeInvisible(){
nav.children[1].setAttribute('visible', false)
nav.children[2].setAttribute('visible', false)
nav.children[3].setAttribute('visible', false)
}
function makeVisible(){
nav.children[1].setAttribute('visible', true)
nav.children[2].setAttribute('visible', true)
nav.children[3].setAttribute('visible', true)
}
</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>