Fix MSP rx sticks window (#3482)

gulpfile.js

@@ -404,6 +404,7 @@ function dist_rollup() {
                 'js/main_cordova': 'src/js/main_cordova.js',
                 'js/utils/common': 'src/js/utils/common.js',
                 'js/main': 'src/js/main.js',
+                'js/tabs/receiver_msp': 'src/js/tabs/receiver_msp.js',
             },
             plugins: [
                 alias({

locales/en/messages.json

@@ -2239,7 +2239,8 @@
         "message": "Binding phrase"
     },
     "receiverButtonSticks": {
-        "message": "Control sticks"
+        "message": "Radio Emulator",
+        "description": "Button that opens a window with a radio emulator on the receiver tab. Actually only enabled for MSP protocol"
     },
     "receiverDataRefreshed": {
         "message": "RC Tuning data <strong>refreshed</strong>"

src/css/tabs/receiver_msp.less

@@ -97,7 +97,7 @@ a {
 		position: absolute;
 		left: 50%;
 		transform: translate(-50%);
-		margin-top: 0px;
+		margin-top: 20px;
 		margin-bottom: 0px;
 		margin-left: 0px;
 		background-color: var(--accent);

src/js/tabs/receiver_msp.js

@@ -1,5 +1,4 @@
 import windowWatcherUtil from "../utils/window_watchers";
-import { i18n } from "../localization";
 
 const css_dark = [
     '/css/dark-theme.css',
@@ -43,10 +42,6 @@ let gimbalElems;
 let sliderElems;
 let enableTX = false;
 
-// NOTE: import should be enough right?
-// This is a hack to get the i18n var of the parent, but the localizePage not works
-// const i18n = opener.i18n;
-
 const watchers = {
     darkTheme: (val) => {
         if (val) {
@@ -57,17 +52,6 @@ const watchers = {
     },
 };
 
-$(document).ready(function () {
-    $('[i18n]:not(.i18n-replaced)').each(function() {
-        const element = $(this);
-
-        element.html(i18n.getMessage(element.attr('i18n')));
-        element.addClass('i18n-replaced');
-    });
-
-    windowWatcherUtil.bindWatchers(window, watchers);
-});
-
 function transmitChannels() {
     const channelValues = [0, 0, 0, 0, 0, 0, 0, 0];
 
@@ -107,10 +91,10 @@ function updateControlPositions() {
                 gimbalSize = $(gimbalElem).width(),
                 stickElem = $(".control-stick", gimbalElem);
 
-            if (gimbal[0] == stickName) {
+            if (gimbal[0] === stickName) {
                 stickElem.css('top', `${(1.0 - channelValueToStickPortion(stickValue)) * gimbalSize}px`);
                 break;
-            } else if (gimbal[1] == stickName) {
+            } else if (gimbal[1] === stickName) {
                 stickElem.css('left', `${channelValueToStickPortion(stickValue) * gimbalSize}px`);
                 break;
             }
@@ -129,6 +113,15 @@ function handleGimbalMouseDrag(e) {
     updateControlPositions();
 }
 
+function localizePage() {
+    $('[i18n]:not(.i18n-replaced)').each(function() {
+        const element = $(this);
+
+        element.html(i18n.getMessage(element.attr('i18n')));
+        element.addClass('i18n-replaced');
+    });
+}
+
 function localizeAxisNames() {
     for (const gimbalIndex in gimbals) {
         const gimbal = gimbalElems.get(gimbalIndex);
@@ -150,8 +143,7 @@ function applyNormalTheme() {
     css_dark.forEach((el) => $(`link[href="${el}"]`).prop('disabled', true));
 }
 
-$(document).ready(function() {
+$(".button-enable .btn").on("click", function() {
-    $(".button-enable .btn").click(function() {
     const shrinkHeight = $(".warning").height();
 
     $(".warning").slideUp("short", function() {
@@ -161,22 +153,22 @@ $(document).ready(function() {
     });
 
     enableTX = true;
-    });
+});
 
-    gimbalElems = $(".control-gimbal");
+gimbalElems = $(".control-gimbal");
-    sliderElems = $(".control-slider");
+sliderElems = $(".control-slider");
 
-    gimbalElems.each(function(gimbalIndex) {
+gimbalElems.each(function(gimbalIndex) {
     $(this).on('mousedown', {gimbalIndex: gimbalIndex}, function(e) {
-            if (e.which == 1) { // Only move sticks on left mouse button
+        if (e.button === 0) { // Only move sticks on left mouse button
             handleGimbalMouseDrag(e);
 
             $(window).on('mousemove', {gimbalIndex: gimbalIndex}, handleGimbalMouseDrag);
         }
     });
-    });
+});
 
-    $(".slider", sliderElems).each(function(sliderIndex) {
+$(".slider", sliderElems).each(function(sliderIndex) {
     const initialValue = stickValues[`Aux${sliderIndex + 1}`];
 
     $(this)
@@ -197,18 +189,24 @@ $(document).ready(function() {
     $(this).append('<div class="tooltip"></div>');
 
     $(".tooltip", this).text(initialValue);
-    });
+});
 
-    /*
+/*
  * Mouseup handler needs to be bound to the window in order to receive mouseup if mouse leaves window.
  */
-    $(window).mouseup(function(e) {
+$(window).on("mouseup", function(e) {
     $(this).off('mousemove', handleGimbalMouseDrag);
-    });
-
-    localizeAxisNames();
-
-    updateControlPositions();
-
-    setInterval(transmitChannels, 50);
 });
+
+windowWatcherUtil.bindWatchers(window, watchers);
+
+// This is a hack to get the i18n var of the parent, but the i18n.localizePage not works
+// It seems than when node opens a new window, the module "context" is different, so the i18n var is not initialized
+const i18n = opener.i18n;
+
+localizePage();
+localizeAxisNames();
+
+updateControlPositions();
+
+setInterval(transmitChannels, 50);

src/tabs/receiver_msp.html

@@ -1,20 +1,22 @@
+<!DOCTYPE html>
 <html>
 <head>
-<link type="text/css" rel="stylesheet" href="/css/opensans_webfontkit/fonts.css" media="all" />
+    <title i18n="receiverButtonSticks"></title>
-<script type="text/javascript" src="/node_modules/jquery/dist/jquery.min.js"></script>
+    <link type="text/css" rel="stylesheet" href="/css/opensans_webfontkit/fonts.css" media="all" />
-<script type="text/javascript" src="/node_modules/jquery-ui-npm/jquery-ui.min.js"></script>
+    <script type="text/javascript" src="/node_modules/jquery/dist/jquery.min.js"></script>
-<script type="text/javascript" src="/js/libraries/jquery.nouislider.all.min.js"></script>
+    <script type="text/javascript" src="/node_modules/jquery-ui-npm/jquery-ui.min.js"></script>
+    <script type="text/javascript" src="/js/libraries/jquery.nouislider.all.min.js"></script>
 
-<script type="text/javascript" src="/js/utils/window_watchers.js"></script>
+    <script type="module" src="/js/tabs/receiver_msp.js"></script>
-<script type="text/javascript" src="/js/tabs/receiver_msp.js"></script>
 
-<link type="text/css" rel="stylesheet" href="/js/libraries/jquery.nouislider.min.css">
+    <link type="text/css" rel="stylesheet" href="/js/libraries/jquery.nouislider.min.css">
-<link type="text/css" rel="stylesheet" href="/js/libraries/jquery.nouislider.pips.min.css">
+    <link type="text/css" rel="stylesheet" href="/js/libraries/jquery.nouislider.pips.min.css">
 
-<link type="text/css" rel="stylesheet" href="/css/main.css" media="all" />
+    <link type="text/css" rel="stylesheet" href="/css/theme.css" media="all" />
-<link type="text/css" rel="stylesheet" href="/css/tabs/receiver_msp.css" media="all" />
+    <link type="text/css" rel="stylesheet" href="/css/main.css" media="all" />
+    <link type="text/css" rel="stylesheet" href="/css/tabs/receiver_msp.css" media="all" />
 
-<link type="text/css" rel="stylesheet" href="/css/dark-theme.css" media="all" disabled/>
+    <link type="text/css" rel="stylesheet" href="/css/dark-theme.css" media="all" disabled/>
 </head>
 <body>
     <div class="control-gimbals">