aframe-babia-components
Version:
A data visualization set of components for A-Frame.
111 lines (104 loc) • 4.47 kB
HTML
<html>
<head>
<title>Multiuser Time Evolution with Babia-Bars, separate queryjson from bars</title>
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v7.2.0/dist/aframe-extras.min.js"></script>
<script src="https://unpkg.com/aframe-environment-component@1.3.3/dist/aframe-environment-component.min.js"></script>
<script src="https://unpkg.com/aframe-text-geometry-component@0.5.1/dist/aframe-text-geometry-component.min.js"></script>
<script src="../../dist/aframe-babia-components.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>
</head>
<body>
<a-scene rain background="color: #ECECEC" networked-scene="
room: multi_bars_1;
adapter: easyrtc;
debug: true;
audio: false;
serverURL: https://f-l2108-pc02.aulas.etsit.urjc.es:49153/;
">
<!--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">
<template id="querier-template">
<a-entity class="querier"></a-entity>
</template>
<template id="bars-template">
<a-entity class="bars"></a-entity>
</template>
</a-assets>
<a-entity environment="preset: japan"></a-entity>
<a-entity id="querier" babia-queryjson="url: data.json;"
networked="template:#querier-template; networkId:querier; persistent: true; owner: scene" ></a-entity>
<a-entity id="bars"
babia-bars='legend: true; axis: true; keepHeight: true; from: querier'
position="-5 0 0.1" rotation="0 0 0"
networked="template:#bars-template; networkId:bars; persistent: true; owner: scene">
</a-entity>
<a-entity movement-controls="fly: true" position="2 5 15">
<a-entity camera position="0 0 0" look-controls></a-entity>
<a-entity cursor="rayOrigin:mouse"></a-entity>
<a-entity laser-controls="hand: right"></a-entity>
</a-entity>
</a-scene>
<script>
let bars = document.getElementById('bars')
let querier = document.getElementById('querier')
document.body.addEventListener('clientConnected', function (event) {
let clientId = event.detail.clientId;
console.log('clientConnected event. clientId =', clientId);
console.log("Bars owner: ", bars.components.networked.data.owner);
if (bars.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)
let imCreator = false
if (myTime < otherTime){
setTimeout(updateScale, 4000);
}
}
}
});
function updateScale() {
NAF.utils.takeOwnership(bars)
bars.setAttribute("scale", "0.5 0.5 0.5")
setTimeout(updateData, 4000);
}
function updateData () {
NAF.utils.takeOwnership(querier)
querier.setAttribute('babia-queryjson', 'url', 'data2.json');
setTimeout(updateData1, 4000);
}
function updateData1 () {
querier.setAttribute('babia-queryjson', 'url', 'data3.json');
setTimeout(updateData2, 4000);
}
function updateData2 () {
querier.setAttribute('babia-queryjson', 'url', 'data.json');
}
</script>
<script>
NAF.schemas.add({
template: '#bars-template',
components: [
'position',
'rotation',
'scale',
'babia-bars',
]
});
NAF.schemas.add({
template: '#querier-template',
components: [
'babia-queryjson'
]
});
</script>
</body>
</html>