Merge branch 'new_stuff' of

https://github.com/skaman82/cleanflight-configurator into
skaman82-new_stuff

Fix up messages.json formatting.

Conflicts:
	_locales/en/messages.json

_locales/en/messages.json

@@ -249,14 +249,42 @@
         "message": "Documentation / Manual"
     },
     "defaultDocumentation": {
-        "message": "Cleanflight documentation is available in Markdown and PDF formats.<br /><br />The PDF manual appropriate to the firmware can be downloaded from the github releases page, <a href=\"https://github.com/cleanflight/cleanflight/releases\" target=\"_blank\">here</a>.<br />The Markdown latest online documentation is available <a href=\"https://github.com/cleanflight/cleanflight/tree/master/docs\" target=\"_blank\">here</a> - you can switch to the appropriate version of the documentation by selecting the tag."
+        "message": "Cleanflight documentation is available in Markdown and PDF formats.<br /><br />"
+    },
+    "defaultDocumentation1": {
+        "message": "The PDF manual appropriate to the firmware can be downloaded from the github releases page, <a href=\"https://github.com/cleanflight/cleanflight/releases\" target=\"_blank\">here</a>."
+    },
+    "defaultDocumentation2": {
+        "message": "The Markdown latest online documentation is available <a href=\"https://github.com/cleanflight/cleanflight/tree/master/docs\" target=\"_blank\">here</a> - you can switch to the appropriate version of the documentation by selecting the tag."
     },
     "defaultSupportHead": {
         "message": "Support"
     },
