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

adds compass to the page

Browse Source
This commit is contained in:
unknown 2020-12-27 18:19:13 +01:00
parent c59d482333
commit 292d93622f
2 changed files with 124 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
static/scripts/compass.js Normal file
View File

@ -0,0 +1,80 @@
var options2 = {
type: 'doughnut',
data: {
datasets: [
{
label: 'compassTCP',
data: [50,50,50,50],
backgroundColor: [
'rgba(191, 191, 191, 1)',
'rgba(191, 191, 191, 1)',
'rgba(30, 139, 195, 1)',
'rgba(30, 139, 195, 1)'
],
borderColor: [
'rgba(255, 255, 255 ,1)',
'rgba(255, 255, 255 ,1)',
'rgba(255, 255, 255 ,1)',
'rgba(255, 255, 255 ,1)'
],
borderWidth: 4
},
{
label: 'compassSERIAL',
data: [50,50,50,50],
backgroundColor: [
'rgba(191, 191, 191, 1)',
'rgba(191, 191, 191, 1)',
'rgba(214, 69, 65, 1)',
'rgba(214, 69, 65, 1)'
],
borderColor: [
'rgba(255, 255, 255 ,1)',
'rgba(255, 255, 255 ,1)',
'rgba(255, 255, 255 ,1)',
'rgba(255, 255, 255 ,1)'
],
borderWidth: 4
}
]
},
options: {
rotation: 2 * Math.PI,
circumference: 2 * Math.PI,
legend: {
display: false,
enabled: false
},
tooltips: {
enabled: false,
display: false
},
cutoutPercentage: 50
}
}
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();
}*/

45
templates/index.html
View File

@ -72,6 +72,39 @@
margin-bottom: -50px;
}
.compassNorth {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
font-size: 30px;
bottom: 70%;
margin-bottom: 50px;
}
.compassSouth {
position: absolute;
Left: 50%;
transform: translate(-50%, 0);
font-size: 30px;
bottom: -70%;
margin-bottom: 50px;
}
.compassWest {
position: absolute;
left: 0%;
transform: translate(-50%, 0);
font-size: 30px;
bottom: 50%;
margin-bottom: -50px;
}
.compassEast {
position: absolute;
Left: 100%;
transform: translate(-50%, 0);
font-size: 30px;
bottom: 50%;
margin-bottom: -50px;
}
.scene {
width: 200px;
@ -173,13 +206,23 @@
<canvas id="speedometer" width="300" height="200"></canvas>
<p class="speedMin">0</p>
<p class="speedMax">250</p>
</div><br>
<div class="outer">
<label id="compassTCP" style="color: rgba(30, 139, 195, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Smartphone </label><br>
<label id="compassSERIAL" style="color: rgba(214, 69, 65, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Ublox </label><br>
<canvas id="compass" width="300" height="200"></canvas>
<p class="compassNorth">N</p>
<p class="compassEast">E</p>
<p class="compassWest">W</p>
<p class="compassSouth">S</p>
</div>
</div>
</div>
</div>
<script src="static/scripts/map.js"></script>
<script src="static/scripts/speedometer.js"></script>
<script src="static/scripts/compass.js"></script>
<div class="float-container">
<div class="float-child">