v0.6.0

Author: JanLunge

README.md

@@ -27,6 +27,8 @@ then just run it with dev to start
 - [ ] use injection points from the pog.json for codeblocks
 - [ ] direct pin wiring support
 - [ ] bluetooth workflow
+- [ ] generate layout based on matrix + clear layout button / delete multiple
+- [ ] save a backup of the json in electron
 
 ## features
 - [x] dragging keys on the layout editor

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pog",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "A KMK firmware configurator",
   "main": "./out/main/index.js",
   "author": "Jan Lunge",
@@ -28,6 +28,7 @@
     "@vueuse/core": "^9.12.0",
     "@wlard/vue-class-store": "^3.0.0",
     "daisyui": "^2.50.0",
+    "dayjs": "^1.11.7",
     "decompress": "^4.2.1",
     "electron-updater": "^5.3.0",
     "mini-svg-data-uri": "^1.4.4",

src/main/saveConfig.ts

@@ -3,7 +3,7 @@ import { currentKeyboard } from './store'
 // save code.py based on pog.json
 
 export const saveConfiguration = (data: string) => {
-  const {pogConfig, writeFirmware} = JSON.parse(data)
+  const { pogConfig, writeFirmware } = JSON.parse(data)
   // write pog.json config
   // write pog.json
   fs.writeFile(currentKeyboard.path + '/pog.json', JSON.stringify(pogConfig, null, 4), () => {
@@ -72,41 +72,98 @@ export const handleKeymapSave = (pogConfig) => {
       encoderKeymap + // layers
       ']\n'
   }
-  const keymapString = `print("Starting")
+  const mainConfig = `# Main Keyboard Configuration
+print("Starting ${pogConfig.name || 'Keyboard'}")
 
 import board
-import supervisor
-import digitalio
 import storage
-import usb_cdc
-import usb_hid
 
-from kmk.kmk_keyboard import KMKKeyboard
-from kmk.keys import KC
-from kmk.scanners import DiodeOrientation
+from kb import KMKKeyboard
+from kmk.modules.tapdance import TapDance
+
+from storage import getmount
+from kmk.modules.split import Split, SplitType, SplitSide
 ${pythonImports}
 
 keyboard = KMKKeyboard()
 ${kmkAddons}
 
-# Cols
-keyboard.col_pins = (${pogConfig.colPins.map((a) => 'board.GP' + a).join(', ')})
-# Rows
-keyboard.row_pins = (${pogConfig.rowPins.map((a) => 'board.GP' + a).join(', ')})
-# Diode Direction
-keyboard.diode_orientation = DiodeOrientation.${pogConfig.diodeDirection}
+tapdance = TapDance()
+tapdance.tap_time = 200
+keyboard.modules.append(tapdance)
 
 # Keymap
-keyboard.keymap = [
-    ${pogConfig.keymap.map((layer) => '[' + layer.join(', ') + ']').join(', ')}
-]
+from keymap import keymap
+keyboard.keymap = keymap
 
 ${codeblock}
 
 if __name__ == '__main__':
     keyboard.go()
 `
-  fs.writeFile(currentKeyboard.path + '/code.py', keymapString, () => {
+  // write kb.py for basic config
+  let pinSetup = ``
+  if (pogConfig.wiringMethod === 'matrix') {
+    pinSetup = `
+    col_pins = (${pogConfig.colPins.map((a) => 'board.GP' + a).join(', ')})
+    row_pins = (${pogConfig.rowPins.map((a) => 'board.GP' + a).join(', ')})
+    diode_orientation = DiodeOrientation.${pogConfig.diodeDirection}
+`
+  } else {
+    pinSetup = `
+    def __init__(self):
+        # create and register the scanner
+        self.matrix = KeysScanner(
+            # require argument:
+            pins=[${pogConfig.directPins.map((a) => 'board.GP' + a).join(', ')}],
+            # optional arguments with defaults:
+            value_when_pressed=False,
+            pull=True,
+            interval=0.02,  # Debounce time in floating point seconds
+            max_events=64
+        )
+    `
+  }
+
+  const kbConfig = `# KB base config
+import board
+from kmk.kmk_keyboard import KMKKeyboard as _KMKKeyboard
+from kmk.scanners import DiodeOrientation
+from kmk.scanners import intify_coordinate as ic
+from kmk.scanners.keypad import KeysScanner
+
+class KMKKeyboard(_KMKKeyboard):
+    ${pinSetup}
+ `
+
+  const keymap = `# Keymap Autogenerated by Pog do not edit
+from kmk.keys import KC
+from kmk.handlers.sequences import send_string
+import customkeys
+
+keymap = [
+    ${pogConfig.keymap.map((layer) => '[' + layer.join(', ') + ']').join(', ')}
+]
+`
+  fs.writeFile(currentKeyboard.path + '/kb.py', kbConfig, () => {
+    console.log('kb File written successfully\n')
+  })
+  fs.writeFile(currentKeyboard.path + '/code.py', mainConfig, () => {
     console.log('Firmware File written successfully\n')
   })
+  fs.writeFile(currentKeyboard.path + '/keymap.py', keymap, () => {
+    console.log('keymap File written successfully\n')
+  })
+  if (!fs.existsSync(currentKeyboard.path + '/customkeys.py')) {
+    const defaultCustomKeys = `# These are yous custom keycodes do any needed imports at the top
+# then you can reference them in your keymap with for example customkeys.MyKey
+
+from kmk.keys import KC
+
+MyKey = KC.X
+`
+    fs.writeFile(currentKeyboard.path + '/customkeys.py', defaultCustomKeys, () => {
+      console.log('customkeys File written successfully\n')
+    })
+  }
 }

src/renderer/src/components/KeyCap.vue

@@ -61,29 +61,24 @@
         width: keyTopWidth + 'px'
       }"
     ></div>
-    <div class="keylabels">
+    <div class="keylabels" :class="{'has-args': hasArguments }">
       <!--      <div class="keylabel" :class="['keylabel-'+index]" v-for="(label,index) in keyData.labels">-->
       <!--        <div class="keylabel-inner">-->
       <!--          {{label}}-->
       <!--        </div>-->
       <!--      </div>-->
-      <div v-if="!hasArguments" class="keylabel keylabel-center" v-html="mainLabel"></div>
-      <div v-else class="keylabel">
-        <div class="arg-top">{{ mainLabel }}</div>
-        <div class="arg-bottom" :class="{ selected: argsSelected }">
-          {{ argLabel }}
-        </div>
-      </div>
+      <div class="keylabel keylabel-center" v-html="mainLabel"></div>
+
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { computed, ref, watch } from 'vue'
-import { selectedLayer, selectedKeys, keyboardStore } from '../store'
+import { selectedLayer, selectedKeys } from '../store'
 import { matrixPositionToIndex, renderLabel } from '../helpers'
 
-const props = defineProps(['keyData', 'keyIndex', 'mode', 'keymap', 'matrixWidth'])
+const props = defineProps(['keyData', 'keyIndex', 'mode', 'keymap', 'matrixWidth', 'layouts'])
 defineEmits(['selected'])
 
 const keyGap = 4
@@ -110,7 +105,7 @@ const visible = computed(() => {
   const variant: number[] = props.keyData.variant
   if (variant) {
     if (variant.length !== 2) return false
-    return keyboardStore.layouts[variant[0]].selected === variant[1]
+    if (props.layouts[variant[0]]) return props.layouts[variant[0]].selected === variant[1]
   }
   // show keys that don't have variant
   return true
@@ -143,9 +138,8 @@ const keyHeight2 = computed(() => {
   return keyHeight2U.value * baseKeyWidth.value + (keyHeight2U.value - 1) * keyGap
 })
 const hasArguments = computed(() => {
-  return false
-  // if (!action.value) return false
-  // return action.value.includes(')')
+  if (!action.value) return false
+  return action.value.includes(')')
 })
 const keyTopWidth = computed(() => {
   return keyWidth.value - keyGap * 2 - 4 //+ ((keyWidthU.value-1)*keyGap))
@@ -171,16 +165,16 @@ const mainLabel = computed(() => {
   return renderLabel(action.value)
 })
 
-const argLabel = computed(() => {
-  if (hasArguments.value && action.value) {
-    const argAction = action.value.split('(')[1].replace(')', '')
-    if (argAction.startsWith('KC.')) {
-      return argAction.split('.')[1]
-    }
-    return argAction
-  }
-  return
-})
+// const argLabel = computed(() => {
+//   if (hasArguments.value && action.value) {
+//     const argAction = action.value.split('(')[1].replace(')', '')
+//     if (argAction.startsWith('KC.')) {
+//       return argAction.split('.')[1]
+//     }
+//     return argAction
+//   }
+//   return
+// })
 
 const mainSelected = ref(false)
 const argsSelected = ref(false)
@@ -247,7 +241,7 @@ const rotationOrigin = computed(() => {
   .selected & {
     border-color: white;
     z-index: 4;
-    box-shadow: rgba(0, 0, 0, 0.6) 2px 2px 8px 0;
+    //box-shadow: rgba(0, 0, 0, 0.6) 2px 2px 8px 0;
   }
 }
 .keyborder-blocker {
@@ -257,7 +251,7 @@ const rotationOrigin = computed(() => {
   height: 52px;
   cursor: pointer;
   @apply rounded;
-  z-index: 1;
+  z-index: 5;
 }
 .keytop {
   position: absolute;
@@ -269,9 +263,9 @@ const rotationOrigin = computed(() => {
   background: #444;
   cursor: pointer;
   @apply rounded;
-  z-index: 2;
+  //z-index: 2;
+    z-index: 6;
   .selected & {
-    z-index: 5;
   }
 }
 .keylabels {
@@ -281,16 +275,17 @@ const rotationOrigin = computed(() => {
   left: 6px;
   top: 4px;
   right: 6px;
-  z-index: 3;
+  //z-index: 3;
+    z-index: 7;
   .selected & {
-    z-index: 6;
   }
 }
 .keylabel {
   font-size: 12px;
   position: absolute;
   width: 100%;
   height: calc(48px - 5px);
+  @apply gap-1;
 
   &-0 {
     left: 8px;
@@ -304,6 +299,7 @@ const rotationOrigin = computed(() => {
   }
   &-center {
     @apply flex items-center justify-center text-center;
+    flex-wrap: wrap;
   }
   .arg-top {
     @apply text-center;
@@ -357,5 +353,16 @@ const rotationOrigin = computed(() => {
   i.mdi {
     font-size: 18px;
   }
+  .has-args &{
+    i.mdi{
+      font-size: 14px;
+    }
+  }
+}
+.keylabel-small{
+  font-size: 9px;
+  font-weight: bold;
+  font-style: italic;
+  width: 100%;
 }
 </style>