-    "defaultSupport": {
+    "defaultSupportSubline1": {
-        "message": "For support please search the forums first or contact your vendor.<br /><br />RC Groups thread is <a href=\"http://www.rcgroups.com/forums/showthread.php?t=2249574&page=1\" target=\"_blank\">here</a>. MultiWii forums thread is <a href=\"http://www.multiwii.com/forum/viewtopic.php?f=23&t=5149\" target=\"_blank\">here</a>.<br /><br />Developers and users hang out in IRC channel on freenode<br /><a href=\"irc://irc.freenode.net/#cleanflight\" target=\"_blank\">irc://irc.freenode.net/#cleanflight</a> or <a href=\"http://webchat.freenode.net/?channels=cleanflight\" target=\"_blank\">Join via web client</a>."
+        "message": "Support Scources"
     },
+    "defaultSupportSubline2": {
+        "message": "Developer"
+    },
+    "defaultSupport": {
+        "message": "For support please search the forums first or contact your vendor.<br /><br />"
+    },
+    "defaultSupport1": {
+        "message": "<a href=\"http://www.rcgroups.com/forums/showthread.php?t=2249574&page=1\" target=\"_blank\">RC Groups thread</a>"
+    },
+    "defaultSupport2": {
+        "message": "<a href=\"http://www.multiwii.com/forum/viewtopic.php?f=23&t=5149\" target=\"_blank\">MultiWii forums thread</a>"
+    },
+    "defaultSupport3": {
+        "message": "<a href=\"https://github.com/cleanflight\" target=\"_blank\">GitHub</a>"
+    },
+    "defaultSupport4": {
+        "message": "<a href=\"irc://irc.freenode.net/#cleanflight\" target=\"_blank\">IRC channel on freenode</a>"
+    },
+    "defaultSupport5": {
+        "message": "<a href=\"http://webchat.freenode.net/?channels=cleanflight\" target=\"_blank\">Join via WebClient</a>"
+    },
+    
     "initialSetupBackupAndRestoreApiVersion": {
         "message": "<span style=\"color: red\">Backup and restore functionality disabled.</span>  You have firmware with API version <span style=\"color: red\">$1</span>, backup and restore requires <span style=\"color: #57a929\">$2</span>.  Please backup your settings via the CLI, see Cleanflight documentation for procedure."
     },
@@ -414,8 +442,6 @@
     "configurationFeatureDescription": {
         "message": "Description"
     },
-
-
     "configurationMixer": {
         "message": "Mixer"
     },
@@ -428,17 +454,18 @@
     "configurationRSSI": {
         "message": "RSSI (Signal Strength)"
     },
+    "configurationRSSIHelp": {
+        "message": "RSSI is a measurement of signal strength and is very handy so you know when your aircraft is going out of range or if it is suffering RF interference."
+    },
     "configurationEscFeatures": {
         "message": "ESC/Motor Features"
     },
     "configurationFeaturesHelp": {
         "message": "<strong>Note:</strong> Not all combinations of features are valid.  When the flight controller firmware detects invalid feature combinations conflicting features will be disabled.<br /><strong>Note:</strong> Configure serial ports <span style=\"color: red\">before</span> enabling the features that will use the ports."
     },
-    
     "configurationSerialRXHelp": {
         "message": "<strong>Note:</strong> Remember to configure a Serial Port (via Ports tab) and choose a Serial Receiver Provider when using RX_SERIAL feature."
     },
-
     "configurationBoardAlignment": {
         "message": "Board Alignment"
     },
@@ -550,7 +577,6 @@
     "configurationGPSHelp": {
         "message": "<strong>Note:</strong> Remember to configure a Serial Port (via Ports tab) when using GPS feature."
     },
-
     "configurationSerialRX": {
         "message": "Serial Receiver Provider"
     },
@@ -846,7 +872,6 @@
     "servosFirmwareUpgradeRequired": {
         "message": "Servos requires firmware &gt;= 1.10.0."
     },
-
     "servosChangeDirection": {
         "message": "Change Direction in TX To Match"
     },
@@ -890,6 +915,15 @@
     "gpsHead": {
         "message": "GPS"
     },
+    "gpsMapHead": {
+        "message": "Current GPS location"
+    },
+    "gpsMapMessage1": {
+        "message": "Please check your internet connection"
+    },
+    "gpsMapMessage2": {
+        "message": "Waiting for GPS 3D fix…"
+    },
     "gps3dFix": {
         "message": "3D Fix:"
     },
@@ -1030,6 +1064,7 @@
     "dataflashFileWriteFailed": {
         "message": "Failed to write to the file you selected, are the permissions on that folder okay?"
     },
+    
     "firmwareFlasherReleaseSummaryHead": {
         "message": "Release info"
     },
@@ -1185,6 +1220,7 @@
     "ledStripEepromSaved": {
         "message": "EEPROM <span style=\"color: #57a929\">saved</span>"
     },
+    
     "controlAxisRoll": {
         "message": "Roll"
     },
@@ -1245,6 +1281,7 @@
     "controlAxisAux16": {
         "message": "AUX 16"
     },
+    
     "pidTuningBasic": {
         "message": "Basic/Acro"
     },
@@ -1269,12 +1306,10 @@
     "pidTuningLevelD": {
         "message": "Transition (Horizon)"
     },    
-    "pidHelp1": {
+    "pidTuningLevelHelp": {
         "message": "The values below change the behaviour of the ANGLE and HORIZON flight modes. Different PID controllers handle the LEVEL values differently. Please check the documentation."
     },
-    "configHelp1": {
+    
-        "message": "RSSI is a measurement of signal strength and is very handy so you know when your aircraft is going out of range or if it is suffering RF interference."
-    },
     "failsafeFeaturesHelpOld": {
         "message": "Failsafe configuration has changed considerably. Use Cleanflight <strong>v1.12.0+</strong> to enable the improved configuration panel."
     },

js/msp.js

@@ -233,6 +233,7 @@ var MSP = {
                 CONFIG.activeSensors = data.getUint16(4, 1);
                 CONFIG.mode = data.getUint32(6, 1);
                 CONFIG.profile = data.getUint8(10);
+                $('select[name="profilechange"]').val(CONFIG.profile);
 
                 sensor_status(CONFIG.activeSensors);
                 $('span.i2c-error').text(CONFIG.i2cError);
@@ -879,6 +880,7 @@ var MSP = {
                     DATAFLASH.totalSize = 0;
                     DATAFLASH.usedSize = 0;
                 }
+                update_dataflash_global();
                 break;
             case MSP_codes.MSP_DATAFLASH_READ:
                 // No-op, let callback handle it

js/serial_backend.js

@@ -252,11 +252,19 @@ function onConnect() {
     $('#tabs ul.mode-disconnected').hide();
     $('#tabs ul.mode-connected').show(); 
      
+    MSP.send_message(MSP_codes.MSP_STATUS, false, false);      
+    
+    MSP.send_message(MSP_codes.MSP_DATAFLASH_SUMMARY, false, false);
+    
     var sensor_state = $('#sensor-status');
     sensor_state.show(); 
     
     var port_picker = $('#portsinput');
     port_picker.hide(); 
+
+    var dataflash = $('#dataflash_wrapper_global');
+    dataflash.show();    
+    
 }
 
 function onClosed(result) {
@@ -269,11 +277,14 @@ function onClosed(result) {
     $('#tabs ul.mode-connected').hide();
     $('#tabs ul.mode-disconnected').show();
 
+    var sensor_state = $('#sensor-status');
+    sensor_state.hide();
+    
     var port_picker = $('#portsinput');
     port_picker.show(); 
     
-    var sensor_state = $('#sensor-status');
+    var dataflash = $('#dataflash_wrapper_global');
-    sensor_state.hide();
+    dataflash.hide();
 
 }
 
@@ -374,7 +385,34 @@ function highByte(num) {
 
 function lowByte(num) {
     return 0x00FF & num;
-}
+}function update_dataflash_global() {
+        var supportsDataflash = DATAFLASH.totalSize > 0;
+        if (supportsDataflash){
+
+             $(".noflash_global").css({
+                 display: 'none'
+             }); 
+
+             $(".dataflash-contents_global").css({
+                 display: 'block'
+             }); 
+	     
+             $(".dataflash-free_global").css({
+                 width: (100-(DATAFLASH.totalSize - DATAFLASH.usedSize) / DATAFLASH.totalSize * 100) + "%",
+                 display: 'block'
+             });
+             $(".dataflash-free_global div").text('Dataflash: free ' + formatFilesize(DATAFLASH.totalSize - DATAFLASH.usedSize));
+        } else {
+             $(".noflash_global").css({
+                 display: 'block'
+             }); 
+
+             $(".dataflash-contents_global").css({
+                 display: 'none'
+             }); 
+        }      
+        
+    }
 
 function specificByte(num, pos) {
     return 0x000000FF & (num >> (8 * pos));
@@ -392,3 +430,45 @@ function bit_clear(num, bit) {
     return num & ~(1 << bit);
 }
 
+function update_dataflash_global() {
+    function formatFilesize(bytes) {
+        if (bytes < 1024) {
+            return bytes + "B";
+        }
+        var kilobytes = bytes / 1024;
+        
+        if (kilobytes < 1024) {
+            return Math.round(kilobytes) + "kB";
+        }
+        
+        var megabytes = kilobytes / 1024;
+        
+        return megabytes.toFixed(1) + "MB";
+    }
+  
+    var supportsDataflash = DATAFLASH.totalSize > 0;
+
+    if (supportsDataflash){
+        $(".noflash_global").css({
+           display: 'none'
+        }); 
+
+        $(".dataflash-contents_global").css({
+           display: 'block'
+        }); 
+	     
+        $(".dataflash-free_global").css({
+           width: (100-(DATAFLASH.totalSize - DATAFLASH.usedSize) / DATAFLASH.totalSize * 100) + "%",
+           display: 'block'
+        });
+        $(".dataflash-free_global div").text('Dataflash: free ' + formatFilesize(DATAFLASH.totalSize - DATAFLASH.usedSize));
+     } else {
+        $(".noflash_global").css({
+           display: 'block'
+        }); 
+
+        $(".dataflash-contents_global").css({
+           display: 'none'
+        }); 
+     }      
+}

main.css

@@ -489,12 +489,16 @@ input[type="number"]::-webkit-inner-spin-button {
     width: 200px;
     border-right: 4px solid #59aa29;
     background-color: #2e2e2e;
+    transition: all 0.2s;
+
 }
 
 .tab_container.logopen {
     height: calc(100% - 235px);
     overflow-x: hidden;
     overflow-y: auto;
+    transition: all 0.5s;
+
 }
 
 
@@ -1159,6 +1163,7 @@ dialog {
     line-height: 13px;
     display: block;
     transition: all ease 0.2s;
+    text-decoration:none;
 }
 
 .default_btn a:hover {
@@ -1166,6 +1171,8 @@ dialog {
     color: #fff;
     text-shadow: 0px 1px rgba(0, 0, 0, 0.25);
     transition: all ease 0.2s;
+    text-decoration:none;
+
 }
 
 .default_btn a:active {
@@ -1366,7 +1373,8 @@ dialog {
     border-radius: 3px;
     color: #fff;
     font-size: 10px;
-    }
+}
+
 
 .fixfalse {
     background-color: #e60000;
@@ -1377,19 +1385,111 @@ dialog {
     color: #fff;
     font-size: 10px;
 }
+/* Dataflash element styling*/
+
+#dataflash_wrapper_global {
+    color:white;
+    font-size:10px;
+    margin-top: 20px;
+    width:125px;
+    float: right;
+    margin-right: 20px;
+    line-height: 12px;
+    height: 33px;
+    border-radius: 5px;
+    border: 1px solid #272727;
+    box-shadow: 0px 1px 0px rgba(92, 92, 92, 0.5);
+    background-color: #434343;
+    background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.55));
+    padding-top:5px;
+    display:none;
+    text-shadow: 0px 1px rgba(0, 0, 0, 1.0);
+
+}
+
+#profile_change {
+    color:white;
+    margin-top: 16px;
+    width:125px;
+    float: right;
+    margin-right: 0px;
+    line-height: 12px;
+}
+
+.dataflash-contents_global {
+    margin-top: 18px;
+    border: 1px solid #4A4A4A;
+    background-color: #4A4A4A;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    border-radius: 3px;
+    margin-left: 5px;
+    margin-right: 5px;
+}
+
+
+.dataflash-free_global {
+    background-color: #59AA29;
+    border-radius: 4px;
+}
+
+
+.dataflash-contents_global .notsupported_global {
+    display: none;
+}
+
+.dataflash-contents_global li {
+    height: 5px;
+    position: relative;
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.20);
+    border-radius: 2px;
+
+}
+
+.dataflash-contents_global li div {
+    position: absolute;
+    top: -18px;
+    margin-top: 0px;
+    text-align: center;
+    left: 0;
+    right: 0;
+    width:120px;
+    text-align:left;
+    color:silver;
+}
+
+.dataflash-contents_global progress::-webkit-progress-bar {
+    height: 8px;
+    background-color: #eee;
+}
+
+.dataflash-contents progress::-webkit-progress-value {
+    background-color: #bcf;
+}
+
+.noflash_global {
+    display:none;
+    color: #868686;
+    text-align: center;
+    text-shadow: 0px 1px rgba(0, 0, 0, 1.0);
+    margin-top:2px;
+}
+
+
 
 @media only screen and (max-width: 1055px) , only screen and (max-device-width: 1055px) {
     .content_wrapper {
         padding: 15px;
-  /*width:calc(100% - 30px);*/
+}
-    }
     .tab_title {
         font-size: 16px;
         line-height: 18px;
         font-family: 'open_sanslight', Arial;
         margin-bottom: 10px;
         height: 22px;
-    }
+}
     .cf_doc_version_bt a {
         padding: 1px 5px 1px 5px;
         margin-top: -35px;

main.html

@@ -128,6 +128,25 @@
                 </div>
             </div>
             <div class="header-wrapper">
+                <div id="dataflash_wrapper_global">
+            <div class="noflash_global" align="center">No dataflash <br>chip found</div>
+                    <ul class="dataflash-contents_global">
+                        <li class="dataflash-free_global">
+                            <div class="legend">Dataflash: free space</div>
+                        </li>
+                    </ul>
+                    <div id="profile_change">
+                        <div class="dropdown dropdown-dark">
+                           <form name="profile-change" id="profile-change">
+                            <select class="dropdown-select" name="profilechange">
+                            <option value="0">Profile 1</option>
+                            <option value="1">Profile 2</option>
+                            <option value="2">Profile 3</option>
+                            </select>
+                           </form>
+                        </div>
+                    </div>
+                </div>
                 <div id="sensor-status" class="sensor_state mode-connected">
                     <ul>
                         <li class="gyro" title="Gyroscope">

main.js

@@ -43,6 +43,13 @@ $(document).ready(function () {
         GUI.log('You are using an old version of ' + chrome.runtime.getManifest().name + '. There may be a more recent version with improvements and fixes.');
     }
      
+    chrome.storage.local.get('logopen', function (result) {
+        if (result.logopen) {
+            $("#showlog").trigger('click');
+         }
+    });
+
+
     // log webgl capability
     // it would seem the webgl "enabling" through advanced settings will be ignored in the future
     // and webgl will be supported if gpu supports it by default (canary 40.0.2175.0), keep an eye on this one
@@ -306,6 +313,45 @@ $(document).ready(function () {
             }
         }
     });
+    
+    $("#showlog").on('click', function() {
+    var state = $(this).data('state');
+    if ( state ) {
+        $("#log").animate({height: 27}, 200, function() {
+             var command_log = $('div#log');
+             command_log.scrollTop($('div.wrapper', command_log).height());
+        });
+        $("#log").removeClass('active');
+        $("#content").removeClass('logopen');
+        $(".tab_container").removeClass('logopen');
+        $("#scrollicon").removeClass('active');
+        chrome.storage.local.set({'logopen': false});
+	
+        state = false;
+    }else{
+        $("#log").animate({height: 111}, 200);
+        $("#log").addClass('active');
+        $("#content").addClass('logopen');
+        $(".tab_container").addClass('logopen');
+        $("#scrollicon").addClass('active');
+        chrome.storage.local.set({'logopen': true});
+
+        state = true;
+    }
+    $(this).text(state ? 'Hide Log' : 'Show Log');
+    $(this).data('state', state);
+    
+    });
+    
+    var profile_e = $('select[name="profilechange"]');
+    
+    profile_e.change(function () {
+        var profile = parseInt($(this).val());
+        MSP.send_message(MSP_codes.MSP_SELECT_SETTING, [profile], false, function () {
+            GUI.log(chrome.i18n.getMessage('pidTuningLoadedProfile', [profile + 1]));
+            updateActivatedTab();
+        });
+    });
 });
 
 function catch_startup_time(startTime) {
@@ -361,31 +407,10 @@ String.prototype.format = function () {
     });
 };
 
