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

44
static/scripts/speedometer.js
View File

@ -6,7 +6,7 @@ var options1 = {
label: 'speedTCP', label: 'speedTCP',
data: [50,50], data: [50,50],
backgroundColor: [ backgroundColor: [
'rgba(231, 76, 60, 1)', 'rgba(30, 139, 195, 1)',
'rgba(191, 191, 191, 1)' 'rgba(191, 191, 191, 1)'
], ],
borderColor: [ borderColor: [
@ -17,9 +17,9 @@ var options1 = {
}, },
{ {
label: 'speedSERIAl', label: 'speedSERIAl',
data: [20, 80], data: [50, 50],
backgroundColor: [ backgroundColor: [
'rgba(0, 177, 106, 1)', 'rgba(214, 69, 65, 1)',
'rgba(191, 191, 191, 1)' 'rgba(191, 191, 191, 1)'
], ],
borderColor: [ borderColor: [
@ -34,14 +34,13 @@ var options1 = {
rotation: 1 * Math.PI, rotation: 1 * Math.PI,
circumference: 1 * Math.PI, circumference: 1 * Math.PI,
legend: { legend: {
display: false,
enabled: false
},
tooltips: {
enabled: false,
display: false display: false
}, },
tooltip: {
enabled: false
},
legend: {
enabled: false
},
cutoutPercentage: 50 cutoutPercentage: 50
} }
} }
@ -49,15 +48,24 @@ var options1 = {
var ctx1 = document.getElementById('speedometer').getContext('2d'); var ctx1 = document.getElementById('speedometer').getContext('2d');
var mySpeedometer = new Chart(ctx1, options1); var mySpeedometer = new Chart(ctx1, options1);
function addSpeedData(/*speedTCP,*/ speedSERIAL){ function addSpeedSerial(speedSERIAL){
//var speedTCPpercent = (speedTCP/250)*100; var speedSERIALkmh = (speedSERIAL * 3.6)
var serialSpeedKmh = (speedSERIAL * 3.6) var speedSERIALpercent = (speedSERIALkmh/250)*100
var speedSERIALpercent = (serialSpeedKmh/250)*100 console.log("SERIAL speed ms", speedSERIAL)
console.log("speed ms", speedSERIAL) console.log("SERIAL speed kmh", speedSERIALkmh)
console.log("speed kmh", serialSpeedKmh) console.log("SERIAL speed percent", speedSERIALpercent)
console.log("speed percent", speedSERIALpercent)
//mySpeedometer.data.datasets[0].data = [speedTCPpercent, 100-speedTCPpercent];
mySpeedometer.data.datasets[1].data = [speedSERIALpercent, 100-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(); 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]) updateMapTCP(dat.SOURCE_TCP.Position[1], dat.SOURCE_TCP.Position[0])
map.panTo([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{ catch{
console.log("no TCP data") 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]) updateMapSERIAL(dat.SOURCE_SERIAL.Position[1], dat.SOURCE_SERIAL.Position[0])
map.panTo([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{ }catch{
console.log("no serial data") console.log("no serial data")
} }
@ -121,8 +123,6 @@ window.addEventListener("load", function(evt) {
// } // }
// addData(orientation[0] / multiplier) // addData(orientation[0] / multiplier)
*/ */
addSpeedData(/*dat.SOURCE_TCP.Speed,*/ dat.SOURCE_SERIAL.Speed);
// addData(dat[0]) // addData(dat[0])
} }

8
templates/index.html
View File

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