MP version 1.5

3 years ago · 59b5cbe5b2
parent 4f8bfa8c70
commit 59b5cbe5b2
12 changed files with 9165 additions and 46 deletions
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@ -3229,6 +3229,9 @@
    "missionDefaultSettingsHead": {
        "message": "Default settings"
    },
+    "missionDefaultElevationHead": {
+        "message": "Elevation Profile"
+    },
    "missionSafehomeHead": {
        "message": "Safe Home manager"
    },
--- a/gulpfile.js
+++ b/gulpfile.js
@ -127,7 +127,8 @@ sources.js = [
    './js/safehome.js',
    './js/waypointCollection.js',
    './js/waypoint.js',
-    './node_modules/openlayers/dist/ol.js'
+    './node_modules/openlayers/dist/ol.js',
+    './js/libraries/plotly-latest.min.js'
 ];

 sources.receiverCss = [
--- a/images/icons/cf_icon_arrow.png
+++ b/images/icons/cf_icon_arrow.png
--- a/images/icons/cf_icon_arrow.svg
+++ b/images/icons/cf_icon_arrow.svg
@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Capa_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 141.7 141.7"
+   enable-background="new 0 0 141.7 141.7"
+   xml:space="preserve"
+   sodipodi:docname="cf_icon_arrow.svg"
+   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)"><metadata
+   id="metadata955"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+   id="defs953" /><sodipodi:namedview
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1"
+   objecttolerance="10"
+   gridtolerance="10"
+   guidetolerance="10"
+   inkscape:pageopacity="0"
+   inkscape:pageshadow="2"
+   inkscape:window-width="1368"
+   inkscape:window-height="850"
+   id="namedview951"
+   showgrid="false"
+   inkscape:zoom="2.9841204"
+   inkscape:cx="56.277419"
+   inkscape:cy="56.184706"
+   inkscape:window-x="-6"
+   inkscape:window-y="-6"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="Capa_1"
+   inkscape:document-rotation="0" />
+
+<path
+   sodipodi:type="star"
+   style="opacity:0.994175;fill:#e935d6;fill-opacity:1;stroke:#c429b3;stroke-width:2.89134;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+   id="path861"
+   sodipodi:sides="3"
+   sodipodi:cx="70.849998"
+   sodipodi:cy="54.854248"
+   sodipodi:r1="57.312138"
+   sodipodi:r2="28.656069"
+   sodipodi:arg1="1.5707963"
+   sodipodi:arg2="2.6179939"
+   inkscape:flatsided="true"
+   inkscape:rounded="0.10703934"
+   inkscape:randomized="0"
+   d="m 70.85,112.16639 c -10.625531,0 -54.946535,-76.766229 -49.633769,-85.968209 5.312765,-9.201981 93.954769,-9.201983 99.267529,-3e-6 5.31277,9.20198 -39.008229,85.968212 -49.63376,85.968212 z"
+   inkscape:transform-center-y="14.328034" /></svg>
--- a/images/icons/cf_icon_elevation_white.svg
+++ b/images/icons/cf_icon_elevation_white.svg
@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Capa_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 141.7 141.7"
+   enable-background="new 0 0 141.7 141.7"
+   xml:space="preserve"
+   sodipodi:docname="cf_icon_elevation_white.svg"
+   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)"><metadata
+   id="metadata955"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+   id="defs953" /><sodipodi:namedview
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1"
+   objecttolerance="10"
+   gridtolerance="10"
+   guidetolerance="10"
+   inkscape:pageopacity="0"
+   inkscape:pageshadow="2"
+   inkscape:window-width="1368"
+   inkscape:window-height="850"
+   id="namedview951"
+   showgrid="false"
+   inkscape:zoom="2.9841204"
+   inkscape:cx="56.277419"
+   inkscape:cy="56.184706"
+   inkscape:window-x="-6"
+   inkscape:window-y="-6"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="Capa_1"
+   inkscape:document-rotation="0" />
+
+<g
+   id="g859"
+   transform="translate(-0.19271203,5.8865007)"
+   style="stroke:#ffffff;stroke-opacity:1;stroke-width:6.67086614;stroke-miterlimit:4;stroke-dasharray:none"><path
+     style="fill:none;stroke:#ffffff;stroke-width:6.67086614;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="M 8.042571,108.57471 36.861784,38.202212 54.622461,78.079959 84.111888,21.781963 98.521494,45.909675 105.22364,34.85114 l 28.81921,75.3991"
+     id="path841" /><path
+     style="fill:none;stroke:#ffffff;stroke-width:6.67086614;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="M 54.622461,78.079959 43.106593,98.026027"
+     id="path843" /><path
+     style="fill:none;stroke:#ffffff;stroke-width:6.67086614;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="M 98.521494,45.909675 90.293757,60.160534"
+     id="path845" /><path
+     style="fill:none;stroke:#ffffff;stroke-width:6.67086614;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 26.39564,63.886982 7.115072,-6.248557 9.047893,10.723428 5.026607,-6.031929"
+     id="path847"
+     sodipodi:nodetypes="cccc" /><path
+     style="fill:none;stroke:#ffffff;stroke-width:6.67086614;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 70.372496,49.260747 8.712785,-6.367036 3.686178,4.021286 7.707464,-6.702143 v 0 l 6.367036,2.680857"
+     id="path849" /><path
+     style="fill:none;stroke:#ffffff;stroke-width:6.67086614;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 93.494887,54.62246 6.367039,3.015965 6.031924,-5.026607 6.9966,4.397048"
+     id="path851"
+     sodipodi:nodetypes="cccc" /></g></svg>
--- a/js/libraries/plotly-latest.min.js
+++ b/js/libraries/plotly-latest.min.js
--- a/js/waypoint.js
+++ b/js/waypoint.js
@ -135,6 +135,21 @@ let Waypoint = function (number, action, lat, lon, alt=0, p1=0, p2=0, p3=0, endM
    self.setAttachedNumber = function (data) {
        attachedNumber = data;
    };
+    
+    self.getElevation = async function (globalSettings) {
+        let elevation;
+        if (globalSettings.mapProviderType == 'bing') {
+            const response = await fetch('http://dev.virtualearth.net/REST/v1/Elevation/List?points='+self.getLatMap()+','+self.getLonMap()+'&heights=ellipsoid&key='+globalSettings.mapApiKey);
+            const myJson = await response.json(); 
+            elevation = myJson.resourceSets[0].resources[0].elevations[0];
+        }
+        else {
+            elevation = "NA";
+        }
+        $('#elevationValueAtWP').text(elevation);
+        console.log("getElevation");
+        return elevation;
+    }

    return self;
 };
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -38,6 +38,7 @@
    "nw": "^0.50.3-sdk",
    "nw-dialog": "^1.0.7",
    "openlayers": "^4.6.5",
