change compass view and functionality
This commit is contained in:
parent
954301f57d
commit
39efd32509
@ -1,72 +0,0 @@
|
||||
var options2 = {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
datasets: [
|
||||
{
|
||||
label: 'compassTCP',
|
||||
data: [360,0],
|
||||
backgroundColor: [
|
||||
'rgba(30, 139, 195, 1)',
|
||||
'rgba(30, 139, 195, 1)'
|
||||
],
|
||||
borderColor: [
|
||||
'rgba(255, 255, 255 ,1)',
|
||||
'rgba(255, 255, 255 ,1)'
|
||||
],
|
||||
borderWidth: 4
|
||||
},
|
||||
{
|
||||
label: 'compassSERIAL',
|
||||
data: [360,0],
|
||||
backgroundColor: [
|
||||
'rgba(214, 69, 65, 1)',
|
||||
'rgba(214, 69, 65, 1)',
|
||||
],
|
||||
borderColor: [
|
||||
'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 addCompassSerial(deg){
|
||||
var c = Math.abs(90-deg);
|
||||
if(deg<90){
|
||||
myCompass.data.datasets[1].data = [360-c,c];
|
||||
}
|
||||
if(deg>90){
|
||||
myCompass.data.datasets[1].data = [c,360-c];
|
||||
}
|
||||
myCompass.update();
|
||||
}
|
||||
|
||||
function addCompassTCP(deg){
|
||||
var c = Math.abs(90-deg);
|
||||
if(deg<90){
|
||||
myCompass.data.datasets[0].data = [360-c,c];
|
||||
}
|
||||
if(deg>90){
|
||||
myCompass.data.datasets[0].data = [c,360-c];
|
||||
}
|
||||
myCompass.update();
|
||||
}
|
||||
@ -37,8 +37,8 @@ window.addEventListener("load", function(evt) {
|
||||
addSpeedTcp(dat.SOURCE_TCP.Speed);
|
||||
}
|
||||
if(!(dat.SOURCE_TCP.HeadDevice === 0)){
|
||||
addCompassTCP(dat.SOURCE_TCP.HeadDevice)
|
||||
document.getElementById("compassTCP").innerHTML = "Smartphone: " + dat.SOURCE_TCP.HeadDevice.toFixed(0) + "°"
|
||||
document.getElementById("needleTCP").style.transform = `rotate(${dat.SOURCE_TCP.HeadDevice}deg)`
|
||||
}
|
||||
}
|
||||
catch{
|
||||
@ -59,8 +59,8 @@ window.addEventListener("load", function(evt) {
|
||||
addSpeedSerial(dat.SOURCE_SERIAL.Speed);
|
||||
}
|
||||
if(!(dat.SOURCE_SERIAL.HeadDevice === 0)){
|
||||
addCompassSerial(dat.SOURCE_SERIAL.HeadDevice)
|
||||
document.getElementById("compassSERIAL").innerHTML = "Ublox: " + dat.SOURCE_SERIAL.HeadDevice.toFixed(0) + "°"
|
||||
document.getElementById("needle").style.transform = `rotate(${dat.SOURCE_SERIAL.HeadDevice}deg)`
|
||||
}
|
||||
}catch{
|
||||
console.log("no serial data")
|
||||
|
||||
245
static/style.css
245
static/style.css
@ -30,14 +30,14 @@ body{margin:0; padding:0; font-size:13px; font-family:Georgia, "Times New Roman"
|
||||
.float-child {
|
||||
width: 45%;
|
||||
float: left;
|
||||
padding: 20px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.outer {
|
||||
position: relative;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
margin: 50px;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
canvas {
|
||||
@ -84,45 +84,224 @@ canvas {
|
||||
margin-bottom: -50px;
|
||||
}
|
||||
|
||||
.compassNorth {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
font-size: 30px;
|
||||
bottom: 70%;
|
||||
margin-bottom: 50px;
|
||||
#compass {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin: 20px;
|
||||
}
|
||||
.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;
|
||||
#compass1 {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
#bezel {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
#bezelTCP {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#axis {
|
||||
position: absolute;
|
||||
left: 88px;
|
||||
top: 88px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #ffff;
|
||||
border: 6px solid #666;
|
||||
border-radius: 50%;
|
||||
}
|
||||
#axisTCP {
|
||||
position: absolute;
|
||||
left: 88px;
|
||||
top: 88px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #ffff;
|
||||
border: 6px solid #666;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#needle {
|
||||
position: absolute;
|
||||
left: 96px;
|
||||
width: 4px;
|
||||
height: 160px;
|
||||
top: 16px;
|
||||
}
|
||||
#needleTCP {
|
||||
position: absolute;
|
||||
left: 96px;
|
||||
width: 4px;
|
||||
height: 160px;
|
||||
top: 16px;
|
||||
}
|
||||
|
||||
#needle:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -1px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 4px solid transparent;
|
||||
border-bottom: 80px solid #FF3600;
|
||||
}
|
||||
|
||||
#needle:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
left: -1px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 4px solid transparent;
|
||||
border-top: 80px solid #666;
|
||||
}
|
||||
#needleTCP:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -1px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 4px solid transparent;
|
||||
border-bottom: 80px solid #FF3600;
|
||||
}
|
||||
|
||||
#needleTCP:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
left: -1px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 4px solid transparent;
|
||||
border-top: 80px solid #666;
|
||||
}
|
||||
|
||||
#N {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 88px;
|
||||
color: #FF3600;
|
||||
}
|
||||
|
||||
#E {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 80px;
|
||||
}
|
||||
|
||||
#S {
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
left: 88px;
|
||||
}
|
||||
|
||||
#W {
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 80px;
|
||||
}
|
||||
#NTCP {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 88px;
|
||||
color: #FF3600;
|
||||
}
|
||||
|
||||
#ETCP {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 80px;
|
||||
}
|
||||
|
||||
#STCP {
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
left: 88px;
|
||||
}
|
||||
|
||||
#WTCP {
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 80px;
|
||||
}
|
||||
|
||||
.dir {
|
||||
font-family: arial, sans-serif;
|
||||
color: #999;
|
||||
font-size: 20px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.quad {
|
||||
display: block;
|
||||
width: 2px;
|
||||
background: #ddd;
|
||||
height: 130px;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: 98px;
|
||||
}
|
||||
|
||||
#NWSE {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
#NESW {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
#WE {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
#NWSETCP {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
#NESWTCP {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
#WETCP {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
|
||||
@-webkit-keyframes spin {
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.sceneMap {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border: 0px solid #CCC;
|
||||
margin: 20px;
|
||||
perspective: 400px;
|
||||
}
|
||||
|
||||
.scene {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border: 0px solid #CCC;
|
||||
margin: 75px;
|
||||
margin: 70px;
|
||||
perspective: 400px;
|
||||
}
|
||||
|
||||
|
||||
@ -50,7 +50,7 @@
|
||||
|
||||
<div class="float-container">
|
||||
<div class="float-child">
|
||||
<div class="scene" style='width: 500px; height: 500px;'>
|
||||
<div class="sceneMap" style='width: 500px; height: 500px;'>
|
||||
<div id="map" style='width: 500px; height: 500px;'></div>
|
||||
<div id="state-legend" class="legend">
|
||||
<h4>Legende</h4>
|
||||
@ -95,7 +95,42 @@
|
||||
<p class="speedMax">250</p>
|
||||
</div>
|
||||
</div><br>
|
||||
<div class="outer">
|
||||
<div class="float-container">
|
||||
<div class="float-child">
|
||||
<div id="compass">
|
||||
<label id="compassSERIAL" style="color: rgba(214, 69, 65, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Ublox </label>
|
||||
<div id="bezel"></div>
|
||||
<div id="NWSE" class="quad"></div>
|
||||
<div id="NESW" class="quad"></div>
|
||||
<div id="NS" class="quad"></div>
|
||||
<div id="WE" class="quad"></div>
|
||||
<span id="N" class="dir">N</span>
|
||||
<span id="E" class="dir">E</span>
|
||||
<span id="S" class="dir">S</span>
|
||||
<span id="W" class="dir">W</span>
|
||||
<div id="needle"></div>
|
||||
<div id="axis"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="float-child">
|
||||
<div id="compass1">
|
||||
<label id="compassTCP" style="color: rgba(30, 139, 195, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Smartphone </label><br>
|
||||
<div id="bezelTCP"></div>
|
||||
<div id="NWSETCP" class="quad"></div>
|
||||
<div id="NESWTCP" class="quad"></div>
|
||||
<div id="NSTCP" class="quad"></div>
|
||||
<div id="WETCP" class="quad"></div>
|
||||
<span id="NTCP" class="dir">N</span>
|
||||
<span id="ETCP" class="dir">E</span>
|
||||
<span id="STCP" class="dir">S</span>
|
||||
<span id="WTCP" class="dir">W</span>
|
||||
<div id="needleTCP"></div>
|
||||
<div id="axisTCP"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--<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>
|
||||
@ -103,7 +138,7 @@
|
||||
<p class="compassEast">E</p>
|
||||
<p class="compassWest">W</p>
|
||||
<p class="compassSouth">S</p>
|
||||
</div>
|
||||
</div>-->
|
||||
</div>
|
||||
<div class="float-child">
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user