From e4cb636fec35015a4d411b424d8e892e7e5da787 Mon Sep 17 00:00:00 2001 From: Tony White Date: Wed, 3 Jan 2024 10:29:58 -1000 Subject: [PATCH] icon fix and button state tweaks --- .DS_Store | Bin 6148 -> 6148 bytes app/.DS_Store | Bin 6148 -> 6148 bytes app/main.py | 6 +-- app/static/index.html | 72 +++++++++++++++++++----------------- app/static/register_service | 6 +-- 5 files changed, 44 insertions(+), 40 deletions(-) diff --git a/.DS_Store b/.DS_Store index 5b368be12560d734317a05485afe7d2ddbc35470..c1d494e25f1d46e3d37bab653e870aa16a6d2611 100644 GIT binary patch delta 20 bcmZoMXffDe%*e%Zf*C4-VkJP;xeWRYVL8f7!M delta 48 zcmZoMXfc@JFUrioz`)4BAi%(o$&j2>UR;orlb^KtBlB`bM&`|Tn6z0ZHeA@u&heKY E04wMYTL1t6 diff --git a/app/main.py b/app/main.py index ae9df68..4b276f8 100644 --- a/app/main.py +++ b/app/main.py @@ -90,10 +90,10 @@ def stop_logging(): def servicenames(): return ''' {"name": "Simple Ping2 Survey ", - "description": "This extension makes it easy to record data from the ping2 sonar onbaord the vehicle, keeping a poor communications link from interfering with the quality of collected survey data. When connected, the extension displays a data preview that is intended to aide in survey grid spacing determination. Happy motoring!", - "icon": "map-check-outline", + "description": "This extension makes it easy to record data from the ping2 sonar and gps onbaord the vehicle, keeping a poor communications link from interfering with the quality of collected survey data. When connected, the extension displays a data preview that is intended to aide in survey grid spacing determination while logging at 2Hz. Happy motoring!", + "icon": "mdi-map-plus", "company": "Blue Robotics", - "version": "0.0.1", + "version": "0.5", "webpage": "https://github.com/vshie/pingSurvey", "api": "https://github.com/bluerobotics/BlueOS-docker"} ''' diff --git a/app/static/index.html b/app/static/index.html index b152ebd..91b2283 100644 --- a/app/static/index.html +++ b/app/static/index.html @@ -29,7 +29,7 @@ #app { - margin-top: 60px; /* Adjust based on logo size and desired spacing */ + margin-top: 60px; } .confidence-high { background-color: green; @@ -118,11 +118,7 @@

Status Console

shouldRotate: function (newVal, oldVal) { if(newVal) { this.rotationDegree = (this.rotationDegree + 45) % 360; - } else { - // Optional: reset rotation when data stops being received - // this.rotationDegree = 0; - } - console.log(this.rotationDegree) + } Vue.set(this.styleObject, "transform", `rotate(${this.rotationDegree}deg)`); } }, @@ -144,10 +140,10 @@

Status Console

icon: 'mdi-play', run: false, map: null, - circleMarkers: [], + circleMarkers: [], //used to hold array of depth locations isLoading: false, - receivingData: false, - logoRotation: 0, + receivingData: false, //if true logging process is running + logoRotation: 0, //we increment this when dat is received for visual feedback customIcon: L.icon({ iconUrl: '/static/BB.png', // icon .png file iconSize: [32, 45], // icon size in pixels @@ -184,10 +180,8 @@

Status Console

}, methods: { async toggleRun() { - // Toggle the icon between play and stop - this.icon = this.icon === 'mdi-play' ? 'mdi-stop' : 'mdi-play'; + this.icon = this.icon === 'mdi-play' ? 'mdi-stop' : 'mdi-play';// Toggle the icon between play and stop this.run = !this.run; - if (this.run) { await this.start(); } else { @@ -209,15 +203,14 @@

Status Console

console.error('Error fetching data:', error); this.status = 'Error: ' + error.message; } - this.map.setView([9.2,-133], 13); + this.map.setView([9.2,-133], 10); //set to middle of South Pacific, randomly. Will center vehicle with first data received L.tileLayer('https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', { maxZoom: 19, attribution: '© Google Maps' - }).addTo(this.map); - this.intervalId = setInterval(this.fetchData, 1000); // fetch data every second + }).addTo(this.map); //extension will not load map backgrounds if internet not available to computer accessing webpage + this.intervalId = setInterval(this.fetchData, 1000); // fetch data every second (log is 2hz default) L.control.scale({imperial: false}).addTo(map); console.log('Map:', this.map); - }, async stop() { @@ -328,17 +321,28 @@

Status Console

}, getColor(depth) { const colorStops = [ - { depth: 0, color: [209, 233, 255] }, - { depth: 1000, color: [191, 2224,255 ] }, - { depth: 2000, color: [181, 215, 247] }, - { depth: 3000, color: [170, 207, 242] }, - { depth: 4000, color: [149, 188, 230] }, - { depth: 5000, color: [134, 179, 235] }, - { depth: 6000, color: [98, 159, 217] }, - { depth: 7000, color: [82, 143, 204] }, - { depth: 8000, color: [66, 124, 179] }, - { depth: 9000, color: [43, 102, 166] }, - { depth: 10000, color: [56, 91, 140] } + {depth: 0, color: [209, 233, 255]}, + {depth: 1000, color: [193, 218, 243]}, + {depth: 2000, color: [178, 204, 232]}, + {depth: 3000, color: [163, 190, 220]}, + {depth: 4000, color: [147, 176, 209]}, + {depth: 5000, color: [132, 162, 197]}, + {depth: 6000, color: [117, 147, 186]}, + {depth: 7000, color: [101, 133, 174]}, + {depth: 8000, color: [86, 119, 163]}, + {depth: 9000, color: [71, 105, 151]}, + {depth: 10000, color: [56, 91, 140]} +/* {depth: 0, color: [255, 255, 255]}, + {depth: 1000, color: [255, 165, 0]}, + {depth: 2000, color: [255, 0, 0]}, + {depth: 3000, color: [255, 255, 0]}, + {depth: 4000, color: [0, 128, 0]}, + {depth: 5000, color: [0, 128, 128]}, + {depth: 6000, color: [0, 0, 255]}, + {depth: 7000, color: [0, 0, 139]}, + {depth: 8000, color: [128, 0, 128]}, + {depth: 9000, color: [48, 25, 52]}, + {depth: 10000, color: [48, 25, 52]} */ ]; let color1, color2;// Find the two colors we need to interpolate between for (let i = 0; i < colorStops.length - 1; i++) { @@ -371,35 +375,35 @@

Status Console

const response = await axios.get('/status'); if (response.data.logging_active) { this.run = true; - this.icon = 'mdi-stop'; - this.map.setView([9.2,-133], 13); + this.icon = 'mdi-play'; + this.map.setView([9.2,-133], 10); L.tileLayer('https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', { maxZoom: 21, attribution: '© Google Maps' }).addTo(this.map); - this.intervalId = setInterval(this.fetchData, 500); // fetch data every second + this.intervalId = setInterval(this.fetchData, 1000); // fetch data every second console.log('Map:', this.map); } else { this.run = false; - this.icon = 'mdi-play'; + this.icon = 'mdi-stop'; } } catch (error) { console.error('Error fetching status:', error); this.run = false; - this.icon = 'mdi-play'; + this.icon = 'mdi-stop'; } }, }, mounted() { - this.checkLoggingStatus(); - this.map = L.map('map').setView([9.2,-133], 13); + this.map = L.map('map').setView([9.2,-133], 10); L.tileLayer('https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', { maxZoom: 21, attribution: '© Google Maps' }).addTo(this.map); L.control.scale({imperial: false}).addTo(map); console.log('Vue App Mounted! Have a safe voyage!') + this.checkLoggingStatus(); } }) diff --git a/app/static/register_service b/app/static/register_service index 5656515..98a4f1d 100644 --- a/app/static/register_service +++ b/app/static/register_service @@ -1,9 +1,9 @@ { "name":"pingSurvey", - "description":"Simple Survey Extension", - "icon":"map-check-outline", + "description":"This extension makes it easy to record data from the ping2 sonar and gps onbaord the vehicle, keeping a poor communications link from interfering with the quality of collected survey data. When connected, the extension displays a data preview that is intended to aide in survey grid spacing determination while logging at 2Hz. Happy motoring!", + "icon":"mdi-map-plus", "company":"Blue Robotics", "version":"0.5", "webpage":"https://github.com/vshie/pingSurvey", - "api":"" + "api":"https://github.com/bluerobotics/BlueOS-docker" }