Upload New File

Scripts by Iulian/browser_clientPage_VR.html

+
+
+<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>