From 39efd3250964d6af473a90362a2d363d160dee29 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 29 Dec 2020 02:44:08 +0100 Subject: [PATCH] change compass view and functionality --- static/scripts/compass.js | 72 ----------- static/scripts/websocket.js | 4 +- static/style.css | 245 +++++++++++++++++++++++++++++++----- templates/index.html | 41 +++++- 4 files changed, 252 insertions(+), 110 deletions(-) delete mode 100644 static/scripts/compass.js diff --git a/static/scripts/compass.js b/static/scripts/compass.js deleted file mode 100644 index 329f354..0000000 --- a/static/scripts/compass.js +++ /dev/null @@ -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(); -} diff --git a/static/scripts/websocket.js b/static/scripts/websocket.js index 5df27bc..1fe8dfc 100644 --- a/static/scripts/websocket.js +++ b/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") diff --git a/static/style.css b/static/style.css index cd7cd86..46f0cc6 100644 --- a/static/style.css +++ b/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; } diff --git a/templates/index.html b/templates/index.html index ebe9472..5ebd263 100644 --- a/templates/index.html +++ b/templates/index.html @@ -50,7 +50,7 @@
-
+

Legende

@@ -95,7 +95,42 @@

250


-
+
+
+
+ +
+
+
+
+
+ N + E + S + W +
+
+
+
+
+
+
+
+
+
+
+
+ N + E + S + W +
+
+
+
+
+ +