Skip to content

Commit ea9e5b3

Browse files
McGiverGimMcGiverGim
committed
Fix MSP rx sticks window
1 parent 5621658 commit ea9e5b3

File tree

5 files changed

+79
-77
lines changed

5 files changed

+79
-77
lines changed

‎gulpfile.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -404,6 +404,7 @@ function dist_rollup() {
404404
'js/main_cordova': 'src/js/main_cordova.js',
405405
'js/utils/common': 'src/js/utils/common.js',
406406
'js/main': 'src/js/main.js',
407+
'js/tabs/receiver_msp': 'src/js/tabs/receiver_msp.js',
407408
},
408409
plugins: [
409410
alias({

‎locales/en/messages.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2239,7 +2239,8 @@
22392239
"message": "Binding phrase"
22402240
},
22412241
"receiverButtonSticks": {
2242-
"message": "Control sticks"
2242+
"message": "Radio Emulator",
2243+
"description": "Button that opens a window with a radio emulator on the receiver tab. Actually only enabled for MSP protocol"
22432244
},
22442245
"receiverDataRefreshed": {
22452246
"message": "RC Tuning data <strong>refreshed</strong>"

‎src/css/tabs/receiver_msp.less

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ a {
9797
position: absolute;
9898
left: 50%;
9999
transform: translate(-50%);
100-
margin-top: 0px;
100+
margin-top: 20px;
101101
margin-bottom: 0px;
102102
margin-left: 0px;
103103
background-color: var(--accent);

‎src/js/tabs/receiver_msp.js

Lines changed: 62 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import windowWatcherUtil from "../utils/window_watchers";
2-
import { i18n } from "../localization";
32

43
const css_dark = [
54
'/css/dark-theme.css',
@@ -43,10 +42,6 @@ let gimbalElems;
4342
let sliderElems;
4443
let enableTX = false;
4544

46-
// NOTE: import should be enough right?
47-
// This is a hack to get the i18n var of the parent, but the localizePage not works
48-
// const i18n = opener.i18n;
49-
5045
const watchers = {
5146
darkTheme: (val) => {
5247
if (val) {
@@ -57,17 +52,6 @@ const watchers = {
5752
},
5853
};
5954

60-
$(document).ready(function () {
61-
$('[i18n]:not(.i18n-replaced)').each(function() {
62-
const element = $(this);
63-
64-
element.html(i18n.getMessage(element.attr('i18n')));
65-
element.addClass('i18n-replaced');
66-
});
67-
68-
windowWatcherUtil.bindWatchers(window, watchers);
69-
});
70-
7155
function transmitChannels() {
7256
const channelValues = [0, 0, 0, 0, 0, 0, 0, 0];
7357

@@ -107,10 +91,10 @@ function updateControlPositions() {
10791
gimbalSize = $(gimbalElem).width(),
10892
stickElem = $(".control-stick", gimbalElem);
10993

110-
if (gimbal[0] == stickName) {
94+
if (gimbal[0] === stickName) {
11195
stickElem.css('top', `${(1.0 - channelValueToStickPortion(stickValue)) * gimbalSize}px`);
11296
break;
113-
} else if (gimbal[1] == stickName) {
97+
} else if (gimbal[1] === stickName) {
11498
stickElem.css('left', `${channelValueToStickPortion(stickValue) * gimbalSize}px`);
11599
break;
116100
}
@@ -129,6 +113,15 @@ function handleGimbalMouseDrag(e) {
129113
updateControlPositions();
130114
}
131115

116+
function localizePage() {
117+
$('[i18n]:not(.i18n-replaced)').each(function() {
118+
const element = $(this);
119+
120+
element.html(i18n.getMessage(element.attr('i18n')));
121+
element.addClass('i18n-replaced');
122+
});
123+
}
124+
132125
function localizeAxisNames() {
133126
for (const gimbalIndex in gimbals) {
134127
const gimbal = gimbalElems.get(gimbalIndex);
@@ -150,65 +143,70 @@ function applyNormalTheme() {
150143
css_dark.forEach((el) => $(`link[href="${el}"]`).prop('disabled', true));
151144
}
152145

153-
$(document).ready(function() {
154-
$(".button-enable .btn").click(function() {
155-
const shrinkHeight = $(".warning").height();
146+
$(".button-enable .btn").on("click", function() {
147+
const shrinkHeight = $(".warning").height();
156148

157-
$(".warning").slideUp("short", function() {
158-
chrome.app.window.current().innerBounds.minHeight -= shrinkHeight;
159-
chrome.app.window.current().innerBounds.height -= shrinkHeight;
160-
chrome.app.window.current().innerBounds.maxHeight -= shrinkHeight;
161-
});
162-
163-
enableTX = true;
149+
$(".warning").slideUp("short", function() {
150+
chrome.app.window.current().innerBounds.minHeight -= shrinkHeight;
151+
chrome.app.window.current().innerBounds.height -= shrinkHeight;
152+
chrome.app.window.current().innerBounds.maxHeight -= shrinkHeight;
164153
});
165154

166-
gimbalElems = $(".control-gimbal");
167-
sliderElems = $(".control-slider");
155+
enableTX = true;
156+
});
168157

169-
gimbalElems.each(function(gimbalIndex) {
170-
$(this).on('mousedown', {gimbalIndex: gimbalIndex}, function(e) {
171-
if (e.which == 1) { // Only move sticks on left mouse button
172-
handleGimbalMouseDrag(e);
158+
gimbalElems = $(".control-gimbal");
159+
sliderElems = $(".control-slider");
173160

174-
$(window).on('mousemove', {gimbalIndex: gimbalIndex}, handleGimbalMouseDrag);
175-
}
176-
});
161+
gimbalElems.each(function(gimbalIndex) {
162+
$(this).on('mousedown', {gimbalIndex: gimbalIndex}, function(e) {
163+
if (e.button === 0) { // Only move sticks on left mouse button
164+
handleGimbalMouseDrag(e);
165+
166+
$(window).on('mousemove', {gimbalIndex: gimbalIndex}, handleGimbalMouseDrag);
167+
}
177168
});
169+
});
178170

179-
$(".slider", sliderElems).each(function(sliderIndex) {
180-
const initialValue = stickValues[`Aux${sliderIndex + 1}`];
171+
$(".slider", sliderElems).each(function(sliderIndex) {
172+
const initialValue = stickValues[`Aux${sliderIndex + 1}`];
181173

182-
$(this)
183-
.noUiSlider({
184-
start: initialValue,
185-
range: {
186-
min: CHANNEL_MIN_VALUE,
187-
max: CHANNEL_MAX_VALUE,
188-
},
189-
}).on('slide change set', function(e, value) {
190-
value = Math.round(parseFloat(value));
174+
$(this)
175+
.noUiSlider({
176+
start: initialValue,
177+
range: {
178+
min: CHANNEL_MIN_VALUE,
179+
max: CHANNEL_MAX_VALUE,
180+
},
181+
}).on('slide change set', function(e, value) {
182+
value = Math.round(parseFloat(value));
191183

192-
stickValues[`Aux${(sliderIndex + 1)}`] = value;
184+
stickValues[`Aux${(sliderIndex + 1)}`] = value;
193185

194-
$(".tooltip", this).text(value);
195-
});
186+
$(".tooltip", this).text(value);
187+
});
196188

197-
$(this).append('<div class="tooltip"></div>');
189+
$(this).append('<div class="tooltip"></div>');
198190

199-
$(".tooltip", this).text(initialValue);
200-
});
191+
$(".tooltip", this).text(initialValue);
192+
});
201193

202-
/*
203-
* Mouseup handler needs to be bound to the window in order to receive mouseup if mouse leaves window.
204-
*/
205-
$(window).mouseup(function(e) {
206-
$(this).off('mousemove', handleGimbalMouseDrag);
207-
});
194+
/*
195+
* Mouseup handler needs to be bound to the window in order to receive mouseup if mouse leaves window.
196+
*/
197+
$(window).on("mouseup", function(e) {
198+
$(this).off('mousemove', handleGimbalMouseDrag);
199+
});
208200

209-
localizeAxisNames();
201+
windowWatcherUtil.bindWatchers(window, watchers);
210202

211-
updateControlPositions();
203+
// This is a hack to get the i18n var of the parent, but the i18n.localizePage not works
204+
// It seems than when node opens a new window, the module "context" is different, so the i18n var is not initialized
205+
const i18n = opener.i18n;
212206

213-
setInterval(transmitChannels, 50);
214-
});
207+
localizePage();
208+
localizeAxisNames();
209+
210+
updateControlPositions();
211+
212+
setInterval(transmitChannels, 50);

‎src/tabs/receiver_msp.html

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,22 @@
1+
<!DOCTYPE html>
12
<html>
23
<head>
3-
<link type="text/css" rel="stylesheet" href="/css/opensans_webfontkit/fonts.css" media="all" />
4-
<script type="text/javascript" src="/node_modules/jquery/dist/jquery.min.js"></script>
5-
<script type="text/javascript" src="/node_modules/jquery-ui-npm/jquery-ui.min.js"></script>
6-
<script type="text/javascript" src="/js/libraries/jquery.nouislider.all.min.js"></script>
4+
<title i18n="receiverButtonSticks"></title>
5+
<link type="text/css" rel="stylesheet" href="/css/opensans_webfontkit/fonts.css" media="all" />
6+
<script type="text/javascript" src="/node_modules/jquery/dist/jquery.min.js"></script>
7+
<script type="text/javascript" src="/node_modules/jquery-ui-npm/jquery-ui.min.js"></script>
8+
<script type="text/javascript" src="/js/libraries/jquery.nouislider.all.min.js"></script>
79

8-
<script type="text/javascript" src="/js/utils/window_watchers.js"></script>
9-
<script type="text/javascript" src="/js/tabs/receiver_msp.js"></script>
10+
<script type="module" src="/js/tabs/receiver_msp.js"></script>
1011

11-
<link type="text/css" rel="stylesheet" href="/js/libraries/jquery.nouislider.min.css">
12-
<link type="text/css" rel="stylesheet" href="/js/libraries/jquery.nouislider.pips.min.css">
12+
<link type="text/css" rel="stylesheet" href="/js/libraries/jquery.nouislider.min.css">
13+
<link type="text/css" rel="stylesheet" href="/js/libraries/jquery.nouislider.pips.min.css">
1314

14-
<link type="text/css" rel="stylesheet" href="/css/main.css" media="all" />
15-
<link type="text/css" rel="stylesheet" href="/css/tabs/receiver_msp.css" media="all" />
15+
<link type="text/css" rel="stylesheet" href="/css/theme.css" media="all" />
16+
<link type="text/css" rel="stylesheet" href="/css/main.css" media="all" />
17+
<link type="text/css" rel="stylesheet" href="/css/tabs/receiver_msp.css" media="all" />
1618

17-
<link type="text/css" rel="stylesheet" href="/css/dark-theme.css" media="all" disabled/>
19+
<link type="text/css" rel="stylesheet" href="/css/dark-theme.css" media="all" disabled/>
1820
</head>
1921
<body>
2022
<div class="control-gimbals">

0 commit comments

Comments
 (0)