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

add compass

Browse Source
This commit is contained in:
unknown 2020-12-28 06:53:49 +01:00
parent 292d93622f
commit c0ae64b035
5 changed files with 45 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
static/scripts/chart.js
View File

@ -18,8 +18,8 @@ var myChart = new Chart(ctx, {
yAxes: [{
ticks: {
// beginAtZero: true
min: -100,
max: 100
min: -2000,
max: 2000
}
}]
},
@ -30,7 +30,7 @@ var myChart = new Chart(ctx, {
});
myChart.data.labels.fill("", 0, GRAPH_RES);
myChart.data.datasets.forEach((dataset) => dataset.data.fill(0, 0, GRAPH_RES))
function addData(data) {
function addSerialAltData(data) {
myChart.data.labels.push("");
myChart.data.datasets.forEach((dataset) => {
dataset.data.push(data);

25
static/scripts/compass.js
View File

@ -56,25 +56,8 @@ var options2 = {
var ctx2 = document.getElementById('compass').getContext('2d');
var myCompass = new Chart(ctx2, options2);
/*
function addSpeedSerial(speedSERIAL){
var speedSERIALkmh = (speedSERIAL * 3.6)
var speedSERIALpercent = (speedSERIALkmh/250)*100
console.log("SERIAL speed ms", speedSERIAL)
console.log("SERIAL speed kmh", speedSERIALkmh)
console.log("SERIAL speed percent", speedSERIALpercent)
mySpeedometer.data.datasets[1].data = [speedSERIALpercent, 100-speedSERIALpercent];
document.getElementById("speedSERIAL").innerHTML = "Speed Ublox (km/h): " + speedSERIALkmh.toFixed(1)
mySpeedometer.update();
}
function addSpeedTcp(speedTCP){
var speedTCPkmh = (speedTCP * 3.6)
var speedTCPpercent = (speedTCPkmh/250)*100;
console.log("TCP speed ms", speedSERIAL)
console.log("TCP speed kmh", serialSpeedKmh)
console.log("TCP speed percent", speedSERIALpercent)
mySpeedometer.data.datasets[0].data = [speedTCPpercent, 100-speedTCPpercent];
document.getElementById("speedTCP").innerHTML = "Speed Smartphone (km/h): " + speedTCPkmh.toFixed(1)
mySpeedometer.update();
}*/
function addCompassSerial(deg){
myCompass.data.datasets[1].data = [0,0,0,0];
myCompass.update();
}

8
static/scripts/speedometer.js
View File

@ -51,9 +51,9 @@ var mySpeedometer = new Chart(ctx1, options1);
function addSpeedSerial(speedSERIAL){
var speedSERIALkmh = (speedSERIAL * 3.6)
var speedSERIALpercent = (speedSERIALkmh/250)*100
console.log("SERIAL speed ms", speedSERIAL)
/*console.log("SERIAL speed ms", speedSERIAL)
console.log("SERIAL speed kmh", speedSERIALkmh)
console.log("SERIAL speed percent", speedSERIALpercent)
console.log("SERIAL speed percent", speedSERIALpercent)*/
mySpeedometer.data.datasets[1].data = [speedSERIALpercent, 100-speedSERIALpercent];
document.getElementById("speedSERIAL").innerHTML = "Speed Ublox (km/h): " + speedSERIALkmh.toFixed(1)
mySpeedometer.update();
@ -62,9 +62,9 @@ function addSpeedSerial(speedSERIAL){
function addSpeedTcp(speedTCP){
var speedTCPkmh = (speedTCP * 3.6)
var speedTCPpercent = (speedTCPkmh/250)*100;
console.log("TCP speed ms", speedSERIAL)
/*console.log("TCP speed ms", speedSERIAL)
console.log("TCP speed kmh", serialSpeedKmh)
console.log("TCP speed percent", speedSERIALpercent)
console.log("TCP speed percent", speedSERIALpercent)*/
mySpeedometer.data.datasets[0].data = [speedTCPpercent, 100-speedTCPpercent];
document.getElementById("speedTCP").innerHTML = "Speed Smartphone (km/h): " + speedTCPkmh.toFixed(1)
mySpeedometer.update();

11
static/scripts/websocket.js
View File

@ -69,6 +69,11 @@ window.addEventListener("load", function(evt) {
//console.log(evt.data)
console.log("JSON geparsed onmessage", dat)
if(!(dat.SOURCE_SERIAL.HeadDevice === 0)){
console.log("Compass" + dat.SOURCE_SERIAL.HeadDevice)
addCompassSerial(dat.SOURCE_SERIAL.HeadDevice)
}
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)`
@ -112,6 +117,11 @@ window.addEventListener("load", function(evt) {
console.log("no data to compare")
}
if(!(dat.SOURCE_SERIAL.Position[2] === 0)){
addSerialAltData(dat.SOURCE_SERIAL.Position[2])
}
/*
console.log(dat)
orientation[0] += dat[0] * multiplier
@ -123,7 +133,6 @@ window.addEventListener("load", function(evt) {
// }
// addData(orientation[0] / multiplier)
*/
// addData(dat[0])
}
ws.onerror = function(evt) {

48
templates/index.html
View File

@ -198,6 +198,28 @@
<div><span style="background-color: rgba(30, 139, 195, 1)"></span>Smartphone</div>
</div>
</div>
<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--right">right</div>
<div class="cube__face cube__face--left">left</div>
<div class="cube__face cube__face--top">top</div>
<div class="cube__face cube__face--bottom">bottom</div>
</div>
</div>
<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--right">right</div>
<div class="cube__face cube__face--left">left</div>
<div class="cube__face cube__face--top">top</div>
<div class="cube__face cube__face--bottom">bottom</div>
</div>
</div>
</div>
<div class="float-child">
<div class="outer">
@ -217,7 +239,9 @@
<p class="compassSouth">S</p>
</div>
</div>
<div class="float-child">
</div>
</div>
<script src="static/scripts/map.js"></script>
@ -226,31 +250,7 @@
<div class="float-container">
<div class="float-child">
<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--right">right</div>
<div class="cube__face cube__face--left">left</div>
<div class="cube__face cube__face--top">top</div>
<div class="cube__face cube__face--bottom">bottom</div>
</div>
</div>
<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--right">right</div>
<div class="cube__face cube__face--left">left</div>
<div class="cube__face cube__face--top">top</div>
<div class="cube__face cube__face--bottom">bottom</div>
</div>
</div>
</div>
<div class="float-child">
<div style="width: 600px; height: 400px;">
<canvas id="myChart" width="400" height="200"></canvas>
</div>