Skip to content

Commit

Permalink
Hide manual connection and refactor port_handler
Browse files Browse the repository at this point in the history
  • Loading branch information
@haslinghuis
haslinghuis committed May 5, 2024
1 parent 4d46da2 commit f3c5a1d
Show file tree
Hide file tree
Showing 6 changed files with 278 additions and 115 deletions.
4 changes: 4 additions & 0 deletions locales/en/messages.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,10 @@
"message": "Use mDNS Browser Device discovery on network (experimental)",
"description": "Enable mDNS Browser Device discovery in PortHandler (experimental)"
},
"showManualMode": {
"message": "Enable manual connection mode",
"description": "Text for the option to enable or disable manual connection mode"
},
"showVirtualMode": {
"message": "Enable virtual connection mode",
"description": "Text for the option to enable or disable the virtual FC"
Expand Down
257 changes: 171 additions & 86 deletions src/js/port_handler.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { generateVirtualApiVersions, getTextWidth } from './utils/common';
import { get as getConfig } from "./ConfigStorage";
import serial from "./serial";
import MdnsDiscovery from "./mdns_discovery";
import $ from 'jquery';
import { isWeb } from "./utils/isWeb";

const TIMEOUT_CHECK = 500 ; // With 250 it seems that it produces a memory leak and slowdown in some versions, reason unknown
Expand All @@ -18,6 +17,7 @@ export const usbDevices = { filters: [
] };

const PortHandler = new function () {
this.currentPorts = [];
this.initialPorts = false;
this.port_detected_callbacks = [];
this.port_removed_callbacks = [];
Expand All @@ -26,6 +26,7 @@ const PortHandler = new function () {
this.showAllSerialDevices = false;
this.useMdnsBrowser = false;
this.showVirtualMode = false;
this.showManualMode = false;
};

PortHandler.initialize = function () {
Expand Down Expand Up @@ -56,6 +57,7 @@ PortHandler.reinitialize = function () {
}

this.showVirtualMode = getConfig('showVirtualMode').showVirtualMode;
this.showManualMode = getConfig('showManualMode').showManualMode;
this.showAllSerialDevices = getConfig('showAllSerialDevices').showAllSerialDevices;
this.useMdnsBrowser = getConfig('useMdnsBrowser').useMdnsBrowser;

Expand Down Expand Up @@ -86,10 +88,10 @@ PortHandler.check_serial_devices = function () {
const self = this;

serial.getDevices(function(cp) {
let currentPorts = [];
self.currentPorts = [];

if (self.useMdnsBrowser) {
currentPorts = [
self.currentPorts = [
...cp,
...(MdnsDiscovery.mdnsBrowser.services?.filter(s => s.txt?.vendor === 'elrs' && s.txt?.type === 'rx' && s.ready === true)
.map(s => s.addresses.map(a => ({
Expand All @@ -101,65 +103,82 @@ PortHandler.check_serial_devices = function () {
}))).flat() ?? []),
].filter(Boolean);
} else {
currentPorts = cp;
self.currentPorts = cp;
}

// auto-select port (only during initialization)
if (!self.initialPorts) {
currentPorts = self.updatePortSelect(currentPorts);
self.selectPort(currentPorts);
self.initialPorts = currentPorts;
self.currentPorts = self.updatePortSelect(self.currentPorts);
self.selectPort(self.currentPorts);
self.initialPorts = self.currentPorts;
GUI.updateManualPortVisibility();
} else {
self.removePort(currentPorts);
self.detectPort(currentPorts);
self.removePort();
self.detectPort();
}
});
};

PortHandler.check_usb_devices = function (callback) {
const self = this;
const portSelect = document.querySelector('#port');

chrome.usb.getDevices(usbDevices, function (result) {
const dfuActive = !!portSelect.value.startsWith('DFU');

const dfuElement = self.portPickerElement.children("[value='DFU']");
if (result.length) {
if (!dfuElement.length) {
self.portPickerElement.empty();
let usbText;
if (result[0].productName) {
usbText = (`DFU - ${result[0].productName}`);
} else {
usbText = "DFU";
}
// Found device in DFU mode, add it to the list
if (!dfuActive) {
self.clearOptions();

// self.portPickerElement.append($('<option/>', {
// value: "DFU",
// text: usbText,
// /**
// * @deprecated please avoid using `isDFU` and friends for new code.
// */
// data: {isDFU: true},
// }));

// self.portPickerElement.append($('<option/>', {
// value: 'manual',
// text: i18n.getMessage('portsSelectManual'),
// /**
// * @deprecated please avoid using `isDFU` and friends for new code.
// */
// data: {isManual: true},
// }));
const usbText = result[0].productName ? `DFU - ${result[0].productName}` : "DFU";
const dfuOption = document.createElement('option');

dfuOption.value = 'DFU';
dfuOption.text = usbText;

portSelect.add(dfuOption);
// portSelect.value = 'DFU';

self.portPickerElement.append($('<option/>', {
value: "DFU",
text: usbText,
/**
* @deprecated please avoid using `isDFU` and friends for new code.
*/
data: {isDFU: true},
}));

self.portPickerElement.append($('<option/>', {
value: 'manual',
text: i18n.getMessage('portsSelectManual'),
/**
* @deprecated please avoid using `isDFU` and friends for new code.
*/
data: {isManual: true},
}));

self.portPickerElement.val('DFU').trigger('change');
self.setPortsInputWidth();

self.dfu_available = true;
}
} else if (dfuElement.length) {
dfuElement.remove();
self.setPortsInputWidth();
self.dfu_available = false;
} else {
// We are not in DFU mode anymore. Add items here as check_serial_devices() will not be called without a change in serial devices.
if (dfuActive) {
self.clearOptions();

self.addManualOption();
self.addVirtualOption();
self.addNoPortsOption();

self.setPortsInputWidth();

self.dfu_available = false;
}
}
if ($('option:selected', self.portPickerElement).val() !== 'DFU') {

// if ($('option:selected', self.portPickerElement).val() !== 'DFU') {

if (!dfuActive) {
if (!(GUI.connected_to || GUI.connect_lock)) {
FC.resetState();
}
Expand All @@ -175,9 +194,62 @@ PortHandler.check_usb_devices = function (callback) {
});
};

PortHandler.removePort = function(currentPorts) {
PortHandler.clearOptions = function () {
const portSelect = document.querySelector('#port');
let index = portSelect.length;

while (index--) {
if (portSelect.options[index]) {
portSelect.remove(index);
}
}
};

PortHandler.addManualOption = function() {
const self = this;

if (self.showManualMode) {
const portSelect = document.querySelector('#port');
const manualOption = document.createElement('option');

manualOption.value = 'manual';
manualOption.text = i18n.getMessage('portsSelectManual');

portSelect.add(manualOption);
}
};

PortHandler.addVirtualOption = function() {
const self = this;

if (self.showVirtualMode) {
const portSelect = document.querySelector('#port');
const virtualOption = document.createElement('option');

virtualOption.value = 'virtual';
virtualOption.text = i18n.getMessage('portsSelectVirtual');

portSelect.add(virtualOption);
}
};

PortHandler.addNoPortsOption = function() {
const self = this;

if (!self.showVirtualMode && !self.showManualMode) {
const portSelect = document.querySelector('#port');
const noPortsOption = document.createElement('option');

noPortsOption.value = 'none';
noPortsOption.text = 'No connections available';

portSelect.add(noPortsOption);
}
};

PortHandler.removePort = function() {
const self = this;
const removePorts = self.array_difference(self.initialPorts, currentPorts);
const removePorts = self.array_difference(self.initialPorts, self.currentPorts);

if (removePorts.length) {
console.log(`PortHandler - Removed: ${JSON.stringify(removePorts)}`);
Expand All @@ -186,8 +258,11 @@ PortHandler.removePort = function(currentPorts) {
if (GUI.connected_to) {
for (let i = 0; i < removePorts.length; i++) {
if (removePorts[i].path === GUI.connected_to) {
$('div.connect_controls a.connect').click();
$('div.connect_controls a.connect.active').click();
const button = document.querySelector('div.connect_controls a.connect');
button.click();

const buttonActive = document.querySelector('div.connect_controls a.connect.active');
buttonActive.click();
}
}
}
Expand Down Expand Up @@ -215,18 +290,18 @@ PortHandler.removePort = function(currentPorts) {
}
};

PortHandler.detectPort = function(currentPorts) {
PortHandler.detectPort = function() {
const self = this;
const newPorts = self.array_difference(currentPorts, self.initialPorts);
const newPorts = self.array_difference(self.currentPorts, self.initialPorts);

if (newPorts.length) {
currentPorts = self.updatePortSelect(currentPorts);
self.currentPorts = self.updatePortSelect(self.currentPorts);
console.log(`PortHandler - Found: ${JSON.stringify(newPorts)}`);

if (newPorts.length === 1) {
self.portPickerElement.val(newPorts[0].path);
} else if (newPorts.length > 1) {
self.selectPort(currentPorts);
self.selectPort(self.currentPorts);
}

self.port_available = true;
Expand All @@ -241,7 +316,8 @@ PortHandler.detectPort = function(currentPorts) {
if (GUI.auto_connect && !GUI.connecting_to && !GUI.connected_to) {
// start connect procedure. We need firmware flasher protection over here
if (GUI.active_tab !== 'firmware_flasher') {
$('div.connect_controls a.connect').click();
const button = document.querySelector('div.connect_controls a.connect');
button.click();
}
}
// trigger callbacks
Expand All @@ -260,7 +336,7 @@ PortHandler.detectPort = function(currentPorts) {
self.port_detected_callbacks.splice(index, 1);
}
}
self.initialPorts = currentPorts;
self.initialPorts = self.currentPorts;
}
};

Expand All @@ -274,46 +350,55 @@ PortHandler.sortPorts = function(ports) {
};

PortHandler.updatePortSelect = function (ports) {
const portSelect = document.querySelector('#port');

ports = this.sortPorts(ports);
this.portPickerElement.empty();

for (let i = 0; i < ports.length; i++) {
let portText;
if (ports[i].displayName) {
portText = (`${ports[i].path} - ${ports[i].displayName}`);
} else {
portText = ports[i].path;
}
this.clearOptions();

this.portPickerElement.append($("<option/>", {
value: ports[i].path,
text: portText,
/**
* @deprecated please avoid using `isDFU` and friends for new code.
*/
data: {isManual: false},
}));
for (let i = 0; i < ports.length; i++) {
const portOption = document.createElement('option');
const portText = ports[i].displayName ? `${ports[i].path} - ${ports[i].displayName}` : ports[i].path;

// this.portPickerElement.append($("<option/>", {
// value: ports[i].path,
// text: portText,
// /**
// * @deprecated please avoid using `isDFU` and friends for new code.
// */
// data: {isManual: false},
// }));
// }

// if (this.showVirtualMode) {
// this.portPickerElement.append($("<option/>", {
// value: 'virtual',
// text: i18n.getMessage('portsSelectVirtual'),
// /**
// * @deprecated please avoid using `isDFU` and friends for new code.
// */
// data: {isVirtual: true},
// }));
// }

// this.portPickerElement.append($("<option/>", {
// value: 'manual',
// text: i18n.getMessage('portsSelectManual'),
// /**
// * @deprecated please avoid using `isDFU` and friends for new code.
// */
// data: {isManual: true},
// }));
portOption.value = ports[i].path;
portOption.text = portText;

portSelect.add(portOption);
}

if (this.showVirtualMode) {
this.portPickerElement.append($("<option/>", {
value: 'virtual',
text: i18n.getMessage('portsSelectVirtual'),
/**
* @deprecated please avoid using `isDFU` and friends for new code.
*/
data: {isVirtual: true},
}));
}
this.addVirtualOption();
this.addManualOption();

this.portPickerElement.append($("<option/>", {
value: 'manual',
text: i18n.getMessage('portsSelectManual'),
/**
* @deprecated please avoid using `isDFU` and friends for new code.
*/
data: {isManual: true},
}));
if (!ports.length) { this.addNoPortsOption(); }

this.setPortsInputWidth();
return ports;
Expand Down
Loading

0 comments on commit f3c5a1d

Please sign in to comment.