From b769a43d9ad4ae6ef3967515266c398cd82cbc3b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=ADguel=20=C3=81ngel=20Mulero=20Mart=C3=ADnez?= Date: Sat, 17 Jun 2023 11:54:17 +0200 Subject: [PATCH] Fix MSP rx sticks window (#3482) --- gulpfile.js | 1 + locales/en/messages.json | 3 +- src/css/tabs/receiver_msp.less | 2 +- src/js/tabs/receiver_msp.js | 150 ++++++++++++++++----------------- src/tabs/receiver_msp.html | 24 +++--- 5 files changed, 91 insertions(+), 89 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index 59a45df2..39e7a1d7 100644 --- a/gulpfile.js +++ b/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({ diff --git a/locales/en/messages.json b/locales/en/messages.json index b3314f04..1697431a 100644 --- a/locales/en/messages.json +++ b/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 refreshed" diff --git a/src/css/tabs/receiver_msp.less b/src/css/tabs/receiver_msp.less index 6b8de086..6cd88086 100644 --- a/src/css/tabs/receiver_msp.less +++ b/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); diff --git a/src/js/tabs/receiver_msp.js b/src/js/tabs/receiver_msp.js index 69a8e095..b510a3d0 100644 --- a/src/js/tabs/receiver_msp.js +++ b/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,65 +143,70 @@ function applyNormalTheme() { css_dark.forEach((el) => $(`link[href="${el}"]`).prop('disabled', true)); } -$(document).ready(function() { - $(".button-enable .btn").click(function() { - const shrinkHeight = $(".warning").height(); +$(".button-enable .btn").on("click", function() { + const shrinkHeight = $(".warning").height(); - $(".warning").slideUp("short", function() { - chrome.app.window.current().innerBounds.minHeight -= shrinkHeight; - chrome.app.window.current().innerBounds.height -= shrinkHeight; - chrome.app.window.current().innerBounds.maxHeight -= shrinkHeight; - }); - - enableTX = true; + $(".warning").slideUp("short", function() { + chrome.app.window.current().innerBounds.minHeight -= shrinkHeight; + chrome.app.window.current().innerBounds.height -= shrinkHeight; + chrome.app.window.current().innerBounds.maxHeight -= shrinkHeight; }); - gimbalElems = $(".control-gimbal"); - sliderElems = $(".control-slider"); - - gimbalElems.each(function(gimbalIndex) { - $(this).on('mousedown', {gimbalIndex: gimbalIndex}, function(e) { - if (e.which == 1) { // Only move sticks on left mouse button - handleGimbalMouseDrag(e); - - $(window).on('mousemove', {gimbalIndex: gimbalIndex}, handleGimbalMouseDrag); - } - }); - }); - - $(".slider", sliderElems).each(function(sliderIndex) { - const initialValue = stickValues[`Aux${sliderIndex + 1}`]; - - $(this) - .noUiSlider({ - start: initialValue, - range: { - min: CHANNEL_MIN_VALUE, - max: CHANNEL_MAX_VALUE, - }, - }).on('slide change set', function(e, value) { - value = Math.round(parseFloat(value)); - - stickValues[`Aux${(sliderIndex + 1)}`] = value; - - $(".tooltip", this).text(value); - }); - - $(this).append('
'); - - $(".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) { - $(this).off('mousemove', handleGimbalMouseDrag); - }); - - localizeAxisNames(); - - updateControlPositions(); - - setInterval(transmitChannels, 50); + enableTX = true; }); + +gimbalElems = $(".control-gimbal"); +sliderElems = $(".control-slider"); + +gimbalElems.each(function(gimbalIndex) { + $(this).on('mousedown', {gimbalIndex: gimbalIndex}, function(e) { + if (e.button === 0) { // Only move sticks on left mouse button + handleGimbalMouseDrag(e); + + $(window).on('mousemove', {gimbalIndex: gimbalIndex}, handleGimbalMouseDrag); + } + }); +}); + +$(".slider", sliderElems).each(function(sliderIndex) { + const initialValue = stickValues[`Aux${sliderIndex + 1}`]; + + $(this) + .noUiSlider({ + start: initialValue, + range: { + min: CHANNEL_MIN_VALUE, + max: CHANNEL_MAX_VALUE, + }, + }).on('slide change set', function(e, value) { + value = Math.round(parseFloat(value)); + + stickValues[`Aux${(sliderIndex + 1)}`] = value; + + $(".tooltip", this).text(value); + }); + + $(this).append('
'); + + $(".tooltip", this).text(initialValue); +}); + +/* + * Mouseup handler needs to be bound to the window in order to receive mouseup if mouse leaves window. + */ +$(window).on("mouseup", function(e) { + $(this).off('mousemove', handleGimbalMouseDrag); +}); + +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); diff --git a/src/tabs/receiver_msp.html b/src/tabs/receiver_msp.html index 8bed2653..4cfb7f5f 100644 --- a/src/tabs/receiver_msp.html +++ b/src/tabs/receiver_msp.html @@ -1,20 +1,22 @@ + - - - - + + + + + - - + - - + + - - + + + - +