new appearance of the interface, need testing

_locales/en/messages.json

@@ -2442,6 +2442,9 @@
     "missionTotalInformationHead": {
         "message": "Total information"
     },
+    "missionRTHsettingsTitle": {
+        "message": "RTH settings"
+    },
     "useOnlyStandalone": {
         "message": "Use stand-alone application.<br> Please visit the <a href=\"https://github.com/iNavFlight/inav-configurator/releases\" target=\"_blank\">website</a> to read the release notes and download."
     },

js/fc.js

@@ -214,7 +214,8 @@ var FC = {
                 lat: 0,
                 lon: 0,
                 alt: 0,
-                endMission: 0
+                endMission: 0,
+                p1: 0
             }
         };
 

js/msp/MSPHelper.js

@@ -452,6 +452,7 @@ var mspHelper = (function (gui) {
                 MISSION_PLANER.bufferPoint.lat = data.getInt32(2, true) / 10000000;
                 MISSION_PLANER.bufferPoint.lon = data.getInt32(6, true) / 10000000;
                 MISSION_PLANER.bufferPoint.alt = data.getInt32(10, true);
+                MISSION_PLANER.bufferPoint.p1 = data.getInt16(14, true);
 
                 break;
             case MSPCodes.MSP_BOXIDS:
@@ -1839,8 +1840,8 @@ var mspHelper = (function (gui) {
                 buffer.push(specificByte(MISSION_PLANER.bufferPoint.alt, 1));
                 buffer.push(specificByte(MISSION_PLANER.bufferPoint.alt, 2));
                 buffer.push(specificByte(MISSION_PLANER.bufferPoint.alt, 3));
-                buffer.push(lowByte(0)); //sbufReadU16(src);       // P1
-                buffer.push(highByte(0));
+                buffer.push(lowByte(MISSION_PLANER.bufferPoint.p1)); //sbufReadU16(src);       // P1 speed or landing
+                buffer.push(highByte(MISSION_PLANER.bufferPoint.p1));
                 buffer.push(lowByte(0)); //sbufReadU16(src);       // P2
                 buffer.push(highByte(0));
                 buffer.push(lowByte(0)); //sbufReadU16(src);       // P3

main.js

@@ -59,19 +59,21 @@ $(document).ready(function () {
             }
         });
 
+        win.setMinimumSize(1024, 800);
+
         win.on('close', function () {
             //Save window size and position
-            var height = win.height;
-            var width = win.width;
+            // var height = win.height;
+            // var width = win.width;
+            //
+            // if (height < 400) {
+            //     height = 400
+            // }
+            // if (width < 512) {
+            //     width = 512
+            // }
 
-            if (height < 400) {
-                height = 400
-            }
-            if (width < 512) {
-                width = 512
-            }
-
-            chrome.storage.local.set({'windowSize': {height: height, width: width, x: win.x, y: win.y}}, function () {
+            chrome.storage.local.set({'windowSize': {height: win.height, width: win.width, x: win.x, y: win.y}}, function () {
                 // Notify that we saved.
                 console.log('Settings saved');
             });

src/css/tabs/mission_planer.css

@@ -1,20 +1,56 @@
-.tab-calibration .content_toolbar {
-    height: 100px;
+.tab-mission-control .btn a {
+    /*  common styles for content toolbar buttons */
+    /*margin-top: 0;*/
+    /*margin-bottom: 0;*/
+    /*margin-right: 20px;*/
+    background-color: #37a8db;
+    border-radius: 3px;
+    border: 1px solid #3394b5;
+    color: #fff;
+    /*float: right;*/
+    font-family: 'open_sansbold', Arial, serif;
+    font-size: 12px;
+    text-shadow: 0 1px rgba(0, 0, 0, 0.25);
+    display: block;
+    cursor: pointer;
+    transition: all ease 0.2s;
+    padding: 0 9px;
+    line-height: 28px;
+    margin: 5px;
+    float: left;
+    width: 130px;
+    text-align: center;
 }
 
-.tab-mission-control .waypoint {
-    padding-left: 19px;
-    padding-right: 19px;
-    /*padding-bottom: 10px;*/
+.tab-mission-control .btn a:hover {
+    background-color: #3394b5;
+    transition: all ease 0.2s;
 }
-.tab-mission-control .waypoint-left {
-    width: 54%;
-    float: left;
-    padding-right: 5px;
+
+.tab-mission-control .btn a:active {
+    background-color: #37a8db;
+    transition: all ease 0.0s;
+    box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.35);
 }
-.tab-mission-control .waypoint-right{
-    width: 40%;
-    float: right;
+
+.tab-mission-control .btn a.disabled {
+    cursor: default;
+    color: #fff;
+    background-color: #AFAFAF;
+    border: 1px solid #AFAFAF;
+    pointer-events: none;
+    text-shadow: none;
+    opacity: 0.5;
+}
+
+.tab-mission-control .btn-danger a {
+    background-color: #db250e;
+    border: 1px solid #b5480e;
+}
+
+.tab-mission-control .btn-danger a:hover {
+    background-color: #b5480e;
+    transition: all ease 0.2s;
 }
 
 .tab-mission-control .checksfail {
@@ -28,6 +64,26 @@
     background-repeat:no-repeat;
 }
 
+.tab-mission-control .content_wrapper {
+    display: flex;
+    /*height: 150px;*/
+    height: 90%;
+    /*width: 75%;*/
+    flex-direction: row;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    padding-bottom: 5px;
+    padding-top: 5px;
+}
+
+.tab-mission-control {
+    height: 100%;
+}
+
+#missionMap {
+    height: 100%;
+}
+
 .tab-mission-control input {
     width: 115px;
     padding-left: 3px;
@@ -36,87 +92,119 @@
     text-align: left;
     border: 1px solid silver;
     border-radius: 3px;
-    margin-left: 11px;
+    font-size: 12px;
+    font-weight: normal;
+}
+
+.tab-mission-control select {
+    width: 118px;
+    padding-left: 3px;
+    height: 20px;
+    line-height: 20px;
+    text-align: left;
+    border: 1px solid silver;
+    border-radius: 3px;
     font-size: 12px;
     font-weight: normal;
 }
 
 .tab-mission-control .point {
-    display: inline-block;
+    display: block;
     margin-bottom: 5px;
     margin-left: 5px;
 }
-
 .tab-mission-control .point-label {
-
+    width: 60px;
+    display: inline-block;
 }
 
-@media (max-width: 1236px) {
-    .tab-mission-control .waypoint-left {
-        width: 96%;
-    }
-    .tab-mission-control .waypoint-right{
-        width: 96%;
-        float: left;
-        padding-right: 19px;
-    }
-    .tab-mission-control .content_toolbar {
-        height: 240px;
-    }
-    .tab-mission-control .content_wrapper {
-        height: calc(100% - 240px);
-    }
-}
+/*.tab-calibration .content_toolbar {*/
+    /*height: 100px;*/
+/*}*/
 
-/* Need test! */
-.tab-mission-control .content_toolbar {
-    display: flex;
-    /*height: 150px;*/
-    height: auto;
-    flex-direction: row;
-    justify-content: space-between;
-    flex-wrap: wrap;
-}
+/*.tab-mission-control .waypoint {*/
+    /*padding-left: 19px;*/
+    /*padding-right: 19px;*/
+    /*!*padding-bottom: 10px;*!*/
+/*}*/
+/*.tab-mission-control .waypoint-left {*/
+    /*width: 54%;*/
+    /*float: left;*/
+    /*padding-right: 5px;*/
+/*}*/
+/*.tab-mission-control .waypoint-right{*/
+    /*width: 40%;*/
+    /*float: right;*/
+/*}*/
 
-.tab-mission-control .waypoint-left,
-.tab-mission-control .waypoint-right {
-    width: 47%;
-    float: none;
-}
 
-.tab-mission-control .btn.save_btn {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-}
 
-.tab-mission-control .btn.save_btn a{
-    margin-top: 5px;
-}
-
-.tab-mission-control .gui_box{
-    width: 100%;
-    clear: both;
-    height: 90%;
-}
-
-.tab-mission-control.toolbar_fixed_bottom{
-    height: 100%;
-}
+/*@media (max-width: 1236px) {*/
+    /*.tab-mission-control .waypoint-left {*/
+        /*width: 96%;*/
+    /*}*/
+    /*.tab-mission-control .waypoint-right{*/
+        /*width: 96%;*/
+        /*float: left;*/
+        /*padding-right: 19px;*/
+    /*}*/
+    /*.tab-mission-control .content_toolbar {*/
+        /*height: 240px;*/
+    /*}*/
     /*.tab-mission-control .content_wrapper {*/
+        /*height: calc(100% - 240px);*/
+    /*}*/
+/*}*/
+
+/*!* Need test! *!*/
+/*.tab-mission-control .cf_column {*/
+    /*display: flex;*/
+    /*!*height: 150px;*!*/
+    /*height: auto;*/
+    /*flex-direction: row;*/
+    /*justify-content: space-between;*/
+    /*flex-wrap: wrap;*/
+/*}*/
+
+/*.tab-mission-control .waypoint-left,*/
+/*.tab-mission-control .waypoint-right {*/
+    /*width: 47%;*/
+    /*float: none;*/
+/*}*/
+
+/*.tab-mission-control .btn.save_btn {*/
+    /*display: flex;*/
+    /*flex-direction: row;*/
+    /*flex-wrap: wrap;*/
+/*}*/
+
+/*.tab-mission-control .btn.save_btn a{*/
+    /*margin-top: 5px;*/
+/*}*/
+
+/*.tab-mission-control .gui_box{*/
+    /*width: 100%;*/
+    /*clear: both;*/
+    /*height: 90%;*/
+/*}*/
+
+/*.tab-mission-control.toolbar_fixed_bottom{*/
+    /*height: 100%;*/
+/*}*/
+/*!*.tab-mission-control .content_wrapper{*!*/
+    /*!*height: 100%;*!*/
+/*!*}*!*/
+/*#missionMap{*/
     /*height: 100%;*/
 /*}*/
-#missionMap{
-    height: 100%;
-}
 
-@media (max-width: 1252px){
-    .tab-mission-control .waypoint-left,
-    .tab-mission-control .waypoint-right {
-        width: 100%;
-    }
-    .tab-mission-control .waypoint-right{
-        padding-right: 5px;
-        margin-top: 5px;
-    }
-}
+/*@media (max-width: 1252px){*/
+    /*.tab-mission-control .waypoint-left,*/
+    /*.tab-mission-control .waypoint-right {*/
+        /*width: 100%;*/
+    /*}*/
+    /*.tab-mission-control .waypoint-right{*/
+        /*padding-right: 5px;*/
+        /*margin-top: 5px;*/
+    /*}*/
+/*}*/

tabs/mission_control.html

@@ -1,21 +1,66 @@
-<div class="tab-mission-control toolbar_fixed_bottom">
-    <div class="content_wrapper">
-        <div id="missionMap"></div>
-        <div id="notLoadMap" data-i18n="useOnlyStandalone" style="display: none;"></div>
+<div class="tab-mission-control">
+    <div style="padding-top: 20px;padding-left: 20px; padding-right: 20px;position: relative;">
+        <div class="tab_title" data-i18n="tabMissionControl">Mission planer</div>
+        <div class="cf_doc_version_bt">
+            <a id="button-documentation" href="https://github.com/iNavFlight/inav/releases" target="_blank"></a>
         </div>
-    <div class="content_toolbar" id="missionControls">
-        <div class="waypoint waypoint-left">
-            <div class="gui_box" style="padding-bottom: 10px">
+    </div>
+    <div class="content_wrapper">
+        <div class="cf_column fourth" id="missionControls">
+            <div class="spacer_right">
+                <div class="gui_box grey">
+                    <div class="gui_box_titlebar">
+                        <div class="spacer_box_title i18n-replaced" data-i18n="missionTotalInformationHead">Total information</div>
+                    </div>
+                    <div class="spacer">
+                        <div style="padding-bottom: 2px;">
+                            <span>Distance (m):</span>
+                            <span id="missionDistance"></span>
+                        </div>
+                        <div style="padding-bottom: 2px;">
+                            <span>Available Points</span>
+                            <span id="availablePoints">0/0</span>
+                        </div>
+                        <div style="padding-bottom: 2px;">
+                            <span>Mission valid</span>
+                            <div id="missionValid" style="display: inline-block"></div>
+                        </div>
+                        <br>
+                        <div style="display: flex;">
+                            <input type="checkbox" style="width: 18px;margin-left: 5px;" id="rthEndMission">
+                            <label for="rthEndMission" style="padding: 2px;">RTH at the end of the mission</label>
+                        </div>
+                        <div id="rthSettings" style="display: none">
+                            <div style="display: flex">
+                                <input type="checkbox" id="rthLanding" style="width: 18px;margin-left: 5px;">
+                                <label for="rthLanding" style="padding: 2px">Landing</label>
+                            </div>
+                        </div>
+                        <hr>
+                        <div class="btn save_btn">
+                            <a id="loadMissionButton" class="save" href="#" data-i18n="loadMissionButton">Load mission from FC</a>
+                            <a id="saveMissionButton" class="save" href="#" data-i18n="saveMissionButton">Save mission to FC</a>
+                            <a id="loadEepromMissionButton" class="save" href="#" data-i18n="loadEepromMissionButton">Load Eeprom mission</a>
+                            <a id="saveEepromMissionButton" class="save" href="#" data-i18n="saveEepromMissionButton">Save Eeprom mission</a>
+                        </div>
+                        <hr>
+                        <div id="removeAllPoints" class="btn btn-danger" style="padding-top: 10px; display: inline-block">
+                            <a class="save" href="#" data-i18n="removeAllPointButtonSave" style="float: left">Remove all points</a>
+                        </div>
+                    </div>
+                </div>
+                <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>
                     <div class="spacer">
                         <input type="hidden" name="pointNumber" value="">
                         <div class="point">
+                            <label class="point-label" for="pointType">Type: </label>
                             <select name="type" id="pointType">
                                 <!--<option value="1">Home</option>-->
                                 <option value="1">Waypoint</option>
-                            <option value="4">RTH</option>
+                                <!--<option value="4">RTH</option>-->
                             </select>
                         </div>
                         <div class="point">
@@ -30,6 +75,10 @@
                             <label class="point-label" for="pointAlt">Alt (cm): </label>
                             <input id="pointAlt" type="text" value="0" required>
                         </div>
+                        <div class="point">
+                            <label class="point-label" for="pointSpeed">Speed (cm/s): </label>
+                            <input id="pointSpeed" type="text" value="0" required>
+                        </div>
                         <div>
                             <div id="savePoint" class="btn save_btn" style="padding-top: 10px; display: inline-block">
                                 <a class="save" href="#" data-i18n="editPointButtonSave" style="float: left">Save</a>
@@ -37,40 +86,14 @@
                             <div id="removePoint" class="btn btn-danger" style="padding-top: 10px; display: inline-block;">
                                 <a class="save" href="#" data-i18n="editPointButtonRemove" style="float: left">Remove</a>
                             </div>
-                        <div id="removeAllPoints" class="btn btn-danger" style="padding-top: 10px; display: inline-block">
-                            <a class="save" href="#" data-i18n="removeAllPointButtonSave" style="float: left">Remove all points</a>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
-        <div class="waypoint waypoint-right">
-            <div class="gui_box" style="padding-bottom: 10px">
-                <div class="gui_box_titlebar">
-                    <div class="spacer_box_title i18n-replaced" data-i18n="missionTotalInformationHead">Total information</div>
-                </div>
-                <div class="spacer">
-                    <div>
-                        <span>Distance (m):</span>
-                        <span id="missionDistance"></span>
-                    </div>
-                    <div>
-                        <span>Available Points</span>
-                        <span id="availablePoints">0/0</span>
-                    </div>
-                    <div>
-                        <span>Mission valid</span>
-                        <div id="missionValid" style="display: inline-block"></div>
-                    </div>
-
-                    <div class="btn save_btn">
-                        <a id="loadMissionButton" class="save" href="#" data-i18n="loadMissionButton"></a>
-                        <a id="saveMissionButton" class="save" href="#" data-i18n="saveMissionButton"></a>
-                        <a id="loadEepromMissionButton" class="save" href="#" data-i18n="loadEepromMissionButton">Load Eeprom mission</a>
-                        <a id="saveEepromMissionButton" class="save" href="#" data-i18n="saveEepromMissionButton">Save Eeprom mission</a>
-                    </div>
-                </div>
-            </div>
+        <div class="cf_column threefourth_left">
+            <div id="missionMap"></div>
+            <div id="notLoadMap" data-i18n="useOnlyStandalone" style="display: none;"></div>
         </div>
     </div>
 </div>

tabs/mission_control.js

@@ -47,7 +47,9 @@ TABS.mission_control.initialize = function (callback) {
         $('#pointLat').val('');
         $('#pointLon').val('');
         $('#pointAlt').val('');
-        $('[name=pointNumber]').val('')
+        $('#pointSpeed').val('');
+        $('[name=pointNumber]').val('');
+        $('#MPeditPoint').fadeOut(300);
     }
 
     function repaint() {
@@ -100,7 +102,7 @@ TABS.mission_control.initialize = function (callback) {
         map.addLayer(vectorLayer);
     }
 
-    function addMarker(_pos, _alt, _action) {
+    function addMarker(_pos, _alt, _action, _speed) {
         var iconFeature = new ol.Feature({
             geometry: new ol.geom.Point(_pos),
             name: 'Null Island',
@@ -140,6 +142,7 @@ TABS.mission_control.initialize = function (callback) {
         vectorLayer.alt = _alt;
         vectorLayer.number = markers.length;
         vectorLayer.action = _action;
+        vectorLayer.speedValue = _speed;
 
         markers.push(vectorLayer);
 
@@ -307,6 +310,8 @@ TABS.mission_control.initialize = function (callback) {
                 $('#pointLon').val(coord[1]);
                 $('#pointAlt').val(selectedMarker.alt);
                 $('#pointType').val(selectedMarker.action);
+                $('#pointSpeed').val(selectedMarker.speedValue);
+                $('#MPeditPoint').fadeIn(300);
             } else {
                 map.addLayer(addMarker(evt.coordinate, 1500, 1));
                 repaint();
@@ -358,6 +363,7 @@ TABS.mission_control.initialize = function (callback) {
                         geometry.setCoordinates(ol.proj.fromLonLat([parseFloat($('#pointLat').val()), parseFloat($('#pointLon').val())]));
                         t.alt = $('#pointAlt').val();
                         t.action = $('#pointType').val();
+                        t.speedValue = $('#pointSpeed').val();
                     }
                 });
 
@@ -394,6 +400,14 @@ TABS.mission_control.initialize = function (callback) {
             MSP.send_message(MSPCodes.MSP_WP_MISSION_SAVE, false, false);
         });
 
+        $('#rthEndMission').on('change', function () {
+            if ($(this).is(':checked')) {
+                $('#rthSettings').fadeIn(300);
+            } else {
+                $('#rthSettings').fadeOut(300);
+            }
+        });
+
         updateTotalInfo();
     }
 
@@ -422,15 +436,23 @@ TABS.mission_control.initialize = function (callback) {
             // console.log(MISSION_PLANER.bufferPoint.lat);
             // console.log(MISSION_PLANER.bufferPoint.alt);
             // console.log(MISSION_PLANER.bufferPoint.action);
-
+            if (MISSION_PLANER.bufferPoint.action == 4) {
+                $('#rthEndMission').trigger('click');
+                if (MISSION_PLANER.bufferPoint.p1 > 0) {
+                    $('#rthLanding').trigger('click');
+                }
+            } else {
                 coord = ol.proj.fromLonLat([MISSION_PLANER.bufferPoint.lon, MISSION_PLANER.bufferPoint.lat]);
-            map.addLayer(addMarker(coord, MISSION_PLANER.bufferPoint.alt, MISSION_PLANER.bufferPoint.action));
+                map.addLayer(addMarker(coord, MISSION_PLANER.bufferPoint.alt, MISSION_PLANER.bufferPoint.action, MISSION_PLANER.bufferPoint.p1));
+                if (pointForSend === 1) {
+                    map.getView().setCenter(coord);
+                }
+            }
         }
 
         if (pointForSend >= MISSION_PLANER.countBusyPoints) {
             GUI.log('End get point');
             $('#loadMissionButton').removeClass('disabled');
-            map.getView().setCenter(coord);
             repaint();
             updateTotalInfo();
             return;
@@ -444,12 +466,22 @@ TABS.mission_control.initialize = function (callback) {
     }
 
     function sendNextPoint() {
+        var isRTH = $('#rthEndMission').is(':checked');
+
         if (pointForSend >= markers.length) {
-            GUI.log('End send point');
+            if (isRTH) {
+                MISSION_PLANER.bufferPoint.number = pointForSend + 1;
+                MISSION_PLANER.bufferPoint.action = 4;
+                MISSION_PLANER.bufferPoint.lon = 0;
+                MISSION_PLANER.bufferPoint.lat = 0;
+                MISSION_PLANER.bufferPoint.alt = 0;
+                MISSION_PLANER.bufferPoint.endMission = 0xA5;
+                MISSION_PLANER.bufferPoint.p1 = $('#rthLanding').is(':checked') ? 1 : 0;
+                MSP.send_message(MSPCodes.MSP_SET_WP, mspHelper.crunch(MSPCodes.MSP_SET_WP), false, endSendPoint);
+            } else {
+                endSendPoint();
+            }
 
-            MSP.send_message(MSPCodes.MSP_WP_GETINFO, false, false, updateTotalInfo);
-
-            $('#saveMissionButton').removeClass('disabled');
             return;
         }
 
@@ -461,8 +493,9 @@ TABS.mission_control.initialize = function (callback) {
         MISSION_PLANER.bufferPoint.lon = parseInt(coordinate[0] * 10000000);
         MISSION_PLANER.bufferPoint.lat = parseInt(coordinate[1] * 10000000);
         MISSION_PLANER.bufferPoint.alt = markers[pointForSend].alt;
+        MISSION_PLANER.bufferPoint.p1 = markers[pointForSend].speedValue;
         pointForSend++;
-        if (pointForSend >= markers.length) {
+        if (pointForSend >= markers.length && !isRTH) {
             MISSION_PLANER.bufferPoint.endMission = 0xA5;
         } else {
             MISSION_PLANER.bufferPoint.endMission = 0;
@@ -470,6 +503,14 @@ TABS.mission_control.initialize = function (callback) {
 
         MSP.send_message(MSPCodes.MSP_SET_WP, mspHelper.crunch(MSPCodes.MSP_SET_WP), false, sendNextPoint);
     }
+
+    function endSendPoint() {
+        GUI.log('End send point');
+
+        MSP.send_message(MSPCodes.MSP_WP_GETINFO, false, false, updateTotalInfo);
+
+        $('#saveMissionButton').removeClass('disabled');
+    }
 };
 
 TABS.mission_control.cleanup = function (callback) {