autozoom web ui map when centered on aircraft and progressing for likely piloting needs

[u-an-i]

Zoom into map when navigating tight corners and zoom out when going along a straight line for some time, set refresh rate so that aircraft has moved 1px after the refresh delay ie. let aircraft/map animation appear smooth (every pixel is used (instead of jumping some pixels on refresh, appearing jittery)).

Actual attempt: the map is centered around the aircraft. Show the remaining part of the current section to the nex waypoint and the whole following section in front of the aircraft in the viewport. Refresh every x seconds so that every 1px movement is caught. Zoom to 0 when closing in on a waypoint, zoom back afterwards.

Note: the field of view depends on the map size and the zoom level, not the zoom level only. The zoom level used by the server is certain integers, not all, not decimal.

Experimental determination of zoom level exposed in web ui and field of view at image width of 2000px (= ~ 1920px Desktop = ~ 1024px iPad Retina (x2))      // "error": should use height at around 9:16 width for relevant fov: this and next section should also fit in "smaller direction" case

zoom = A    fov (km) = B

0                 13
1                 26
2                 53
3                106
4                212
5                425
6                850
7               1700
8               3400
9               7000
10             15000
11             32000

From this, take: B(A) = ~ 13.28125 * 2^A


let distance current position to next waypoint = Y

let projection of following section onto current section + Y = clamp(cos(180 - angle between sections), 0, 1) * length next section + Y = X = distance in front of aircraft to be fit into viewport

2 * X === B => A    // A decimal; aircraft is centered, X extends to only 1 half of viewport, 2 * X covers whole viewport

1 / (pixel_amount / B * v (km/3600s)) = t_refresh           // target: t_refresh[s] === aircraft moved 1 pixel at zoom level between refreshs; pixel_amount = number of pixels of "the viewports smaller side"      // "error": should be larger side: has more pixels, needs lower refresh delay (as "1 case fits all", ignore heading and possible calculation of available pixels)

t_refresh = 0.1 + (3600 * B) / (pixel_amount * v[km/h])     // 0.1 = prevent 0;


on ground (and in air): let when v[km/h] < 100: A = 0


condition: next waypoint switch to next next waypoint === delta Y between 2 refreshs > 0 && delta distance current position to next next waypoint between 2 refreshs < 0


on nearing next waypoint: zoom in: A = 0 when Y < 13.28125 / 2; let application code perform "smooth" zooming (currently limited to certain integers);



application code: zoom in by 3 zoom level per s; on way point advance zoom out to calculated zoom level by 3 zoom level per s

The following is experimental but "works": https://1drv.ms/v/s!Ag8I6whv8uZOzcUddNKi9jLOFm3L0g?e=IXA6ML

code (add to map.html):

var note = document.createElement("div");
note.style = "position:fixed;left:0;bottom:0;display:table;padding:20px;background:#fff;font-size:30px;z-index:2";
document.body.appendChild(note);


/**
 *  wayData, dataOrdering as derived from coordinates documentation and constructor cases
 */