-/** log trigger **/
-$(document).ready(function () {
 
-$("#showlog").on('click', function() {
-    var state = $(this).data('state');
-    if ( state ) {
-        $("#log").animate({height: 27}, 200);
-        $("#log").removeClass('active');
-        $("#content").removeClass('logopen');
-        $(".tab_container").removeClass('logopen');
-        $("#scrollicon").removeClass('active');
 
-        state = false;
+function updateActivatedTab() {
-    }else{
+    var activeTab = $('#tabs > ul li.active');
-        $("#log").animate({height: 111}, 200);
+    activeTab.removeClass('active');
-        $("#log").addClass('active');
+    $('a', activeTab).trigger('click');
-        $("#content").addClass('logopen');
+}
-        $(".tab_container").addClass('logopen');
-        $("#scrollicon").addClass('active');
-
-        state = true;
-    }
-    $(this).text(state ? 'Hide Log' : 'Show Log');
-    $(this).data('state', state);
-    
-});
-
-});

manifest.json

@@ -18,8 +18,13 @@
         }
     },
 
+    "sandbox": {
+    "pages": ["tabs/map.html"]
+    },
+         
         "permissions": [
         "https://www.google-analytics.com/",
+        "https://maps.googleapis.com/*",    
         "https://*.github.com/",
         "https://*.githubusercontent.com/",
         "http://*.baseflight.net/",

tabs/configuration.html

@@ -258,7 +258,7 @@
                 <div class="gui_box_titlebar">
                     <div class="spacer_box_title" i18n="configurationRSSI"></div>
                         <div class="helpicon cf_tip">
-                            <div class="cf_tooltiptext" i18n="configHelp1" style="display:none;"></div>
+                            <div class="cf_tooltiptext" i18n="configurationRSSIHelp" style="display:none;"></div>
                         </div>
                     </div>
                 <div class="spacer_box">

tabs/dataflash.css

@@ -98,6 +98,8 @@
     text-align: center;
     left: 0;
     right: 0;
+    width: 100%;
+    color: black;
 }
 
 .tab-dataflash .dataflash-used {

tabs/dataflash.js

@@ -54,26 +54,26 @@ TABS.dataflash.initialize = function (callback) {
     
     function update_html() {
         if (DATAFLASH.usedSize > 0) {
-            $(".tab-dataflash .dataflash-used").css({
+            $(".dataflash-used").css({
                 width: (DATAFLASH.usedSize / DATAFLASH.totalSize * 100) + "%",
                 display: 'block'
             });
             
-            $(".tab-dataflash .dataflash-used div").text('Used space ' + formatFilesize(DATAFLASH.usedSize));
+            $(".dataflash-used div").text('Used space ' + formatFilesize(DATAFLASH.usedSize));
         } else {
-            $(".tab-dataflash .dataflash-used").css({
+            $(".dataflash-used").css({
                 display: 'none'
             });
         }
 
         if (DATAFLASH.totalSize - DATAFLASH.usedSize > 0) {
-            $(".tab-dataflash .dataflash-free").css({
+            $(".dataflash-free").css({
                 width: ((DATAFLASH.totalSize - DATAFLASH.usedSize) / DATAFLASH.totalSize * 100) + "%",
                 display: 'block'
             });
-            $(".tab-dataflash .dataflash-free div").text('Free space ' + formatFilesize(DATAFLASH.totalSize - DATAFLASH.usedSize));
+            $(".dataflash-free div").text('Free space ' + formatFilesize(DATAFLASH.totalSize - DATAFLASH.usedSize));
         } else {
-            $(".tab-dataflash .dataflash-free").css({
+            $(".dataflash-free").css({
                 display: 'none'
             });
         }

tabs/gps.css

@@ -16,14 +16,104 @@
     background-color: #ececec;
 }
 
-.tab-gps a {
+.tab-gps .gps_map {
-    font-weight: bold;
+    height: 460px;
 }
 
-.tab-gps a:hover {
+
-    text-decoration: underline;
+.tab-gps #connect {
+   display:none; 
+   text-align:center;
+   padding-top:40%;
 }
 
+.tab-gps #waiting {
+    margin-top: 0px;
+    display: none;
+    text-align: center;
+    padding-top: 0px;
+    background-image: url(../images/loading-bars.svg);
+    background-position: center 40%;
+    background-size: 15%;
+    height: 100%;
+    background-repeat: no-repeat;
+    float: left;
+    width: 100%;
+}
+
+.tab-gps #waiting .info {
+    margin-top: 50%;
+}
+
+.tab-gps #loadmap {
+    margin-top:0px; 
+    display:none;
+}
+
+.tab-gps #connect a {
+    font-weight: bold;
+    margin-top:10px;
+}
+
+
+.tab-gps #loadmap {
+    height: 100%;
+    width: 100%;
+    float: left;
+}
+
+
+.tab-gps #loadmap .controls {
+    width: 100%;
+    float: left;
+    height: 33px;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+    background-color: #D1D1D1;
+}
+
+.tab-gps #loadmap .controls a {
+    background-color: white;
+    border-radius: 4px;
+    border: 1px silver solid;
+    color: grey;
+    height: 10px;
+    width: 10px;
+    text-align: center;
+    font-size: 20px;
+    line-height: 10px;
+    padding: 6px;
+    margin-top: 5px;
+    float: right;
+}
+
+.tab-gps #loadmap .controls a:hover {
+    background-color: #f5f5f5;
+}
+
+.tab-gps #loadmap .controls a:active {
+    background-color: #e6e6e6;
+}
+
+.tab-gps #loadmap .controls a:first-child {
+    margin-left: -1px;
+    margin-right: 5px;
+    border-bottom-left-radius: 0px;
+    border-top-left-radius: 0px;
+}
+.tab-gps #loadmap .controls a:last-child {
+    margin-right: 0px;
+    border-bottom-right-radius: 0px;
+    border-top-right-radius: 0px;
+}
+
+.tab-gps iframe {
+    height: 400px;
+    width: 100%;
+    float: left;
+}
+
+
 progress[value]::-webkit-progress-bar {
     background-color: #d2d2d2;
     border-radius: 2px;
@@ -37,3 +127,18 @@ progress[value]::-webkit-progress-value {
     border-radius: 2px;
     box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25) inset;
 }
