adds compass to the page

static/scripts/compass.js

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

templates/index.html

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