+    "plotly": "^1.0.6",
    "temp": "^0.8.3",
    "three": "0.72.0",
    "xml2js": "^0.4.19"
--- a/src/css/tabs/mission_planer.css
+++ b/src/css/tabs/mission_planer.css
@ -191,10 +191,14 @@
    height: 100%;
 }

-#missionMap {
-    height: 100%;
+/* #missionMap {
+    height: 60%;
 }

+#missionPlanerElevation {
+    height: 40%;
+} */
+
 .tab-mission-control input {
    width: 90px;
    padding-left: 3px;
@ -274,20 +278,27 @@
    top: 80px;
 }
 .mission-control-safehome {
-    top: 85px;
+    top: 115px;
    left: .5em;
 }
 .ol-touch .mission-control-safehome {
+    top: 120px;
+}
+
+.mission-control-elevation {
+    top: 90px;
+    left: .5em;
+}
+.ol-touch .mission-control-elevation {
    top: 100px;
 }
 .mission-control-template {
-    top: 85px;
+    top: 140px;
    left: .5em;
 }
 .ol-touch .mission-control-template {
-    top: 100px;
+    top: 140px;
 }
-
 .tab-mission-control .safehomesTable {
    width: 100%;
    text-align: center;
--- a/tabs/mission_control.html
+++ b/tabs/mission_control.html
@ -86,6 +86,7 @@
                        </div>
                    </div>
                </div>
+                
                <div id="missionPlanerSafehome" class="gui_box grey" style="display: none">
                    <div class="gui_box_titlebar">
                        <div class="spacer_box_title i18n-replaced" data-i18n="missionSafehomeHead">Safe Home manager</div>
@ -133,7 +134,7 @@

                <div class="gui_box grey" id="MPeditPoint" style="display: none">
                    <div class="gui_box_titlebar">
-                        <div class="spacer_box_title i18n-replaced" data-i18n="editPointHead">Edit point</div>
+                        <div class="spacer_box_title i18n-replaced" data-i18n="editPointHead" id="EditPointNumber">Edit point</div>
                        <div class="btnMenu btnMenuIcon">
                            <div id="showHideWPeditButton"   class="save_btn">
                                <a class="ic_hide" href="#" title="Hide"></a>
@ -175,6 +176,10 @@
                            <label class="point-label" for="pointP3">Parameter 3: </label>
                            <input id="pointP3" type="checkbox" value="0" class="togglemedium" checked required>
                        </div>
+                        <div class="point" id="elevationAtWP" style="display: none">
+                            <label class="point-label">Elevation (m): </label>
+                            <span id="elevationValueAtWP">NA</span>
+                        </div>
                        <div class="point" id="pointP1class" style="display: none">
                            <label class="point-label" for="pointP1">Parameter 1: </label>
                            <input id="pointP1" type="text" value="0" required>
@ -235,7 +240,20 @@
            </div>
        </div>
        <div class="cf_column threefourth_left">
-            <div style="height:100%" id="missionMap"></div>
+            <div id="missionMap"></div>
+            <div id="missionPlanerElevation" class="gui_box grey" style="display: none">
+                    <div class="gui_box_titlebar">
+                        <div class="spacer_box_title i18n-replaced" data-i18n="missionDefaultElevationHead">Elevation Profile</div>
+                        <div class="btnMenu btnMenuIcon  save_btn">
+                                <a id="cancelSettings" class="ic_cancel" href="#" title="Cancel"></a>
+                                <a id="saveSettings" class="ic_save" href="#" title="Save"></a>
+                        </div>
+                    </div>
+                    <div class="spacer">
+                        <div id="elevationDiv">
+                        </div>
+                    </div>
+                </div>
            <div id="notLoadMap" data-i18n="useOnlyStandalone" style="display: none;"></div>
        </div>
    </div>
--- a/tabs/mission_control.js
+++ b/tabs/mission_control.js
@ -730,7 +730,7 @@ TABS.mission_control.initialize = function (callback) {
            else if (element.isAttached()) {
                if (element.getAction() == MWNP.WPTYPE.JUMP) {
                    let coord = ol.proj.fromLonLat([mission.getWaypoint(element.getP1()).getLonMap(), mission.getWaypoint(element.getP1()).getLatMap()]);  
-                    paintLine(oldPos, coord, element.getNumber(), color='#e935d6', lineDash=5, lineText="Repeat x"+(element.getP2() == -1 ? " infinite" : String(element.getP2())), selection=false);
+                    paintLine(oldPos, coord, element.getNumber(), color='#e935d6', lineDash=5, lineText="Repeat x"+(element.getP2() == -1 ? " infinite" : String(element.getP2())), selection=false, arrow=true);
                }
                // If classic WPs is defined with a heading = -1, change Boolean for POI to false. If it is defined with a value different from -1, activate Heading boolean
                else if (element.getAction() == MWNP.WPTYPE.SET_HEAD) {
@ -755,32 +755,63 @@ TABS.mission_control.initialize = function (callback) {
        $('#missionDistance').text(lengthMission[lengthMission.length -1] != -1 ? lengthMission[lengthMission.length -1].toFixed(1) : 'infinite');
    }
    
-    function paintLine(pos1, pos2, pos2ID, color='#1497f1', lineDash=0, lineText="", selection=true) {
+    function paintLine(pos1, pos2, pos2ID, color='#1497f1', lineDash=0, lineText="", selection=true, arrow=false) {
        var line = new ol.geom.LineString([pos1, pos2]);

        var feature = new ol.Feature({
            geometry: line
        });
-        feature.setStyle(new ol.style.Style({
-            stroke: new ol.style.Stroke({
-                color: color,
-                width: 3,
-                lineDash: [lineDash]
-            }),
-            text: new ol.style.Text({
-                text: lineText,
-                font: '14px sans-serif',
-                placement : 'line',
-                textBaseline: 'ideographic',
+        
+        feature.setStyle(
+            new ol.style.Style({
                stroke: new ol.style.Stroke({
-                    color: color
+                    color: color,
+                    width: 3,
+                    lineDash: [lineDash]
+                }),
+                text: new ol.style.Text({
+                    text: lineText,
+                    font: '14px sans-serif',
+                    placement : 'line',
+                    textBaseline: 'ideographic',
+                    stroke: new ol.style.Stroke({
+                        color: color
+                    }),
                }),
            }),
-        }));
+        );
+        
+        if (arrow) {
+            let dx = pos2[0] - pos1[0];
+            let dy = pos2[1] - pos1[1];
+            let rotation = Math.atan2(dx, dy);
+            var featureArrow = new ol.Feature({
+                geometry: new ol.geom.Point([pos1[0]+dx/2, pos1[1]+dy/2])
+            });
+            featureArrow.setStyle(
+                new ol.style.Style({
+                    image: new ol.style.Icon({
+                        src: '../images/icons/cf_icon_arrow.png',
+                        scale: 0.3,
+                        anchor: [0.5, 0.5],
+                        rotateWithView: true,
+                        rotation: rotation,
+                    }),
+                })
+            );
+        }
+        

-        var vectorSource = new ol.source.Vector({
-            features: [feature]
-        });
+        if (arrow) {
+            var vectorSource = new ol.source.Vector({
+                features: [feature, featureArrow]
+            });
+        }
+        else {
+            var vectorSource = new ol.source.Vector({
+                features: [feature]
+            });
+        }

        var vectorLayer = new ol.layer.Vector({
            source: vectorSource
@ -1073,6 +1104,39 @@ TABS.mission_control.initialize = function (callback) {
        };
        ol.inherits(app.PlannerSafehomeControl, ol.control.Control);
        
+        /**
+         * @constructor
+         * @extends {ol.control.Control}
+         * @param {Object=} opt_options Control options.
+         */
+        app.PlannerElevationControl = function (opt_options) {
+            var options = opt_options || {};
+            var button = document.createElement('button');
+
+            button.innerHTML = ' ';
+            button.style = 'background: url(\'../images/icons/cf_icon_elevation_white.svg\') no-repeat 1px -1px;background-color: rgba(0,60,136,.5);';
+
+            var handleShowSettings = function () {
+                $('#missionPlanerElevation').fadeIn(300);
+                plotElevation();
+            };
+
+            button.addEventListener('click', handleShowSettings, false);
+            button.addEventListener('touchstart', handleShowSettings, false);
+
+            var element = document.createElement('div');
+            element.className = 'mission-control-elevation ol-unselectable ol-control';
+            element.appendChild(button);
+            element.title = 'MP Elevation';
+
+            ol.control.Control.call(this, {
+                element: element,
+                target: options.target
+            });
+
+        };
+        ol.inherits(app.PlannerElevationControl, ol.control.Control);
+        
        /**
         * @param {ol.MapBrowserEvent} evt Map browser event.
         * @return {boolean} `true` to start the drag sequence.
@ -1169,6 +1233,11 @@ TABS.mission_control.initialize = function (callback) {
         * @return {boolean} `false` to stop the drag sequence.
         */
        app.Drag.prototype.handleUpEvent = function (evt) {
+            if (tempMarker.kind == "waypoint" ){
+                if (mission.getWaypoint(tempMarker.number).getP3() == 1.0) {
+                    mission.getWaypoint(tempMarker.number).getElevation(globalSettings);
+                }
+            }
            this.coordinate_ = null;
            this.feature_ = null;
            return false;
@ -1197,12 +1266,14 @@ TABS.mission_control.initialize = function (callback) {
        if (CONFIGURATOR.connectionValid) {
            control_list = [
                new app.PlannerSettingsControl(),
-                new app.PlannerSafehomeControl()
+                new app.PlannerSafehomeControl(),
+                new app.PlannerElevationControl(),
            ]
        }
        else {
            control_list = [
                new app.PlannerSettingsControl(),
+                new app.PlannerElevationControl(),
                //new app.PlannerSafehomeControl() // TO COMMENT FOR RELEASE : DECOMMENT FOR DEBUG
            ]
        }
@ -1307,6 +1378,7 @@ TABS.mission_control.initialize = function (callback) {
                    else {$('#pointP'+String(j).slice(-1)+'class').fadeOut(300);}
                }
                selectedMarker = renderWaypointOptionsTable(selectedMarker);
+                $('#EditPointNumber').text("Edit point "+String(selectedMarker.getLayerNumber()+1));
                $('#MPeditPoint').fadeIn(300);
                redrawLayer();
            }
@ -1502,6 +1574,14 @@ TABS.mission_control.initialize = function (callback) {
        $('#pointP3').on('change', function (event) {
            if (selectedMarker) {
                selectedMarker.setP3( $('#pointP3').prop("checked") ? 1.0 : 0.0);
+                console.log($('#pointP3').prop("checked"));
+                if ($('#pointP3').prop("checked")) {
+                    selectedMarker.getElevation(globalSettings);
+                    $('#elevationAtWP').fadeIn(300);
+                }
+                else {
+                    $('#elevationAtWP').fadeOut(300);
+                }
                mission.updateWaypoint(selectedMarker);
                mission.update();
                redrawLayer();
@ -1920,6 +2000,24 @@ TABS.mission_control.initialize = function (callback) {
        element.parent().find('.switcherymid').trigger('click');
      }
    }
+    
+    function plotElevation() {
+        var trace1 = {
+          x: [1, 2, 3, 4],
+          y: [10, 15, 13, 17],
+          type: 'scatter'
+        };
+
+        var trace2 = {
+          x: [1, 2, 3, 4],
+          y: [16, 5, 11, 9],
+          type: 'scatter'
+        };
+
+        var data = [trace1, trace2];
+
+        Plotly.newPlot('elevationDiv', data);
+    }

 };