Rotate chase car marker based on heading. Allow enlarging of summary data with a tap/click.

horusmapper.py

@@ -461,7 +461,7 @@ def udp_listener_summary_callback(data):
     output['lat'] = data['latitude']
     output['lon'] = data['longitude']
     output['alt'] = data['altitude']
-    output['callsign'] = "Payload" #  data['callsign'] # Quick hack to limit to a single balloon
+    output['callsign'] = data['callsign']
 
     # Process the 'short time' value if we have been provided it.
     if 'time' in data.keys():
@@ -476,6 +476,8 @@ def udp_listener_summary_callback(data):
 
 def udp_listener_car_callback(data):
     ''' Handle car position data '''
+    # TODO: Make a generic car position function, and have this function pass data into it
+    # so we can add support for other chase car position inputs.
     global car_track
     logging.debug("Car Position:" + str(data))
     _lat = data['latitude']
@@ -496,9 +498,10 @@ def udp_listener_car_callback(data):
 
     _state = car_track.get_latest_state()
     _heading = _state['heading']
+    _speed = _state['speed']
 
     # Push the new car position to the web client
-    flask_emit_event('telemetry_event', {'callsign': 'CAR', 'position':[_lat,_lon,_alt], 'vel_v':0.0, 'heading': _heading})
+    flask_emit_event('telemetry_event', {'callsign': 'CAR', 'position':[_lat,_lon,_alt], 'vel_v':0.0, 'heading': _heading, 'speed':_speed})
 
 
 # Add other listeners here...

static/css/chasemapper.css

@@ -74,6 +74,10 @@ html, body, #map {
 	font-size:1.5em;
 }
 
+.largeTableRow {
+	font-size:200%;
+}
+
 #followPayloadButton {
 	width:45px;
 	height:45px;

static/js/tables.js

@@ -1,6 +1,20 @@
 //
 //
 
+// Allow for the summary window to be expanded with a tap.
+var summary_enlarged = false;
+
+function toggleSummarySize(){
+    var row = $("#summary_table").tabulator("getRow", 1);
+    if(summary_enlarged == false){
+        row.getElement().addClass("largeTableRow");
+        summary_enlarged = true;
+    }else{
+        row.getElement().removeClass("largeTableRow");
+        summary_enlarged = false;
+    }
+    $("#summary_table").tabulator("redraw", true);
+}
 
 // Initialise tables
 function initTables(){
@@ -29,13 +43,20 @@ function initTables(){
             {title:"Elevation", field:"elevation", headerSort:false},
             {title:"Range", field:"range", headerSort:false},
         ],
-        data:[{alt:'-----m', speed:'---kph', vel_v:'-.-m/s', azimuth:'---°', elevation:'--°', range:'----m'}]
+        data:[{id: 1, alt:'-----m', speed:'---kph', vel_v:'-.-m/s', azimuth:'---°', elevation:'--°', range:'----m'}],
+        rowClick:function(e, row){
+            toggleSummarySize();
+        },
+        rowTap:function(e, row){
+            toggleSummarySize();
+        }
     });
 
     //var dummy_data = {alt:'-----m', speed:'---kph', vel_v:'-.-m/s', azimuth:'---°', elev:'--°', range:'----m'};
     //$("#summary_table").tabulator("setData", dummy_data);
 }
 
