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

adds accuracy chart for trackings

Browse Source
This commit is contained in:
unknown 2021-01-06 22:33:16 +01:00
parent b1dcc863e5
commit c3f9240801
5 changed files with 101 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
static/scripts/accuracy.js Normal file
View File

@ -0,0 +1,44 @@
var ctx = document.getElementById("accuracy").getContext('2d');
var barChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ["Horizontal Acc.", "Vertical Acc."],
datasets: [{
label: 'Ublox',
data: [0, 0],
backgroundColor: "rgba(214, 69, 65, 1)"
}, {
label: 'Smartphone',
data: [0, 0],
backgroundColor: "rgba(30, 139, 195, 1)"
}]
},
options: {
scales: {
xAxes: [{
ticks: {
min: 0,
max: 10
}
}]
},
legend: {
display: true,
enabled: true
},
tooltips: {
enabled: false,
display: false
}
}
});
function addSerialAccuracy(hacc, vacc){
barChart.data.datasets[0].data = [hacc, vacc];
barChart.update();
}
function addTCPAccuracy(hacc, vacc){
barChart.data.datasets[1].data = [hacc, vacc];
barChart.update();
}

15
static/scripts/chartfull.js
View File

@ -36,11 +36,10 @@ var myChart = new Chart(ctx, {
}
}],
xAxes: [{
ticks: {
min: 0,
max: 25
},
stepSize: 1
type: 'time',
time: {
unit: 'second'
}
}]
},
animation: {
@ -51,15 +50,15 @@ 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 addSerialSpeedData(sensordataList) {
function addSerialSpeedData(serialdataList, tcpdataList) {
let speedsSerial = []
let times = []
sensordataList.forEach(sensordata => {
serialdataList.forEach(sensordata => {
if (sensordata.Speed === 0) {
return;
}
let speed = sensordata.Speed
speedsSerial.push(speed);
speedsSerial.push(speed * 3.6, timestamp);
let time = sensordata.Servertime
times.push(time)

2
static/scripts/refull.js
View File

@ -41,7 +41,7 @@ window.addEventListener("load", function(evt) {
}
if ('SOURCE_SERIAL' in r.data.Data && r.data.Data.SOURCE_SERIAL.length > 0) {
updateMapSERIALbulk(r.data.Data.SOURCE_SERIAL)
addSerialSpeedData(r.data.Data.SOURCE_SERIAL)
addSerialSpeedData(r.data.Data.SOURCE_SERIAL, r.data.Data.SOURCE_TCP)
}
})

24
static/scripts/websocket.js
View File

@ -84,7 +84,29 @@ window.addEventListener("load", function(evt) {
}
}
catch{
console.log("no data")
console.log("no altitude data")
}
try{
if(!(dat.SOURCE_SERIAL.HAcc === 0) && !(dat.SOURCE_SERIAL.VAcc === 0)){
addSerialAccuracy(dat.SOURCE_SERIAL.HAcc, dat.SOURCE_SERIAL.VAcc)
document.getElementById("serialHAcc").innerHTML = "Ublox HAcc: " + dat.SOURCE_SERIAL.HAcc.toFixed(2) + " m"
document.getElementById("serialVAcc").innerHTML = "Ublox VAcc: " + dat.SOURCE_SERIAL.VAcc.toFixed(2) + " m"
console.log("acc: " + dat.SOURCE_SERIAL.HAcc, dat.SOURCE_SERIAL.VAcc)
}
}
catch{
console.log("no Serial acc")
}
try{
if(!(dat.SOURCE_TCP.HAcc === 0) && !(dat.SOURCE_TCP.VAcc === 0)){
addTCPAccuracy(dat.SOURCE_TCP.HAcc, dat.SOURCE_TCP.VAcc)
document.getElementById("tcpHAcc").innerHTML = "Smartphone HAcc: " + dat.SOURCE_TCP.HAcc.toFixed(2) + " m"
document.getElementById("tcpVAcc").innerHTML = "Smartphone VAcc: " + dat.SOURCE_TCP.VAcc.toFixed(2) + " m"
console.log("acc: " + dat.SOURCE_TCP.HAcc, dat.SOURCE_TCP.VAcc)
}
}
catch{
console.log("no TCP acc")
}

34
templates/index.html
View File

@ -57,6 +57,27 @@
<div><span style="background-color: rgba(30, 139, 195, 1)"></span>Smartphone</div>
</div>
</div>
<div class="container">
<div style="width: 500px; height: 150px;">
<canvas id="accuracy" width="500" height="150"></canvas>
</div>
<div class="float container">
<div class="float-child">
<div class="container" style="width: 200px; height: 50px">
<label id="serialHAcc" style= "color: rgba(214, 69, 65, 1); font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Ublox HAcc: </label><br>
<label id="serialVAcc" style= "color: rgba(214, 69, 65, 1); font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Ublox VAcc: </label>
</div>
</div>
<div class="float-child">
<div class="container" style="width: 200px; height: 50px">
<label id="tcpHAcc" style= "color: rgba(30, 139, 195, 1); font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Smartphone HAcc: </label><br>
<label id="tcpVAcc" style= "color: rgba(30, 139, 195, 1); font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Smartphone VAcc: </label>
</div>
</div>
</div>
</div>
<div class="scene">
<p style="font-size: large">Smartphone</p>
<div id="gyroscopeTCP" class="cube">
@ -80,6 +101,7 @@
</div>
</div>
</div>
<div class="float-child">
<div class="outer">
<label id="speedTCP" style="color: rgba(30, 139, 195, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Speed Smartphone (km/h): </label><br>
@ -137,15 +159,11 @@
<script src="static/scripts/map.js"></script>
<script src="static/scripts/speedometer.js"></script>
<div class="float-container">
<div class="float-child">
<div style="width: 600px; height: 400px;">
<canvas id="myChart" width="400" height="200"></canvas>
</div>
</div>
</div>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="static/scripts/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
<script src="static/scripts/accuracy.js"></script>
<!--<script src="static/scripts/chart.js"></script>-->
</body>
</html>