tvolkmann/gyrogpsc
1
0
Fork 0
Code Issues Pull Requests Projects 1 Releases 1 Wiki Activity

switched to relative sensor data (gyroscope)

Browse Source
This commit is contained in:
Timo Volkmann 2020-11-07 20:35:52 +01:00
parent 718e4c0f51
commit 451de46f7b
1 changed files with 20 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
index.html
View File

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