84 lines
3.0 KiB
Vue
84 lines
3.0 KiB
Vue
<template>
|
|
<ConfigSection
|
|
:title="$t('config_options.feedback_designer.feedback_type.title')"
|
|
:icon-component="GaugeCircle">
|
|
<div class="flex font-heading">
|
|
<FeedbackTypeButton
|
|
v-for="(option, key) in feedbackTypeOptions" :key="key" :title="$t(option.titleKey)"
|
|
:icon="option.icon" :selected="feedbackType===key" @select="feedbackType=key" />
|
|
</div>
|
|
</ConfigSection>
|
|
<ConfigSection
|
|
:title="$t('config_options.feedback_designer.haptic_response.title')"
|
|
: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')" />
|
|
</ConfigSection>
|
|
<ConfigSection
|
|
:title="$t('config_options.feedback_designer.auditory_response.title')"
|
|
:icon-component="AudioLines" :show-toggle="true">
|
|
<SteppedSlider
|
|
v-model="auditoryHapticLevel"
|
|
:label="$t('config_options.feedback_designer.auditory_response.haptic_level')" />
|
|
<Separator />
|
|
<SteppedSlider
|
|
v-model="auditoryMagnitude"
|
|
:label="$t('config_options.feedback_designer.auditory_response.magnitude')"
|
|
:max="3"
|
|
:named-positions="[
|
|
{value:0, label: 'Faint'},
|
|
{value:1, label: 'Soft'},
|
|
{value:2, label: 'Normal'},
|
|
{value:3, label: 'Loud'}]" />
|
|
</ConfigSection>
|
|
</template>
|
|
<script setup>
|
|
import { AudioLines, AudioWaveform, GaugeCircle } from 'lucide-vue-next'
|
|
import ConfigSection from '@/components/config/ConfigSection.vue'
|
|
import SteppedSlider from '@/components/config/SteppedSlider.vue'
|
|
import { ref } from 'vue'
|
|
import FdIcon from '@/assets/gui-ico/ico-fd.svg'
|
|
import CdIcon from '@/assets/gui-ico/ico-cd.svg'
|
|
import VfIcon from '@/assets/gui-ico/ico-vf.svg'
|
|
import RcIcon from '@/assets/gui-ico/ico-rc.svg'
|
|
import FeedbackTypeButton from '@/components/config/FeedbackTypeButton.vue'
|
|
|
|
const feedbackType = ref('fineDetents') // TODO: replace with actual value
|
|
|
|
const feedbackTypeOptions = {
|
|
fineDetents: {
|
|
icon: FdIcon,
|
|
titleKey: 'config_options.feedback_designer.feedback_type.fine_detents',
|
|
},
|
|
coarseDetents: {
|
|
icon: CdIcon,
|
|
titleKey: 'config_options.feedback_designer.feedback_type.coarse_detents',
|
|
},
|
|
viscousRotation: {
|
|
icon: VfIcon,
|
|
titleKey: 'config_options.feedback_designer.feedback_type.viscous_rotation',
|
|
},
|
|
returnToCenter: {
|
|
icon: RcIcon,
|
|
titleKey: 'config_options.feedback_designer.feedback_type.return_to_center',
|
|
},
|
|
}
|
|
|
|
const feedbackStrength = ref(2)
|
|
const bounceBackStrength = ref(2)
|
|
const outputRampDampening = ref(2)
|
|
|
|
const auditoryHapticLevel = ref(2)
|
|
const auditoryMagnitude = ref(2)
|
|
|
|
</script> |