Skip to content

Commit a927d91

Browse files
committed
Enhance firmware update process and UI components
- Implemented a recursive file deletion method in `kmkUpdater.ts` to improve the removal of the existing kmk folder with progress tracking. - Updated `AutomaticSetup.vue` to include a debug toggle button and a debug panel for enhanced user experience during setup. - Enhanced `debug.vue` to auto-connect to the first available port when ports are refreshed and improved sorting of available ports based on serial number. These changes improve the overall functionality and user interface of the firmware update and keyboard setup processes.
1 parent ff6cf10 commit a927d91

File tree

3 files changed

+78
-9
lines changed

3 files changed

+78
-9
lines changed

src/main/kmkUpdater.ts

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,42 @@ export const updateFirmware = async () => {
7676
// write a file to the keyboard with the version sha
7777
if (fs.existsSync(`${currentKeyboard.path}/kmk`)) {
7878
console.log('removing old kmk folder')
79-
await fs.promises.rm(`${currentKeyboard.path}/kmk`, { recursive: true, force: true })
79+
const countFilesRecursive = async (dir: string): Promise<number> => {
80+
const files = await fs.readdir(dir, { withFileTypes: true })
81+
let count = files.length
82+
83+
for (const file of files) {
84+
if (file.isDirectory()) {
85+
count += await countFilesRecursive(`${dir}/${file.name}`)
86+
}
87+
}
88+
return count
89+
}
90+
91+
const deleteWithProgress = async (dir: string) => {
92+
let processedFiles = 0
93+
const totalFiles = await countFilesRecursive(dir)
94+
95+
const deleteRecursive = async (currentDir: string) => {
96+
const currentFiles = await fs.readdir(currentDir, { withFileTypes: true })
97+
for (const file of currentFiles) {
98+
const filePath = `${currentDir}/${file.name}`
99+
if (file.isDirectory()) {
100+
await deleteRecursive(filePath)
101+
}
102+
await fs.promises.rm(filePath, { force: true, recursive: true })
103+
processedFiles++
104+
mainWindow?.webContents.send('onUpdateFirmwareInstallProgress', {
105+
state: 'cleaning',
106+
progress: (processedFiles / totalFiles) * 100
107+
})
108+
}
109+
}
110+
111+
await deleteRecursive(dir)
112+
}
113+
114+
await deleteWithProgress(`${currentKeyboard.path}/kmk`)
80115
}
81116
if (!fs.existsSync(`${currentKeyboard.path}/kmk`)) {
82117
fs.mkdirSync(`${currentKeyboard.path}/kmk`)

src/renderer/src/components/AutomaticSetup.vue

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
<template>
22
<div class="min-h-screen bg-base-100 p-6">
33
<div class="mx-auto max-w-5xl space-y-8">
4-
<h2 class="text-center text-4xl font-bold text-base-content">Mapping your Pinout</h2>
4+
<div class="flex items-center justify-between">
5+
<h2 class="text-center text-4xl font-bold text-base-content">Mapping your Pinout</h2>
6+
<button class="btn btn-ghost" @click="toggleDebug">
7+
<i class="mdi mdi-bug text-2xl" :class="{ 'text-primary': showDebug }"></i>
8+
</button>
9+
</div>
510

611
<div class="grid gap-6 md:grid-cols-2">
712
<!-- Detection Info Panel -->
@@ -62,6 +67,13 @@
6267
</div>
6368
</div>
6469

70+
<!-- Debug Panel -->
71+
<div v-if="showDebug" class="card bg-base-200 shadow-lg">
72+
<div class="card-body">
73+
<Debug />
74+
</div>
75+
</div>
76+
6577
<!-- Key Preview -->
6678
<div class="card bg-base-200 shadow-lg">
6779
<div class="card-body">
@@ -103,7 +115,9 @@
103115
import router from '@renderer/router'
104116
import { keyboardStore } from '@renderer/store'
105117
import { ref, onMounted, onUnmounted } from 'vue'
118+
import Debug from './debug.vue'
106119
120+
const showDebug = ref(false)
107121
const currentStep = ref(0)
108122
const detectionData = ref<{
109123
rows: string[]
@@ -176,4 +190,8 @@ onUnmounted(() => {
176190
// window.api.removeDetectionListeners()
177191
// window.api.stopDetection()
178192
})
193+
194+
function toggleDebug() {
195+
showDebug.value = !showDebug.value
196+
}
179197
</script>

src/renderer/src/components/debug.vue

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,8 @@
8484
</template>
8585

8686
<script lang="ts" setup>
87-
import { computed, nextTick, onMounted, ref } from 'vue'
87+
import { computed, nextTick, onMounted, ref, watch } from 'vue'
88+
import { keyboardStore } from '@renderer/store'
8889
8990
const output = ref('')
9091
const inputData = ref('')
@@ -97,18 +98,33 @@ const isConnecting = ref(false)
9798
9899
const sortedPorts = computed(() => {
99100
return [...ports.value]
101+
.filter((a) => a.serialNumber !== undefined)
100102
.sort((a, b) => {
101-
if (a.port < b.port) {
102-
return -1
103-
}
104-
if (a.port > b.port) {
105-
return 1
103+
// First try to match by serial number if available
104+
if (keyboardStore.serialNumber) {
105+
const aMatchesSerial = a.serialNumber === keyboardStore.serialNumber
106+
const bMatchesSerial = b.serialNumber === keyboardStore.serialNumber
107+
if (aMatchesSerial && !bMatchesSerial) return -1
108+
if (!aMatchesSerial && bMatchesSerial) return 1
106109
}
110+
111+
// Then sort by port number
112+
const aNum = parseInt(a.port.replace(/[^\d]/g, ''))
113+
const bNum = parseInt(b.port.replace(/[^\d]/g, ''))
114+
if (aNum < bNum) return -1
115+
if (aNum > bNum) return 1
107116
return 0
108117
})
109-
.filter((a) => a.serialNumber !== undefined)
110118
})
111119
120+
// Auto-connect to the first available port when ports are refreshed
121+
watch(sortedPorts, (newPorts) => {
122+
if (!isConnected.value && !isConnecting.value && newPorts.length > 0) {
123+
selectedPort.value = newPorts[0].port
124+
connect()
125+
}
126+
}, { immediate: true })
127+
112128
const scrollTextarea = () => {
113129
nextTick(() => {
114130
const replOutput = document.getElementById('repl-output')

0 commit comments

Comments
 (0)