+
+
+@media only screen and (max-width: 1055px) , only screen and (max-device-width: 1055px) {
+
+.tab-gps iframe {
+    height: 347px;
+    width: 100%;
+    float: left;
+}
+
+.tab-gps .gps_map {
+    height: 403px;
+}
+
+}

tabs/gps.html

@@ -145,6 +145,27 @@
                 </div>
             </div>
         </div>
+        <div class="cf_column half">
+            <div class="gui_box grey gps_map">
+                <div class="gui_box_titlebar" style="margin-bottom: 0px;">
+                        <div class="spacer_box_title" i18n="gpsMapHead"></div>
+                </div>
+                <div id="connect" i18n="gpsMapMessage1">
+                    <div class="default_btn" style="width:50px; margin-left:auto; margin-right:auto; float:none;"><a id="check">retry</a></div>
+                </div>
+                <div id="waiting" >
+                    <div class="info" i18n="gpsMapMessage2"></span>
+                </div>
+            </div>
+                <div id="loadmap">
+                    <iframe src="tabs/map.html" id="map"></iframe>
+                    <div class="controls">
+                          <a href="#" id="zoom_in">+</a>
+                          <a href="#" id="zoom_out">–</a>
+                    </div>
+                </div>
+        </div>
+
     </div>
 </div>
 </div>

