kopia lustrzana https://github.com/projecthorus/chasemapper
Rotate chase car marker based on heading. Allow enlarging of summary data with a tap/click.
rodzic
9627bbb436
commit
711cccdc3c
|
@ -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...
|
||||
|
|
|
@ -74,6 +74,10 @@ html, body, #map {
|
|||
font-size:1.5em;
|
||||
}
|
||||
|
||||
.largeTableRow {
|
||||
font-size:200%;
|
||||
}
|
||||
|
||||
#followPayloadButton {
|
||||
width:45px;
|
||||
height:45px;
|
||||
|
|
Plik binarny nie jest wyświetlany.
Po Szerokość: | Wysokość: | Rozmiar: 11 KiB |
|
@ -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 = [];
|
||||
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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{
|
||||
|
|
Ładowanie…
Reference in New Issue