UPD: Allow setting outputRamp

src/renderer/src/components/config/actions/ActionCard.vue

@@ -37,20 +37,21 @@
               <CommandList>
                 <CommandGroup>
                   <CommandItem
-                    v-for="(actionType, key) in actionTypeOptions"
+                    v-for="(actionTypeOption, key) in actionTypeOptions"
                     :key="key"
-                    :value="actionType"
+                    :value="actionTypeOption"
                     @select="
                       () => {
                         typeInputValue = key
                         open = false
+                        deviceStore.updateKeyActionParameter(actionIndex - 1, { type: key })
                       }
                     "
                   >
-                    {{ actionType.label }}
+                    {{ actionTypeOption.label }}
                     <Check
                       :class="
-                        cn('ml-auto h-4 w-4', typeInputValue === key ? 'opacity-100' : 'opacity-0')
+                        cn('ml-auto h-4 w-4', actionType === key ? 'opacity-100' : 'opacity-0')
                       "
                     />
                   </CommandItem>
@@ -103,7 +104,7 @@ import {
   CommandItem,
   CommandList
 } from '@renderer/components/ui/command'
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { cn } from '@renderer/lib/utils'
 import SendKeyAction from '@renderer/components/config/actions/SendKeyAction.vue'
 import SendMidiCCAction from '@renderer/components/config/actions/SendMidiCCAction.vue'
@@ -111,11 +112,14 @@ import ScrambleText from '@renderer/components/common/ScrambleText.vue'
 import { ChevronsUpDown, Check, GripHorizontal, Trash2, X } from 'lucide-vue-next'
 import { useElementSize } from '@vueuse/core'
 import { Action } from '@renderer/deviceStore'