tabs/gps.js

@@ -15,8 +15,20 @@ TABS.gps.initialize = function (callback) {
 
     MSP.send_message(MSP_codes.MSP_STATUS, false, false, load_html);
     
+    function set_online(){
+        $('#connect').hide();
+        $('#waiting').show();
+        $('#loadmap').hide();
+    }
+    
+    function set_offline(){
+        $('#connect').show();
+        $('#waiting').hide();
+        $('#loadmap').hide();
+    }
+    
     function process_html() {
-        // translate to user-selected language
+        // translate to user-selected languageconsole.log('Online');
         localize();
 
         function get_raw_gps_data() {
@@ -54,13 +66,39 @@ TABS.gps.initialize = function (callback) {
                 $('td', row).eq(1).text(GPS_DATA.quality[i]);
                 $('td', row).eq(2).find('progress').val(GPS_DATA.cno[i]);
             }
+            
+
+            var message = {
+                action: 'center',
+                lat: lat,
+                lon: lon,
+            };
+
+            var frame = document.getElementById('map');
+            if (navigator.onLine) {
+                $('#connect').hide();
+
+                //if(lat != 0 && lon != 0){
+                if(GPS_DATA.fix){
+                   frame.contentWindow.postMessage(message, '*');
+                   $('#loadmap').show();
+                   $('#waiting').hide();
+                }else{
+                   $('#loadmap').hide();
+                   $('#waiting').show();
+                }
+            }else{
+                $('#connect').show();
+                $('#waiting').hide(); 
+                $('#loadmap').hide();
+            }
         }
 
         // enable data pulling
         GUI.interval_add('gps_pull', function gps_update() {
             // avoid usage of the GPS commands until a GPS sensor is detected for targets that are compiled without GPS support.
             if (!have_sensor(CONFIG.activeSensors, 'gps')) {
-                return;
+                //return;
             }
             
             get_raw_gps_data();
@@ -71,10 +109,51 @@ TABS.gps.initialize = function (callback) {
             MSP.send_message(MSP_codes.MSP_STATUS);
         }, 250, true);
 
+
+        //check for internet connection on load
+        if (navigator.onLine) {
+            console.log('Online');
+            set_online();
+        } else {
+            console.log('Offline');
+            set_offline();
+        }
+
+        $("#check").on('click',function(){
+            if (navigator.onLine) {
+                console.log('Online');
+                set_online();
+            } else {
+                console.log('Offline');
+                set_offline();
+            }
+        });
+
+        var frame = document.getElementById('map');
+
+        $('#zoom_in').click(function() {
+            console.log('zoom in');
+            var message = {
+                action: 'zoom_in',
+            };
+            frame.contentWindow.postMessage(message, '*');
+        });
+        
+        $('#zoom_out').click(function() {
+            console.log('zoom out');
+            var message = {
+                action: 'zoom_out'
+            };
+            frame.contentWindow.postMessage(message, '*');
+        });
+ 
         GUI.content_ready(callback);
     }
+
 };
 
+
+ 
 TABS.gps.cleanup = function (callback) {
     if (callback) callback();
 };

tabs/help.css

@@ -7,3 +7,30 @@
     min-height: 500px;
     margin-bottom: 0px;
 }
