From 451de46f7bba2add792d2ddcf12338e498491a96 Mon Sep 17 00:00:00 2001
From: Timo Volkmann <timo.tvm@gmail.com>
Date: Sat, 7 Nov 2020 20:35:52 +0100
Subject: [PATCH] switched to relative sensor data (gyroscope)

---
 index.html | 32 ++++++++++++++++++++------------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/index.html b/index.html
index 84835f2..5e5050e 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,8 @@
     <meta charset="utf-8">
     <script>
         window.addEventListener("load", function(evt) {
+            var orientation = [0,0,0];
+            var multiplier = 180/Math.PI/15
             var output = document.getElementById("output");
             var input = document.getElementById("input");
             var ws;
@@ -32,10 +34,14 @@
                     print2("CLOSE");
                 }
                 ws.onmessage = function(evt) {
-                    print2("RESPONSE: " + evt.data);
-                    let dat = JSON.parse(evt.data)
-                    console.log(dat.orientation)
-                    document.getElementById("gyroscope").style.transform = `rotateX(${dat.orientation[1]}deg) rotateY(${dat.orientation[0]}deg) rotateZ(${-dat.orientation[2]}deg)`
+                    //print2("RESPONSE: " + evt.data);
+                    let dat = JSON.parse(evt.data)["lsm6dsm gyroscope"]
+                    //console.log(dat)
+                    orientation[0] += dat[0] * multiplier
+                    orientation[1] += dat[1] * multiplier
+                    orientation[2] += dat[2] * multiplier
+                    //console.log(dat.orientation)
+                    document.getElementById("gyroscope").style.transform = `rotateX(${-orientation[0]}deg) rotateY(${orientation[1]}deg) rotateZ(${-orientation[2]}deg) translateZ(50px)`
                 }
                 ws.onerror = function(evt) {
                     print("ERROR: " + evt.data);
@@ -62,13 +68,17 @@
     <style>
         * { box-sizing: border-box; }
 
-        body { font-family: sans-serif; }
+        body {
+            font-family: sans-serif;
+            background: #000;
+            color: #fff;
+        }
 
         .scene {
             width: 200px;
             height: 200px;
-            border: 1px solid #CCC;
-            margin: 80px;
+            border: 0px solid #CCC;
+            margin: 160px;
             perspective: 400px;
         }
 
@@ -78,7 +88,7 @@
             position: relative;
             transform-style: preserve-3d;
             transform: translateZ(-100px);
-            transition: transform 17ms;
+            /*transition: transform 25ms;*/
         }
 
         .cube.show-front  { transform: translateZ(-100px) rotateY(   0deg); }
@@ -92,7 +102,7 @@
             position: absolute;
             width: 200px;
             height: 200px;
-            border: 2px solid black;
+            border: 1px solid white;
             line-height: 200px;
             font-size: 40px;
             font-weight: bold;
@@ -121,9 +131,7 @@
 <table style="font-size: x-small">
     <tr>
         <td valign="top" width="50%">
-            <p>Click "Open" to create a connection to the server,
-                "Send" to send a message to the server and "Close" to close the connection.
-                You can change the message and send multiple times.
+            <p>Click "Open" to create a connection to the server.
             </p>
             <form>
                 <button id="open">Open</button>