assada/udrone
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Minimap improve

Browse Source
This commit is contained in:
assada 2022-08-18 22:40:06 +03:00
parent b5203d93dd
commit c197a36f69
6 changed files with 348 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/bundle.js vendored
View File

File diff suppressed because one or more lines are too long

173
js/jquery.flightindicators.js
View File

@ -1,173 +0,0 @@
/*
* jQuery Flight Indicators plugin
* By Sébastien Matton (seb_matton@hotmail.com)
* Published under GPLv3 License.
*
* https://github.com/sebmatton/jQuery-Flight-Indicators
*/
(function($) {
function FlightIndicator( placeholder, type, options ) {
// Initial configuration
var attitude = this;
var settings = $.extend({
size : 200,
roll : 0,
pitch : 0,
turn : 0,
heading: 0,
vario: 0,
airspeed: 0,
altitude: 0,
pressure: 1000,
showBox : true,
img_directory : 'img/'
}, options );
var constants = {
pitch_bound:30,
vario_bound : 1.95,
airspeed_bound_l : 0,
airspeed_bound_h : 160
}
// Creation of the instrument
placeholder.each(function(){
switch(type){
case 'heading':
$(this).html('<div class="instrument heading"><img src="' + settings.img_directory + 'fi_box.svg" class="background box" alt="" /><div class="heading box"><img src="' + settings.img_directory + 'heading_yaw.svg" class="box" alt="" /></div><div class="mechanics box"><img src="' + settings.img_directory + 'heading_mechanics.svg" class="box" alt="" /><img src="' + settings.img_directory + 'fi_circle.svg" class="box" alt="" /></div></div>');
_setHeading(settings.heading);
break;
case 'variometer':
$(this).html('<div class="instrument vario"><img src="' + settings.img_directory + 'fi_box.svg" class="background box" alt="" /><img src="' + settings.img_directory + 'vertical_mechanics.svg" class="box" alt="" /><div class="vario box"><img src="' + settings.img_directory + 'fi_needle.svg" class="box" alt="" /></div><div class="mechanics box"><img src="' + settings.img_directory + 'fi_circle.svg" class="box" alt="" /></div></div>');
_setVario(settings.vario);
break;
case 'turn_coordinator':
$(this).html('<div class="instrument turn_coordinator"><img src="' + settings.img_directory + 'fi_box.svg" class="background box" alt="" /><img src="' + settings.img_directory + 'turn_coordinator.svg" class="box" alt="" /><div class="turn box"><img src="' + settings.img_directory + 'fi_tc_airplane.svg" class="box" alt="" /></div><div class="mechanics box"><img src="' + settings.img_directory + 'fi_circle.svg" class="box" alt="" /></div></div>');
_setTurn(settings.turn);
break;
case 'airspeed':
$(this).html('<div class="instrument airspeed"><img src="' + settings.img_directory + 'fi_box.svg" class="background box" alt="" /><img src="' + settings.img_directory + 'speed_mechanics.svg" class="box" alt="" /><div class="speed box"><img src="' + settings.img_directory + 'fi_needle.svg" class="box" alt="" /></div><div class="mechanics box"><img src="' + settings.img_directory + 'fi_circle.svg" class="box" alt="" /></div></div>');
_setAirSpeed(settings.airspeed);
break
case 'altimeter':
$(this).html('<div class="instrument altimeter"><img src="' + settings.img_directory + 'fi_box.svg" class="background box" alt="" /><div class="pressure box"><img src="' + settings.img_directory + 'altitude_pressure.svg" class="box" alt="" /></div><img src="' + settings.img_directory + 'altitude_ticks.svg" class="box" alt="" /><div class="needleSmall box"><img src="' + settings.img_directory + 'fi_needle_small.svg" class="box" alt="" /></div><div class="needle box"><img src="' + settings.img_directory + 'fi_needle.svg" class="box" alt="" /></div><div class="mechanics box"><img src="' + settings.img_directory + 'fi_circle.svg" class="box" alt="" /></div></div>');
_setAltitude(settings.altitude);
_setPressure(settings.pressure);
break;
default:
$(this).html('<div class="instrument attitude"><img src="' + settings.img_directory + 'fi_box.svg" class="background box" alt="" /><div class="roll box"><img src="' + settings.img_directory + 'horizon_back.svg" class="box" alt="" /><div class="pitch box"><img src="' + settings.img_directory + 'horizon_ball.svg" class="box" alt="" /></div><img src="' + settings.img_directory + 'horizon_circle.svg" class="box" alt="" /></div><div class="mechanics box"><img src="' + settings.img_directory + 'horizon_mechanics.svg" class="box" alt="" /><img src="' + settings.img_directory + 'fi_circle.svg" class="box" alt="" /></div></div>');
_setRoll(settings.roll);
_setPitch(settings.pitch);
}
$(this).find('div.instrument').css({height : settings.size, width : settings.size});
$(this).find('div.instrument img.box.background').toggle(settings.showBox);
});
// Private methods
function _setRoll(roll){
placeholder.each(function(){
$(this).find('div.instrument.attitude div.roll').css('transform', 'rotate('+roll+'deg)');
});
}
function _setPitch(pitch){
// alert(pitch);
if(pitch>constants.pitch_bound){pitch = constants.pitch_bound;}
else if(pitch<-constants.pitch_bound){pitch = -constants.pitch_bound;}
placeholder.each(function(){
$(this).find('div.instrument.attitude div.roll div.pitch').css('top', pitch*0.7 + '%');
});
}
function _setHeading(heading){
placeholder.each(function(){
$(this).find('div.instrument.heading div.heading').css('transform', 'rotate(' + -heading + 'deg)');
});
}
function _setTurn(turn){
placeholder.each(function(){
$(this).find('div.instrument.turn_coordinator div.turn').css('transform', 'rotate('+turn+'deg)');
});
}
function _setVario(vario){
if(vario > constants.vario_bound){vario = constants.vario_bound;}
else if(vario < -constants.vario_bound){vario = -constants.vario_bound;}
vario = vario*90;
placeholder.each(function(){
$(this).find('div.instrument.vario div.vario').css('transform', 'rotate(' + vario + 'deg)');
});
}
function _setAirSpeed(speed){
if(speed > constants.airspeed_bound_h){speed = constants.airspeed_bound_h;}
else if(speed < constants.airspeed_bound_l){speed = constants.airspeed_bound_l;}
speed = 90+speed*2;
placeholder.each(function(){
$(this).find('div.instrument.airspeed div.speed').css('transform', 'rotate(' + speed + 'deg)');
});
}
function _setAltitude(altitude){
var needle = 90 + altitude%1000 * 360 / 1000;
var needleSmall = altitude / 10000 * 360;
placeholder.each(function(){
$(this).find('div.instrument.altimeter div.needle').css('transform', 'rotate(' + needle + 'deg)');
$(this).find('div.instrument.altimeter div.needleSmall').css('transform', 'rotate(' + needleSmall + 'deg)');
});
}
function _setPressure(pressure){
pressure = 2*pressure - 1980;
placeholder.each(function(){
$(this).find('div.instrument.altimeter div.pressure').css('transform', 'rotate(' + pressure + 'deg)');
});
}
function _resize(size){
placeholder.each(function(){
$(this).find('div.instrument').css({height : size, width : size});
});
}
function _showBox(){
placeholder.each(function(){
$(this).find('img.box.background').show();
});
}
function _hideBox(){
placeholder.each(function(){
$(this).find('img.box.background').hide();
});
}
// Public methods
this.setRoll = function(roll){_setRoll(roll);}
this.setPitch = function(pitch){_setPitch(pitch);}
this.setHeading = function(heading){_setHeading(heading);}
this.setTurn = function(turn){_setTurn(turn);}
this.setVario = function(vario){_setVario(vario);}
this.setAirSpeed = function(speed){_setAirSpeed(speed);}
this.setAltitude = function(altitude){_setAltitude(altitude);}
this.setPressure = function(pressure){_setPressure(pressure);}
this.resize = function(size){_resize(size);}
this.showBox = function(){_showBox();}
this.hideBox = function(){_hideBox();}
return attitude;
};
// Extension to jQuery
$.flightIndicator = function(placeholder, type, options){
var flightIndicator = new FlightIndicator($(placeholder), type, options)
return flightIndicator;
}
$.fn.flightIndicator = function(data, type, options){
return this.each(function(){
$.flightIndicator(this, type, options);
});
}
}( jQuery ));

