417 lines
16 KiB
JavaScript
417 lines
16 KiB
JavaScript
// Marker.linkify() uses these URLs
|
|
var callsign_url = null;
|
|
var vessel_url = null;
|
|
var flight_url = null;
|
|
|
|
// reasonable default; will be overriden by server
|
|
var retention_time = 2 * 60 * 60 * 1000;
|
|
|
|
// Function to toggle legend box on/off
|
|
function toggleElement(el_name) {
|
|
var el = document.getElementById(el_name);
|
|
if (el) el.style.display = el.style.display === 'none'? 'block' : 'none';
|
|
}
|
|
|
|
$(function(){
|
|
var query = window.location.search.replace(/^\?/, '').split('&').map(function(v){
|
|
var s = v.split('=');
|
|
var r = {};
|
|
r[s[0]] = s.slice(1).join('=');
|
|
return r;
|
|
}).reduce(function(a, b){
|
|
return a.assign(b);
|
|
});
|
|
|
|
var expectedCallsign;
|
|
if (query.callsign) expectedCallsign = decodeURIComponent(query.callsign);
|
|
var expectedLocator;
|
|
if (query.locator) expectedLocator = query.locator;
|
|
|
|
var protocol = window.location.protocol.match(/https/) ? 'wss' : 'ws';
|
|
|
|
var href = window.location.href;
|
|
var index = href.lastIndexOf('/');
|
|
if (index > 0) {
|
|
href = href.substr(0, index + 1);
|
|
}
|
|
href = href.split("://")[1];
|
|
href = protocol + "://" + href;
|
|
if (!href.endsWith('/')) {
|
|
href += '/';
|
|
}
|
|
var ws_url = href + "ws/";
|
|
|
|
var map;
|
|
var receiverMarker;
|
|
var updateQueue = [];
|
|
|
|
// marker and locator managers
|
|
var markmanager = null;
|
|
var locmanager = null;
|
|
|
|
// clock
|
|
var clock = new Clock($("#openwebrx-clock-utc"));
|
|
|
|
$(function() {
|
|
$('#openwebrx-map-colormode').on('change', function() {
|
|
locmanager.setColorMode(map, $(this).val());
|
|
});
|
|
});
|
|
|
|
var processUpdates = function(updates) {
|
|
if (!markmanager || !locmanager) {
|
|
updateQueue = updateQueue.concat(updates);
|
|
return;
|
|
}
|
|
updates.forEach(function(update) {
|
|
switch (update.location.type) {
|
|
case 'latlon':
|
|
var pos = new google.maps.LatLng(update.location.lat, update.location.lon);
|
|
var marker = markmanager.find(update.callsign);
|
|
var markerClass = google.maps.Marker;
|
|
var aprsOptions = {}
|
|
if (update.location.symbol) {
|
|
markerClass = GAprsMarker;
|
|
aprsOptions.symbol = update.location.symbol;
|
|
aprsOptions.course = update.location.course;
|
|
aprsOptions.speed = update.location.speed;
|
|
}
|
|
|
|
// If new item, create a new marker for it
|
|
if (!marker) {
|
|
marker = new markerClass();
|
|
markmanager.addType(update.mode);
|
|
markmanager.add(update.callsign, marker);
|
|
marker.addListener('click', function(){
|
|
showMarkerInfoWindow(update.callsign, pos);
|
|
});
|
|
}
|
|
|
|
// Apply marker options
|
|
marker.setOptions($.extend({
|
|
position: pos,
|
|
map: markmanager.isEnabled(update.mode)? map : undefined,
|
|
title: update.callsign
|
|
}, aprsOptions));
|
|
|
|
// Update marker attributes and age
|
|
marker.age(new Date().getTime() - update.lastseen);
|
|
marker.update(update);
|
|
|
|
if (expectedCallsign && expectedCallsign == update.callsign) {
|
|
map.panTo(pos);
|
|
showMarkerInfoWindow(update.callsign, pos);
|
|
expectedCallsign = false;
|
|
}
|
|
|
|
if (infowindow && infowindow.callsign && infowindow.callsign == update.callsign) {
|
|
showMarkerInfoWindow(infowindow.callsign, pos);
|
|
}
|
|
break;
|
|
|
|
case 'feature':
|
|
var pos = new google.maps.LatLng(update.location.lat, update.location.lon);
|
|
var marker = markmanager.find(update.callsign);
|
|
var options = {}
|
|
|
|
// If no symbol or color supplied, use defaults by type
|
|
if (update.location.symbol) {
|
|
options.symbol = update.location.symbol;
|
|
} else {
|
|
options.symbol = markmanager.getSymbol(update.mode);
|
|
}
|
|
if (update.location.color) {
|
|
options.color = update.location.color;
|
|
} else {
|
|
options.color = markmanager.getColor(update.mode);
|
|
}
|
|
|
|
// If new item, create a new marker for it
|
|
if (!marker) {
|
|
marker = new GFeatureMarker();
|
|
markmanager.addType(update.mode);
|
|
markmanager.add(update.callsign, marker);
|
|
marker.addListener('click', function(){
|
|
showMarkerInfoWindow(update.callsign, pos);
|
|
});
|
|
}
|
|
|
|
// Apply marker options
|
|
marker.setOptions($.extend({
|
|
position: pos,
|
|
map: markmanager.isEnabled(update.mode)? map : undefined,
|
|
title: update.callsign
|
|
}, options));
|
|
|
|
// Update marker attributes and age
|
|
marker.age(new Date().getTime() - update.lastseen);
|
|
marker.update(update);
|
|
|
|
if (expectedCallsign && expectedCallsign == update.callsign) {
|
|
map.panTo(pos);
|
|
showMarkerInfoWindow(update.callsign, pos);
|
|
expectedCallsign = false;
|
|
}
|
|
|
|
if (infowindow && infowindow.callsign && infowindow.callsign == update.callsign) {
|
|
showMarkerInfoWindow(infowindow.callsign, pos);
|
|
}
|
|
break;
|
|
|
|
case 'locator':
|
|
var rectangle = locmanager.find(update.callsign);
|
|
|
|
// If new item, create a new locator for it
|
|
if (!rectangle) {
|
|
rectangle = new GLocator();
|
|
locmanager.add(update.callsign, rectangle);
|
|
rectangle.rect.addListener('click', function() {
|
|
showLocatorInfoWindow(rectangle.locator, rectangle.center);
|
|
});
|
|
}
|
|
|
|
// Update locator attributes, center, age
|
|
rectangle.update(update);
|
|
|
|
// Assign locator to map and set its color
|
|
rectangle.setMap(locmanager.filter(rectangle)? map : undefined);
|
|
rectangle.setColor(locmanager.getColor(rectangle));
|
|
|
|
if (expectedLocator && expectedLocator == update.location.locator) {
|
|
map.panTo(rectangle.center);
|
|
showLocatorInfoWindow(expectedLocator, rectangle.center);
|
|
expectedLocator = false;
|
|
}
|
|
|
|
if (infowindow && infowindow.locator && infowindow.locator == update.location.locator) {
|
|
showLocatorInfoWindow(infowindow.locator, rectangle.center);
|
|
}
|
|
break;
|
|
}
|
|
});
|
|
};
|
|
|
|
var clearMap = function(){
|
|
var reset = function(callsign, item) { item.setMap(); };
|
|
receiverMarker.setMap();
|
|
markmanager.clear();
|
|
locmanager.clear();
|
|
};
|
|
|
|
var reconnect_timeout = false;
|
|
|
|
var config = {}
|
|
|
|
var connect = function(){
|
|
var ws = new WebSocket(ws_url);
|
|
ws.onopen = function(){
|
|
ws.send("SERVER DE CLIENT client=map.js type=map");
|
|
reconnect_timeout = false
|
|
};
|
|
|
|
ws.onmessage = function(e){
|
|
if (typeof e.data != 'string') {
|
|
console.error("unsupported binary data on websocket; ignoring");
|
|
return
|
|
}
|
|
if (e.data.substr(0, 16) == "CLIENT DE SERVER") {
|
|
return
|
|
}
|
|
try {
|
|
var json = JSON.parse(e.data);
|
|
switch (json.type) {
|
|
case "config":
|
|
Object.assign(config, json.value);
|
|
if ('receiver_gps' in config) {
|
|
var receiverPos = {
|
|
lat: config.receiver_gps.lat,
|
|
lng: config.receiver_gps.lon
|
|
};
|
|
if (!map) $.getScript("https://maps.googleapis.com/maps/api/js?key=" + config.google_maps_api_key).done(function(){
|
|
map = new google.maps.Map($('.openwebrx-map')[0], {
|
|
center: receiverPos,
|
|
zoom: 5,
|
|
});
|
|
|
|
$.getScript("static/lib/nite-overlay.js").done(function(){
|
|
nite.init(map);
|
|
setInterval(function() { nite.refresh() }, 10000); // every 10s
|
|
});
|
|
|
|
$.getScript('static/lib/MarkerManager.js').done(function(){
|
|
markmanager = new MarkerManager();
|
|
if (locmanager) {
|
|
processUpdates(updateQueue);
|
|
updateQueue = [];
|
|
}
|
|
});
|
|
|
|
$.getScript('static/lib/LocatorManager.js').done(function(){
|
|
locmanager = new LocatorManager();
|
|
if (markmanager) {
|
|
processUpdates(updateQueue);
|
|
updateQueue = [];
|
|
}
|
|
});
|
|
|
|
var $legend = $(".openwebrx-map-legend");
|
|
setupLegendFilters($legend);
|
|
map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push($legend[0]);
|
|
|
|
if (!receiverMarker) {
|
|
receiverMarker = new google.maps.Marker();
|
|
receiverMarker.addListener('click', function() {
|
|
showReceiverInfoWindow(receiverMarker);
|
|
});
|
|
}
|
|
receiverMarker.setOptions({
|
|
map: map,
|
|
position: receiverPos,
|
|
title: config['receiver_name'],
|
|
config: config
|
|
});
|
|
|
|
}); else {
|
|
receiverMarker.setOptions({
|
|
map: map,
|
|
position: receiverPos,
|
|
config: config
|
|
});
|
|
}
|
|
}
|
|
if ('receiver_name' in config && receiverMarker) {
|
|
receiverMarker.setOptions({
|
|
title: config['receiver_name']
|
|
});
|
|
}
|
|
if ('map_position_retention_time' in config) {
|
|
retention_time = config.map_position_retention_time * 1000;
|
|
}
|
|
if ('callsign_url' in config) {
|
|
callsign_url = config['callsign_url'];
|
|
}
|
|
if ('vessel_url' in config) {
|
|
vessel_url = config['vessel_url'];
|
|
}
|
|
if ('flight_url' in config) {
|
|
flight_url = config['flight_url'];
|
|
}
|
|
break;
|
|
case "update":
|
|
processUpdates(json.value);
|
|
break;
|
|
case 'receiver_details':
|
|
$('.webrx-top-container').header().setDetails(json['value']);
|
|
break;
|
|
default:
|
|
console.warn('received message of unknown type: ' + json['type']);
|
|
}
|
|
} catch (e) {
|
|
// don't lose exception
|
|
console.error(e);
|
|
}
|
|
};
|
|
ws.onclose = function(){
|
|
clearMap();
|
|
if (reconnect_timeout) {
|
|
// max value: roundabout 8 and a half minutes
|
|
reconnect_timeout = Math.min(reconnect_timeout * 2, 512000);
|
|
} else {
|
|
// initial value: 1s
|
|
reconnect_timeout = 1000;
|
|
}
|
|
setTimeout(connect, reconnect_timeout);
|
|
};
|
|
|
|
window.onbeforeunload = function() { //http://stackoverflow.com/questions/4812686/closing-websocket-correctly-html5-javascript
|
|
ws.onclose = function () {};
|
|
ws.close();
|
|
};
|
|
|
|
/*
|
|
ws.onerror = function(){
|
|
console.info("websocket error");
|
|
};
|
|
*/
|
|
};
|
|
|
|
connect();
|
|
|
|
var getInfoWindow = function() {
|
|
if (!infowindow) {
|
|
infowindow = new google.maps.InfoWindow();
|
|
google.maps.event.addListener(infowindow, 'closeclick', function() {
|
|
delete infowindow.locator;
|
|
delete infowindow.callsign;
|
|
});
|
|
}
|
|
delete infowindow.locator;
|
|
delete infowindow.callsign;
|
|
return infowindow;
|
|
}
|
|
|
|
var infowindow;
|
|
var showLocatorInfoWindow = function(locator, pos) {
|
|
var infowindow = getInfoWindow();
|
|
infowindow.locator = locator;
|
|
infowindow.setContent(locmanager.getInfoHTML(locator, pos, receiverMarker));
|
|
infowindow.setPosition(pos);
|
|
infowindow.open(map);
|
|
};
|
|
|
|
var showMarkerInfoWindow = function(name, pos) {
|
|
var infowindow = getInfoWindow();
|
|
var marker = markmanager.find(name);
|
|
|
|
infowindow.callsign = name;
|
|
infowindow.setContent(marker.getInfoHTML(name, receiverMarker));
|
|
infowindow.open(map, marker);
|
|
}
|
|
|
|
var showReceiverInfoWindow = function(marker) {
|
|
var infowindow = getInfoWindow()
|
|
infowindow.setContent(
|
|
'<h3>' + marker.config['receiver_name'] + '</h3>' +
|
|
'<div>Receiver location</div>'
|
|
);
|
|
infowindow.open(map, marker);
|
|
}
|
|
|
|
// Fade out / remove positions after time
|
|
setInterval(function(){
|
|
if (locmanager) locmanager.ageAll();
|
|
if (markmanager) markmanager.ageAll();
|
|
}, 1000);
|
|
|
|
var setupLegendFilters = function($legend) {
|
|
$content = $legend.find('.content');
|
|
$content.on('click', 'li', function() {
|
|
var $el = $(this);
|
|
$lis = $content.find('li');
|
|
if ($lis.hasClass('disabled') && !$el.hasClass('disabled')) {
|
|
$lis.removeClass('disabled');
|
|
locmanager.setFilter(map);
|
|
} else {
|
|
$el.removeClass('disabled');
|
|
$lis.filter(function() {
|
|
return this != $el[0]
|
|
}).addClass('disabled');
|
|
locmanager.setFilter(map, $el.data('selector'));
|
|
}
|
|
});
|
|
|
|
$content1 = $legend.find('.features');
|
|
$content1.on('click', 'li', function() {
|
|
var $el = $(this);
|
|
var onoff = $el.hasClass('disabled');
|
|
if (onoff) {
|
|
$el.removeClass('disabled');
|
|
} else {
|
|
$el.addClass('disabled');
|
|
}
|
|
markmanager.toggle(map, $el.data('selector'), onoff);
|
|
});
|
|
}
|
|
|
|
});
|