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

implemented rotation calibration

Browse Source
This commit is contained in:
Timo Volkmann 2021-01-10 16:42:05 +01:00
parent ecd0b8ecf5
commit 4bb37ab4ff
5 changed files with 110 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.idea/jsLibraryMappings.xml generated
View File

@ -1,6 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="JavaScriptLibraryMappings">
<file url="PROJECT" libraries="{Chart, Chart.js}" />
<file url="PROJECT" libraries="{Chart, Chart.js, mapbox-gl, three.js}" />
</component>
</project>
</project>

13
core/pipeline_replay.go
View File

@ -17,9 +17,15 @@ type pipelineReplay struct {
replayChan chan interface{}
}
func (r pipelineReplay) Stop() {
r.stopChan <- struct{}{}
close(r.replayChan)
func (p *pipelineReplay) Stop() {
defer func() {
if recover() != nil {
logrus.Debugln("replay channel already closed")
}
}()
logrus.Debugln("send stop signal")
p.stopChan <- struct{}{}
logrus.Debugln("stop signal sent")
}
func NewReplayPipeline(p Publisher, t *Tracking) *pipelineReplay {
@ -68,6 +74,7 @@ func (p *pipelineReplay) channelFromTracking(t *Tracking) chan interface{} {
case <-p.stopChan:
logrus.Debugln("replay pipeline closed")
}
close(p.replayChan)
}()
return ch
}

20
static/scripts/websocket.js
View File