function AutoFollow(wayData, dataOrdering) {
  /* implementation detail variables */
  var coordinates;                                  // array of latLng, contract: the coordinate immediately following a coordinate which is the start coordinate of a section, is the end coordinate of this section; section increase is defined by minimumSectionIdentifierDelta. This allows sections as a list of individual separated from another pairs of start/end as well as a list of waypoints with the coordinate of an end of a section being the coordinate of the start of the next section, this array is always an array of latLng

  // latLng = [x,y];                                // x being -90 to 90, y being 0 to 360

  var currentSectionStartCoordinateIdentifier;      // index of coordinate in coordinates which is the start coordinate of the current section

  var firstSectionStartCoordinateIdentifier = 0;    // index of coordinate in coordinates which is the start coordinate of the first section, see also currentSectionNumber

  var minimumSectionStartCoordinateIdentifierDelta;

  var numberOfSections;

  var currentSectionNumber = 1;

  var R_earth = 6371;                               // radius of Earth in km

  var degToRad = Math.PI / 180;

  var ld = Math.log(2);

  var formerY = 0, formerZ = 0;
  /* end */


  /* constructor */
  function construct(wayData, dataOrdering) {
    coordinates = wayData;
    switch(dataOrdering) {
      case "waypoints":
        minimumSectionStartCoordinateIdentifierDelta = 1;
        numberOfSections = coordinates.length - 1;
        break;
      case "pairsOfSectionBounds":
        minimumSectionStartCoordinateIdentifierDelta = 2;
        numberOfSections = coordinates.length / 2 - 1;
        break;
      default:
    }
    currentSectionStartCoordinateIdentifier = firstSectionStartCoordinateIdentifier;
  }
  /* end */


  /* internal informative data api */
  function getNumberOfSectionIdentifiers() {
    return numberOfSections;
  }

  function getMinimumSectionStartCoordinateIdentifierDelta() {
    return minimumSectionStartCoordinateIdentifierDelta;
  }
  /* end */


  /* low-level data api */
  function getCurrentSectionStartCoordinateIdentifier() {
    return currentSectionStartCoordinateIdentifier;
  }

  function setCurrentSectionStartCoordinateIdentifier(toValue) {
    currentSectionStartCoordinateIdentifier = toValue;
  }

  function getSection(sectionStartCoordinateIdentifier) {
    var sectionStart = coordinates[sectionStartCoordinateIdentifier];
    var sectionEnd = coordinates[sectionStartCoordinateIdentifier + 1];
    return [sectionStart, sectionEnd];
  }

  // returns false when no next section
  function getNextSectionStartCoordinateIdentifier(doRestartWhenEnd) {
    var nextSectionStartCoordinateIdentifier = getCurrentSectionStartCoordinateIdentifier() + getMinimumSectionStartCoordinateIdentifierDelta();
    if(doRestartWhenEnd) {
      nextSectionStartCoordinateIdentifier %= getNumberOfSectionIdentifiers();
    }
    return (currentSectionNumber < numberOfSections) ? nextSectionStartCoordinateIdentifier : doRestartWhenEnd ? firstSectionStartCoordinateIdentifier : false;
  }
  /* end */


  /* high-level data api */
  function getCurrentSection() {
    return getSection(getCurrentSectionStartCoordinateIdentifier());
  }

  function advanceCurrentSection(doRestartWhenEnd) {
    var nextId = getNextSectionStartCoordinateIdentifier(doRestartWhenEnd);
    if(nextId !== false) {
      note.textContent = nextId;         // debug
      setCurrentSectionStartCoordinateIdentifier(nextId);
      currentSectionNumber++;
      if(doRestartWhenEnd) {
        currentSectionNumber %= numberOfSections;
      }
    }
  }

  // returns false when no next section
  function getNextSection(doRestartWhenEnd) {
    var nextId = getNextSectionStartCoordinateIdentifier(doRestartWhenEnd);
    return (nextId !== false) ? getSection(nextId) : nextId;
  }

  function isFirstSection() {
    return currentSectionStartCoordinateIdentifier === firstSectionStartCoordinateIdentifier;
  }
  /* end */


  /* logic api */
  // returns km
  function getLengthOfSection(section) {
    var lat1 = section[0][0] * degToRad;
    var lon1 = section[0][1] * degToRad;
    var lat2 = section[1][0] * degToRad;
    var lon2 = section[1][1] * degToRad;

    return R_earth * Math.acos(Math.sin(lat1) * Math.sin(lat2) + Math.cos(lat1) * Math.cos(lat2) * Math.cos(lon2 - lon1));
  }

  // returns in deg
  function getAngleBetweenSections(section1, section2) {
    // returns latLng
    function getPointOnSection(section, relativePoint) {
      var delta = getLengthOfSection(section) / R_earth;
      var sinDelta = Math.sin(delta);
      var relativeSinDeltaToEnd = Math.sin((1 - relativePoint) * delta) / sinDelta;
      var relativeSinDelta = Math.sin(relativePoint * delta) / sinDelta;
      var lat1 = section1[0][0] * degToRad;
      var lon1 = section1[0][1] * degToRad;
      var lat2 = section1[1][0] * degToRad;
      var lon2 = section1[1][1] * degToRad;
      var a = relativeSinDeltaToEnd * Math.cos(lat1);
      var b = relativeSinDelta * Math.cos(lat2);

      var x = a * Math.cos(lon1) + b * Math.cos(lon2);
      var y = a * Math.sin(lon1) + b * Math.sin(lon2);
      var z = relativeSinDeltaToEnd * Math.sin(lat1) + relativeSinDelta * Math.sin(lat2);

      return [Math.atan2(z, Math.sqrt(x * x + y * y)) / degToRad, Math.atan2(y, x) / degToRad];
    }

    // returns in rad
    function getBearing(point1, point2) {
      var lat1 = section1[0][0] * degToRad;
      var lon1 = section1[0][1] * degToRad;
      var lat2 = section1[1][0] * degToRad;
      var lon2 = section1[1][1] * degToRad;

      var cosLat2 = Math.cos(lat2);
      var deltaLon = lon2 - lon1;

      return Math.atan2(cosLat2 * Math.sin(deltaLon), Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(deltaLon));
    }

    return 180 - Math.abs(getBearing(section2[0], getPointOnSection(section2, 0.01)) - getBearing(getPointOnSection(section1, 0.99), section1[1])) / degToRad;
  }

  // returns latLng
  function getPosition(aircraft) {
    return aircraft[1];
  }

  // returns in km/h
  function getSpeed(aircraft) {
    return aircraft[0];
  }

  function getZoomLevelFromFOV(km) {
    return Math.log(km / 13.28125) / ld;
  }
  /* end */


  /* auxiliary api */
  function clamp(value, min, max) {
    return Math.min(Math.max(value, min), max);
  }

  function getSmallerLength(viewport) {
    return viewport.clientWidth < viewport.clientHeight ? viewport.clientWidth : viewport.clientHeight;
  }
  /* end */


  // returns [zoomLevel, refreshDelay, nearingNextWayPoint]
  // auto-progresses internal waypoint
  this.getAutoValues = function(aircraft, viewport) {
    var v = getSpeed(aircraft);
    var nearingNextWayPoint = false;

    var position = getPosition(aircraft);
    var currentSection = getCurrentSection();
    var y = getLengthOfSection([position, currentSection[1]]);
    var nextSection = getNextSection();
    if(nextSection !== false) {
      var z = getLengthOfSection([position, nextSection[1]]);
      if(y - formerY > 0 && z - formerZ < 0 && (!isFirstSection() || v > 100)) {    // will advance unintended when take-off towards next section rather than current section
        advanceCurrentSection();
      }
      formerY = y;
      formerZ = z;
    }

    if(v > 100) {
      if(y > 13.28125 / 2 && nextSection !== false) {
        var b = 2 * (clamp(Math.cos(180 - getAngleBetweenSections(currentSection, nextSection)), 0, 1) * getLengthOfSection(nextSection) + y);
        var a = getZoomLevelFromFOV(b);
      } else {
        var a = 0;
        var b = 13.28125;
        nearingNextWayPoint = true;
      }
    } else {
      var a = 0;
      var b = 13.28125;
    }

    return [a, .1 + (3600 * b) / (getSmallerLength(viewport) * v), nearingNextWayPoint];
  };


  construct(wayData, dataOrdering);
}