+
+.tab-help ul {
+    margin-bottom:15px;
+}
+
+.tab-help li {
+    border-top: 1px dotted silver;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    background-image: url(../images/arrow.svg);
+    background-repeat: no-repeat;
+    background-position: 0px 8px;
+    background-size: 12px;
+}
+
+.tab-help li span {
+    margin-left: 17px;
+    display:block;
+}
+
+.tab-help li span a {
+    color: #59aa29;
+}
+
+.tab-help .subline {
+    margin-bottom: 5px;
+}

tabs/help.html

@@ -7,6 +7,10 @@
                 </div>
                 <div class="spacer">
                     <p i18n="defaultDocumentation"></p>
+                    <ul>
+                    <li><span i18n="defaultDocumentation1"></span></li>
+                    <li><span i18n="defaultDocumentation2"></span></li>
+                    </ul>
                 </div>
             </div>
         </div>
@@ -17,6 +21,19 @@
                 </div>
                 <div class="spacer">
                 <p i18n="defaultSupport"></p>
+                <div class="subline"><strong i18n="defaultSupportSubline1"></strong></div>
+                <ul>
+                <li><span i18n="defaultSupport1"></span></li>
+                <li><span i18n="defaultSupport2"></span></li>
+                </ul>
+                                    
+                <div class="subline"><strong i18n="defaultSupportSubline2"></strong></div>
+                <ul>
+                <li><span i18n="defaultSupport3"></span></li>
+                <li><span i18n="defaultSupport4"></span></li>
+                <li><span i18n="defaultSupport5"></span></li>
+                </ul>
+                    
                 </div>
             </div>
         </div>