+import { useDeviceStore } from '@renderer/deviceStore'
+
+const deviceStore = useDeviceStore()
 
 const props = defineProps({
   actionIndex: {
     type: Number,
-    required: false
+    required: true
   },
   action: {
     type: Object as () => Action,
@@ -125,7 +129,17 @@ const props = defineProps({
 
 const actionTypeOptions = ref({
   key: { label: 'Press a Keyboard Key', component: SendKeyAction },
-  midi: { label: 'Send a MIDI Control Change', component: SendMidiCCAction }
+  midi: { label: 'Send a MIDI Control Change', component: SendMidiCCAction },
+  next_profile: { label: 'Go to the Next Profile', component: WIP },
+  prev_profile: { label: 'Go to the Previous Profile', component: WIP },
+  profile: { label: 'Go to a specific Profile', component: WIP }
+})
+
+const actionType = computed(() => {
+  if (typeInputValue.value in actionTypeOptions.value) {
+    return actionTypeOptions.value[typeInputValue.value]
+  }
+  return null
 })
 
 const comboboxButton = ref(null)

src/renderer/src/components/config/knob/KnobFeedbackConfig.vue

@@ -4,20 +4,12 @@
     :icon-component="AudioWaveform"
     :show-toggle="true"
   >
-    <SteppedSlider
-      v-model="feedbackStrength"
-      :label="$t('config_options.feedback_designer.haptic_response.feedback_strength')"
-    />
-    <Separator />
-    <SteppedSlider
-      v-model="bounceBackStrength"
-      :label="$t('config_options.feedback_designer.haptic_response.bounce_back_strength')"
-    />
-    <Separator />
     <SteppedSlider
       v-model="outputRampDampening"
       :label="$t('config_options.feedback_designer.haptic_response.output_ramp_dampening')"
     />
+    <Separator />
+    <WIP />
   </ConfigSection>
   <ConfigSection
     :title="$t('config_options.feedback_designer.auditory_response.title')"
@@ -50,7 +42,7 @@
 <script setup>
 import { AudioLines, AudioWaveform, GaugeCircle } from 'lucide-vue-next'
 import ConfigSection from '@renderer/components/common/ConfigSection.vue'
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import TabSelect from '@renderer/components/common/TabSelect.vue'
 import FdIcon from '@renderer/assets/icons/iconFineDetents.svg'
 import CdIcon from '@renderer/assets/icons/iconCoarseDetents.svg'
@@ -59,6 +51,9 @@ import RcIcon from '@renderer/assets/icons/iconReturnToCenter.svg'
 import SteppedSlider from '@renderer/components/common/SteppedSlider.vue'
 import { Separator } from '@renderer/components/ui/separator'
 import WIP from '@renderer/components/WIP.vue'
+import { useDeviceStore } from '@renderer/deviceStore'
+
+const deviceStore = useDeviceStore()
 
 const feedbackType = ref('fineDetents') // TODO: replace with actual value
 
@@ -81,9 +76,14 @@ const feedbackTypeOptions = {
   }
 }
 
-const feedbackStrength = ref(2)
+const outputRampValues = [0, 100, 200, 5000, 10000]
-const bounceBackStrength = ref(2)
+
-const outputRampDampening = ref(2)
+const index = outputRampValues.indexOf(deviceStore.activeValue?.haptic?.outputRamp)
+const outputRampDampening = ref(index === -1 ? 2 : index)
+
+watch(outputRampDampening, (value) => {
+  deviceStore.setHapticOutputRamp(outputRampValues[value])
+})
 
 const auditoryHapticLevel = ref(2)
 const auditoryMagnitude = ref(2)

src/renderer/src/deviceStore.ts

@@ -73,6 +73,9 @@ export interface HapticSettings {
   endPos: number
   detentCount: number
   vernier: number
+  kxForce: number
+  outputRamp: number
+  detentStrength: number
 }
 
 export interface DeviceSettings {
@@ -107,6 +110,7 @@ interface UpdateData {
   kd: number | undefined
   ku: number | undefined
   settings: DeviceSettings | undefined
+  error: string | undefined // TODO: Error messages have eventid 'update', change this once it's fixed
 }
 
 const { nanoIpc } = window
@@ -537,6 +541,34 @@ export const useDeviceStore = defineStore('device', {
         )
         this.setDirtyState(true)
       }
+    },
+    updateKeyActionParameter(index: number, updates: object, updateDevice: boolean = true) {
+      Object.assign(this.currentProfile!.keys[index], updates)
+      if (updateDevice) {
+        sendDebounced(
+          this.currentDeviceId!,
+          JSON.stringify({
+            profile: this.currentProfileName,
+            updates: { keys: this.currentProfile!.keys }
+          })
+        )
+        this.setDirtyState(true)
+      }
+    },
+    setHapticOutputRamp(value: number, updateDevice: boolean = true) {
+      this.currentProfile!.knob.forEach((v) => {
+        v.haptic.outputRamp = value
+      })
+      if (updateDevice) {
+        sendDebounced(
+          this.currentDeviceId!,
+          JSON.stringify({
+            profile: this.currentProfileName,
+            updates: { knob: this.currentProfile!.knob }
+          })
+        )
+        this.setDirtyState(true)
+      }
     }
   }
 })
@@ -552,9 +584,13 @@ export const initializeDevices = () => {
   // register event handlers
   nanoIpc.on((eventid, deviceid, dataString) => {
     //console.log('Received event', eventid, deviceid, dataString)
-    if (eventid === 'error') {
+    if (eventid === 'error' || (eventid === 'update' && dataString.includes('error'))) {
-      messageCallbacks.forEach((callback) => callback('Error', dataString))
+      // TODO: Error messages have eventid 'update', change this once it's fixed
-      console.error('Error:', dataString)
+      const data = JSON.parse(dataString) as UpdateData
+      if (data.error) {
+        messageCallbacks.forEach((callback) => callback('Error', data.error as string))
+        console.error('Error:', data.error)
+      }
     }
     if (eventid === 'saved') {
       deviceStore.setDirtyState(false)