Safehome update version 1.0

Add Save to Eprom to the Save button

Add Second circle to Safehome icon representing the Safehome_max_distance where the value is directly extracted from the COMMON_SETTINGS

Add Legend under Safehome table about the circles

Author: ArnoTlse

src/css/tabs/mission_planer.css

@@ -474,4 +474,22 @@
 
 .tab-mission-control .btnTable-success a:hover {
     background-color: #218838;
-}
+}
+
+.tab-mission-control .legendItem {
+    display:block;
+}
+
+.tab-mission-control .fill{
+    border:none;
+    border-bottom:5px dotted #88CC3E;
+    display:inline-block;
+    width:20px;
+}
+
+.tab-mission-control .textLegend{   
+    margin:2px; 
+}
+.tab-mission-control .valueLegend{
+    float:right;
+}

tabs/mission_control.html

@@ -96,19 +96,33 @@
                     </div>
                     <div class="spacer" id="SafehomeContent">
                         <div>
-                        <table class="safehomesTable">
-                            <thead>
-                                <tr>
-                                    <th style="width: 80px" data-i18n="SafehomeSelected"></th>
-                                    <th style="width: 50px" data-i18n="SafehomeId"></th>
-                                    <th style="width: 80px" data-i18n="SafehomeEnabled"></th>
-                                    <th style="width: 120px" data-i18n="SafehomeLon"></th>
-                                    <th style="width: 120px" data-i18n="SafehomeLat"></th>
-                                </tr>
-                            </thead>
-                            <tbody id="safehomesTableBody">
-                            </tbody>
-                        </table>
+                            <table class="safehomesTable">
+                                <thead>
+                                    <tr>
+                                        <th style="width: 80px" data-i18n="SafehomeSelected"></th>
+                                        <th style="width: 50px" data-i18n="SafehomeId"></th>
+                                        <th style="width: 80px" data-i18n="SafehomeEnabled"></th>
+                                        <th style="width: 120px" data-i18n="SafehomeLon"></th>
+                                        <th style="width: 120px" data-i18n="SafehomeLat"></th>
+                                    </tr>
+                                </thead>
+                                <tbody id="safehomesTableBody">
+                                </tbody>
+                            </table>
+                            <hr>
+                            <div class="spacer"  id="safehomeLegend">
+                                <span><b>Legend : </b></span>
+                                <div class="legendItem">
+                                    <span class="fill" style="border-bottom-color:#900C3F"></span>
+                                    <span class="textLegend">Max distance (m):</span>
+                                    <span id="safeHomeMaxDistance" class="valueLegend"></span>
+                                </div>
+                                <div class="legendItem">
+                                    <span class="fill"></span>
+                                    <span class="textLegend">Safe Radius (m):</span>
+                                    <span id="SafeHomeSafeDistance" class="valueLegend"></span>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>

tabs/mission_control.js

@@ -360,9 +360,22 @@ TABS.mission_control.initialize = function (callback) {
 
     //////////////////////////////////////////////////////////////////////////////////////////////
     //      define & init parameters for default Settings
-    //////////////////////////////////////////////////////////////////////////////////////////////    
-    var settings = { speed: 0, alt: 5000, safeRadiusSH : 50};
-
+    //////////////////////////////////////////////////////////////////////////////////////////////   
+    var vMaxDistSH = 0;
+    var settings = {};
+    mspHelper.getSetting("safehome_max_distance").then(function (s) {
+        if (s) {
+            console.log(s);
+            vMaxDistSH = Number(s.value)/100;
+            settings = { speed: 0, alt: 5000, safeRadiusSH : 50, maxDistSH : vMaxDistSH};
+        }
+        else {
+            console.log(s);
+            vMaxDistSH = 0;
+            settings = { speed: 0, alt: 5000, safeRadiusSH : 50, maxDistSH : vMaxDistSH};
+        }
+    });
+    console.log(settings);
     //////////////////////////////////////////////////////////////////////////////////////////////
     //      define & init Waypoints parameters
     //////////////////////////////////////////////////////////////////////////////////////////////    
@@ -543,7 +556,7 @@ TABS.mission_control.initialize = function (callback) {
 
         let circleStyle = new ol.style.Style({
             stroke: new ol.style.Stroke({
-                color: 'rgba(255, 163, 46, 1)',
+                color: 'rgba(144, 12, 63, 0.5)',
                 width: 3,
                 lineDash : [10]
             }),
@@ -570,9 +583,10 @@ TABS.mission_control.initialize = function (callback) {
             style : function(iconFeature) {
                 let styles = [getSafehomeIcon(safehome)];
                 if (safehome.isUsed()) {
-                    //circleStyle.setGeometry(new ol.geom.Circle(iconFeature.getGeometry().getCoordinates(), safehomeRangeRadius));
+                    circleStyle.setGeometry(new ol.geom.Circle(iconFeature.getGeometry().getCoordinates(), getProjectedRadius(settings.maxDistSH)));
                     circleSafeStyle.setGeometry(new ol.geom.Circle(iconFeature.getGeometry().getCoordinates(), getProjectedRadius(Number(settings.safeRadiusSH))));
                     styles.push(circleSafeStyle);
+                    styles.push(circleStyle);
                 }
                 return styles;
             }
@@ -1029,6 +1043,8 @@ TABS.mission_control.initialize = function (callback) {
                 cleanSafehomeLayers();
                 renderSafehomesTable();
                 renderSafehomesOnMap();
+                $('#safeHomeMaxDistance').text(settings.maxDistSH);
+                $('#SafeHomeSafeDistance').text(settings.safeRadiusSH);
             };
 
             button.addEventListener('click', handleShowSafehome, false);
@@ -1530,8 +1546,11 @@ TABS.mission_control.initialize = function (callback) {
             $(this).addClass('disabled');
             GUI.log('Start of sending Safehome points');
             mspHelper.saveSafehomes();
-            GUI.log('End of sending Safehome points');
-            $('#saveEepromSafehomeButton').removeClass('disabled');
+            setTimeout(function(){
+                mspHelper.saveToEeprom();
+                GUI.log('End of sending Safehome points');
+                $('#saveEepromSafehomeButton').removeClass('disabled');
+            }, 500);
         });
 
         /////////////////////////////////////////////
@@ -1635,8 +1654,14 @@ TABS.mission_control.initialize = function (callback) {
         // Callback for settings
         /////////////////////////////////////////////
         $('#saveSettings').on('click', function () {
-            settings = { speed: Number($('#MPdefaultPointSpeed').val()), alt: Number($('#MPdefaultPointAlt').val()), safeRadiusSH: Number($('#MPdefaultSafeRangeSH').val()) };
+            let oldSafeRadiusSH = settings.safeRadiusSH;
+            settings = { speed: Number($('#MPdefaultPointSpeed').val()), alt: Number($('#MPdefaultPointAlt').val()), safeRadiusSH: Number($('#MPdefaultSafeRangeSH').val()), maxDistSH : vMaxDistSH};
             saveSettings();
+            if (settings.safeRadiusSH != oldSafeRadiusSH  && $('#showHideSafehomeButton').is(":visible")) {
+                cleanSafehomeLayers();
+                renderSafehomesOnMap(); 
+                $('#SafeHomeSafeDistance').text(settings.safeRadiusSH);
+            }
             closeSettingsPanel();
         });