Add sonde tracks to map.

auto_rx/autorx/templates/index.html

@@ -153,27 +153,49 @@
                 iconSize: [26, 34],
                 iconAnchor: [13, 34]
             });
-
             var sondeAscentIcon = L.icon({
                 iconUrl: '{{ url_for('static', filename='img/balloon-blue.png') }}',
                 iconSize: [46, 85],
-                //iconAnchor: [13, 34]
+                iconAnchor: [23, 76]
             });
             var sondeDescentIcon = L.icon({
                 iconUrl: '{{ url_for('static', filename='img/parachute-blue.png') }}',
                 iconSize: [46, 84],
-                //iconAnchor: [13, 34]
+                iconAnchor: [23, 76]
             });
+
             // Add a new marker, but set it to hidden initially.
             var home_marker = L.marker(sondemap.getCenter(),
                 {title: 'Receiver Location', icon: homeIcon}
                 ).addTo(sondemap);
+
+            // Object which will contain sonde markers and traces.
+            // properties for each key in this object (key = sonde ID)
+            //  latest_data - latest sonde telemetry object from SondeDecoded
+            //  marker: Leaflet marker object.
+            //  path: Leaflet polyline object.
+            var sonde_positions = {};
             
             // Add a marker which will be updated with sonde positions.
             // TODO: Handle multiple sondes!
             var sonde_marker = L.marker([0.0,0.0],
                 {title:'Sonde', icon: sondeAscentIcon}
                 ).addTo(sondemap);
+
+
+            function updateTelemetryText(){
+                // Produce the text to go in the telemetry div.
+                // Clear out the telemetry div ready for new data
+                $('#telemetry').empty();
+                // Generate the lines of telemetry information
+                var telem_text = "";
+                for (sonde_id in sonde_positions){
+                    var msg = sonde_positions[sonde_id].latest_data;
+                    telem_text += '<b>Type: </b>' + msg.type + '<b> ID: </b>' + msg.id + ' <b>Timestamp: </b>' + msg.datetime + ' <b> Frame: </b> ' + msg.frame + '<b> Position: </b>' + msg.lat.toFixed(5) + ',' + msg.lon.toFixed(5) + '<b> Alt (m): </b>' + msg.alt.toFixed(1) + ' <b> Asc Rate (m/s): </b>' + msg.vel_v.toFixed(1) + ' <br>';
+                }
+                // Update the div with the telemetry info.
+                $('#telemetry').html(telem_text);
+            }
             
 
             // Telemetry event handler.
@@ -181,17 +203,32 @@
             socket.on('telemetry_event', function(msg) {
                 // Telemetry Event messages contain the entire telemetry dictionary, as produced by the SondeDecoder class.
                 // This includes the fields: ['frame', 'id', 'datetime', 'lat', 'lon', 'alt', 'temp', 'type', 'freq', 'freq_float']
-                // Update the telemetry div
-                $('#telemetry').html('<b>Type: </b>' + msg.type + '<b> ID: </b>' + msg.id + ' <b> Frame: </b> ' + msg.frame + '<b> Position: </b>' + msg.lat.toFixed(5) + ',' + msg.lon.toFixed(5) + '<b> Alt (m): </b>' + msg.alt.toFixed(1) + ' <b> Asc Rate (m/s): </b>' + msg.vel_v.toFixed(1));
-                if(msg.vel_v<0){
-                    sonde_marker.setIcon(sondeDescentIcon);
-                }else{
-                    sonde_marker.setIcon(sondeAscentIcon);
+
+                // Have we seen this sonde before? 
+                if (sonde_positions.hasOwnProperty(msg.id) == false){
+                    // Nope, add a property to the sonde_positions object, and setup markers for the sonde.
+                    sonde_positions[msg.id] = {
+                        latest_data : msg,
+                        marker : L.marker([msg.lat, msg.lon],{title:msg.id, icon: sondeAscentIcon}).addTo(sondemap),
+                        path: L.polyline([[msg.lat, msg.lon]],{title:msg.id + " Path", color:'blue'}).addTo(sondemap)
+                    };
+                } else{
+                    // Yep - update the sonde_positions entry.
+                    sonde_positions[msg.id].latest_data = msg;
+                    sonde_positions[msg.id].path.addLatLng([msg.lat, msg.lon]);
+                    sonde_positions[msg.id].marker.setLatLng([msg.lat, msg.lon]).update();
+
+                    if (msg.vel_v < 0){
+                        sonde_positions[msg.id].marker.setIcon(sondeDescentIcon);
+                    }else{
+                        sonde_positions[msg.id].marker.setIcon(sondeAscentIcon);
+                    }
                 }
-                // Update the sonde marker on the map
-                sonde_marker.setLatLng([msg.lat,msg.lon]).update();
+
                 // Centre the map on the sonde position.
                 sondemap.panTo([msg.lat, msg.lon]);
+
+                updateTelemetryText();
             });
 
 

auto_rx/autorx/web.py

@@ -22,6 +22,8 @@ from flask_socketio import SocketIO
 # Instantiate our Flask app.
 app = flask.Flask(__name__)
 app.config['SECRET_KEY'] = 'secret!'
+app.config['TEMPLATES_AUTO_RELOAD'] = True
+app.jinja_env.auto_reload = True
 # This thread will hold the currently running flask application thread.
 flask_app_thread = None
 # A key that needs to be matched to allow shutdown.
@@ -30,6 +32,8 @@ flask_shutdown_key = "temp"
 # SocketIO instance
 socketio = SocketIO(app)
 
+# Global store of telemetry data, which we will add data do and manage.
+flask_telemetry_store = {}
 
 #
 # Globally called 'emit' function