tabs/map.html

@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Asynchronous Loading</title>
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
+    <meta charset="utf-8">
+    <style>
+     html, body, #map-canvas {
+        height: 100%;
+        margin: 0px;
+        padding: 0px;
+      }
+    </style>
+    <script>
+
+     window.addEventListener('message', function (e) {
+       var mainWindow = e.source;
+       var result = '';
+       try {
+         switch(e.data.action){
+            case 'zoom_in':
+              var zoom = map.getZoom();
+              zoom++;
+              map.setZoom(zoom);
+              break;
+              
+            case 'zoom_out':
+              var zoom = map.getZoom();
+              zoom--;
+              map.setZoom(zoom);
+              break;
+            case 'center':
+              map.setCenter(new google.maps.LatLng(e.data.lat, e.data.lon));
+              marker.setPosition( new google.maps.LatLng( e.data.lat, e.data.lon ) );
+              map.panTo( new google.maps.LatLng( e.data.lat, e.data.lon ) );
+         }
+       } catch (e) {
+         console.log('message error');
+       }
+     });
+     
+     function loadMapScript() {
+       var script = document.createElement('script');
+       script.type = 'text/javascript';
+       script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&callback=initialize';
+       document.head.appendChild(script);
+     }
+
+     window.onload = loadMapScript;
+
+     var map;
+     var marker;
+
+     function initialize() {
+
+       var mapOptions = {
+         zoom: 17,
+         zoomControl: false,
+         streetViewControl: false,
+         center: {lat: 53.570645, lng: 10.001362}
+       };
+       map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
+
+       var image = {
+         url: '../images/icons/cf_icon_position.png',
+         scaledSize: new google.maps.Size(70, 70)
+       };
+      
+       marker = new google.maps.Marker({
+         icon : image,
+         position: new google.maps.LatLng(53.570645, 10.001362),
+         map:map
+       });
+    
+
+  // You can use a LatLng literal in place of a google.maps.LatLng object when
+  // creating the Marker object. Once the Marker object is instantiated, its
+  // position will be available as a google.maps.LatLng object. In this case,
+  // we retrieve the marker's position using the
+  // google.maps.LatLng.getPosition() method.
+       var infowindow = new google.maps.InfoWindow({
+         content: '<p>Your Location: ' + marker.getPosition() + '</p>'
+       });
+
+       google.maps.event.addListener(marker, 'click', function() {
+         infowindow.open(map, marker);
+       });
+  
+       window.addEventListener('message', function(e) {
+         var data = e.data;
+         var origin = e.origin;
+       });
+}
+
+    </script>
+  </head>
+  <body>
+    <div id="map-canvas"></div>
+  </body>

tabs/pid_tuning.css

