Added serial monitor

Author: ShVerni

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "fabricaio-app",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "description": "App for configuring Fabrica-IO devices",
   "productName": "Fabrica-IO App",
   "author": "Sam Groveman <Groveman@fabrica-io.com>",

package.json

@@ -5,7 +5,7 @@ import { fileURLToPath } from 'url'
 import { initialize, enable } from '@electron/remote/main/index.js'
 import fs from 'fs/promises'
 import { spawn, execFile } from 'child_process'
-import { SerialPort } from 'serialport'
+import { SerialPort, ReadlineParser } from 'serialport'
 import AdmZip from 'adm-zip'
 import electronUpdater, { type AppUpdater } from 'electron-updater'
 
@@ -26,6 +26,46 @@ let mainWindow: BrowserWindow | undefined
 
 initialize()
 
+// Serial port management
+let serialport: SerialPort | null = null
+let parser: ReadlineParser | null = null
+
+// Close and cleanup serial port
+const closeSerialPort = async (): Promise<void> => {
+  return new Promise((resolve) => {
+    if (parser) {
+      parser.removeAllListeners('data')
+      parser.removeAllListeners('error')
+      parser.destroy()
+      parser = null
+    }
+
+    if (serialport) {
+      serialport.removeAllListeners('open')
+      serialport.removeAllListeners('error')
+      if (serialport.isOpen) {
+        serialport.close((err) => {
+          if (err) {
+            console.error('Error closing port:', err)
+          }
+          console.log('Serial port closed event fired')
+          if (serialport) {
+            serialport.destroy()
+          }
+          serialport = null
+          resolve()
+        })
+      } else {
+        serialport.destroy()
+        serialport = null
+        resolve()
+      }
+    } else {
+      resolve()
+    }
+  })
+}
+
 function createWindow() {
   // process.env.PATH += ':/run/host/usr/bin' // Possible Flatpak fix not currently in use
   /**
@@ -320,6 +360,79 @@ ipcMain.handle('get-serial-ports', async () => {
   }
 })
 
+// IPC handler to open serial port and start monitoring
+ipcMain.handle('serial:open', async (event, { path: portPath, baudRate }) => {
+  try {
+    // Close any existing port
+    await closeSerialPort()
+    await new Promise((resolve) => setTimeout(resolve, 100))
+
+    // Create new port with autoOpen disabled for manual control
+    serialport = new SerialPort({
+      path: portPath,
+      baudRate: baudRate || 115200,
+      autoOpen: false,
+    })
+
+    // Create parser for line-based data (one event per line)
+    parser = new ReadlineParser({ delimiter: '\n' })
+
+    // Register all event handlers before piping and opening the port
+    serialport.once('open', () => {
+      console.log('Serial port opened event fired')
+      mainWindow?.webContents.send('serial:opened')
+    })
+
+    serialport.on('error', (error) => {
+      console.error('Serial port error event:', error.message)
+      mainWindow?.webContents.send('serial:error', error.message)
+    })
+
+    // Parser data handler - fires for each complete line (delimiter = '\n')
+    parser.on('data', (line: string) => {
+      console.log('Parser received line:', line)
+      mainWindow?.webContents.send('serial:data', line)
+    })
+
+    parser.on('error', (error) => {
+      console.error('Parser error event:', error.message)
+      mainWindow?.webContents.send('serial:error', `Parser error: ${error.message}`)
+    })
+
+    // Pipe port to parser for later use if needed
+    console.log('Piping serialport to parser')
+    serialport.pipe(parser)
+
+    // Finally open the port
+    console.log('Opening serial port:', portPath)
+    serialport.open((err) => {
+      if (err) {
+        console.error('Failed to open port:', err.message)
+        mainWindow?.webContents.send('serial:error', err.message)
+      } else {
+        console.log('Serial port opened successfully')
+      }
+    })
+
+    return true
+  } catch (error) {
+    console.error('Error in serial:open:', error)
+    await closeSerialPort()
+    return false
+  }
+})
+
+// IPC handler to close serial port
+ipcMain.handle('serial:close', async () => {
+  try {
+    await closeSerialPort()
+    return true
+  } catch (error) {
+    console.error('Error closing serial port:', error)
+    return false
+  }
+})
+
 // IPC for flashing chips using esptool
 ipcMain.handle('flash-firmware', async (event, data): Promise<boolean> => {
   let command: string

src-electron/electron-main.ts

@@ -123,3 +123,35 @@ contextBridge.exposeInMainWorld('myWindowAPI', {
   },
   openExternal: (url: string) => ipcRenderer.invoke('open-external', url),
 })
+
+// Serial port monitoring API
+contextBridge.exposeInMainWorld('serialAPI', {
+  // Command handlers (promise-based)
+  openPort: (path: string, baudRate: number): Promise<boolean> =>
+    ipcRenderer.invoke('serial:open', { path, baudRate }),
+
+  closePort: (): Promise<boolean> => ipcRenderer.invoke('serial:close'),
+
+  // Event listeners (register persistent callbacks)
+  onOpened: (callback: () => void) => {
+    ipcRenderer.on('serial:opened', callback)
+  },
+
+  onData: (callback: (line: string) => void) => {
+    ipcRenderer.on('serial:data', (_event, line) => callback(line))
+  },
+
+  onError: (callback: (error: string) => void) => {
+    ipcRenderer.on('serial:error', (_event, error) => callback(error))
+  },
+
+  onClosed: (callback: () => void) => {
+    ipcRenderer.on('serial:closed', callback)
+  },
+  removeListeners: () => {
+    ipcRenderer.removeAllListeners('serial:opened')
+    ipcRenderer.removeAllListeners('serial:data')
+    ipcRenderer.removeAllListeners('serial:error')
+    ipcRenderer.removeAllListeners('serial:closed')
+  },
+})

src-electron/electron-preload.ts

@@ -108,6 +108,12 @@
               </q-item-section>
               <q-item-section> Upload Firmware </q-item-section>
             </q-item>
+            <q-item clickable v-close-popup @click="monitorSerialPort">
+              <q-item-section side class="menu-icon">
+                <q-icon name="terminal" />
+              </q-item-section>
+              <q-item-section>Monitor Serial Output</q-item-section>
+            </q-item>
             <q-separator />
             <q-item clickable v-close-popup @click="setOTADevice">
               <q-item-section side class="menu-icon">
@@ -360,7 +366,13 @@
         <pre id="build-output"></pre>
       </q-card-section>
       <q-card-actions align="right">
-        <q-btn flat label="OK" :disable="buildInProgress" color="primary" v-close-popup />
+        <q-btn
+          flat
+          label="OK"
+          :disable="buildInProgress || monitoring"
+          color="primary"
+          v-close-popup
+        />
         <q-btn flat label="Cancel" @click="cancelBuild" color="primary" />
       </q-card-actions>
     </q-card>
@@ -493,6 +505,7 @@ import { computed, ref, onMounted, onUnmounted } from 'vue'
 import { Dialog } from 'quasar'
 import type electronUpdater from 'electron-updater'
 import { useQuasar } from 'quasar'
+import { nextTick } from 'vue'
 
 // Quasar object
 const $q = useQuasar()
@@ -685,6 +698,90 @@ const getPortLabel = (portPath: string): string => {
   return portOptions.value.find((port) => port.value === portPath)?.label || portPath
 }
 
+// Serial monitoring variables
+const monitoring = ref(false)
+
+// Monitors serial port
+const monitorSerialPort = async () => {
+  if (monitoring.value || buildInProgress.value) {
+    return
+  }
+
+  if (portPath.value === '') {
+    createDialog('Error', 'No serial port selected')
+    return
+  }
+
+  monitoring.value = true
+  buildDialogOpen.value = true
+  await nextTick()
+  const outputElement = document.getElementById('build-output')
+
+  if (outputElement) {
+    outputElement.textContent = `Opening serial port: ${selectedPort.value?.label || 'Unknown'}\n`
+  }
+
+  try {
+    // Register event handlers before opening
+    window.serialAPI.onOpened(() => {
+      if (outputElement) {
+        outputElement.textContent += 'Serial port opened successfully. Monitoring...\n'
+      }
+    })
+
+    window.serialAPI.onData((line: string) => {
+      const outputElement = document.getElementById('build-output')
+      if (outputElement) {
+        outputElement.textContent += line + '\n'
+        outputElement.scrollTop = outputElement.scrollHeight
+      }
+    })
+
+    window.serialAPI.onError((error: string) => {
+      if (outputElement) {
+        outputElement.textContent += `Error: ${error}\n`
+      }
+      monitoring.value = false
+    })
+
+    window.serialAPI.onClosed(() => {
+      if (outputElement) {
+        outputElement.textContent += 'Serial port closed.\n'
+      }
+      monitoring.value = false
+    })
+
+    // Open the port
+    const baud = portSelectMode.value === 'advanced' ? parseInt(serialBaud.value) || 115200 : 115200
+    const success = await window.serialAPI.openPort(selectedPort.value?.value || '', baud)
+
+    if (!success) {
+      if (outputElement) {
+        outputElement.textContent += 'Failed to open serial port\n'
+      }
+      monitoring.value = false
+    }
+  } catch (error) {
+    if (outputElement) {
+      outputElement.textContent += `Error: ${error instanceof Error ? error.message : 'Unknown error'}\n`
+    }
+    monitoring.value = false
+  }
+}
+
+// Stops monitoring the serial port
+const stopMonitoringSerialPort = async () => {
+  // Remove any old listeners from previous sessions
+  window.serialAPI.removeListeners?.()
+  try {
+    await window.serialAPI.closePort()
+    monitoring.value = false
+  } catch (error) {
+    console.error('Error closing serial port:', error)
+    monitoring.value = false
+  }
+}
+
 // OTA variables
 const OTADialogOpen = ref(false)
 const OTAUpdateDialog = ref(false)
@@ -1206,7 +1303,7 @@ const writeMain = async (storage: string, pins: number[], wifi: string): Promise
 
 // Builds (compiles) project with PlatformIO docker container
 const compileWithDocker = async (): Promise<boolean> => {
-  if (!buildInProgress.value) {
+  if (!buildInProgress.value && !monitoring.value) {
     buildInProgress.value = true
     buildDialogOpen.value = true
     const command = 'docker'
@@ -1277,14 +1374,17 @@ const cancelBuild = async () => {
     if (success) {
       buildInProgress.value = false
     }
+  } else if (monitoring.value) {
+    stopMonitoringSerialPort()
+    buildDialogOpen.value = false
   } else {
     buildDialogOpen.value = false
   }
 }
 
 // Flashes firmware through serial
 const flashFirmware = async (): Promise<boolean> => {
-  if (!buildInProgress.value) {
+  if (!buildInProgress.value && !monitoring.value) {
     buildInProgress.value = true
     buildDialogOpen.value = true
     const dirChar = window.shell.platform === 'win32' ? '\\' : '/'

src/components/MenuBar.vue

@@ -58,5 +58,15 @@ declare global {
       >
       flashFirmware: (data: { port: string; baud: string; projPath: string }) => Promise<boolean>
     }
+    serialAPI: {
+      openPort: (path: string, baudRate: number) => Promise<boolean>
+      closePort: () => Promise<boolean>
+      onOpened: (callback: () => void) => void
+      onData: (callback: (line: string) => void) => void
+      onError: (callback: (error: string) => void) => void
+      onClosed: (callback: () => void) => void
+      removeAllListeners: () => Promise<boolean>
+      removeListeners: () => void
+    }
   }
 }