![\"Stars](\"https://img.shields.io/github/stars/JanLunge/pog\")
\n ![\"Forks](\"https://img.shields.io/github/forks/JanLunge/pog\")
\n \n \n
To map your keyboard matrix, please:
\n\n Before configuring your keyboard with Pog, CircuitPython needs to be installed on your board.\n
\n\n Once CircuitPython is installed, your board will appear as a CIRCUITPY drive.\n
\n\n \nSelect your CIRCUITPY drive:
\n{{ drive.name }}
\n{{ drive.path }}
\nNo CIRCUITPY drives found.
\n1. Install the debug code on the keyboard
\n \n2. Click the text area and follow the guide below
\n\n\n 3. Now press each key starting in the top left corner in the first row and moving to the\n right when you reached the end press the last key once again to start with the next row\n
\n\n\n If nothing is happening first replug the board in case it hasnt started and wait 5 seconds.\n If this did not help check the diode direction or pins.\n
\n\n the coordmap should be printed as a list of 3 digit numbers seperated by spaces.
\n eg 001 005 008 002 ...
\n it will print this via a hotkey on the number row so make sure to switch to something like\n qwerty if you are using azerty or another layout that maps other keys to the number row. for\n split keyboards try the coordmap with the type set to normal as depending on the split side\n detection the secondary half might not output to usb.\n
{{ coordmapstring }}\n \n note if your key indexes changed you need to rebuild your layout or adjust the indexes on the\n on the layout editor, only saving the coord map is only advisable if you wanted to modify\n spacings but not the order of the keys\n
\nLayer {{ lindex }}
\nEncoder {{ eindex }}
\n \nPrefix: {{ keyboardStore.pinPrefix }} - {{ pinPrefixHint }}
\nNo keys selected
\n\n \n Key #{{ [...selectedKeys][0] }}\n \n \n {{ selectedKeys.size }} keys selected\n \n
\nBasics
\nMatrix
\nKey Index (from CoordMap)
\n \nEncoder Index
\n \nyou can build way more advanced things with custom keys here are some resources, for some you might need to edit the kb.py file or enable a keyboard feature. when testing these check the output of the REPL for errors\n
\nName
\n \nManufacturer (optional)
\n \nDescription (optional)
\nTags (optional)
\nKeyboard Features
\n\n Keycode Options for Selected Key(s)\n {{ coordMapWarning }}\n
\n\n To add your own custom keycodes, edit the file `customkeys.py` to add your own and then use\n them with `customkeys.MyKey` in your keymap\n
\n\n Updating the POG files will overwrite all files on your keyboard generated by POG (e.g. kb.py,\n code.py, customkeys.py, etc.)\n
\nBe sure to backup your code if you still need any of it.
\n \n\n\n Do you want to generate new ID for the restored configuration? This is only recommended if you\n are restoring a configuration from another keyboard.\n
\n \n\n\n KMK is a capable firmware for\n keyboards using the Rp2040.\n
\n\n Before you proceed make sure you installed\n CircuitPython\n on your controller\n
\n\n Info: This does not work when the controller is only connected via the serial port (and not as\n mounted usb drive)\n
\n\n By clicking the button below, you can install KMK automatically to the following drive:\n {{ keyboardStore.path }}\n
\n{{ kmkInstallState || '' }}
\n \n {{ isNaN(progress) ? 'Done' : progress }}% \n \n \n \n\n you can import json files from the\n keyboard layout editor\n
\nset the top left label to the matrix position eg '0,1' for row:0 col:1
\n\n set the bottom right label for a layout variant
\n eg. '0,1' this would be the first layout option using its other variant\n
![](\"@renderer/assets/kle.png\")
\n \n Define the size of your keyboard matrix here, set it as big as you need. For easier wiring set\n it to the max number of cols/rows on your keyboard\n
\nKeyboard Type
\n \nWiring Method
\n \n\n Define the mapping for columns and rows to the microcontroller pins. For split keyboards\n define the method for detecting the split side.\n
\n\n Row Pins\n {{ keyboardStore.rowPins.length }}\n
\n{{ index }}
\n\n Column Pins\n {{ keyboardStore.colPins.length }}\n
\n\n Direct Pins\n {{\n keyboardStore.directPins.length\n }}\n
\n{{ index }}
\n\n Split Pins {{ numberOfSplitPins }}\n
\n{{ vbusPinHint }}
\n{{ splitPinHint }}
\nPin Prefix
\n \n{{ pinPrefixHint }}
\nDiode Direction
\n \nSplit Side Detection
\n \n{{ splitSideHint }}
\nMicrocontroller
\n \n\n Feel free to submit other microcontroller pinouts. Ensure you have the permission to use\n the pinout image if it has not been created by you. In the meantime here are links to\n other pinouts\n
\nCurrently this tool works with any RP2040 controller.
\nJust look for a pinout and use any pin that is starting with GP.
\nKeymap
\n\n Info: To enable RGB you also will need a neopixel.mpy file in the lib folder on your\n CircuitPython drive eg. adafruit-circuitpython-neopixel-py-6.3.11.zip as neopixel.py . You can\n download that here:\n
\n {{\n kmkInstallState !== 'done'\n ? 'Installing firmware... (should take up to 10 seconds)'\n : 'Firmware installed'\n }}\n
\n \n\n initial Firmware install complete, please unplug your keyboard and plug it back in to\n continue\n
\n\n Select the serial port for your keyboard. We've automatically detected the most likely port.\n \n
\n\n{{ port.port }}
\n\n {{ port.manufacturer || 'Unknown manufacturer' }}\n {{ port.serialNumber ? `(${port.serialNumber})` : '' }}\n
\nNo serial ports found.
\n \n\n Configure your keyboard manually by specifying the pins, rows, columns, and diode direction.\n Recommended for experienced users or if you have your keyboard's documentation.\n
\n\n Let Pog automatically detect your keyboard's configuration by pressing each key. We'll flash\n a special firmware and guide you through the process.\n
\n \n \n\n Before you start please check that your controller is using circuit python, if not please\n download the matching firmware and drag it on the usb drive that appears when you enter its\n bootloader mode\n
\n\n when you see the circuit python usb drive it is a good time to rename the drive to reflect\n your keyboard name\n
\n\n With this done please select the drive so POG can start to flash the firmware, you will be\n able to configure everything after the flashing is done\n
\n \nnow unplug the keyboard and plug it back in to boot up the pog code
\n loading\ninfo prepare controller with circuit python
\nplugin controller and select the usb drive
\nflash kmk on drive + add pog files and an id in the pog.json
\nunplug and replug keyboard to boot pog
\n\n listen for serial ports with pog manufacturer then grab its info and compare with created id\n
\nopen both connections to repl and data for debugging
\n\nname + matrix size + pins[rows,cols,directpins,rgb,encoders] (loadable from qr or link)
\ncoordmap press each key
\nuse generated layout or modify (or was loaded from link/qr)
\nString
'\n } else {\n keylabel.action = 'Macro
'\n }\n } else if (keycode.startsWith('customkeys.')) {\n keylabel.action = 'custom'\n keylabel.simple = false\n const customcode = keycode.substring(11)\n keylabel.main = `${customcode}`\n } else {\n // Check for modifier keys\n // if (keycode.includes('KC.LSHIFT') || keycode.includes('KC.RSHIFT') ||\n // keycode.includes('KC.LCTL') || keycode.includes('KC.RCTL') ||\n // keycode.includes('KC.LALT') || keycode.includes('KC.RALT')) {\n // label += '^ ';\n // }\n\n // Check for key presses\n const keyMatch = keycode.match(/KC\\.(\\w+)/)\n if (keyMatch) {\n const key = keyMatch[1]\n const foundKey = keyLabels[key]\n if (!foundKey) {\n keylabel.action = keycode\n } else if (foundKey.icon) {\n keylabel.action = ``\n } else if (foundKey.label) {\n keylabel.action += foundKey.label\n }\n // if it has arguments render them as keycode as well\n if (keycode.includes('(')) {\n const match = keycode.match(/^[^(]+\\((.*)\\)$/)\n // dont render options for some keys eg. MT\n if (match && match[1]) {\n const params = match[1].split(',').map((a) => renderLabel(a))\n let maxParams = 10\n if (['LT', 'MT'].includes(key)) {\n // keycodes that have a label at the top\n maxParams = 2\n }\n switch (key) {\n case 'LT':\n keylabel.main = String(params[1].action)\n keylabel.lower = params[0].action\n keylabel.layer = Number(params[0].action)\n keylabel.simple = false\n keylabel.layerNamePosition = 'lower'\n break\n case 'OS':\n keylabel.main = String(params[0].action)\n keylabel.simple = false\n break\n case 'TD':\n keylabel.main = String(params.map((a) => a.action).join(' '))\n keylabel.simple = false\n break\n case 'MT':\n keylabel.main = String(params[0].action)\n keylabel.lower = String(params[1].action)\n keylabel.simple = false\n break\n case 'HT':\n keylabel.main = String(params[0].action)\n keylabel.lower = String(params[1].action)\n keylabel.simple = false\n break\n case 'TT':\n keylabel.main = String(params[0].action)\n keylabel.layer = Number(params[0].action)\n keylabel.simple = false\n break\n case 'TO':\n keylabel.main = String(params[0].action)\n keylabel.layer = Number(params[0].action)\n keylabel.simple = false\n break\n case 'TG':\n keylabel.main = String(params[0].action)\n keylabel.layer = Number(params[0].action)\n keylabel.simple = false\n break\n case 'MO':\n keylabel.main = String(params[0].action)\n keylabel.layer = Number(params[0].action)\n keylabel.simple = false\n keylabel.layerNamePosition = 'main'\n break\n }\n keylabel.params = params.slice(0, maxParams)\n }\n }\n } else {\n // custom keycodes\n keylabel.action = keycode\n }\n }\n\n return keylabel\n}\nconst controllers = {\n '0xcb_helios': ['GP29']\n}\n\nexport const microcontrollerPinValid = ({\n controller,\n pin\n}: {\n controller: string\n pin: string\n}) => {\n // check if the controller has this pin\n return controllers[controller].includes(pin)\n}\n" }, { "path": "src/renderer/src/helpers/saveConfigurationWrapper.ts", "content": "import { ref } from 'vue'\n\n// Global loading state\nconst isLoading = ref(false)\nconst loadingCallbacks = new Set<(loading: boolean) => void>()\n\n// Subscribe to loading state changes\nexport const onLoadingChange = (callback: (loading: boolean) => void) => {\n const unwatch = () => {\n loadingCallbacks.delete(callback)\n }\n loadingCallbacks.add(callback)\n return unwatch\n}\n\n// Get current loading state\nexport const getLoadingState = () => isLoading.value\n\n// Set loading state and notify all callbacks\nconst setLoading = (loading: boolean) => {\n isLoading.value = loading\n loadingCallbacks.forEach((callback) => callback(loading))\n}\n\n// Wrapper for saveConfiguration that automatically handles loading overlay\nexport const saveConfigurationWithLoading = async (data: string) => {\n if (isLoading.value) {\n console.warn('Save operation already in progress, ignoring duplicate call')\n return\n }\n\n try {\n setLoading(true)\n await window.api.saveConfiguration(data)\n } catch (error) {\n console.error('Error in saveConfigurationWithLoading:', error)\n throw error\n } finally {\n // Don't set loading to false here - let the LoadingOverlay handle it\n // based on the progress events from the main process\n }\n}\n\n// Function to manually hide loading (for fallback timeouts)\nexport const hideLoading = () => {\n setLoading(false)\n}\n" }, { "path": "src/renderer/src/helpers/types.d.ts", "content": "" }, { "path": "src/renderer/src/main.ts", "content": "import { createApp } from 'vue'\nimport App from './App.vue'\nimport router from './router'\n\nimport '@mdi/font/css/materialdesignicons.css'\nimport './style/index.css'\n// import '@vueform/multiselect/themes/default.css'\nimport './style/multiselect.css'\n\nconst app = createApp(App)\napp.use(router)\napp.mount('#app')\n" }, { "path": "src/renderer/src/router/index.ts", "content": "import { createRouter, createWebHashHistory } from 'vue-router'\nimport LaunchScreen from '../screens/LaunchScreen.vue'\nimport AddKeyboard from '../screens/AddKeyboard.vue'\nimport KeyboardConfigurator from '../screens/KeyboardConfigurator.vue'\nimport KmkInstaller from '../components/KmkInstaller.vue'\nimport SetupWizard from '../screens/SetupWizard.vue'\nimport LayoutEditor from '../components/LayoutEditor.vue'\nimport KeymapEditor from '../components/KeymapEditor.vue'\nimport EncoderSetup from '../components/EncoderSetup.vue'\nimport MatrixSetup from '../components/MatrixSetup.vue'\nimport PinSetup from '../components/PinSetup.vue'\nimport RawKeymapEditor from '../components/RawKeymapEditor.vue'\nimport KeyboardName from '../components/KeyboardName.vue'\nimport CoordMap from '../components/CoordMap.vue'\nimport RgbSetup from '../components/RgbSetup.vue'\nimport Community from '../components/Community.vue'\n// import Debug from '../components/debug.vue'\n\nimport KeyboardSelector from '../screens/KeyboardSelector.vue'\nimport CircuitPythonSetup from '../components/CircuitPythonSetup.vue'\nimport SetupMethodSelector from '../components/SetupMethodSelector.vue'\nimport AutomaticSetup from '../components/AutomaticSetup.vue'\n// import KeyboardSetup from '../screens/KeyboardSetup.vue'\nimport InstallPogFirmware from '../components/installPogFirmware.vue'\n\nconst routes = [\n {\n path: '/',\n name: 'Launch',\n component: LaunchScreen\n },\n {\n path: '/add-keyboard',\n name: 'Add Keyboard',\n component: AddKeyboard\n },\n {\n // manual setup\n path: '/setup-wizard',\n name: 'Setup Wizard',\n component: SetupWizard\n },\n {\n path: '/keyboard-selector',\n name: 'Keyboard Selector',\n component: KeyboardSelector\n },\n {\n path: '/automatic-setup',\n name: 'Automatic Setup',\n children: [\n {\n path: 'circuit-python',\n name: 'CircuitPython Setup',\n component: CircuitPythonSetup\n },\n {\n path: 'method',\n name: 'Setup Method',\n component: SetupMethodSelector\n },\n {\n path: 'mapping',\n name: 'Automatic Setup',\n component: AutomaticSetup\n },\n {\n path: 'firmware',\n name: 'Pog Firmware',\n component: InstallPogFirmware\n }\n ]\n },\n {\n path: '/configurator',\n name: 'Configurator',\n component: KeyboardConfigurator,\n children: [\n {\n path: 'keymap',\n name: 'Keymap',\n component: KeymapEditor\n },\n {\n path: 'layout-editor',\n name: 'Layout Editor',\n component: LayoutEditor\n },\n {\n path: 'encoder',\n name: 'Encoder',\n component: EncoderSetup\n },\n {\n path: 'info',\n name: 'Info',\n component: KeyboardName\n },\n {\n path: 'matrix',\n name: 'Matrix',\n component: MatrixSetup\n },\n {\n path: 'pins',\n name: 'Pins',\n component: PinSetup\n },\n {\n path: 'coordmap',\n name: 'CoordMap',\n component: CoordMap\n },\n {\n path: 'raw-keymap',\n name: 'Raw Keymap',\n component: RawKeymapEditor\n },\n {\n path: 'firmware',\n name: 'Firmware',\n component: KmkInstaller\n },\n {\n path: 'coordmap',\n component: CoordMap,\n name: 'CoordMap'\n },\n {\n path: 'community',\n component: Community,\n name: 'Community'\n },\n {\n path: 'rgb',\n name: 'RGB',\n component: RgbSetup\n }\n ]\n }\n]\n\nexport const router = createRouter({\n history: createWebHashHistory(),\n routes\n})\nexport default router\n" }, { "path": "src/renderer/src/screens/AddKeyboard.vue", "content": "\nCreate a Custom Keyboard firmware from scratch or choose a Keyboard from the community
\n![\"\"](\"@renderer/assets/icon.png\"){kind=icon}
\n {{ keyboard.path }}
\n![\"\"](\"../assets/icon.png\"){kind=icon}
\n Easy Keyboard Configurator
\nEffortlessly customize your keyboard with Pog
\n\n
Read Only Serial
\n{{ keyboard.name }}
\n{{ keyboard.manufacturer }}
\n{{ keyboard.path }}
\n{{ keyboard.description }}
\n