8
js/jquery.flightindicators.min.js vendored
View File

@ -1,8 +0,0 @@
/*
* jQuery Flight Indicators plugin
* By Sébastien Matton (seb_matton@hotmail.com)
* Published under GPLv3 License.
*
* https://github.com/sebmatton/jQuery-Flight-Indicators
*/
(function(b){function a(n,l,r){var f=this;var h=b.extend({size:200,roll:0,pitch:0,heading:0,vario:0,airspeed:0,altitude:0,pressure:1000,showBox:true,img_directory:"img/"},r);var q={pitch_bound:30,vario_bound:1.95,airspeed_bound_l:0,airspeed_bound_h:160};n.each(function(){switch(l){case"heading":b(this).html('<div class="instrument heading"><img src="'+h.img_directory+'fi_box.svg" class="background box" alt="" /><div class="heading box"><img src="'+h.img_directory+'heading_yaw.svg" class="box" alt="" /></div><div class="mechanics box"><img src="'+h.img_directory+'heading_mechanics.svg" class="box" alt="" /><img src="'+h.img_directory+'fi_circle.svg" class="box" alt="" /></div></div>');p(h.heading);break;case"variometer":b(this).html('<div class="instrument vario"><img src="'+h.img_directory+'fi_box.svg" class="background box" alt="" /><img src="'+h.img_directory+'vertical_mechanics.svg" class="box" alt="" /><div class="vario box"><img src="'+h.img_directory+'fi_needle.svg" class="box" alt="" /></div><div class="mechanics box"><img src="'+h.img_directory+'fi_circle.svg" class="box" alt="" /></div></div>');i(h.vario);break;case"airspeed":b(this).html('<div class="instrument airspeed"><img src="'+h.img_directory+'fi_box.svg" class="background box" alt="" /><img src="'+h.img_directory+'speed_mechanics.svg" class="box" alt="" /><div class="speed box"><img src="'+h.img_directory+'fi_needle.svg" class="box" alt="" /></div><div class="mechanics box"><img src="'+h.img_directory+'fi_circle.svg" class="box" alt="" /></div></div>');e(h.airspeed);break;case"altimeter":b(this).html('<div class="instrument altimeter"><img src="'+h.img_directory+'fi_box.svg" class="background box" alt="" /><div class="pressure box"><img src="'+h.img_directory+'altitude_pressure.svg" class="box" alt="" /></div><img src="'+h.img_directory+'altitude_ticks.svg" class="box" alt="" /><div class="needleSmall box"><img src="'+h.img_directory+'fi_needle_small.svg" class="box" alt="" /></div><div class="needle box"><img src="'+h.img_directory+'fi_needle.svg" class="box" alt="" /></div><div class="mechanics box"><img src="'+h.img_directory+'fi_circle.svg" class="box" alt="" /></div></div>');d(h.altitude);k(h.pressure);break;default:b(this).html('<div class="instrument attitude"><img src="'+h.img_directory+'fi_box.svg" class="background box" alt="" /><div class="roll box"><img src="'+h.img_directory+'horizon_back.svg" class="box" alt="" /><div class="pitch box"><img src="'+h.img_directory+'horizon_ball.svg" class="box" alt="" /></div><img src="'+h.img_directory+'horizon_circle.svg" class="box" alt="" /></div><div class="mechanics box"><img src="'+h.img_directory+'horizon_mechanics.svg" class="box" alt="" /><img src="'+h.img_directory+'fi_circle.svg" class="box" alt="" /></div></div>');o(h.roll);m(h.pitch)}b(this).find("div.instrument").css({height:h.size,width:h.size});b(this).find("div.instrument img.box.background").toggle(h.showBox)});function o(s){n.each(function(){b(this).find("div.instrument.attitude div.roll").css("transform","rotate("+s+"deg)")})}function m(s){if(s>q.pitch_bound){s=q.pitch_bound}else{if(s<-q.pitch_bound){s=-q.pitch_bound}}n.each(function(){b(this).find("div.instrument.attitude div.roll div.pitch").css("top",s*0.7+"%")})}function p(s){n.each(function(){b(this).find("div.instrument.heading div.heading").css("transform","rotate("+-s+"deg)")})}function i(s){if(s>q.vario_bound){s=q.vario_bound}else{if(s<-q.vario_bound){s=-q.vario_bound}}s=s*90;n.each(function(){b(this).find("div.instrument.vario div.vario").css("transform","rotate("+s+"deg)")})}function e(s){if(s>q.airspeed_bound_h){s=q.airspeed_bound_h}else{if(s<q.airspeed_bound_l){s=q.airspeed_bound_l}}s=90+s*2;n.each(function(){b(this).find("div.instrument.airspeed div.speed").css("transform","rotate("+s+"deg)")})}function d(s){var u=90+s%1000*360/1000;var t=s/10000*360;n.each(function(){b(this).find("div.instrument.altimeter div.needle").css("transform","rotate("+u+"deg)");b(this).find("div.instrument.altimeter div.needleSmall").css("transform","rotate("+t+"deg)")})}function k(s){s=2*s-1980;n.each(function(){b(this).find("div.instrument.altimeter div.pressure").css("transform","rotate("+s+"deg)")})}function j(s){n.each(function(){b(this).find("div.instrument").css({height:s,width:s})})}function g(){n.each(function(){b(this).find("img.box.background").show()})}function c(){n.each(function(){b(this).find("img.box.background").hide()})}this.setRoll=function(s){o(s)};this.setPitch=function(s){m(s)};this.setHeading=function(s){p(s)};this.setVario=function(s){i(s)};this.setAirSpeed=function(s){e(s)};this.setAltitude=function(s){d(s)};this.setPressure=function(s){k(s)};this.resize=function(s){j(s)};this.showBox=function(){g()};this.hideBox=function(){c()};return f}b.flightIndicator=function(e,d,c){var f=new a(b(e),d,c);return f};b.fn.flightIndicator=function(e,d,c){return this.each(function(){b.flightIndicator(this,d,c)})}}(jQuery));

