split device port into local and remote ports

src/assets/css/index.css

@@ -179,7 +179,8 @@ a {
 #device-settings #device-settings-plugin-dropdown {
   width: 170px;
 }
-#device-settings #device-settings-port {
+#device-settings #device-settings-port,
+#device-settings #device-settings-rx-port {
   width: 70px;
 }
 

src/device.js

@@ -27,6 +27,16 @@ function registerDevice(newDevice, discoveryMethod) {
     return false;
   }
 
+  // set the local port for the new device
+  let newLocalPort = newDevice.localPort;
+  if (!newLocalPort) {
+    if (PLUGINS.all[newDevice.type].config.localPort) {
+      newLocalPort = PLUGINS.all[newDevice.type].config.localPort;
+    } else {
+      newLocalPort = newDevice.remotePort;
+    }
+  }
+
   const id = newDevice.id || uuid();
   devices[id] = {
     id,
@@ -35,7 +45,8 @@ function registerDevice(newDevice, discoveryMethod) {
     type: newDevice.type,
     displayName: newDevice.displayName,
     defaultName: newDevice.defaultName,
-    port: newDevice.port,
+    remotePort: newDevice.remotePort,
+    localPort: newLocalPort,
     addresses: newDevice.addresses,
     data: {},
     fields: newDevice.fields || {},
@@ -79,11 +90,11 @@ function initDeviceConnection(id) {
 
   infoUpdate(device, 'status', 'new');
 
-  if (device.port === undefined) {
-    device.port = device.plugin.config.defaultPort;
+  if (device.remotePort === undefined) {
+    device.remotePort = device.plugin.config.defaultPort;
   }
 
-  if (device.port === undefined || device.addresses.length === 0) {
+  if (device.remotePort === undefined || device.addresses.length === 0) {
     return true;
   }
   try {
@@ -100,14 +111,14 @@ function initDeviceConnection(id) {
     if (plugins[type].config.connectionType.includes('udp')) {
       device.connection = new osc.UDPPort({
         localAddress: '0.0.0.0',
-        localPort: 8001, // added this line
+        localPort: device.localPort,
         remoteAddress: device.addresses[0],
-        remotePort: device.port,
+        remotePort: device.remotePort,
       });
     } else {
       device.connection = new osc.TCPSocketPort({
         address: device.addresses[0],
-        port: device.port,
+        port: device.remotePort,
       });
     }
     device.connection.open();
@@ -136,7 +147,7 @@ function initDeviceConnection(id) {
     device.connection = new net.Socket();
     device.connection.connect(
       {
-        port: device.port,
+        port: device.remotePort,
         host: device.addresses[0],
       },
       () => {}
@@ -164,7 +175,7 @@ function initDeviceConnection(id) {
   } else if (plugins[type].config.connectionType === 'UDPsocket') {
     device.connection = udp.createSocket('udp4');
 
-    device.connection.bind({ port: plugins[type].config.defaultPort }, () => {
+    device.connection.bind({ port: plugins[type].config.remotePort }, () => {
       plugins[type].ready(device);
 
       device.connection.on('message', (msg, info) => {
@@ -175,14 +186,14 @@ function initDeviceConnection(id) {
     });
 
     device.send = (data) => {
-      device.connection.send(Buffer.from(data), device.port, device.addresses[0], (err) => {
+      device.connection.send(Buffer.from(data), device.remotePort, device.addresses[0], (err) => {
         // console.log(err);
       });
     };
   } else if (plugins[type].config.connectionType === 'multicast') {
     device.connection = udp.createSocket('udp4');
 
-    device.connection.bind(device.port, () => {
+    device.connection.bind(device.remotePort, () => {
       plugins[type].ready(device);
 
       device.connection.on('message', (msg, info) => {
@@ -243,7 +254,7 @@ module.exports.changeActiveIP = function changeActiveIP(newIP) {
 
 module.exports.changeActivePort = function changeActivePort(newPort) {
   const device = VIEW.getActiveDevice();
-  device.port = newPort;
+  device.remotePort = newPort;
 
   initDeviceConnection(device.id);
   VIEW.draw(device);

src/saveSlots.js

@@ -62,7 +62,8 @@ module.exports.loadDevices = function loadDevices() {
         type: savedDevices[i].type,
         displayName: savedDevices[i].displayName,
         defaultName: savedDevices[i].defaultName,
-        port: savedDevices[i].port,
+        remotePort: savedDevices[i].remotePort,
+        localPort: savedDevices[i].localPort,
         addresses: savedDevices[i].addresses,
         id: savedDevices[i].id,
         fields: savedDevices[i].fields,
@@ -110,7 +111,8 @@ module.exports.saveAll = function saveAll() {
       type: device.type,
       displayName: device.displayName,
       defaultName: device.defaultName,
-      port: device.port,
+      remotePort: device.remotePort,
+      localPort: device.localPort,
       id: device.id,
       fields: device.fields,
     };

src/search.js

@@ -127,7 +127,7 @@ function searchBonjour(pluginType, pluginConfig) {
       {
         type: pluginType,
         defaultName: e.name,
-        port: e.port,
+        remotePort: e.port,
         addresses: validAddresses,
       },
       'fromSearch'
@@ -154,7 +154,7 @@ function TCPtest(ipAddr, pluginType, pluginConfig) {
           {
             type: pluginType,
             defaultName: pluginConfig.defaultName,
-            port: pluginConfig.defaultPort,
+            remotePort: pluginConfig.remotePort,
             addresses: [ipAddr],
           },
           'fromSearch'
@@ -182,7 +182,7 @@ function searchUDP(pluginType, pluginConfig) {
             {
               type: pluginType,
               defaultName: pluginConfig.defaultName,
-              port: pluginConfig.defaultPort,
+              remotePort: pluginConfig.remotePort,
               addresses: [info.address],
             },
             'fromSearch'
@@ -214,7 +214,7 @@ function searchMulticast(pluginType, pluginConfig) {
           {
             type: pluginType,
             defaultName: pluginConfig.defaultName,
-            port: pluginConfig.defaultPort,
+            remotePort: pluginConfig.remotePort,
             addresses: [info.address],
           },
           'fromSearch'

src/view.js

@@ -74,7 +74,7 @@ function generateBodyHTML(d) {
     str += "<div class='not-responding'>";
     str += `<h2><em>${d.type}</em> is not responding to requests for data.</h2>`;
     str += `<h3>IP <em>${d.addresses[0]}</em></h3>`;
-    str += `<h3>Port <em>${d.port}</em></h3>`;
+    str += `<h3>Port <em>${d.remotePort}</em></h3>`;
     str += '<hr></div>';
     str += `<div class="device-info">${PLUGINS.all[d.type].info()}<div>`;
   }
@@ -173,13 +173,24 @@ function switchDevice(id) {
   document.getElementById('device-settings-plugin-dropdown').value = activeDevice.type;
   document.getElementById('device-settings-name').value = activeDevice.displayName || activeDevice.defaultName || '';
   document.getElementById('device-settings-ip').value = activeDevice.addresses[0] || '';
-  document.getElementById('device-settings-port').value = activeDevice.port || '';
+  document.getElementById('device-settings-port').value = activeDevice.remotePort || '';
   document.getElementById('device-settings-pin').checked = activeDevice.pinIndex;
 
-  if (activeDevice.plugin.config.mayChangePort) {
+  if (activeDevice.plugin.config.mayChangePorts) {
     document.getElementById('device-settings-port').disabled = false;
+    document.getElementById('device-settings-rx-port').disabled = false;
   } else {
     document.getElementById('device-settings-port').disabled = true;
+    document.getElementById('device-settings-rx-port').disabled = true;
+  }
+
+  if (activeDevice.plugin.config.localPort) {
+    // document.getElementById('device-settings-port-label').textContent = 'Remote\nPort:';
+    document.getElementById('device-settings-rx-port-row').style.display = 'table-row';
+    document.getElementById('device-settings-rx-port').value = activeDevice.localPort || '';
+  } else {
+    document.getElementById('device-settings-port-label').textContent = 'Port:';
+    document.getElementById('device-settings-rx-port-row').style.display = 'none';
   }
 
   updateFields();