added serial debug interface

Author: JanLunge

README.md

@@ -23,8 +23,9 @@ then just run it with dev to start
 # Tasks
 ## urgent
 - [x] check if a keyboard is connected (usb drive) in the keyboard selector preview
-- [ ] show serial output in the gui
-- [ ] guides etc for setup + split workflow
+- [x] show serial output in the gui
+- [ ] automatically get the correct serial device (by serial number)
+- [ ] guides etc for setup + split workflow | help menu + videos
 - [ ] share pog.json files
 - [ ] check if the controller you use even has the pin you specified (controller lookup and serial to get pins )
 - [ ] bluetooth workflow

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pog",
-  "version": "0.9.5",
+  "version": "1.0.0",
   "description": "A KMK firmware configurator",
   "main": "./out/main/index.js",
   "author": "Jan Lunge",

src/main/index.ts

@@ -2,7 +2,7 @@ import { app, shell, BrowserWindow, ipcMain, Menu } from 'electron'
 import { join } from 'path'
 import { electronApp, optimizer, is } from '@electron-toolkit/utils'
 import icon from '../../resources/icon.png?asset'
-import {checkForUSBKeyboards, handleSelectDrive, selectKeyboard} from './selectKeyboard'
+import { checkForUSBKeyboards, handleSelectDrive, selectKeyboard } from './selectKeyboard'
 import { updateFirmware } from './kmkUpdater'
 import { handleKeymapSave, saveConfiguration } from './saveConfig'
 import { autoUpdater } from 'electron-updater'
@@ -125,7 +125,8 @@ const createWindow = async () => {
     ...(process.platform === 'linux' ? { icon } : {}),
     webPreferences: {
       preload: join(__dirname, '../preload/index.js'),
-      sandbox: false
+      sandbox: false,
+      experimentalFeatures: true
     }
   })
 
@@ -178,6 +179,22 @@ app.on('window-all-closed', () => {
     app.quit()
   }
 })
+app.on('before-quit', (event) => {
+  // Prevent the default behavior of this event
+  if (debugPort !== undefined) {
+    event.preventDefault()
+
+    console.log('Preparing to quit...')
+    debugPort.close(() => {
+      console.log('Port closed')
+      debugPort = undefined
+      app.quit()
+    })
+  } else {
+    // Now allow the app to continue quitting
+    app.quit()
+  }
+})
 
 // 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.
@@ -193,6 +210,10 @@ ipcMain.handle('updateFirmware', () => updateFirmware())
 ipcMain.on('saveConfiguration', (_event, data) => saveConfiguration(data))
 ipcMain.handle('checkForUSBKeyboards', (_event, data) => checkForUSBKeyboards(data))
 ipcMain.handle('selectKeyboard', (_event, data) => selectKeyboard(data))
+ipcMain.handle('serialPorts', (_event, data) => checkSerialDevices())
+ipcMain.on('serialSend', (_event, data) => sendSerial(data))
+ipcMain.handle('serialConnect', (_event, data) => serialConnect(data))
+ipcMain.handle('openExternal', (_event, data) => openExternal(data))
 
 autoUpdater.on('update-available', () => {
   if (mainWindow) mainWindow.webContents.send('update_available')
@@ -246,7 +267,7 @@ const scanForKeyboards = async () => {
     circuitPythonPorts.map(async (a) => await timeout(getBoardInfo(a), 2000))
   )) as {
     status: 'fulfilled' | 'rejected'
-    value:  { name: string; id: string; path: string }
+    value: { name: string; id: string; path: string }
   }[]
   const filteredBoards: { name: string; id: string; path: string }[] = boards
     .filter((a) => a.value !== undefined)
@@ -435,3 +456,73 @@ const deselectKeyboard = () => {
     connectedKeyboardPort.close()
   }
 }