var currentZoomLevel = 0;
var zoomingIn = false;
var lastZoomChangeTimeStamp = 0;
var data = [
  [-0.536351,-79.371948],[-2.127884,-79.594315],[-2.255389,-79.688828],[-2.158814,-79.886040],[-2.227518,-80.463356],[-2.207784,-80.985039],[-1.932615,-80.933044],[-1.867939,-80.825439],[-1.845166,-80.738426]
];
var x = new AutoFollow(data, "waypoints");

var pdi = document.createElement("iframe");
pdi.onload = function() {
  setTimeout(function() {
    exampleUse();
  }, 500);       // "wait" for _doc async gotten.
};
pdi.src = "progress.html";
pdi.style.pointerEvents = "none";
pdi.style.position = "absolute";
pdi.style.opacity = "0";
pdi.style.width = "1px";
pdi.style.height = "1px";
pdi.style.border = "0";
document.body.appendChild(pdi);

function exampleUse() {
  var pdicd = pdi.contentDocument;
  var speed = parseInt(pdicd.querySelector("table:nth-of-type(8) tr:nth-child(2) td:nth-child(2)").textContent.replace(".", ""), 10) * 1.852;
  var doc = pdicd.querySelector("#doc");
  while(doc.childElementCount > 0) {
      doc.removeChild(doc.firstElementChild);
  }
  var values = doc.textContent.split(" ");
  var latLng = [(values[3].charAt(0) === "S" ? -1 : 1) * (parseFloat(values[0]) + parseFloat(values[1]) / 60 + parseFloat(values[2].replace(",", ".")) / 3600), (values[7].charAt(0) === "W" ? -1 : 1) * (parseFloat(values[4]) + parseFloat(values[5]) / 60 + parseFloat(values[6].replace(",", ".")) / 3600)];
  function autoFollow() {
    var autoValues = x.getAutoValues([speed, latLng], document.querySelector("#mapcontainer"));
    if(autoValues[2]) {
      zoomIn();                     // knows target zoom = 0;
      zoomingIn = true;
    } else if(zoomingIn) {
      zoomOut(autoValues[0]);       // resets zoomingIn when autoValues[0] "reached"
    } else {
      currentZoomLevel = autoValues[0];
    }
    setZoom();
    setRefresh(autoValues[1]);
    function zoomIn() {
      if(lastZoomChangeTimeStamp === 0) {
        lastZoomChangeTimeStamp = performance.now();
      }
      var now = performance.now();
      var deltaTime = now - lastZoomChangeTimeStamp;
      lastZoomChangeTimeStamp = now;
      currentZoomLevel -= 3 * deltaTime / 1000;
      if(currentZoomLevel < 0) {
        currentZoomLevel = 0;
        lastZoomChangeTimeStamp = 0;
      }
    }
    function zoomOut(targetZoom) {
      if(lastZoomChangeTimeStamp === 0) {
        lastZoomChangeTimeStamp = performance.now();
      }
      var now = performance.now();
      var deltaTime = now - lastZoomChangeTimeStamp;
      lastZoomChangeTimeStamp = now;
      currentZoomLevel += 3 * deltaTime / 1000;
      if(currentZoomLevel > targetZoom) {
        currentZoomLevel = targetZoom;
        lastZoomChangeTimeStamp = 0;
        zoomingIn = false;
      }
    }
    function setZoom() {
      var slider = document.querySelector("#centerDistance");
      slider.value = currentZoomLevel;
      slider.dispatchEvent(new Event("input"));
    }
    function setRefresh(to) {
      var slider = document.querySelector("#refreshselect");
      slider.value = to;
      slider.dispatchEvent(new Event("change"));
      slider.dispatchEvent(new Event("input"));
    }
    setTimeout(function() {
      pdi.contentWindow.location.href = pdi.contentWindow.location.href;
    }, autoValues[1] * 1000);
  }
  autoFollow();
}

