change compass view and functionality

static/scripts/compass.js

@@ -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();
-}

static/scripts/websocket.js

@@ -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")

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 {
+#compass {
-    position: absolute;
+    position: relative;
-    left: 50%;
+    width: 200px;
-    transform: translate(-50%, 0);
+    height: 200px;
-    font-size: 30px;
+    margin: 20px;
-    bottom: 70%;
-    margin-bottom: 50px;
 }
-.compassSouth {
+#compass1 {
-    position: absolute;
+    position: relative;
-    Left: 50%;
+    width: 200px;
-    transform: translate(-50%, 0);
+    height: 200px;
-    font-size: 30px;
+    margin: 20px;
-    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;
 }
 
+#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;
 }
 

templates/index.html

@@ -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">