@@ -144,8 +144,8 @@
 
 .tab-pid_tuning .controller {
     float: left;
-    width: calc(50% - 12px);
+    width: calc(50% - 2px);
-    margin-left: 10px;
+    margin-left: 0px;
     margin-bottom: 10px;
     border-radius: 3px;
     border: 1px solid #ccc;

tabs/pid_tuning.html

@@ -6,13 +6,6 @@
             <a id="button-documentation" href="https://github.com/cleanflight/cleanflight/releases" target="_blank"></a>
         </div>
         <div class="cf_column half">
-            <div class="profile">
-                <span class="head" i18n="pidTuningProfileHead"></span> <select name="profile">
-                    <option value="0">1</option>
-                    <option value="1">2</option>
-                    <option value="2">3</option>
-                </select>
-            </div>
             <div class="controller">
                 <span class="head" i18n="pidTuningControllerHead"></span> <select name="controller">
                     <!-- list generated here -->
@@ -136,7 +129,7 @@
                                     <div style="width: 25%; float: left; text-align: left;">
                                         <div i18n="pidTuningLevel" style="float:left;"></div>
                                         <div class="helpicon cf_tip">
-                                            <div class="cf_tooltiptext" i18n="pidHelp1" style="display: none;"></div>
+                                            <div class="cf_tooltiptext" i18n="pidTuningLevelHelp" style="display: none;"></div>
                                         </div>
                                     </div>
                                     <div style="width:25%; float:left;" i18n="pidTuningLevelP"></div>

tabs/pid_tuning.js

@@ -314,7 +314,6 @@ TABS.pid_tuning.initialize = function (callback) {
         }
        
         
-        var profile_e = $('select[name="profile"]');
         var form_e = $('#pid-tuning');
 
         if (GUI.canChangePidController) {
@@ -336,21 +335,7 @@ TABS.pid_tuning.initialize = function (callback) {
             $('.rate-tpa .roll-pitch').hide();
         }
 
-        // Fill in currently selected profile
-
-        profile_e.val(CONFIG.profile);
-
         // UI Hooks
-        profile_e.change(function () {
-            var profile = parseInt($(this).val());
-            MSP.send_message(MSP_codes.MSP_SELECT_SETTING, [profile], false, function () {
-                GUI.log(chrome.i18n.getMessage('pidTuningLoadedProfile', [profile + 1]));
-
-                GUI.tab_switch_cleanup(function () {
-                    TABS.pid_tuning.initialize();
-                });
-            });
-        });
 
         $('a.refresh').click(function () {
             GUI.tab_switch_cleanup(function () {

tabs/receiver.css

@@ -193,11 +193,11 @@
 }
 
 .tab-receiver .tunings table td:first-child {
-    border-bottom-left-radius: 5px;
+    border-bottom-left-radius: 3px;
 }
 
 .tab-receiver .tunings table td:last-child {
-    border-bottom-right-radius: 5px;
+    border-bottom-right-radius: 3px;
     border-right: 0px;
 }
 
@@ -224,8 +224,8 @@
     margin: 0px 0px 10px 0;
     border-left: 0;
     width: 30%;
-    border-top-right-radius: 5px;
+    border-top-right-radius: 3px;
-    border-bottom-right-radius: 5px;
+    border-bottom-right-radius: 3px;
     background-color: #DEDEDE;
 }
 
@@ -237,7 +237,7 @@
     font-weight: normal;
     background: #828885;
     color: white;
-    border-top-right-radius: 5px;
+    border-top-right-radius: 3px;
 }
 
 .tab-receiver .rssi_channel_wrapper select {
@@ -253,8 +253,8 @@
     position: relative;
     margin: 0px 0px 10px 0;
     width: calc(70% - 0px);
-    border-top-left-radius: 5px;
+    border-top-left-radius: 3px;
-    border-bottom-left-radius: 5px;
+    border-bottom-left-radius: 3px;
     background-color: #DEDEDE;
 }
 
@@ -266,7 +266,7 @@
     font-weight: normal;
     background: #828885;
     color: white;
-    border-top-left-radius: 5px;
+    border-top-left-radius: 3px;
     border-right: 1px solid silver;
 }
 

tabs/setup.js

@@ -228,7 +228,7 @@ TABS.setup.initialize3D = function (compatibility) {
         renderer = new THREE.CanvasRenderer({canvas: canvas.get(0), alpha: true});
     }
     // initialize render size for current canvas size
-    renderer.setSize(wrapper.width(), wrapper.height());
+    renderer.setSize(wrapper.width()*2, wrapper.height()*2);
 
 
 //    // modelWrapper adds an extra axis of rotation to avoid gimbal lock with the euler angles
@@ -295,7 +295,7 @@ TABS.setup.initialize3D = function (compatibility) {
 
     // handle canvas resize
     this.resize3D = function () {
-        renderer.setSize(wrapper.width(), wrapper.height());
+        renderer.setSize(wrapper.width()*2, wrapper.height()*2);
         camera.aspect = wrapper.width() / wrapper.height();
         camera.updateProjectionMatrix();