aframe-babia-components
Version:
A data visualization set of components for A-Frame.
102 lines (95 loc) • 4.53 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<title>Examples — Networked-Aframe, Babia multiuser</title>
<meta name="description" content="Examples — Networked-Aframe, Babia multiuser" />
</head>
<body>
<h1>Multiuser Team Demo</h1>
<h2>Choose a server URL to connect to:</h2>
<label for="server_url">Server URL:</label>
<input type="text" id="server_url" name="server_url"
value="https://f-l2108-pc02.aulas.etsit.urjc.es:49153/"><br><br>
<ul>
<li>
<h3>Demo 0: Old Demo</h3>
<h4>Choose a username:</h4>
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>
<h4>Choose a color:</h4>
<label for="color">Color:</label>
<input type="color" id="color" name="color"><br><br>
<input type="button" id="start_button_old" value="Start">
</li>
<li>
<h3>Demo 1: NO PERSISTENCE WITH AUDIO</h3>
<p>Demo with no persistent avatars and audio</p>
<input type="button" id="start_button_1" value="Start">
</li>
<li>
<h3>Demo 2: NO PERSISTENCE NO AUDIO</h3>
<p>Demo with no persistent avatars and no audio</p>
<input type="button" id="start_button_4" value="Start">
</li>
<li>
<h3>Demo 3: PERSISTENCE</h3>
<p>Demo with persistent entities</p>
<input type="button" id="start_button_2" value="Start">
</li>
<li>
<h3>Demo 4: MEANINGFUL DEMO</h3>
<p>Demo with persistent and no persistent entities. It contains avatars,
direct messages, broadcasted messages, audio and graphs relating
vaccination percentages in 20 countries</p>
<input type="button" id="start_button_3" value="Start">
</li>
<h3>Demo 5: MEANINGFUL DEMO NO AUDIO</h3>
<p>Demo with persistent and no persistent entities. It contains avatars,
direct messages, broadcasted messages and graphs relating
vaccination percentages in 20 countries No audio</p>
<input type="button" id="start_button_5" value="Start">
</li>
</ul>
<script>
let startButtonOld = document.getElementById("start_button_old")
let startButtonOne = document.getElementById("start_button_1");
let startButtonTwo = document.getElementById("start_button_2");
let startButtonThree = document.getElementById("start_button_3");
let startButtonFour = document.getElementById("start_button_4");
let startButtonFive = document.getElementById("start_button_5");
let startButtonSix = document.getElementById("start_button_6");
let startButtonSeven = document.getElementById("start_button_7");
let startButtonEight = document.getElementById("start_button_8");
let serverUrlInput = document.getElementById("server_url");
let serverURL = serverUrlInput.value;
startButtonOld.addEventListener('click', function (event) {
let colorInput = document.getElementById("color");
let usernameInput = document.getElementById("username");
let username = usernameInput.value;
let color = colorInput.value.split("#")[1];
let url = "./simple_scene.html" + "?serverURL=" + serverURL + "&username=" + username + "&color=" + color;
window.location.href = url;
})
startButtonOne.addEventListener('click', function (event) {
let url = "./no_persistence.html" + "?serverURL=" + serverURL;
window.location.href = url;
});
startButtonTwo.addEventListener('click', function (event) {
let url = "./persistence.html" + "?serverURL=" + serverURL;
window.location.href = url;
});
startButtonThree.addEventListener('click', function (event) {
let url = "./meaningful.html" + "?serverURL=" + serverURL;
window.location.href = url;
});
startButtonFour.addEventListener('click', function (event) {
let url = "./no_persistence_no_audio.html" + "?serverURL=" + serverURL;
window.location.href = url;
});
startButtonFive.addEventListener('click', function (event) {
let url = "./meaningful_no_audio.html" + "?serverURL=" + serverURL;
window.location.href = url;
});
</script>
</body>
</html>