+
+const sendSerial = (message) => {
+  console.log('sending serial', message)
+  mainWindow?.webContents.send('serialData', { message: `> sent: ${message}\n` })
+  if (message === 'ctrlc') {
+    message = Buffer.from('\x03\x03', 'utf8')
+  } else if (message === 'ctrld') {
+    message = Buffer.from('\x04', 'utf8')
+  } else {
+    const buffermessage = Buffer.from(message + `\r\n`, 'utf8')
+    message = buffermessage
+  }
+  debugPort.write(message, (err) => {
+    if (err) {
+      console.error('error sending serial', err)
+    }
+  })
+}
+
+const checkSerialDevices = async () => {
+  try {
+    console.log('checking serial devices')
+    const ports = await serialPort.SerialPort.list()
+
+    if (ports.length === 0) {
+      console.log('No serial ports found')
+      return []
+    }
+
+    const returnPorts = ports.map((port) => {
+      return {
+        port: port.path,
+        manufacturer: port.manufacturer,
+        serialNumber: port.serialNumber,
+        // Add more attributes here if needed
+      }
+    })
+    console.log('found serial ports', returnPorts)
+    return returnPorts
+  } catch (error) {
+    console.error('Error fetching the list of serial ports:', error)
+    return []
+  }
+}
+
+let debugPort: any = undefined
+const serialConnect = async (port) => {
+  if (debugPort !== undefined) {
+    debugPort.close(() => {
+      console.log('closed serial port')
+      debugPort = undefined
+    })
+  }
+  console.log('connecting to serial port', port)
+  try {
+    debugPort = new serialPort.SerialPort({ path: port, baudRate, autoOpen: true }, (e) => {})
+    const parser = debugPort.pipe(new ReadlineParser({ delimiter: '\n' }))
+    parser.on('data', (data) => {
+      console.log('got data from serial', data)
+      mainWindow?.webContents.send('serialData', { message: data })
+    })
+    console.log('connected to serial port and listening for messages', port)
+  } catch (e) {
+    console.log('error connecting to serial port', e)
+  }
+}
+
+const openExternal = (url) => {
+  shell.openExternal(url)
+}

src/main/selectKeyboard.ts

@@ -45,15 +45,19 @@ const loadKeyboard = async (path) => {
 }
 export const selectKeyboard = async ({ path, id }: { path: string; id: string }) => {
   console.log(path,id)
+  if(id){
+    // connect serial if available
+    const port = serialBoards.value.find((a) => a.id === id)
+    if(!port) return { error:'not a serial keyboard' }
+    console.log(serialBoards, id)
+    await connectSerialKeyboard(port)
+    connectedKeyboardPort.write('info\n')
+  }
   if (path) {
     console.log('checking keyboard files for', path)
     return await loadKeyboard(path)
   } else if (id) {
     console.log('connecting serial keyboard')
-    const port = serialBoards.value.find((a) => a.id === id)
-    console.log(serialBoards, id)
-    await connectSerialKeyboard(port)
-    connectedKeyboardPort.write('info\n')
     return { success: true }
   }
   return { error: 'not all args provided' }

src/preload/index.ts

@@ -17,8 +17,14 @@ export const API = {
   },
   rescanKeyboards: () => ipcRenderer.invoke('rescanKeyboards'),
   checkForUSBKeyboards: (data) => ipcRenderer.invoke('checkForUSBKeyboards', data),
-  deselectKeyboard: () => ipcRenderer.invoke('deselectKeyboard')
-
+  deselectKeyboard: () => ipcRenderer.invoke('deselectKeyboard'),
+  serialData: (callback) =>
+    ipcRenderer.on('serialData', callback),
+  serialPorts: () =>
+    ipcRenderer.invoke('serialPorts'),
+  serialSend: (data) => ipcRenderer.send('serialSend', data),
+  serialConnect: (data) => ipcRenderer.invoke('serialConnect', data),
+  openExternal: (data) => ipcRenderer.invoke('openExternal', data),
 }
 
 // Use `contextBridge` APIs to expose Electron APIs to