2
package.json
View File

@ -23,12 +23,10 @@
"webpack-cli": "^4.10.0"
},
"dependencies": {
"@aesqe/mapboxgl-minimap": "^1.0.0",
"flight-indicators-js": "^1.0.5",
"jquery": "^3.6.0",
"mapbox-gl": "^2.9.2",
"mapbox-gl-controls": "^2.3.5",
"mapbox.minimap": "^0.3.0",
"mqtt": "^4.3.7",
"relaxed-json": "^1.0.3"
}

25
src/index.js
View File

@ -4,8 +4,7 @@ import FlightIndicators from 'flight-indicators-js'
import mqtt from 'mqtt/dist/mqtt';
import RJSON from 'relaxed-json';
import { RulerControl, StylesControl } from 'mapbox-gl-controls';
const minimapQ = require('@aesqe/mapboxgl-minimap/mapboxgl-control-minimap')
import MiniMap from "@aesqe/mapboxgl-minimap/mapboxgl-control-minimap.js"
import MiniMap from "./mapbox/mapbox-minimap"
mapboxgl.accessToken = 'pk.eyJ1IjoiYXNzYWRhIiwiYSI6ImNrbTkzd2RlOTBrMmwyb3BoZGZ5bXpyZXIifQ.qPyi1nxJHcc4Z1xL1EKuuA';
const map = new mapboxgl.Map({
@ -24,9 +23,27 @@ map.on('style.load', () => {
map.addControl(new RulerControl(), 'top-right');
let minimap = new MiniMap({
center: [8.545564, 47.397974],
center: [31.393023, 49.011527],
zoom: 6,
zoomLevels: [],
dragPan: true,
scrollZoom: true,
boxZoom: true,
dragRotate: true,
keyboard: true,
doubleClickZoom: true,
touchZoomRotate: true,
zoomLevels: [
[26, 22, 24],
[24, 20, 22],
[22, 18, 20],
[20, 16, 18],
[18, 14, 16],
[16, 12, 14],
[14, 10, 12],
[12, 8, 10],
[10, 6, 8],
[8, 4, 6],
],
togglePosition: 'topright'
});
map.addControl(minimap, 'top-right');

326
src/mapbox/mapbox-minimap.js Normal file
View File

@ -0,0 +1,326 @@
import mapboxgl from 'mapbox-gl';
let defaultOptions = {
id: "mapboxgl-minimap",
width: "320px",
height: "180px",
style: "mapbox://styles/mapbox/streets-v8",
center: [0, 0],
zoom: 6,
// should be a function; will be bound to Minimap
zoomAdjust: null,
// if parent map zoom >= 18 and minimap zoom >= 14, set minimap zoom to 16
zoomLevels: [
[18, 14, 16],
[16, 12, 14],
[14, 10, 12],
[12, 8, 10],
[10, 6, 8]
],
lineColor: "#08F",
lineWidth: 1,
lineOpacity: 1,
fillColor: "#F80",
fillOpacity: 0.25,
dragPan: false,
scrollZoom: false,
boxZoom: false,
dragRotate: false,
keyboard: false,
doubleClickZoom: false,
touchZoomRotate: false
};
//class Minimap extends mapboxgl.NavigationControl {
class Minimap {
constructor(_options){
// super();
this.options = defaultOptions;
Object.assign(this.options, _options);
this._ticking = false;
this._lastMouseMoveEvent = null;
this._parentMap = null;
this._isDragging = false;
this._isCursorOverFeature = false;
this._previousPoint = [0, 0];
this._currentPoint = [0, 0];
this._trackingRectCoordinates = [[[], [], [], [], []]];
}
onAdd ( parentMap )
{
this._parentMap = parentMap;
var opts = this.options;
var container = this._container = this._createContainer(parentMap);
var miniMap = this._miniMap = new mapboxgl.Map({
attributionControl: false,
container: container,
style: opts.style,
zoom: opts.zoom,
center: opts.center
});
if (opts.maxBounds) miniMap.setMaxBounds(opts.maxBounds);
miniMap.on("load", this._load.bind(this));
return this._container;
}
_load ()
{
var opts = this.options;
var parentMap = this._parentMap;
var miniMap = this._miniMap;
var interactions = [
"dragPan", "scrollZoom", "boxZoom", "dragRotate",
"keyboard", "doubleClickZoom", "touchZoomRotate"
];
interactions.forEach(function(i){
if( opts[i] !== true ) {
miniMap[i].disable();
}
});
if( typeof opts.zoomAdjust === "function" ) {
this.options.zoomAdjust = opts.zoomAdjust.bind(this);
} else if( opts.zoomAdjust === null ) {
this.options.zoomAdjust = this._zoomAdjust.bind(this);
}
var bounds = miniMap.getBounds();
this._convertBoundsToPoints(bounds);
miniMap.addSource("trackingRect", {
"type": "geojson",
"data": {
"type": "Feature",
"properties": {
"name": "trackingRect"
},
"geometry": {
"type": "Polygon",
"coordinates": this._trackingRectCoordinates
}
}
});
miniMap.addLayer({
"id": "trackingRectOutline",
"type": "line",
"source": "trackingRect",
"layout": {},
"paint": {
"line-color": opts.lineColor,
"line-width": opts.lineWidth,
"line-opacity": opts.lineOpacity
}
});
// needed for dragging
miniMap.addLayer({
"id": "trackingRectFill",
"type": "fill",
"source": "trackingRect",
"layout": {},
"paint": {
"fill-color": opts.fillColor,
"fill-opacity": opts.fillOpacity
}
});
this._trackingRect = this._miniMap.getSource("trackingRect");
this._update();
parentMap.on("move", this._update.bind(this));
miniMap.on("mousemove", this._mouseMove.bind(this));
miniMap.on("mousedown", this._mouseDown.bind(this));
miniMap.on("mouseup", this._mouseUp.bind(this));
miniMap.on("touchmove", this._mouseMove.bind(this));
miniMap.on("touchstart", this._mouseDown.bind(this));
miniMap.on("touchend", this._mouseUp.bind(this));
this._miniMapCanvas = miniMap.getCanvasContainer();
this._miniMapCanvas.addEventListener("wheel", this._preventDefault);
this._miniMapCanvas.addEventListener("mousewheel", this._preventDefault);
}
_mouseDown( e )
{
if( this._isCursorOverFeature )
{
this._isDragging = true;
this._previousPoint = this._currentPoint;
this._currentPoint = [e.lngLat.lng, e.lngLat.lat];
}
}
_mouseMove (e)
{
this._ticking = false;
var miniMap = this._miniMap;
var features = miniMap.queryRenderedFeatures(e.point, {
layers: ["trackingRectFill"]
});
// don't update if we're still hovering the area
if( ! (this._isCursorOverFeature && features.length > 0) )
{
this._isCursorOverFeature = features.length > 0;
this._miniMapCanvas.style.cursor = this._isCursorOverFeature ? "move" : "";
}
if( this._isDragging )
{
this._previousPoint = this._currentPoint;
this._currentPoint = [e.lngLat.lng, e.lngLat.lat];
var offset = [
this._previousPoint[0] - this._currentPoint[0],
this._previousPoint[1] - this._currentPoint[1]
];
var newBounds = this._moveTrackingRect(offset);
this._parentMap.fitBounds(newBounds, {
duration: 80,
noMoveStart: true
});
}
}
_mouseUp()
{
this._isDragging = false;
this._ticking = false;
}
_moveTrackingRect( offset )
{
var source = this._trackingRect;
var data = source._data;
var bounds = data.properties.bounds;
bounds._ne.lat -= offset[1];
bounds._ne.lng -= offset[0];
bounds._sw.lat -= offset[1];
bounds._sw.lng -= offset[0];
this._convertBoundsToPoints(bounds);
source.setData(data);
return bounds;
}
_setTrackingRectBounds( bounds )
{
var source = this._trackingRect;
var data = source._data;
data.properties.bounds = bounds;
this._convertBoundsToPoints(bounds);
source.setData(data);
}
_convertBoundsToPoints( bounds )
{
var ne = bounds._ne;
var sw = bounds._sw;
var trc = this._trackingRectCoordinates;
trc[0][0][0] = ne.lng;
trc[0][0][1] = ne.lat;
trc[0][1][0] = sw.lng;
trc[0][1][1] = ne.lat;
trc[0][2][0] = sw.lng;
trc[0][2][1] = sw.lat;
trc[0][3][0] = ne.lng;
trc[0][3][1] = sw.lat;
trc[0][4][0] = ne.lng;
trc[0][4][1] = ne.lat;
}
_update()
{
if( this._isDragging ) {
return;
}
var parentBounds = this._parentMap.getBounds();
this._setTrackingRectBounds(parentBounds);
if( typeof this.options.zoomAdjust === "function" ) {
this.options.zoomAdjust();
}
}
_zoomAdjust()
{
var miniMap = this._miniMap;
var parentMap = this._parentMap;
var miniZoom = parseInt(miniMap.getZoom(), 10);
var parentZoom = parseInt(parentMap.getZoom(), 10);
var levels = this.options.zoomLevels;
var found = false;
levels.forEach(function(zoom)
{
if( ! found && parentZoom >= zoom[0] )
{
if( miniZoom >= zoom[1] ) {
miniMap.setZoom(zoom[2]);
}
miniMap.setCenter(parentMap.getCenter());
found = true;
}
});
if( ! found && miniZoom !== this.options.zoom )
{
if( typeof this.options.bounds === "object" ) {
miniMap.fitBounds(this.options.bounds, {duration: 50});
}
miniMap.setZoom(this.options.zoom)
}
}
_createContainer ( parentMap )
{
var opts = this.options;
var container = document.createElement("div");
container.className = "mapboxgl-ctrl-minimap mapboxgl-ctrl";
container.setAttribute('style', 'width: ' + opts.width + '; height: ' + opts.height + ';');
container.addEventListener("contextmenu", this._preventDefault);
parentMap.getContainer().appendChild(container);
if( opts.id !== "" ) {
container.id = opts.id;
}
return container;
}
_preventDefault( e ) {
e.preventDefault();
}
}
export default Minimap;