@ -1,12 +1,12 @@
const GRAPH_RES = 100;
var dataSmartphone = [];
var ws;
window.addEventListener("load", function(evt) {
var output = document.getElementById("output");
var checkBoxSmartphone = document.getElementById("checkbox1");
var checkBoxUblox = document.getElementById("checkbox2");
var ws;
const wsOnCloseF = function (evt) {
ws = null;
@ -34,12 +34,16 @@ window.addEventListener("load", function(evt) {
// let dat = JSON.parse(evt.data)["lsm6dsm gyroscope"]
//let dat = JSON.parse(evt.data)["lsm6ds3c gyroscope"]
let dat = JSON.parse(evt.data)
dataSmartphone.push(dat)
// dataSmartphone.push(dat)
//console.log(evt.data)
console.log("JSON geparsed onmessage", dat)
// console.log("JSON geparsed onmessage", dat)
try{
if(!(dat.SOURCE_TCP.Orientation[0] === 0) && !(dat.SOURCE_TCP.Orientation[1] === 0) && !(dat.SOURCE_TCP.Orientation[2] === 0)){
document.getElementById("gyroscopeTCP").style.transform = `rotateX(${dat.SOURCE_TCP.Orientation[0]}deg) rotateY(${dat.SOURCE_TCP.Orientation[1]}deg) rotateZ(${dat.SOURCE_TCP.Orientation[2]}deg)`
// document.getElementById("gyroscopeTCP").style.transform = `rotateX(${(dat.SOURCE_TCP.Orientation[0])%360}deg) rotateY(${(dat.SOURCE_TCP.Orientation[1])%360}deg) rotateZ(0deg)`
document.getElementById("gyroscopeTCP").style.transform = `rotateY(0deg) rotateX(${(-dat.SOURCE_TCP.Orientation[0])}deg) rotateZ(${(dat.SOURCE_TCP.Orientation[1])}deg) `
// document.getElementById("gyroscopeTCP").style.transform = `rotateX(${(dat.SOURCE_TCP.Orientation[0])%360}deg) rotateZ(${(dat.SOURCE_TCP.Orientation[1])%360}deg) rotateY(${(dat.SOURCE_TCP.Orientation[2])%360}deg)`
// console.log(dat.SOURCE_TCP.Orientation)
renderTCP(dat.SOURCE_TCP.Orientation[0]*Math.PI/180,-dat.SOURCE_TCP.Orientation[1]*Math.PI/180,dat.SOURCE_TCP.Orientation[2]*Math.PI/180)
}
if(!(dat.SOURCE_TCP.Position[1] === 0) && !(dat.SOURCE_TCP.Position[0] === 0)){
document.getElementById("TCPlong").innerHTML = "Smartphone long: " + dat.SOURCE_TCP.Position[1]
@ -57,12 +61,14 @@ window.addEventListener("load", function(evt) {
}
catch{
console.log("no TCP data")
// console.log("no TCP data")
}
try{
if(!(dat.SOURCE_SERIAL.Orientation[0] === 0) && /*!(dat.SOURCE_SERIAL.Orientation[1] === 0) &&*/ !(dat.SOURCE_SERIAL.Orientation[2] === 0)){
document.getElementById("gyroscopeSERIAL").style.transform = `rotateX(${dat.SOURCE_SERIAL.Orientation[0]}deg) rotateY(${dat.SOURCE_SERIAL.Orientation[1]}deg) rotateZ(${dat.SOURCE_SERIAL.Orientation[2]}deg)`
document.getElementById("gyroscopeSERIAL").style.transform = `rotateX(${dat.SOURCE_SERIAL.Orientation[0]}deg) rotateY(${dat.SOURCE_SERIAL.Orientation[1]}deg) rotateZ(0deg)`
// document.getElementById("gyroscopeSERIAL").style.transform = `rotateX(${dat.SOURCE_SERIAL.Orientation[0]}deg) rotateY(${dat.SOURCE_SERIAL.Orientation[1]}deg) rotateZ(${dat.SOURCE_SERIAL.Orientation[2]}deg)`
renderSerial(dat.SOURCE_SERIAL.Orientation[0]*Math.PI/180,dat.SOURCE_SERIAL.Orientation[1]*Math.PI/180,-dat.SOURCE_SERIAL.Orientation[2]*Math.PI/180)
}
if(!(dat.SOURCE_SERIAL.Position[1] === 0) && !(dat.SOURCE_SERIAL.Position[0] === 0)){
document.getElementById("SERIALlong").innerHTML = "Ublox long: " + dat.SOURCE_SERIAL.Position[1]
@ -78,7 +84,7 @@ window.addEventListener("load", function(evt) {
document.getElementById("needle").style.transform = `rotate(${dat.SOURCE_SERIAL.HeadDevice}deg)`
}
}catch{
console.log("no serial data")
// console.log("no serial data")
}
try{

72
static/style.css
View File

@ -310,7 +310,7 @@ canvas {
height: 200px;
position: relative;
transform-style: preserve-3d;
transform: translateZ(-100px);
/*transform: translateZ(-100px);*/
transition: transform 25ms;
}
@ -328,7 +328,7 @@ canvas {
border: 1px solid white;
line-height: 200px;
font-size: 40px;
font-weight: bold;
/*font-weight: bold;*/
color: white;
text-align: center;
}
@ -340,11 +340,67 @@ canvas {
.cube__face--top { background: hsla(240, 100%, 50%, 0.7); }
.cube__face--bottom { background: hsla(300, 100%, 50%, 0.7); }
.cube__face--front { transform: rotateY( 0deg) translateZ(100px); }
.cube__face--right { transform: rotateY( 90deg) translateZ(100px); }
.cube__face--back { transform: rotateY(180deg) translateZ(100px); }
.cube__face--left { transform: rotateY(-90deg) translateZ(100px); }
.cube__face--top { transform: rotateX( 90deg) translateZ(100px); }
.cube__face--bottom { transform: rotateX(-90deg) translateZ(100px); }
.cube__face--front { transform: rotateY( 0deg) translateZ(100px) translateY(50px); height: 100px; line-height: 100px; }
.cube__face--right { transform: rotateY( 90deg) translateZ(100px) translateY(50px); height: 100px; line-height: 100px; }
.cube__face--back { transform: rotateY(180deg) translateZ(100px) translateY(50px); height: 100px; line-height: 100px; }
.cube__face--left { transform: rotateY(-90deg) translateZ(100px) translateY(50px); height: 100px; line-height: 100px; }
.cube__face--top { transform: rotateX( 90deg) translateZ(50px); }
.cube__face--bottom { transform: rotateX(-90deg) translateZ(50px); }
label { margin-right: 10px; }
.slidecontainer {
width: 100%;
overflow: visible;
padding: 10px 0px;
}
#manCalContainer {
display: none;
}
/*.slider {*/
/* -webkit-appearance: none;*/
/* width: 100%;*/
/* height: 25px;*/
/* background: #d3d3d3;*/
/* outline: none;*/
/* opacity: 0.7;*/
/* -webkit-transition: .2s;*/
/* transition: opacity .2s;*/
/*}*/
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background: #4CAF50;
cursor: pointer;
border-radius: 50%;
border: none;
}
.slider::-moz-range-thumb {
width: 20px;
height: 20px;
background: #4CAF50;
cursor: pointer;
border-radius: 50%;
border: none;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 8px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: opacity .15s ease-in-out;
transition: opacity .15s ease-in-out;
}

25
templates/index.html
View File

@ -6,8 +6,11 @@
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r124/three.js"></script>
<script src="static/scripts/websocket.js"></script>
<link rel="stylesheet" href="static/style.css">
<!-- <script src="http://www.x3dom.org/release/x3dom.js"></script>-->
<!-- <link rel="stylesheet" href="http://www.x3dom.org/release/x3dom.css">-->
</head>
<body>
<table style="font-size: small">
@ -78,11 +81,25 @@
</div>
</div>
<div id="viewport" style="height: 500px; width: 500px">
</div>
<div class="slidecontainer">
<button id="calibrate">Smartphone Ausrichtung kalibrieren</button>
<button id="deleteCalibration">Kalibrierung zurücksetzen</button>
<button id="manualCalibration">Manuelle Kalibrierung</button>
<div id="manCalContainer">
<p><br>Manuelle Kalibrierung</p>
<label>Pitch<input type="range" min="-90" max="90" value="0" class="slider" id="pitchRange" style="margin: 10px 0px"></label>
<label>Yaw<input type="range" min="-90" max="90" value="0" class="slider" id="yawRange" style="margin: 10px 0px"></label>
<label>Roll<input type="range" min="-90" max="90" value="0" class="slider" id="rollRange" style="margin: 10px 0px"></label>
</div>
</div>
<script src="static/scripts/cubes.js"></script>
<div class="scene">
<p style="font-size: large">Smartphone</p>
<div id="gyroscopeTCP" class="cube">
<div class="cube__face cube__face--front">front</div>
<div class="cube__face cube__face--back">back</div>
<div class="cube__face cube__face--front">back</div>
<div class="cube__face cube__face--back">front</div>
<div class="cube__face cube__face--right">right</div>
<div class="cube__face cube__face--left">left</div>
<div class="cube__face cube__face--top">top</div>
@ -92,8 +109,8 @@
<div class="scene">
<p style="font-size: large">Ublox</p>
<div id="gyroscopeSERIAL" class="cube">
<div class="cube__face cube__face--front">front</div>
<div class="cube__face cube__face--back">back</div>
<div class="cube__face cube__face--front">back</div>
<div class="cube__face cube__face--back">front</div>
<div class="cube__face cube__face--right">right</div>
<div class="cube__face cube__face--left">left</div>
<div class="cube__face cube__face--top">top</div>