split device port into local and remote ports

index.html

@@ -49,17 +49,33 @@
               <tr>
                 <th>Addr:</th>
                 <td colspan="3">
-                  <input id="device-settings-ip" type="text" maxlength="30" />
+                  <input id="device-settings-ip" type="text" maxlength="30" title="IP Address of the remote device" />
                 </td>
               </tr>
               <tr>
-                <th>Port:</th>
+                <th id="device-settings-port-label" title="'Receive' port on the remote device">Port:</th>
                 <td>
-                  <input id="device-settings-port" type="number" value="53000" maxlength="5" />
+                  <input
+                    id="device-settings-port"
+                    type="number"
+                    maxlength="5"
+                    title="'Receive' port on the remote device" />
                 </td>
                 <th>Pin:</th>
                 <td><input id="device-settings-pin" type="checkbox" /></td>
               </tr>
+              <tr id="device-settings-rx-port-row">
+                <th title="'Send' port on the remote device">Local:</th>
+                <td>
+                  <input
+                    id="device-settings-rx-port"
+                    type="number"
+                    maxlength="5"
+                    title="'Send' port on the remote device" />
+                </td>
+                <th></th>
+                <td></td>
+              </tr>
               <tbody id="device-settings-fields"></tbody>
             </table>
 

plugins/artnet/main.js

@@ -1,8 +1,8 @@
 exports.config = {
   defaultName: 'Art-Net',
   connectionType: 'UDPsocket',
-  defaultPort: 6454,
-  mayChangePort: false,
+  remotePort: 6454,
+  mayChangePorts: false,
   heartbeatInterval: 5000,
   heartbeatTimeout: 15000,
   searchOptions: {

plugins/digico/main.js

@@ -5,8 +5,9 @@ const path = require('path');
 exports.config = {
   defaultName: 'DiGiCo',
   connectionType: 'osc-udp',
-  defaultPort: 8000,
-  mayChangePort: true,
+  remotePort: 8000,
+  localPort: 8001,
+  mayChangePorts: true,
   heartbeatInterval: 2000,
   heartbeatTimeout: 11000,
   searchOptions: {
@@ -65,7 +66,7 @@ exports.data = function data(_device, oscData) {
     //   });
   } else if (properties[0] === 'Console' && properties[1] === 'Input_Channels') {
     for (let i = 1; i <= device.data.Console.Input_Channels; i++) {
-      device.send(`/Input_Channels/${i}/Channel_Input/name`);
+      device.send(`/Input_Channels/${i}/Channel_Input/name`); // yup, no ? at the end of this one
       device.send(`/Input_Channels/${i}/mute/?`);
       device.send(`/Input_Channels/${i}/solo/?`);
       device.send(`/Input_Channels/${i}/fader/?`);

plugins/eos/main.js

@@ -6,8 +6,8 @@ const Cue = require('./cue');
 exports.config = {
   defaultName: 'ETC Eos',
   connectionType: 'osc',
-  defaultPort: 3032,
-  mayChangePort: true,
+  remotePort: 3032,
+  mayChangePorts: true,
   heartbeatInterval: 5000,
   heartbeatTimeout: 6000,
   searchOptions: {

plugins/pjlink/main.js

@@ -3,8 +3,8 @@ const md5 = require('md5');
 exports.config = {
   defaultName: 'PJLink Projector',
   connectionType: 'TCPsocket',
-  defaultPort: 4352,
-  mayChangePort: false,
+  remotePort: 4352,
+  mayChangePorts: false,
   heartbeatInterval: 5000,
   heartbeatTimeout: 15000,
   searchOptions: {

plugins/qlab/main.js

@@ -5,8 +5,9 @@ const path = require('path');
 exports.config = {
   defaultName: 'QLab',
   connectionType: 'osc',
-  defaultPort: 53000,
-  mayChangePort: true,
+  remotePort: 53000,
+  localPort: 53001,
+  mayChangePorts: true,
   heartbeatInterval: 100,
   heartbeatTimeout: 5000,
   searchOptions: {

plugins/sacn/main.js

@@ -3,8 +3,8 @@ const _ = require('lodash');
 exports.config = {
   defaultName: 'sACN',
   connectionType: 'multicast',
-  defaultPort: 5568,
-  mayChangePort: false,
+  remotePort: 5568,
+  mayChangePorts: false,
   heartbeatInterval: 5000,
   heartbeatTimeout: 15000,
   searchOptions: {

plugins/shure/main.js

@@ -3,8 +3,8 @@ const Channel = require('./channel');
 exports.config = {
   defaultName: 'Shure Wireless',
   connectionType: 'TCPsocket',
-  defaultPort: 2202,
-  mayChangePort: false,
+  remotePort: 2202,
+  mayChangePorts: false,
   heartbeatInterval: 5000,
   heartbeatTimeout: 10000,
   searchOptions: {

plugins/watchout/main.js

@@ -1,8 +1,8 @@
 exports.config = {
   defaultName: 'Dataton Watchout',
   connectionType: 'TCPsocket',
-  defaultPort: 3040,
-  mayChangePort: false,
+  remotePort: 3040,
+  mayChangePorts: false,
   heartbeatInterval: 250,
   heartbeatTimeout: 5000,
   searchOptions: {

plugins/x32/main.js

@@ -1,8 +1,8 @@
 exports.config = {
   defaultName: 'X32 Mixer',
   connectionType: 'osc-udp',
-  defaultPort: 10023,
-  mayChangePort: false,
+  remotePort: 10023,
+  mayChangePorts: false,
   heartbeatInterval: 9000,
   heartbeatTimeout: 11000,
   searchOptions: {

plugins/xair/main.js

@@ -1,8 +1,8 @@
 exports.config = {
   defaultName: 'X Air Mixer',
   connectionType: 'UDPsocket',
-  defaultPort: 10024,
-  mayChangePort: false,
+  remotePort: 10024,
+  mayChangePorts: false,
   heartbeatInterval: 9000,
   heartbeatTimeout: 15000,
   searchOptions: {

preload.js

@@ -59,6 +59,11 @@ window.init = function init() {
     DEVICE.changeActivePort(e.target.value);
   };
 
+  document.getElementById('device-settings-rx-port').onchange = function portChange(e) {
+    e.stopPropagation();
+    DEVICE.changeActiveRxPort(e.target.value);
+  };
+
   document.getElementById('device-settings-pin').onchange = function pinChange(e) {
     e.stopPropagation();
     if (e.target.checked) {
@@ -99,7 +104,7 @@ window.init = function init() {
       {
         type: e.target.value,
         defaultName: 'New Device',
-        port: undefined,
+        remotePort: PLUGINS.all[e.target.value].config.remotePort || '',
         addresses: [],
       },
       'fromAddButton'

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();