+
 function updateTelemetryTable(){
     var telem_data = [];
 

static/js/utils.js

@@ -54,6 +54,12 @@ var carIcon = L.icon({
     iconAnchor: [27,12] // Revisit this
 });
 
+var carIconFlip = L.icon({
+    iconUrl: "/static/img/car-blue-flip.png",
+    iconSize: [55,25],
+    iconAnchor: [27,12] // Revisit this
+});
+
 
 // calculates look angles between two points
 // format of a and b should be {lon: 0, lat: 0, alt: 0}

templates/index.html

@@ -18,18 +18,20 @@
     <script src="{{ url_for('static', filename='js/jquery-ui.min.js')}}"></script>
     <script src="{{ url_for('static', filename='js/socket.io-1.4.5.js') }}"></script>
     <script src="{{ url_for('static', filename='js/leaflet.js') }}"></script>
+    <!-- Leaflet plugins... -->
+    <script src="{{ url_for('static', filename='js/leaflet.rotatedMarker.js') }}"></script>
     <script src="{{ url_for('static', filename='js/leaflet-control-topcenter.js') }}"></script>
     <script src="{{ url_for('static', filename='js/leaflet-sidebar.min.js') }}"></script>
     <script src="{{ url_for('static', filename='js/Leaflet.Control.Custom.js') }}"></script>
     <script src="{{ url_for('static', filename='js/easy-button.js') }}"></script>
 
     <script src="{{ url_for('static', filename='js/tabulator.min.js') }}"></script>
+
+    <!-- Custom scripts -->
     <script src="{{ url_for('static', filename='js/utils.js') }}"></script>
     <script src="{{ url_for('static', filename='js/tables.js') }}"></script>
     <script src="{{ url_for('static', filename='js/config.js') }}"></script>
 
-    <!-- Leaflet plugins... -->
-    <script src="{{ url_for('static', filename='js/leaflet.rotatedMarker.js') }}"></script>
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 
@@ -304,7 +306,8 @@
                 balloon_positions[callsign] = {
                     latest_data: telem,
                     age: 0,
-                    colour: colour_values[colour_idx]
+                    colour: colour_values[colour_idx],
+                    visible: true
                 };
                 // Balloon Path
                 balloon_positions[callsign].path = L.polyline(data.path,{title:callsign + " Path", color:balloon_positions[callsign].colour}).addTo(map);
@@ -399,7 +402,7 @@
 
             function updateSummaryDisplay(){
                 // Update the 'Payload Summary' display.
-                var _summary_update = {};
+                var _summary_update = {id:1};
                 // See if there is any payload data.
                 if (balloon_positions.hasOwnProperty(balloon_currently_following) == true){
                     // There is balloon data!
@@ -430,10 +433,16 @@
 
                 }else{
                     // No balloon data!
-                    _summary_update = {alt:'-----m', speed:'---kph', vel_v:'-.-m/s', azimuth:'---°', elevation:'--°', range:'----m'}
+                    _summary_update = {id: 1, alt:'-----m', speed:'---kph', vel_v:'-.-m/s', azimuth:'---°', elevation:'--°', range:'----m'}
                 }
                 // Update table
                 $("#summary_table").tabulator("setData", [_summary_update]);
+                if (summary_enlarged == true){
+                    var row = $("#summary_table").tabulator("getRow", 1);
+                    row.getElement().addClass("largeTableRow");
+                    $("#summary_table").tabulator("redraw", true);
+                }
+
             }
 
 
@@ -457,11 +466,12 @@
                 if (data.callsign == 'CAR'){
                     // Update car position.
                     chase_car_position.latest_data = data.position;
-                    chase_car_position.heading = data.heading;
+                    chase_car_position.heading = data.heading; // degrees true
+                    chase_car_position.speed = data.speed; // m/s
                     // TODO: Update car marker.
                     if (chase_car_position.marker == 'NONE'){
                         // Create marker!
-                        chase_car_position.marker = L.marker(chase_car_position.latest_data,{title:"Chase Car", icon: carIcon})
+                        chase_car_position.marker = L.marker(chase_car_position.latest_data,{title:"Chase Car", icon: carIcon, rotationOrigin: "center center"})
                                 .addTo(map);
                         chase_car_position.path = L.polyline([chase_car_position.latest_data],{title:"Chase Car", color:'black', weight:1.5});
                         // If the user wants the chase car tail, add it to the map.
@@ -470,7 +480,19 @@
                         }
                     } else {
                         chase_car_position.marker.setLatLng(chase_car_position.latest_data).update();
-                        // TODO: Rotate chase car with direction of travel.
+                    }
+                    // Rotate car icon based on heading, but only if we're going faster than 20kph (5.5m/s).
+                    if(chase_car_position.speed > 5.5){ // TODO: Remove magic number!
+                        var _car_heading = chase_car_position.heading - 90.0;
+                        if (_car_heading<=90.0){
+                            chase_car_position.marker.setIcon(carIcon);
+                            chase_car_position.marker.setRotationAngle(_car_heading);
+                        }else{
+                            // We are travelling West - we need to use the flipped car icon.
+                            _car_heading = _car_heading - 180.0;
+                            chase_car_position.marker.setIcon(carIconFlip);
+                            chase_car_position.marker.setRotationAngle(_car_heading);
+                        }
                     }
                     car_data_age = 0.0;
                 }else{