Merge pull request #14 from Open-STEM/serialport_development

Serialport development

Author: srijanduggal17

app/electron/main.js

@@ -5,6 +5,7 @@ const { app, BrowserWindow, ipcMain, dialog } = require('electron');
 const path = require('path');
 const fs = require('fs');
 const drivelist = require('drivelist');
+const { SerialPort } = require('serialport');
 var AsyncPolling = require('async-polling');
 
 if (require('electron-squirrel-startup')) return app.quit();
@@ -40,6 +41,10 @@ createWindow = () => {
   // mainWindow.webContents.openDevTools()
 }
 
+var currentlyConnectedPorts = [];
+var currentlyConnectedPortObjects = {};
+var stoppingPorts = false;
+
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
@@ -70,15 +75,75 @@ app.whenReady().then(() => {
         end();
       });
   }, 3000).run();
+
+  // Check for port changes every 3 seconds
+  AsyncPolling(function (end) { 
+    if (!stoppingPorts) {
+      SerialPort.list()
+      .then(availablePorts => {
+        // See if any ports are connected
+        if (availablePorts.length > 0) {
+          const currentPortPath = availablePorts[0]['path'];
+          if (!currentlyConnectedPorts.includes(currentPortPath)) {
+            // Open a port if it is not already connected
+            const serialport = new SerialPort({ path: currentPortPath, baudRate: 9600 });
+            currentlyConnectedPorts.push(currentPortPath);
+            currentlyConnectedPortObjects[currentPortPath] = serialport;
+            // Switches the port into "flowing mode"
+            serialport.on('readable', function () {
+              if (!stoppingPorts) {
+                mainWindow.webContents.send('bot-com-port', {
+                  'port': currentPortPath,
+                  'data': serialport.read().toString()
+                });
+              }
+            })
+            serialport.on('close', () => {
+              currentlyConnectedPorts = currentlyConnectedPorts.filter(x => x !== currentPortPath);
+              delete currentlyConnectedPortObjects[currentPortPath];
+            })
+          }
+        } else {
+          console.log("No devices plugged in");
+        }
+        end();
+      })
+      .catch(err => {
+        end();
+      });
+    }
+  }, 3000).run();
 })
 
+/*
+  Check every 3 seconds if 
+  When a new path exists, make a new port from the path and trigger the callback.
+  If no path exists, 
+*/
+
 // Quit when all windows are closed, except on macOS. There, it's common
 // for applications and their menu bar to stay active until the user quits
 // explicitly with Cmd + Q.
 app.on('window-all-closed', () => {
   if (process.platform !== 'darwin') app.quit()
 })
 
+app.on('will-quit',function(){
+  stoppingPorts = true;
+  for (const [portname, portobj] of Object.entries(currentlyConnectedPortObjects)) {
+    portobj.close();
+    delete currentlyConnectedPortObjects[portname];
+  }
+});
+  
+app.on('quit',function(){
+  stoppingPorts = true;
+  for (const [portname, portobj] of Object.entries(currentlyConnectedPortObjects)) {
+    portobj.close();
+    delete currentlyConnectedPortObjects[portname];
+  }
+});
+
 // In this file you can include the rest of your app's specific main process
 // code. You can also put them in separate files and require them here.
 function getMainWindow() {

app/electron/preload.js

@@ -12,6 +12,7 @@ contextBridge.exposeInMainWorld(
     openFile: () => ipcRenderer.invoke('open-file'),
     uploadCode: (code) => ipcRenderer.invoke('upload-code', code),
     loadAppState: () => ipcRenderer.invoke('load-appstate'),
-    robotConnected: (callback) => ipcRenderer.on('bot-connected', callback)
+    robotConnected: (callback) => ipcRenderer.on('bot-connected', callback),
+    robotCOMStream: (callback) => ipcRenderer.on('bot-com-port', callback)
   }
 );

app/src/ui/pythonregion.js

@@ -3,6 +3,8 @@ const toggleClosedDiv = document.getElementById("toggleClosed");
 
 const pythonArea = document.getElementById("textArea");
 const blocklyArea = document.getElementById("blocklyArea");
+const comTitle = document.getElementById("comport_title");
+const comData = document.getElementById("comport_data");
 
 
 toggleClosedDiv.addEventListener("click", () => {
@@ -38,4 +40,24 @@ toggleIconsArr.forEach(x => {
     el.onmouseout = () => {
         el.style.color = '';
     }
+});
+
+var streamToDisplay = ""
+const charactersToShow = 1000;
+var currentlyDisplayedPort = ""
+
+window.api.robotCOMStream((_event, rawObject) => {
+    if (rawObject.port == currentlyDisplayedPort) {
+        streamToDisplay += rawObject.data;
+        streamToDisplay = streamToDisplay.slice(-charactersToShow);
+        // console.log(currentlyDisplayedPort);
+        // console.log(streamToDisplay);   
+        comData.innerHTML = streamToDisplay;
+    } else {
+        currentlyDisplayedPort = rawObject.port;
+        streamToDisplay = "";
+        comTitle.innerHTML = currentlyDisplayedPort;
+        comData.innerHTML = streamToDisplay;
+    }
+
 });

index.html

@@ -845,7 +845,11 @@
           <i class="fa-solid fa-angle-right fa-2x"></i>
         </div>
         <div id="textArea" height="100%" width="100%">
-          <pre style="height:90vh; overflow:scroll;"><code id="codeLine" class="python"></code>
+          <pre style="height:60vh; overflow:scroll;"><code id="codeLine" class="python"></code></pre>
+          <div style="height:22vh; overflow:scroll;">
+            <p id="comport_title"></p>
+            <pre id="comport_data"></pre>
+          </div>
         </div>
       </div>
     </div>