- properly working keyboard layout editor multiselect property editor

- icons for the sidebar
- overall color changes
- fullsize keyboard for the key picker

Author: JanLunge

electron-builder.yml

@@ -47,13 +47,15 @@ dmg:
   artifactName: ${name}-${version}-${arch}.${ext}
 linux:
   target:
-    - AppImage
-    - snap
-    - deb
+    - target: AppImage
+      arch:
+        - x64
+#    - snap
+#    - deb
   maintainer: Jan Lunge
   category: Utility
 appImage:
-  artifactName: ${name}-${version}.${ext}
+  artifactName: ${name}-${version}-${arch}.${ext}
 npmRebuild: false
 publish:
   provider: github

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pog",
-  "version": "0.8.0",
+  "version": "0.9.3",
   "description": "A KMK firmware configurator",
   "main": "./out/main/index.js",
   "author": "Jan Lunge",
@@ -22,6 +22,7 @@
     "build:win": "npm run build && electron-builder --win --config",
     "build:mac": "npm run build && electron-builder --mac --config",
     "build:linux": "npm run build && electron-builder --linux --config",
+    "build:all": "npm run build && electron-builder --win --mac --linux --config",
     "devtools": "./node_modules/.bin/vue-devtools"
   },
   "dependencies": {
@@ -35,11 +36,13 @@
     "@web3modal/html": "^2.1.2",
     "@wlard/vue-class-store": "^3.0.0",
     "@wlard/vue3-popper": "^1.3.1",
+    "chroma-js": "^2.4.2",
     "daisyui": "^2.50.0",
     "dayjs": "^1.11.7",
     "decompress": "^4.2.1",
     "electron-updater": "^5.3.0",
     "ethers": "^5",
+    "lighten-darken-color": "^1.0.0",
     "mini-svg-data-uri": "^1.4.4",
     "request": "^2.88.2",
     "sass": "^1.58.0",

src/renderer/src/App.vue

@@ -5,7 +5,7 @@ import { keyboardStore, notifications } from './store'
 const store = computed(() => {
   return keyboardStore
 })
-console.log('store initiated', store.value.path)
+console.log('store added to debug menu', store)
 </script>
 
 <template>

src/renderer/src/assets/keycaptophighlight.png

@@ -43,11 +43,12 @@ const web3modal = new Web3Modal(
   },
   ethereumClient
 )
+console.log(web3modal)
 // const unsubscribe = web3modal.subscribeModal((newState) =>
 // console.log(newState)
 // );
 const accountAddress = ref('')
-const unwatch = watchAccount((account) => {
+watchAccount((account) => {
   if (account.address) {
     console.log('account changed', account.address)
     accountAddress.value = account.address

src/renderer/src/assets/microcontrollers/0xcb-helios.png

@@ -1,7 +1,7 @@
 <template>
   <div>
     <p class="py-4">1. install the debug code on the keyboard</p>
-    <button class="btn-primary btn" @click="flashCoordMapping">
+    <button class="btn-primary btn btn-sm" @click="flashCoordMapping">
       Flash CoordMap Finder to keyboard
     </button>
     <div>
@@ -15,8 +15,10 @@
     <div class="flex gap-2 py-4">
       <button class="btn-primary btn" @click="addRow">new Row</button>
       <button class="btn-primary btn" @click="addSpc">add Space</button>
+      <button class="btn-primary btn" @click="rmLast">remove last</button>
+      <button class="btn-primary btn" @click="clear">clear</button>
     </div>
-    <p class="py-4">
+    <p class="mb-4">
       3. Now press each key starting in the top left corner in the first row and moving to the right
       when you reached the end press the last key once again to start with the next row
     </p>
@@ -32,9 +34,16 @@
     <div>
       <pre class="my-2 rounded bg-base-300 p-4">{{ coordmapstring }}</pre>
     </div>
+    <div class="flex gap-2">
+
     <button class="btn-primary btn mt-2" @click="done">
-      {{ initialSetup ? 'next' : 'save Coord Maping' }}
+      {{ initialSetup ? 'next' : 'save Coord Maping & create keyboard layout' }}
+    </button>
+    <button class="btn-primary btn mt-2" @click="onlySave"  v-if="!initialSetup">
+      only save Coord Maping
     </button>
+    </div>
+    <p class="my-4">note if your key indexes changed you need to rebuild your layout or adjust the indexes on the layout editor, only saving the coord map is only advisable if you wanted to modify spacings but not the order of the keys</p>
   </div>
 </template>
 
@@ -66,6 +75,9 @@ const done = () => {
   keyboardStore.coordMap = keys.value
   emits('next')
 }
+const onlySave = () => {
+  keyboardStore.coordMap = keys.value
+}
 const flashCoordMapping = async () => {
   keyboardStore.coordMapSetup = true
   await window.api.saveConfiguration(
@@ -118,6 +130,13 @@ const keyboardlayout = computed(() => {
   console.log(realKeys)
   return realKeys
 })
+
+const rmLast = () => {
+  coordmap.value = coordmap.value.split(' ').slice(0, -1).join(' ');
+}
+const clear = ()=>{
+  coordmap.value=''
+}
 </script>
 
 <style lang="scss" scoped></style>

src/renderer/src/components/Community.vue

@@ -10,6 +10,7 @@
          <i class="mdi mdi-delete"></i> remove encoder
         </button>
       </div>
+        <p>Prefix: {{keyboardStore.pinPrefix}} - {{pinPfrefixHint}}</p>
       <div class="flex items-center gap-4 mb-2">
         <label>Pad A</label>
         <input
@@ -44,7 +45,7 @@
 </template>
 
 <script lang="ts" setup>
-import {keyboardStore} from "../store";
+import {keyboardStore, pinPfrefixHint} from "../store";
 import EncoderLayer from "./EncoderLayer.vue";
 
 const cleanEncoders = () => {