aframe-babia-components
Version:
A data visualization set of components for A-Frame.
282 lines (237 loc) • 10.3 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<title>Multiuser Scene for esLibre</title>
<meta name="description" content="Multiuser Scene for EsLibre 2021 with audio" />
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
<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/aframe-environment-component@1.3.3/dist/aframe-environment-component.min.js"></script>
<script src="../../dist/aframe-babia-components.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v7.2.0/dist/aframe-extras.min.js"></script>
</head>
<body>
<a-scene id="AframeScene" networked-scene="
room: room_esLibre;
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">
<!-- Templates -->
<!-- Avatar -->
<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>
<!-- Bars -->
<template id="bars-template">
<a-entity class="bars"></a-entity>
</template>
<!-- Querier, same one for all graphs -->
<template id="querier-template">
<a-entity class="querier"></a-entity>
</template>
</a-assets>
<!-- Sync entities, persistent -->
<a-entity id="querierData" babia-queryjson="url: ./data_vaccination.json;"
networked="template:#querier-template; networkId:querier; persistent: true; owner: scene"></a-entity>
<a-entity id="bars" babia-bars='index: country; height: partial%; legend: true; axis: true; palette: foxy; title: babia-bars;
titleColor: #FFFFFF; titleFont: #optimerBoldFont; titlePosition: -8.5 0.3 0.5; heightMax: 100; animation: true;
from: querierData' networked="template:#bars-template; networkId:bars; persistent: true; owner: scene"
position="-10 1 -15" rotation="0 0 0" scale="0.5 1 0.5"></a-entity>
<!--Not sync entities-->
<a-plane id="audio_button" position="2 2 -7" rotation="0 -45 0" height="0.5" width="1.5" color="#E44B00">
<a-text id="audio_label" value="Stop Audio" color="#0582B5" width="4" position="-0.5 0 0" rotation="0 0 0">
</a-text>
</a-plane>
<a-plane id="bars_palette_button" position="-12 6 -10" rotation="0 45 0" height="1" width="4" color="#F8F6F2">
<a-text id="bars_label" value="Change palette" color="#0582B5" width="10" position="-1.5 0 0"
rotation="0 0 0"></a-text>
</a-plane>
<a-plane id="bars_scale_button" position="-12 4 -10" rotation="0 45 0" height="1" width="2" color="#F8F6F2">
<a-text id="bars_label" value="Resize" color="#0582B5" width="10" position="-0.75 0 0" rotation="0 0 0">
</a-text>
</a-plane>
<!--Sync entities, not persistent-->
<a-entity id="rig" position="-5 2.5 0" networked="template:#rig-template; attachTemplateToLocal:false">
<a-entity id="camera" camera look-controls wasd-controls="fly: false"
networked="template:#camera-template;attachTemplateToLocal:false;">
<a-sphere id="avatar" color="#FFFFFF" 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="#FFFFFF"></a-text>
</a-sphere>
</a-entity>
<!-- Hand Controls -->
<a-entity id="leftHand" laser-controls="hand: left"></a-entity>
<a-entity id="rightHand" laser-controls="hand: right"></a-entity>
<a-entity id="cursor" cursor="rayOrigin:mouse"></a-entity>
</a-entity>
<a-entity environment="preset: yavapai; skyType: color; skyColor: #358DF8 "></a-entity>
<a-light type="point" intensity="1" position="-10 20 30"></a-light>
</a-scene>
<script>
/* GET DOM ELEMENTS */
let scene = document.getElementById('AframeScene')
let avatar = document.getElementById('avatar')
let usernameTag = document.getElementById('username-tag')
let hand_right = document.getElementById('rightHand')
let audioButton = document.getElementById('audio_button')
let audioLabel = document.getElementById('audio_label')
let colorButton = document.getElementById('color_button')
let colorLabel = document.getElementById('color_label')
let bars = document.getElementById('bars')
let barsScaleButton = document.getElementById('bars_scale_button')
let barsPaletteButton = document.getElementById('bars_palette_button')
/* Setting avatar color and username */
let color = getRandomColor();
usernameTag.setAttribute('value', color)
avatar.setAttribute('color', color)
/* UI Event Listeners */
// AudioButton
audioButton.addEventListener('click', function (event) {
if (audioLabel.getAttribute('value') === 'Stop Audio') {
stopAudio();
} else {
turnOnAudio();
}
});
// ScaleButton
barsScaleButton.addEventListener('click', function (event) {
NAF.utils.takeOwnership(bars)
changeBarsScale();
});
// PaletteButton
barsPaletteButton.addEventListener('click', function (event) {
NAF.utils.takeOwnership(bars)
changeBarsColor();
});
/* NAF Event Listeners */
// Connected
document.body.addEventListener('connected', function (event) {
console.log('connected event. clientId =', event.detail.clientId);
});
// Client Connected
document.body.addEventListener('clientConnected', function (event) {
let clientId = event.detail.clientId;
console.log('clientConnected event. clientId =', clientId);
});
// Client Disconnected
document.body.addEventListener('clientDisconnected', function (event) {
let clientId = event.detail.clientId;
console.log('clientDisconnected event. clientId =', clientId);
});
/* Ownership Event Listeners */
// Bars
bars.addEventListener('ownership-gained', e => {
console.log("Bars ownership gained")
});
bars.addEventListener('ownership-lost', e => console.log("Bars ownership lost"));
/* Other methods */
// Audio
function turnOnAudio() {
NAF.connection.adapter.enableMicrophone(true)
audioButton.setAttribute('color', '#E44B00')
audioLabel.setAttribute('value', 'Stop Audio')
}
function stopAudio() {
NAF.connection.adapter.enableMicrophone(false)
audioButton.setAttribute('color', '#F8F6F2')
audioLabel.setAttribute('value', 'Turn on Audio')
}
// Scale
function changeBarsScale() {
NAF.utils.takeOwnership(bars)
if (bars.getAttribute('scale').x === 0.5) {
bars.setAttribute('scale', '0.2 0.2 0.2')
} else {
bars.setAttribute('scale', '0.5 0.5 0.5')
}
}
// Palette
function changeBarsColor() {
NAF.utils.takeOwnership(bars)
if (bars.getAttribute('babia-bars').palette === 'foxy') {
bars.setAttribute('babia-bars', 'palette', 'bussiness')
} else {
bars.setAttribute('babia-bars', 'palette', 'foxy')
}
}
// Random color
function getRandomColor() {
var digits = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += digits[Math.floor(Math.random() * 16)];
}
return color;
}
</script>
<script>
// Schemas with components and attributes for syncronization
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'
]
});
// Important to add here the graph component
NAF.schemas.add({
template: '#bars-template',
components: [
'position',
'rotation',
'scale',
'babia-bars'
]
});
NAF.schemas.add({
template: '#querier-template',
components: [
'babia-queryjson'
]
})
</script>
</body>
</html>