Added boat icon, learning vue and experimenting wtih map / heatmap

vshie · Nov 29, 2023 · 2ec7865 · 2ec7865
1 parent 74e1ca9
commit 2ec7865
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 23 deletions.
diff --git a/app/main.py b/app/main.py
@@ -1,4 +1,4 @@
-from flask import Flask, render_template, send_file
+from flask import Flask, render_template, send_file, jsonify
 import requests
 import csv
 import time
@@ -8,8 +8,8 @@
 
 # Global variable to control the logging thread
 logging_active = False
-distance_url = 'http://localhost:6040/mavlink/vehicles/1/components/194/messages/DISTANCE_SENSOR'
-gps_url = 'http://localhost:6040/mavlink/vehicles/1/components/1/messages/GLOBAL_POSITION_INT'
+distance_url = 'http://192.168.1.71:6040/mavlink/vehicles/1/components/194/messages/DISTANCE_SENSOR'
+gps_url = 'http://192.168.1.71:6040/mavlink/vehicles/1/components/1/messages/GLOBAL_POSITION_INT'
 log_file = 'sensor_data.csv'
 log_rate = 2
 
@@ -30,6 +30,16 @@ def start_logging():
         main()  # Start the logging script directly
     return 'Started'
 
+@app.route("/get_data")
+def get_data():
+    data = {
+        'unix_timestamp': unix_timestamp,
+        'distance': distance,
+        'latitude': latitude,
+        'longitude': longitude
+    }
+    return jsonify(data)
+
 @app.route('/stop')
 def stop_logging():
     global logging_active
@@ -63,13 +73,15 @@ def main():
                 # Extract the values for each column
                 timestamp = int(time.time() * 1000)  # Convert current time to milliseconds
                 dt = datetime.fromtimestamp(timestamp / 1000)  # Convert timestamp to datetime object
+                global unix_timestamp
                 unix_timestamp = timestamp
                 year, month, day, hour, minute, second = dt.year, dt.month, dt.day, dt.hour, dt.minute, dt.second
-
+                global distance
                 distance = distance_data['current_distance']
+                global latitude
                 latitude = gps_data['lat'] / 1e7
+                global longitude
                 longitude = gps_data['lon'] / 1e7
-
                 column_values = [unix_timestamp, year, month, day, hour, minute, second, distance, latitude, longitude]
 
                 # Create or append to the log file and write the data
@@ -94,6 +106,7 @@ def main():
             # Provide feedback every 5 seconds
             if row_counter % (log_rate * feedback_interval) == 0:
                 print(f"Rows added to CSV: {row_counter}")
+
 
             # Wait for the specified log rate
             time.sleep(1 / log_rate)

diff --git a/app/static/index.html b/app/static/index.html
@@ -1,31 +1,25 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>Vshie Ping Survey</title
+    <title>Tony's Blue Robotics BlueBoat Ping2 Survey Extension</title>
 
     <link href="/static/css/materialdesignicons.min.css" rel="stylesheet">
     <link href="/static/css/vuetify.min.css" rel="stylesheet">
     <link href="/static/css/style.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
+    <link rel="stylesheet" href="https://unpkg.com/leaflet.heat/dist/leaflet-heat.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
 </head>
+<body>
 <div id="app">
     <v-app>
         <v-main>
             <v-container>
-                <h1>Vshierdom's Ping Survey Logging Tool</h1>
-                <v-btn outlined rounded text @click="start">Start</v-btn>
-                <v-btn outlined rounded text @click="stop">Stop</v-btn>
+                <h1>Tony's Blue Robotics BlueBoat Ping2 Survey Extension</h1>
+                <v-btn :disabled="isLoading" outlined rounded text @click="toggleRun"><v-icon>{{ icon }}</v-icon></v-btn>
                 <v-btn outlined rounded text @click="download">Download</v-btn>
-
-                <v-card 
-                    v-if="status" 
-                    class="mx-auto my-12" 
-                    outlined 
-                    color="blue-grey lighten-5">
-                    <v-card-text class="body-1">
-                        {{ status }}
-                    </v-card-text>
-                </v-card>
+                <div id="map" style="height: 500px;"></div>
+
             </v-container>
         </v-main>
     </v-app>
@@ -35,22 +29,48 @@ <h1>Vshierdom's Ping Survey Logging Tool</h1>
 <script src="/static/js/vuetify.js"></script>
 <script src="/static/js/axios.min.js"></script>
 <script src="/static/js/chart.js"></script>
+<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
+<script src="https://unpkg.com/leaflet.heat/dist/leaflet-heat.js"></script>
+
 
 <script>
     Vue.config.devtools = true;
     new Vue({
         el: '#app',
         vuetify: new Vuetify({
             theme: {
-                dark: false, // Enable light mode
+                dark: true, // Enable light mode
             },
         }),
         data() {
             return {
-                status: ""
+                status: "",
+                icon: 'mdi-play',
+                run: false,
+                map: null,
+                heatmapLayer: null,
+                gpsIcon: L.icon({
+                    iconUrl: 'path_to_your_icon.png',
+                    iconSize: [38, 95],
+                    iconAnchor: [22, 94],
+                    popupAnchor: [-3, -76],
+                }),
+
             }
         },
         methods: {
+            async toggleRun() {
+                // Toggle the icon between play and stop
+                this.icon = this.icon === 'mdi-play' ? 'mdi-stop' : 'mdi-play';
+                this.run = !this.run;
+
+                if (this.run) {
+                    await this.start();
+                } else {
+                    await this.stop();
+                }
+            },
+
             async start() {
                 try {
                     const response = await fetch('/start');
@@ -62,7 +82,9 @@ <h1>Vshierdom's Ping Survey Logging Tool</h1>
                 } catch (error) {
                     console.error('Error fetching data:', error);
                     this.status = 'Error: ' + error.message;
-                }
+                } 
+                this.map = L.map('map').setView([51.505, -0.09], 13);
+                this.heatmapLayer = L.heatLayer([], {radius: 25}).addTo(this.map);
             },
 
             async stop() {
@@ -92,12 +114,19 @@ <h1>Vshierdom's Ping Survey Logging Tool</h1>
                     this.status = 'Error: ' + error.message;
                 }
             },
+            addDataPoint(lat, lon, depth) {
+                // Add a new data point to the heatmap
+                this.heatmapLayer.addLatLng([lat, lon, depth]);
+
+                // Update the GPS icon location
+                L.marker([lat, lon], {icon: this.gpsIcon}).addTo(this.map);
+            },
         },
         mounted() {
             console.log('Mounted!')
         }
     })
 
 </script>
-
+</body>
 </html>