Flightplan:

<?xml version="1.0" encoding="UTF-8"?>
<LittleNavmap xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="https://www.littlenavmap.org/schema/lnmpln.xsd">
  <Flightplan>
    <Header>
      <FlightplanType>VFR</FlightplanType>
      <CruisingAlt>14000</CruisingAlt>
      <CreationDate>2021-05-30T21:01:57</CreationDate>
      <FileVersion>1.0</FileVersion>
      <ProgramName>Little Navmap</ProgramName>
      <ProgramVersion>2.6.11</ProgramVersion>
      <Documentation>https://www.littlenavmap.org/lnmpln.html</Documentation>
    </Header>
    <SimData>MSFS</SimData>
    <NavData Cycle="2105">NAVIGRAPH</NavData>
    <Departure>
      <Pos Lon="-79.371361" Lat="-0.531291" Alt="613.00"/>
      <Start>19</Start>
    </Departure>
    <Waypoints>
      <Waypoint>
        <Name>Km 60</Name>
        <Ident>SE11</Ident>
        <Type>AIRPORT</Type>
        <Pos Lon="-79.371948" Lat="-0.536351" Alt="613.00"/>
      </Waypoint>
      <Waypoint>
        <Ident>WP1</Ident>
        <Type>USER</Type>
        <Pos Lon="-79.594315" Lat="-2.127884" Alt="14000.00"/>
      </Waypoint>
      <Waypoint>
        <Ident>WP2</Ident>
        <Type>USER</Type>
        <Pos Lon="-79.688828" Lat="-2.255389" Alt="14000.00"/>
      </Waypoint>
      <Waypoint>
        <Ident>WP3</Ident>
        <Type>USER</Type>
        <Pos Lon="-79.886040" Lat="-2.158814" Alt="14000.00"/>
      </Waypoint>
      <Waypoint>
        <Ident>WP4</Ident>
        <Type>USER</Type>
        <Pos Lon="-80.463356" Lat="-2.227518" Alt="14000.00"/>
      </Waypoint>
      <Waypoint>
        <Ident>WP5</Ident>
        <Type>USER</Type>
        <Pos Lon="-80.985039" Lat="-2.207784" Alt="9834.92"/>
      </Waypoint>
      <Waypoint>
        <Ident>WP6</Ident>
        <Type>USER</Type>
        <Pos Lon="-80.933044" Lat="-1.932615" Alt="4287.20"/>
      </Waypoint>
      <Waypoint>
        <Ident>WP7</Ident>
        <Type>USER</Type>
        <Pos Lon="-80.825439" Lat="-1.867939" Alt="1801.01"/>
      </Waypoint>
      <Waypoint>
        <Name>Flugplatz Santa Elena</Name>
        <Ident>SESN</Ident>
        <Type>AIRPORT</Type>
        <Pos Lon="-80.738426" Lat="-1.845166" Alt="20.00"/>
      </Waypoint>
    </Waypoints>
  </Flightplan>
