diff --git a/Scripts by Iulian/browser_clientPage_VR.html b/Scripts by Iulian/browser_clientPage_VR.html new file mode 100644 index 0000000000000000000000000000000000000000..eef8901a1fbb51c7c5e106edd1ed6f96bfd21e45 --- /dev/null +++ b/Scripts by Iulian/browser_clientPage_VR.html @@ -0,0 +1,83 @@ + + +<div id="myArduinoDiv">Waiting for Arduino data.</div> + +<style> + #content { + height: 500px; + overflow: auto; + } +</style> +<div id="content"></div> + + + + + +<script type="text/javascript"> + + var content = document.getElementById('content'); + + var socket = new WebSocket('ws://localhost:1337'); + //var socket = new WebSocket('ws://192.168.0.104/ws'); + + socket.onopen = function () { + socket.send('hello from the client'); + }; + + + socket.onmessage = function (message) { + + + // ====== Extract the data from arduino (into 'arduinoData') and display it in a color text + + var arduinoDataString = message.data; + const arduinoDataSplit = arduinoDataString.split(","); + + var arduinoData1 = parseInt(arduinoDataSplit[0]); + var arduinoData2 = parseInt(arduinoDataSplit[1]); + var arduinoData3 = parseInt(arduinoDataSplit[2]); + + + + // Expand the log of messages + + content.innerHTML = message.data +'<br />' + content.innerHTML; + + // Change the colorful Arduino text label + document.getElementById("myArduinoDiv").innerHTML = arduinoData1; + document.getElementById("myArduinoDiv").style.color = "rgb("+arduinoData1+",0,0)"; + + + + // ====== CHANGE THE AFRAME VR Box ========== + + var sceneEl = document.querySelector('a-box'); + sceneEl.getAttribute('scale').x = arduinoData1 / 100; + sceneEl.getAttribute('scale').y = arduinoData2 / 100; + + + }; + + socket.onerror = function (error) { + console.log('WebSocket error: ' + error); + }; +</script> + + + + + + + + +<! ========= AFRAME VR OBJECTS ========= > +<! ========= AFRAME VR OBJECTS ========= > + +<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script> + +<div> + <a-scene> + <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box> + </a-scene> +</div>