UPD: Key leds in device preview

src/renderer/src/components/config/keys/KeyLightConfig.vue

@@ -43,8 +43,12 @@ const keyColors = computed({
     }
   },
   set(newValue) {
+    if (newValue.default.colorNumber !== keyColor.value(appStore.selectedKey, false)) {
       deviceStore.setKeyColor(appStore.selectedKey, false, newValue.default.colorNumber)
+    }
+    if (newValue.pressed.colorNumber !== keyColor.value(appStore.selectedKey, true)) {
       deviceStore.setKeyColor(appStore.selectedKey, true, newValue.pressed.colorNumber)
     }
+  }
 })
 </script>

src/renderer/src/components/device/DevicePreview.vue

@@ -85,6 +85,7 @@
       <Transition name="fade-delayed">
         <DeviceKeys
           v-if="deviceStore.connected"
+          :keys="keyColors"
           class="absolute inset-x-0 top-[77.5%] mx-auto w-[72.7%] gap-[2.2%]"
           :selected="appStore.selectedFeature === 'key' ? appStore.selectedKey : ''"
           @select="appStore.selectKey"
@@ -104,6 +105,8 @@ import ScrambleText from '@renderer/components/common/ScrambleText.vue'
 import { computed, ref } from 'vue'
 import DeviceLEDRing from '@renderer/components/device/DeviceLEDRing.vue'
 import DeviceKeys from '@renderer/components/device/DeviceKeys.vue'
+import { storeToRefs } from 'pinia'
+import Color from 'color'
 
 const appStore = useAppStore()
 const deviceStore = useDeviceStore()
@@ -119,6 +122,17 @@ const previewDeviceImage = computed(
   () => previewDeviceImages[appStore.previewDeviceModel || 'nanoOne']
 )
 
+const { keyColor } = storeToRefs(deviceStore)
+
+const keyColors = computed(() => {
+  return {
+    a: Color(keyColor.value('a', deviceStore.keyStates.a)),
+    b: Color(keyColor.value('b', deviceStore.keyStates.b)),
+    c: Color(keyColor.value('c', deviceStore.keyStates.c)),
+    d: Color(keyColor.value('d', deviceStore.keyStates.d))
+  }
+})
+
 const offlineText = ref('NO DEVICE CONNECTED')
 const offlineTexts = [
   'AWAITING CONNECTION',

src/renderer/src/deviceStore.ts

@@ -44,6 +44,8 @@ interface UpdateData {
   profiles: string[] | undefined
   current: string | undefined
   profile: Profile | undefined
+  kd: number | undefined
+  ku: number | undefined
 }
 
 const { nanoIpc } = window
@@ -60,6 +62,7 @@ export const useDeviceStore = defineStore('device', {
     angle: 0 as number, // angle of the knob
     turns: 0 as number, // number of turns of the knob
     velocity: 0 as number, // velocity of the knob
+    keyLabels: ['a', 'b', 'c', 'd'] as string[], // labels for the keys
     keyStates: {} as Record<string, boolean> // state of the keys (true if pressed)
   }),
   getters: {
@@ -239,22 +242,28 @@ export const initializeDevices = () => {
           console.error(e)
         }
       }
-      if (update.a) {
+      if (update.a !== undefined) {
         deviceStore.setAngle(update.a)
       }
-      if (update.profiles) {
+      if (update.profiles !== undefined) {
         deviceStore.setProfileNames(update.profiles, false)
         for (const profileName of update.profiles) {
           console.log('Requesting profile', profileName)
           nanoIpc.send(deviceid, JSON.stringify({ profile: profileName }))
         }
       }
-      if (update.current) {
+      if (update.current !== undefined) {
         deviceStore.setCurrentProfile(update.current, false)
       }
-      if (update.profile) {
+      if (update.profile !== undefined) {
         deviceStore.addProfile(update.profile, false)
       }
+      if (update.kd !== undefined) {
+        deviceStore.keyStates[deviceStore.keyLabels[update.kd]] = true
+      }
+      if (update.ku !== undefined) {
+        deviceStore.keyStates[deviceStore.keyLabels[update.ku]] = false
+      }
     }
   })