src/renderer/src/App.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import {addToHistory, keyboardHistory, keyboardStore, notifications, serialKeyboards} from './store'
+import {addToHistory, keyboardStore, notifications, serialKeyboards} from './store'
 import { useRouter} from "vue-router";
 const router = useRouter()
 const store = computed(() => {

src/renderer/src/components/KmkInstaller.vue

@@ -26,12 +26,16 @@
       </div>
     </div>
     <div class="mt-8 flex justify-center">
-      <button class="btn-primary btn mt-4 block" @click="$emit('next')">
-        {{ keyboardStore.firmwareInstalled ? 'Next' : 'skip' }}
+      <button v-if="keyboardStore.firmwareInstalled" class="btn btn-primary mt-4 block" @click="$emit('next')">
+        Next
+      </button>
+      <button v-else class="btn mt-4 block" @click="$emit('next')">
+              I install it manually
+
       </button>
     </div>
     <div v-if="[''].includes(kmkInstallState)" class="mt-8 flex justify-center items-center flex-col">
-      <button class="btn-primary btn mt-8" @click="updateKMK">install KMK</button>
+      <button class="btn-primary btn mt-8" @click="updateKMK"> {{keyboardStore.firmwareInstalled? 'update': 'install'}} KMK</button>
 
     </div>
     <div class="mt-4 flex flex-col items-center justify-center" v-if="['downloading', 'copying', 'unpacking'].includes(kmkInstallState)" >

src/renderer/src/components/debug.vue

@@ -1,11 +1,85 @@
 <template>
-  $END$
+  here you can connect to a keyboard via serial for more verbose debug output <br />
+  not this is still very much a work in progress <br />
+  first create a reload key on your keymap and press it to reload the keyboard <br />
+  then press connect to connect to the keyboard (the keyboard has 2 serial consoles connect to the
+  first one with the lower number for debugging) <br />
+  then you can see the output below <br />
+  if the output does not appear unplug and replug the keyboard and try again (this is the WIP
+  part)<br />
+
+  <div>
+    <div class="mb-2 flex justify-between gap-2">
+      <select v-model="selectedPort" class="select">
+        <option v-for="port in sortedPorts" :key="port.port" :value="port.port">
+          {{ port.manufacturer }} - {{ port.port }} - {{ port.serialNumber }}
+        </option>
+      </select>
+      <button class="btn" @click="connect">connect</button>
+    </div>
+    <textarea
+      v-model="output"
+      class="textarea w-full p-2"
+      style="min-height: 200px"
+      readonly
+    ></textarea>
+    <div class="flex gap-2">
+      <input v-model="inputData" class="input input-sm w-full" @keyup.enter="sendData" />
+      <button class="btn-sm btn" @click="sendData">Send</button>
+    </div>
+    <div class="flex">
+      <button class="btn-sm btn" @click="enterRepl">enter REPL</button>
+      <button class="btn-sm btn" @click="exitRepl">exit REPL</button>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
+import {computed, onMounted, ref} from 'vue'
+import {keyboardStore} from "../store";
 
-</script>
+const output = ref('')
+const inputData = ref('')
+const ports = ref<any[]>([])
+const selectedPort = ref('')
+const sortedPorts = computed(() => {
+  return [ ...ports.value ].sort((a, b) => {
+    if (a.port < b.port) {
+      return -1
+    }
+    if (a.port > b.port) {
+      return 1
+    }
+    return 0
+  }).filter(a=>a.serialNumber !== undefined)
+})
+onMounted(async () => {
+  ports.value = await window.api.serialPorts()
+  // select default port for the one with the current serial number
 
-<style lang="scss" scoped>
+  window.api.serialData((event, data) => {
+    console.log(event, data)
+    output.value += data.message
+  })
+  console.log(keyboardStore)
+})
+
+const sendData = () => {
+  window.api.serialSend(inputData.value)
+  inputData.value = ''
+}
+const connect = () => {
+  window.api.serialConnect(selectedPort.value)
+}
+const enterRepl = () => {
+  window.api.serialSend('ctrlc')
+  setTimeout(() => {
+    window.api.serialSend('ctrlc')
+  }, 1000)
+}
+const exitRepl = () => {
+  window.api.serialSend('ctrld')
+}
+</script>
 
-</style>
+<style lang="scss" scoped></style>

src/renderer/src/helpers/index.ts

@@ -306,7 +306,10 @@ export const renderLabel = (keycode: string) => {
     MRWD: { label: 'Prev Track', icon: 'mdi-skip-previous' },
     MFFD: { label: 'Next Track', icon: 'mdi-skip-next' },
     send_string: { label: 'String' },
-    RESET: { label: 'Reset' }
+    RESET: { label: 'Reset' },
+    RELOAD: { label: 'Reload' },
+        DEBUG: { label: 'Debug' }
+
   }
 
   const keylabel: {

src/renderer/src/router/index.ts

@@ -13,6 +13,7 @@ import RawKeymapEditor from '../components/RawKeymapEditor.vue'
 import KeyboardName from '../components/KeyboardName.vue'
 import CoordMap from '../components/CoordMap.vue'
 import Community from "../components/Community.vue";
+import Debug from "../components/debug.vue";
 
 const router = createRouter({
   history: createWebHashHistory(),
@@ -90,6 +91,11 @@ const router = createRouter({
           path: 'community',
           component: Community,
           name: 'Community'
+        },
+        {
+          path: 'debug',
+          component: Debug,
+          name: 'Debug'
         }
       ]
     }