</LittleNavmap>

[albar965]

Why not a simple solution where the the aircraft is centered as is? Maybe speed and probably altitude dependent. And update the map not more often than once per second.

I'd not do one pix updates. These already look bad in LNM since not all map objects use sub-pixel rendering (which does not work for labels anyway). I'm slowly improving it but it affects a lot of code.

Keep it simple. 🙂

[u-an-i]

rather Qt 6.1.0 . I followed the BUILD.txt naively and Qt 6.1.0 is what is on offer by qt.io. I am still at clearing all Errors and Warnings (since around 11 am).

1 by 1. If i come to a fullstop i'll let it be.

MSVC is what I already have and I didn't want to load more dev tools on my system and i thought "how hard can it be?" :)

Until now the major changes are:

• QVector is just an alias of QList, all overloads having just that type as distinguishing their signature are unneeded (at least to make the errors go away. After everything hopefully compiles i can see whether it also works in practice, but i fear i don't have sufficient experience to know every corner where something might have broken)
• 1 or 2 MSVC specific #pragma conversions
• Referencing Qx includes hitherto missing
• adding or remapping some enum parent class name changes
• remapping the file dialog codes usage of strings, Dirs and FileInfos
• utilising Qt container classes range constructors (eg. QList(std::vector.begin(), std::vector.end())

[albar965]

Looking good. I suppose this breaks compatibility with all older Qt versions?

[u-an-i]

likely in regards to range constructors and enum parent references.

[albar965]

So better keep the changes in master for LNM 2.8.

[u-an-i]

i'm basing off master,yes. Actually i didn't fork, I'll do this when i succed wrt compilation.