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