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

redesign speedometer

Browse Source
This commit is contained in:
unknown 2020-12-28 09:20:00 +01:00
parent 2a9bb7f888
commit bc2976c0db
2 changed files with 125 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
static/scripts/speedometer.js
View File

@ -13,7 +13,7 @@ var options1 = {
'rgba(255, 255, 255 ,1)', 'rgba(255, 255, 255 ,1)',
'rgba(255, 255, 255 ,1)' 'rgba(255, 255, 255 ,1)'
], ],
borderWidth: 2 borderWidth: 0
}, },
{ {
label: 'speedSERIAl', label: 'speedSERIAl',
@ -26,7 +26,7 @@ var options1 = {
'rgba(255, 255, 255 ,1)', 'rgba(255, 255, 255 ,1)',
'rgba(255, 255, 255 ,1)' 'rgba(255, 255, 255 ,1)'
], ],
borderWidth: 2 borderWidth: 0
} }
] ]
}, },
@ -41,19 +41,116 @@ var options1 = {
enabled: false, enabled: false,
display: false display: false
}, },
cutoutPercentage: 50 cutoutPercentage: 40
}
}
var options2 = {
type: 'doughnut',
data: {
datasets: [
{
label: 'speedMarks',
data: [50,50,50,50],
backgroundColor: [
'rgba(30, 130, 76, 1)',
'rgba(244, 208, 63, 1)',
'rgba(235, 151, 78, 1)',
'rgba(217, 30, 24, 1)'
],
borderColor: [
'rgba(30, 130, 76, 1)',
'rgba(244, 208, 63, 1)',
'rgba(235, 151, 78, 1)',
'rgba(217, 30, 24, 1)'
],
borderWidth: 0
},
{
label: 'transparent',
data: [100],
backgroundColor: [
'rgba(0, 0, 0, 0)'
],
borderColor: [
'rgba(0, 0, 0, 0)'
],
borderWidth: 2
},
{
label: 'transparent1',
data: [100],
backgroundColor: [
'rgba(0, 0, 0, 0)'
],
borderColor: [
'rgba(0, 0, 0, 0)'
],
borderWidth: 2
},
{
label: 'transparent2',
data: [100],
backgroundColor: [
'rgba(0, 0, 0, 0)'
],
borderColor: [
'rgba(0, 0, 0, 0)'
],
borderWidth: 2
},
{
label: 'transparent3',
data: [100],
backgroundColor: [
'rgba(0, 0, 0, 0)'
],
borderColor: [
'rgba(0, 0, 0, 0)'
],
borderWidth: 2
},
{
label: 'speedMarks1',
data: [50,50,50,50],
backgroundColor: [
'rgba(30, 130, 76, 1)',
'rgba(244, 208, 63, 1)',
'rgba(235, 151, 78, 1)',
'rgba(217, 30, 24, 1)'
],
borderColor: [
'rgba(30, 130, 76, 1)',
'rgba(244, 208, 63, 1)',
'rgba(235, 151, 78, 1)',
'rgba(217, 30, 24, 1)'
],
borderWidth: 0
},
]
},
options: {
rotation: 1 * Math.PI,
circumference: 1 * Math.PI,
legend: {
display: false,
enabled: false
},
tooltips: {
enabled: false,
display: false
},
cutoutPercentage: 65
} }
} }
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);
var ctx2 = document.getElementById('speedometerSpeeds').getContext('2d');
var mySpeedometer2 = new Chart(ctx2, options2);
function addSpeedSerial(speedSERIAL){ function addSpeedSerial(speedSERIAL){
var speedSERIALkmh = (speedSERIAL * 3.6) var speedSERIALkmh = (speedSERIAL * 3.6)
var speedSERIALpercent = (speedSERIALkmh/250)*100 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]; mySpeedometer.data.datasets[1].data = [speedSERIALpercent, 100-speedSERIALpercent];
document.getElementById("speedSERIAL").innerHTML = "Speed Ublox (km/h): " + speedSERIALkmh.toFixed(1) document.getElementById("speedSERIAL").innerHTML = "Speed Ublox (km/h): " + speedSERIALkmh.toFixed(1)
mySpeedometer.update(); mySpeedometer.update();
@ -62,9 +159,6 @@ function addSpeedSerial(speedSERIAL){
function addSpeedTcp(speedTCP){ function addSpeedTcp(speedTCP){
var speedTCPkmh = (speedTCP * 3.6) var speedTCPkmh = (speedTCP * 3.6)
var speedTCPpercent = (speedTCPkmh/250)*100; 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]; mySpeedometer.data.datasets[0].data = [speedTCPpercent, 100-speedTCPpercent];
document.getElementById("speedTCP").innerHTML = "Speed Smartphone (km/h): " + speedTCPkmh.toFixed(1) document.getElementById("speedTCP").innerHTML = "Speed Smartphone (km/h): " + speedTCPkmh.toFixed(1)
mySpeedometer.update(); mySpeedometer.update();

25
templates/index.html
View File

@ -63,13 +63,29 @@
bottom: 0; bottom: 0;
margin-bottom: -50px; margin-bottom: -50px;
} }
.speed14 {
position: absolute;
left: 8%;
transform: translate(-50%, 0);
font-size: 20px;
bottom: 0;
margin-bottom: 90px;
}
.speedMed { .speedMed {
position: absolute; position: absolute;
left: 50%; left: 50%;
transform: translate(-50%, 0); transform: translate(-50%, 0);
font-size: 30px; font-size: 20px;
bottom: 0; bottom: 0;
margin-bottom: 150px; margin-bottom: 140px;
}
.speed34 {
position: absolute;
left: 92%;
transform: translate(-50%, 0);
font-size: 20px;
bottom: 0;
margin-bottom: 90px;
} }
.speedMax { .speedMax {
position: absolute; position: absolute;
@ -234,9 +250,12 @@
<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="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> <label id="speedSERIAL" style="color: rgba(214, 69, 65, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Speed Ublox (km/h): </label><br>
<div> <div>
<canvas id="speedometer" width="300" height="200"></canvas> <canvas id="speedometer" width="320" height="230"></canvas>
<canvas id="speedometerSpeeds" width="320" height="230"></canvas>
<p class="speedMin">0</p> <p class="speedMin">0</p>
<p class="speed14">62</p>
<p class="speedMed">125</p> <p class="speedMed">125</p>
<p class="speed34">188</p>
<p class="speedMax">250</p> <p class="speedMax">250</p>
</div> </div>
</div><br> </div><br>