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

adds TCP speed data

Browse Source
This commit is contained in:
unknown 2020-12-27 17:15:57 +01:00
parent 5fb76a76ca
commit c59d482333
4 changed files with 34 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
static/scripts/map.js
View File

@ -41,7 +41,7 @@ map.on('load', function () {
'visibility': 'visible'
},
'paint': {
'line-color': 'blue',
'line-color': 'rgba(30, 139, 195, 1)',
'line-opacity': 0.75,
'line-width': 5
}
@ -55,7 +55,7 @@ map.on('load', function () {
'visibility': 'visible'
},
'paint': {
'line-color': 'red',
'line-color': 'rgba(214, 69, 65, 1)',
'line-opacity': 0.75,
'line-width': 5
}

44
static/scripts/speedometer.js
View File

@ -6,7 +6,7 @@ var options1 = {
label: 'speedTCP',
data: [50,50],
backgroundColor: [
'rgba(231, 76, 60, 1)',
'rgba(30, 139, 195, 1)',
'rgba(191, 191, 191, 1)'
],
borderColor: [
@ -17,9 +17,9 @@ var options1 = {
},
{
label: 'speedSERIAl',
data: [20, 80],
data: [50, 50],
backgroundColor: [
'rgba(0, 177, 106, 1)',
'rgba(214, 69, 65, 1)',
'rgba(191, 191, 191, 1)'
],
borderColor: [
@ -34,14 +34,13 @@ var options1 = {
rotation: 1 * Math.PI,
circumference: 1 * Math.PI,
legend: {
display: false,
enabled: false
},
tooltips: {
enabled: false,
display: false
},
tooltip: {
enabled: false
},
legend: {
enabled: false
},
cutoutPercentage: 50
}
}
@ -49,15 +48,24 @@ var options1 = {
var ctx1 = document.getElementById('speedometer').getContext('2d');
var mySpeedometer = new Chart(ctx1, options1);
function addSpeedData(/*speedTCP,*/ speedSERIAL){
//var speedTCPpercent = (speedTCP/250)*100;
var serialSpeedKmh = (speedSERIAL * 3.6)
var speedSERIALpercent = (serialSpeedKmh/250)*100
console.log("speed ms", speedSERIAL)
console.log("speed kmh", serialSpeedKmh)
console.log("speed percent", speedSERIALpercent)
//mySpeedometer.data.datasets[0].data = [speedTCPpercent, 100-speedTCPpercent];
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 Smartphone (km/h): " + serialSpeedKmh.toFixed(3)
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();
}

4
static/scripts/websocket.js
View File

@ -79,6 +79,7 @@ window.addEventListener("load", function(evt) {
updateMapTCP(dat.SOURCE_TCP.Position[1], dat.SOURCE_TCP.Position[0])
map.panTo([dat.SOURCE_TCP.Position[1], dat.SOURCE_TCP.Position[0]])
}
addSpeedTcp(dat.SOURCE_TCP.Speed);
}
catch{
console.log("no TCP data")
@ -94,6 +95,7 @@ window.addEventListener("load", function(evt) {
updateMapSERIAL(dat.SOURCE_SERIAL.Position[1], dat.SOURCE_SERIAL.Position[0])
map.panTo([dat.SOURCE_SERIAL.Position[1], dat.SOURCE_SERIAL.Position[0]])
}
addSpeedSerial(dat.SOURCE_SERIAL.Speed);
}catch{
console.log("no serial data")
}
@ -121,8 +123,6 @@ window.addEventListener("load", function(evt) {
// }
// addData(orientation[0] / multiplier)
*/
addSpeedData(/*dat.SOURCE_TCP.Speed,*/ dat.SOURCE_SERIAL.Speed);
// addData(dat[0])
}

8
templates/index.html
View File

@ -161,15 +161,15 @@
<div id="map" style='width: 500px; height: 500px;'></div>
<div id="state-legend" class="legend">
<h4>Legende</h4>
<div><span style="background-color: red"></span>Ublox</div>
<div><span style="background-color: blue"></span>Smartphone</div>
<div><span style="background-color: rgba(214, 69, 65, 1)"></span>Ublox</div>
<div><span style="background-color: rgba(30, 139, 195, 1)"></span>Smartphone</div>
</div>
</div>
</div>
<div class="float-child">
<div class="outer">
<label id="speedTCP" style="color: firebrick; font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Speed Smartphone (km/h): </label><br>
<label id="speedSERIAL" style="color: forestgreen; font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Speed Ublox (km/h): </label><br>
<label id="speedTCP" style="color: rgba(30, 139, 195, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Speed Smartphone (km/h): </label><br>
<label id="speedSERIAL" style="color: rgba(214, 69, 65, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Speed Ublox (km/h): </label><br>
<canvas id="speedometer" width="300" height="200"></canvas>
<p class="speedMin">0</p>
<p class="speedMax">250</p>