Add Shepherd overlay and double video feed

main/MenuTemplate/DebugMenu.ts

@@ -67,6 +67,13 @@ const DebugMenu: MenuItemConstructorOptions = {
         });
       },
     },
+
+    {
+      label: 'Toggle Videofeed DevTools',
+      click() {
+        RendererBridge.toggleWindowDevtools('video_feed');
+      },
+    },
   ],
 };
 

main/main-process.ts

@@ -61,6 +61,8 @@ export default function showAPI() {
 }
 
 app.on('ready', () => {
+  let videoWindow: BrowserWindow | null = null;
+
   Runtime.setup();
   ipcMain.on('FC_CONFIG_CHANGE', FCObject.changeFCInfo);
   ipcMain.on('FC_INITIALIZE', initializeFC);
@@ -73,6 +75,31 @@ app.on('ready', () => {
     }
   });
 
+  ipcMain.on('SHOW_VIDEO_FEED', () => {
+    if (!videoWindow) {
+      videoWindow = new BrowserWindow({
+        webPreferences: {
+          nodeIntegration: true,
+          enableRemoteModule: true,
+        },
+        width: 1000,
+        height: 700,
+      });
+      RendererBridge.registerWindow('video_feed', videoWindow);
+      videoWindow.on('closed', () => {
+        videoWindow = null;
+      });
+      videoWindow.maximize();
+      videoWindow.loadURL(`file://${__dirname}/../static/video-feed/video.html`);
+      videoWindow.webContents.on('dom-ready', () => RendererBridge.dispatch('video_feed', 'shepherdScoreboardServerIpAddress', FCObject.bridgeAddress))
+      videoWindow.on('ready-to-show', () => {
+        if (videoWindow) {
+          videoWindow.show();
+        }
+      });
+    }
+  })
+
   // Binding for the main process to inject into Redux workflow
   RendererBridge.registerWindow('main', mainWindow);
 

main/networking/FieldControl.ts

@@ -20,7 +20,7 @@ class FCInternals {
   }
 
   init() {
-    this.socket = io(`http://${this.bridgeAddress}:7000`);
+    this.socket = io.connect(this.bridgeAddress);
     this.socket.on('connect', () => {
       this.logger.log('Connected to Field Control Socket');
       this.socket!.on('robot_state', (data: any) => {
@@ -76,6 +76,7 @@ export const FCObject = {
 
     if (arg.bridgeAddress !== null) {
       FCObject.bridgeAddress = arg.bridgeAddress;
+      RendererBridge.dispatch('video_feed', 'shepherdScoreboardServerIpAddress', arg.bridgeAddress);
     }
   },
 };

main/networking/Runtime.ts

@@ -5,7 +5,7 @@ import * as protos from '../../protos/protos';
 
 import RendererBridge from '../RendererBridge';
 import { updateConsole } from '../../renderer/actions/ConsoleActions';
-import { runtimeDisconnect, infoPerMessage } from '../../renderer/actions/InfoActions';
+import { runtimeConnect, runtimeDisconnect } from '../../renderer/actions/InfoActions';
 import { updatePeripherals } from '../../renderer/actions/PeripheralActions';
 import { Logger, defaults } from '../../renderer/utils/utils';
 import { Peripheral } from '../../renderer/types';
@@ -153,6 +153,7 @@ class UDPTunneledConn {
   udpForwarder: UDPSocket;
   ip: string;
   port: number;
+  connectionInterval: ReturnType<typeof setInterval>;
 
   constructor(logger: Logger) {
     this.logger = logger;
@@ -161,7 +162,7 @@ class UDPTunneledConn {
     this.tcpSocket = new TCPSocket();
 
     // Connect to most recent IP
-    setInterval(() => {
+    this.connectionInterval = setInterval(() => {
       if (!this.tcpSocket.connecting && this.tcpSocket.pending) {
         if (this.ip !== defaults.IPADDRESS) {
           if (this.ip.includes(':')) {
@@ -235,6 +236,7 @@ class UDPTunneledConn {
       this.tcpSocket.end();
     }
     this.udpForwarder.close();
+    clearInterval(this.connectionInterval);
     ipcMain.removeListener('udpTunnelIpAddress', this.ipAddressListener);
   };
 }
@@ -243,13 +245,14 @@ class TCPConn {
   logger: Logger;
   socket: TCPSocket;
   leftoverBytes: Buffer | undefined;
+  connectionInterval: ReturnType<typeof setInterval>;
 
   constructor(logger: Logger) {
     this.logger = logger;
     this.socket = new TCPSocket();
 
     // Connect to most recent IP
-    setInterval(() => {
+    this.connectionInterval = setInterval(() => {
       if (!this.socket.connecting && this.socket.pending) {
         if (runtimeIP !== defaults.IPADDRESS) {
           let port = DEFAULT_TCP_PORT;
@@ -267,6 +270,7 @@ class TCPConn {
 
     this.socket.on('connect', () => {
       this.logger.log('Runtime connected');
+      RendererBridge.reduxDispatch(runtimeConnect());
       this.socket.write(new Uint8Array([1])); // Runtime needs first byte to be 1 to recognize client as Dawn (instead of Shepherd)
     });
 
@@ -402,7 +406,9 @@ class TCPConn {
   };
 
   close = () => {
+    RendererBridge.reduxDispatch(runtimeDisconnect());
     this.socket.end();
+    clearInterval(this.connectionInterval);
     ipcMain.removeListener('runModeUpdate', this.sendRunMode);
     ipcMain.removeListener('ipAddress', this.ipAddressListener);
     ipcMain.removeListener('initiateLatencyCheck', this.initiateLatencyCheck);
@@ -427,7 +433,6 @@ class UDPConn {
     });
 
     this.socket.on('close', () => {
-      RendererBridge.reduxDispatch(runtimeDisconnect());
       this.logger.log('UDP connection closed');
     });
 
@@ -438,7 +443,6 @@ class UDPConn {
      */
     this.socket.on('message', (msg: Uint8Array) => {
       try {
-        RendererBridge.reduxDispatch(infoPerMessage());
         const sensorData: protos.Device[] = protos.DevData.decode(msg).devices;
         // Need to convert protos.Device to Peripheral here because when dispatching to the renderer over IPC,
         // some of the inner properties (i.e. device.uid which is a Long) loses its prototype, which means any

package.json

@@ -113,13 +113,17 @@
     "bufferutil": "4.0.1",
     "create-react-class": "15.6.2",
     "electron-json-storage": "4.0.2",
+    "html-loader": "^0.5.5",
+    "html-react-parser": "^1.2.4",
     "immutable": "3.8.2",
+    "jquery": "^3.6.0",
     "json-loader": "0.5.7",
     "keymirror": "0.1.1",
     "lodash": ">=4.17.19",
     "mousetrap": "1.6.1",
     "numeral": "2.0.6",
     "object-assign": "4.1.1",
+    "ovenplayer": "^0.10.0-alpha.1",
     "patch-package": "^6.2.2",
     "postinstall-postinstall": "^2.1.0",
     "prop-types": "15.6.0",
@@ -135,7 +139,7 @@
     "redux-saga": "^1.1.3",
     "seedrandom": "2.4.3",
     "smalltalk": "^4.0.6",
-    "socket.io-client": "^2.3.0",
+    "socket.io-client": "^4.0.0",
     "ssh2": "^0.8.9",
     "superagent": "3.8.2",
     "ts-node": "^9.0.0",

renderer/components/ConfigBox.tsx

@@ -69,11 +69,11 @@ export const ConfigBoxComponent = (props: Props) => {
       if (err) {
         logging.log(err);
       }
-    })
+    });
 
     const newConfig = {
       stationNumber: stationNumber,
-      bridgeAddress: fcAddress,
+      bridgeAddress: fcAddress
     };
     props.onFCUpdate(newConfig);
     setOriginalStationNumber(stationNumber);
@@ -97,7 +97,7 @@ export const ConfigBoxComponent = (props: Props) => {
 
   const handleSSHIpChange = (e: React.FormEvent<FormControl & HTMLInputElement>) => {
     setSSHAddress(e.currentTarget.value);
-  }
+  };
 
   const handleFcChange = (e: React.FormEvent<FormControl & HTMLInputElement>) => {
     setFCAddress(e.currentTarget.value);
@@ -120,7 +120,9 @@ export const ConfigBoxComponent = (props: Props) => {
     if (defaults.NGROK) {
       return false;
     }
-    return getValidationState(ipAddress) === 'error' || getValidationState(fcAddress) === 'error' || (stationNumber < 0 && stationNumber > 4);
+    return (
+      getValidationState(ipAddress) === 'error' || getValidationState(fcAddress) === 'error' || (stationNumber < 0 && stationNumber > 4)
+    );
   };
 
   useEffect(() => {
@@ -204,12 +206,22 @@ export const ConfigBoxComponent = (props: Props) => {
             <FormControl.Feedback />
           </FormGroup>
 
+          {defaults.NGROK ? (
+            <FormGroup controlId="fcAddress" validationState={getValidationState(fcAddress)}>
+              <ControlLabel>Overlay URL</ControlLabel>
+              <FormControl type="text" value={fcAddress} placeholder="https://92309a8s09.ngrok.io" onChange={handleFcChange} />
+              <FormControl.Feedback />
+            </FormGroup>
+          ) : null}
+
           <p>Field Control Settings</p>
-          <FormGroup controlId="fcAddress" validationState={getValidationState(fcAddress)}>
-            <ControlLabel>Field Control IP Address</ControlLabel>
-            <FormControl type="text" value={fcAddress} placeholder="i.e. 192.168.100.13" onChange={handleFcChange} />
-            <FormControl.Feedback />
-          </FormGroup>
+          {!defaults.NGROK ? (
+            <FormGroup controlId="fcAddress" validationState={getValidationState(fcAddress)}>
+              <ControlLabel>Field Control IP Address</ControlLabel>
+              <FormControl type="text" value={fcAddress} placeholder="i.e. 192.168.100.13" onChange={handleFcChange} />
+              <FormControl.Feedback />
+            </FormGroup>
+          ) : null}
 
           <FormGroup controlId="stationNumber" validationState={stationNumber >= 0 && stationNumber <= 4 ? 'success' : 'error'}>
             <ControlLabel>Field Control Station Number</ControlLabel>
@@ -244,7 +256,7 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
 
 const mapStateToProps = (state: ApplicationState) => ({
   stationNumber: state.fieldStore.stationNumber,
-  fcAddress: state.fieldStore.bridgeAddress,
+  fcAddress: state.fieldStore.bridgeAddress
 });
 
 export const ConfigBox = connect(mapStateToProps, mapDispatchToProps)(ConfigBoxComponent);

renderer/components/DNav.tsx

@@ -7,6 +7,7 @@ import { StatusLabel } from './StatusLabel';
 import { TooltipButton } from './TooltipButton';
 import { VERSION } from '../consts';
 import { robotState } from '../utils/utils';
+import { ipcRenderer } from 'electron';
 
 interface StateProps {
   runtimeVersion: string;
@@ -154,6 +155,15 @@ const DNavComponent = (props: Props) => {
                 id="update-software-button"
                 glyph="cloud-upload"
               />
+              <TooltipButton
+                placement="bottom"
+                text="Open Video Feed"
+                bsStyle="info"
+                onClick={() => ipcRenderer.send('SHOW_VIDEO_FEED')}
+                id="show-video-feed-button"
+                glyph="play"
+                disabled={false}
+              />
             </ButtonGroup>
           </ButtonToolbar>
         </Navbar.Form>

renderer/components/Editor.tsx

@@ -328,8 +328,14 @@ export class Editor extends React.Component<Props, State> {
     // NOT THE ACTION updateKeyboardBitmap. THIS IS A LOCAL FUNCTION
     this.updateKeyboardBitmap(e.key, false);
   }
+
   turnCharacterOn = (e: KeyboardEvent) => {
-    this.updateKeyboardBitmap(e.key, true)
+    // Handle special ctrl + q edge case
+    if (e.ctrlKey && e.key === 'q') {
+      this.props.onUpdateKeyboardModeToggle(false);
+    } else {
+      this.updateKeyboardBitmap(e.key, true);
+    }
   }
 
   upload = () => {

renderer/components/video-feed/ShepherdOverlay.tsx

@@ -0,0 +1,11 @@
+import parse from 'html-react-parser';
+import './scoreboard';
+import '../../../static/video-feed/scoreboard.css';
+
+const shepherdScoreHtml = require('../../../static/video-feed/scoreboard.html');
+
+export const ShepherdOverlay = () => {
+  return (
+    parse(shepherdScoreHtml)
+  );
+};