UPD: Key-/Knob-Components
This commit is contained in:
Robert Kossessa
@@ -37,14 +37,10 @@
|
||||
{value:2, label: 'Normal'},
|
||||
{value:3, label: 'Loud'}]" />
|
||||
</ConfigSection>
|
||||
<ConfigSection title="Ring Light" :icon-component="Lightbulb">
|
||||
<PaletteInput v-model="ringColors" />
|
||||
</ConfigSection>
|
||||
</template>
|
||||
<script setup>
|
||||
import { AudioLines, AudioWaveform, GaugeCircle, Lightbulb } from 'lucide-vue-next'
|
||||
import { AudioLines, AudioWaveform, GaugeCircle } from 'lucide-vue-next'
|
||||
import ConfigSection from '@/components/common/ConfigSection.vue'
|
||||
import PaletteInput from '@/components/common/PaletteInput.vue'
|
||||
import Color from 'color'
|
||||
import { ref } from 'vue'
|
||||
import TabSelect from '@/components/common/TabSelect.vue'
|
||||
@@ -81,19 +77,4 @@ const outputRampDampening = ref(2)
|
||||
|
||||
const auditoryHapticLevel = ref(2)
|
||||
const auditoryMagnitude = ref(2)
|
||||
|
||||
const ringColors = ref({
|
||||
primary: {
|
||||
titleKey: 'config_options.light_designer.primary_color',
|
||||
color: Color('#4f25ef'),
|
||||
},
|
||||
secondary: {
|
||||
titleKey: 'config_options.light_designer.secondary_color',
|
||||
color: Color('#1a1498'),
|
||||
},
|
||||
pointer: {
|
||||
titleKey: 'config_options.light_designer.pointer_color',
|
||||
color: Color('#ffa346'),
|
||||
},
|
||||
})
|
||||
</script>
|
||||
@@ -41,13 +41,13 @@
|
||||
<script setup>
|
||||
import { AudioLines, AudioWaveform, GaugeCircle } from 'lucide-vue-next'
|
||||
import ConfigSection from '@/components/common/ConfigSection.vue'
|
||||
import SteppedSlider from '@/components/common/SteppedSlider.vue'
|
||||
import { ref } from 'vue'
|
||||
import TabSelect from '@/components/common/TabSelect.vue'
|
||||
import FdIcon from '@/assets/icons/iconFineDetents.svg'
|
||||
import CdIcon from '@/assets/icons/iconCoarseDetents.svg'
|
||||
import VfIcon from '@/assets/icons/iconViscousRotation.svg'
|
||||
import RcIcon from '@/assets/icons/iconReturnToCenter.svg'
|
||||
import TabSelect from '@/components/common/TabSelect.vue'
|
||||
import SteppedSlider from '@/components/common/SteppedSlider.vue'
|
||||
|
||||
const feedbackType = ref('fineDetents') // TODO: replace with actual value
|
||||
|
||||
@@ -76,5 +76,4 @@ const outputRampDampening = ref(2)
|
||||
|
||||
const auditoryHapticLevel = ref(2)
|
||||
const auditoryMagnitude = ref(2)
|
||||
|
||||
</script>
|
||||
27
src/components/config/knob/KnobLightConfig.vue
Normal file
27
src/components/config/knob/KnobLightConfig.vue
Normal file
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<ConfigSection title="Ring Light" :icon-component="Lightbulb">
|
||||
<PaletteInput v-model="ringColors" />
|
||||
</ConfigSection>
|
||||
</template>
|
||||
<script setup>
|
||||
import { Lightbulb } from 'lucide-vue-next'
|
||||
import ConfigSection from '@/components/common/ConfigSection.vue'
|
||||
import PaletteInput from '@/components/common/PaletteInput.vue'
|
||||
import Color from 'color'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const ringColors = ref({
|
||||
primary: {
|
||||
titleKey: 'config_options.light_designer.primary_color',
|
||||
color: Color('#4f25ef'),
|
||||
},
|
||||
secondary: {
|
||||
titleKey: 'config_options.light_designer.secondary_color',
|
||||
color: Color('#1a1498'),
|
||||
},
|
||||
pointer: {
|
||||
titleKey: 'config_options.light_designer.pointer_color',
|
||||
color: Color('#ffa346'),
|
||||
},
|
||||
})
|
||||
</script>
|
||||
@@ -1,46 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
v-for="(config, index) in config_tabs"
|
||||
:key="config"
|
||||
:data-selected="current_tab===config.id"
|
||||
class="px-4 h-20 flex items-center hover:bg-zinc-900 data-[selected=true]:bg-zinc-200 hover:data-[selected=true]:bg-zinc-100 data-[selected=true]:text-black border-solid border-0 border-b"
|
||||
:class="config.disabled ? 'cursor-not-allowed' : 'cursor-pointer'"
|
||||
@click="current_tab=config.disabled ? current_tab : config.id; $refs.configSelect[index].scramble()">
|
||||
<div class="w-full">
|
||||
<h1 class="text-lg text-nowrap" :class="{'text-muted-foreground': config.disabled}">
|
||||
<ScrambleText ref="configSelect" class="align-middle" :text="$t(`config_options.${config.id}.title`)" />
|
||||
<Badge
|
||||
v-if="config.hasOwnProperty('badgeKey')"
|
||||
v-t="config.badgeKey"
|
||||
class="font-mono ml-2 rounded-full h-4 align-middle bg-zinc-900 text-muted-foreground" />
|
||||
</h1>
|
||||
</div>
|
||||
<ChevronRight v-if="current_tab === config.id" class="float-right" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import ScrambleText from '@/components/common/ScrambleText.vue'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { ChevronRight } from 'lucide-vue-next'
|
||||
|
||||
const config_tabs = ref([
|
||||
{ id: 'profile_settings' },
|
||||
{ id: 'feedback_designer' },
|
||||
{ id: 'mapping_configuration' },
|
||||
{ id: 'light_designer' },
|
||||
{
|
||||
id: 'gui_designer',
|
||||
disabled: true,
|
||||
badgeKey: 'common.coming_soon',
|
||||
},
|
||||
{ id: 'dev_playground' },
|
||||
])
|
||||
|
||||
const current_tab = defineModel({
|
||||
type: String,
|
||||
default: 'profile_settings',
|
||||
})
|
||||
</script>
|
||||
@@ -1,8 +0,0 @@
|
||||
<template>
|
||||
<WIP />
|
||||
<DeviceLEDRing />
|
||||
</template>
|
||||
<script setup>
|
||||
import WIP from '@/components/WIP.vue'
|
||||
import DeviceLEDRing from '@/components/device/DeviceLEDRing.vue'
|
||||
</script>
|
||||
@@ -1,52 +0,0 @@
|
||||
<template>
|
||||
<button
|
||||
class="flex-1 flex flex-col items-center py-2"
|
||||
:class="{'text-black bg-zinc-200 hover:bg-zinc-100': selected,
|
||||
'hover:bg-zinc-800 text-muted-foreground' : !selected}"
|
||||
@click="$emit('select'); $refs.title.scramble()">
|
||||
<img
|
||||
draggable="false"
|
||||
:src="icon" alt="connection-type-icon"
|
||||
class="w-16 py-2"
|
||||
:class="{'invert': invert && selected}">
|
||||
<ScrambleText ref="title" :resize="false" class="text-xs text-wrap p-1" :text="title" />
|
||||
<span>
|
||||
<ArrowBigUp class="inline-block" />
|
||||
<Badge
|
||||
class="shadow-none text-wrap inline-block p-0.5 mx-1"
|
||||
:class="{'bg-orange-400': selected, 'bg-zinc-400': !selected}">Space</Badge>+<Badge
|
||||
class="shadow-none text-wrap inline-block p-0.5 mx-1"
|
||||
:class="{'bg-orange-400': selected, 'bg-zinc-400': !selected}">E</Badge>
|
||||
</span>
|
||||
</button>
|
||||
</template>
|
||||
<script setup>
|
||||
import ScrambleText from '@/components/common/ScrambleText.vue'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { ArrowBigUp } from 'lucide-vue-next'
|
||||
|
||||
defineEmits(['select'])
|
||||
|
||||
defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
icon: {
|
||||
type: [String, Object, Function],
|
||||
default: '',
|
||||
},
|
||||
selected: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
invert: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
badge: {
|
||||
type: [String, Object, Function],
|
||||
default: '',
|
||||
},
|
||||
})
|
||||
</script>
|
||||
@@ -1,88 +0,0 @@
|
||||
<template>
|
||||
<ConfigSection
|
||||
title="Ring Lights" :icon-component="Lightbulb"
|
||||
:show-toggle="true">
|
||||
<h2 class="p-6 inline-block">{{ $t('config_options.light_designer.led_mode') }}</h2> [TODO]
|
||||
<div class="px-6 py-2">
|
||||
<Slider v-model="brightnessSliderModel" max="100" class="h-10" />
|
||||
</div>
|
||||
</ConfigSection>
|
||||
<ConfigSection
|
||||
title="Key Lights" :icon-component="Lightbulb"
|
||||
:show-toggle="true">
|
||||
<h2 class="p-6 inline-block">{{ $t('config_options.light_designer.led_mode') }}</h2> [TODO]
|
||||
<div class="px-6 py-2">
|
||||
<Slider v-model="brightnessSliderModel" max="100" class="h-10" />
|
||||
</div>
|
||||
</ConfigSection>
|
||||
<ConfigSection title="Ring Colors" :icon-component="Circle">
|
||||
<PaletteInput v-model="ringColors" />
|
||||
</ConfigSection>
|
||||
<ConfigSection title="Key Colors" :icon-component="PanelBottom">
|
||||
<PaletteInput v-model="keyColors" />
|
||||
</ConfigSection>
|
||||
<ConfigSection title="Key Colors (Pressed)" :icon-component="PanelBottomClose">
|
||||
<PaletteInput v-model="keyColors" />
|
||||
</ConfigSection>
|
||||
</template>
|
||||
<script setup>
|
||||
import { Lightbulb, PanelBottomClose, Circle, PanelBottom } from 'lucide-vue-next'
|
||||
import ConfigSection from '@/components/common/ConfigSection.vue'
|
||||
import PaletteInput from '@/components/common/PaletteInput.vue'
|
||||
import Color from 'color'
|
||||
import { computed, ref } from 'vue'
|
||||
import { useStore } from '@/store.js'
|
||||
import { Slider } from '@/components/ui/slider'
|
||||
|
||||
const store = useStore()
|
||||
|
||||
const ledConfig = computed(() => store.selectedProfile.ledConfig)
|
||||
|
||||
const brightnessSliderModel = computed({
|
||||
get: () => [ledConfig.value.ledBrightness],
|
||||
set: (val) => ledConfig.value.ledBrightness = val[0],
|
||||
})
|
||||
|
||||
const ringColors = ref({
|
||||
primary: {
|
||||
key: 'config_options.light_designer.primary_color',
|
||||
color: computed({
|
||||
get: () => Color(ledConfig.value.primary),
|
||||
set: (color) => [ledConfig.value.primary.h, ledConfig.value.primary.s, ledConfig.value.primary.v] = color.hsv().color,
|
||||
}),
|
||||
},
|
||||
secondary: {
|
||||
key: 'config_options.light_designer.secondary_color',
|
||||
color: computed({
|
||||
get: () => Color(ledConfig.value.secondary),
|
||||
set: (color) => [ledConfig.value.secondary.h, ledConfig.value.secondary.s, ledConfig.value.secondary.v] = color.hsv().color,
|
||||
}),
|
||||
},
|
||||
pointer: {
|
||||
key: 'config_options.light_designer.pointer_color',
|
||||
color: computed({
|
||||
get: () => Color(ledConfig.value.pointer),
|
||||
set: (color) => [ledConfig.value.pointer.h, ledConfig.value.pointer.s, ledConfig.value.pointer.v] = color.hsv().color,
|
||||
}),
|
||||
},
|
||||
})
|
||||
|
||||
const keyColors = ref({
|
||||
a: {
|
||||
key: 'a',
|
||||
color: Color('#ff2a7d'),
|
||||
},
|
||||
b: {
|
||||
key: 'b',
|
||||
color: Color('#f32a9c'),
|
||||
},
|
||||
c: {
|
||||
key: 'c',
|
||||
color: Color('#d12ab1'),
|
||||
},
|
||||
d: {
|
||||
key: 'd',
|
||||
color: Color('#a92ac3'),
|
||||
},
|
||||
})
|
||||
</script>
|
||||
@@ -1,174 +0,0 @@
|
||||
<template>
|
||||
<ConfigSection :title="$t('config_options.mapping_configuration.key_mapping.title')" :icon-component="Keyboard">
|
||||
<div class="flex font-heading">
|
||||
<KeySelectButton
|
||||
v-for="(option, key) in keySelectOptions" :key="key" :title="$t(option.titleKey)"
|
||||
:invert="option.invert" :badge="option.badge"
|
||||
:icon="option.icon" :selected="selectedKey===key" @select="selectedKey=key" />
|
||||
</div>
|
||||
<Separator />
|
||||
<Command>
|
||||
|
||||
<CommandList>
|
||||
<CommandEmpty>{{ $t('config_options.mapping_configuration.key_mapping.not_found') }}
|
||||
|
||||
</CommandEmpty>
|
||||
<CommandInput
|
||||
:placeholder="$t('config_options.mapping_configuration.key_mapping.search_placeholder')" />
|
||||
<CommandGroup heading="Common">
|
||||
<CommandItem value="backspace">
|
||||
<Squircle color="grey" class="w-4 h-4 mr-2" />
|
||||
Backspace
|
||||
</CommandItem>
|
||||
<CommandItem value="delete">
|
||||
<Squircle color="grey" class="w-4 h-4 mr-2" />
|
||||
Delete
|
||||
</CommandItem>
|
||||
<CommandItem value="enter">
|
||||
<Squircle color="grey" class="w-4 h-4 mr-2" />
|
||||
Enter
|
||||
</CommandItem>
|
||||
<CommandItem value="end">
|
||||
<Squircle color="grey" class="w-4 h-4 mr-2" />
|
||||
End
|
||||
</CommandItem>
|
||||
<CommandItem value="arrow up">
|
||||
<Squircle color="grey" class="w-4 h-4 mr-2" />
|
||||
Arrow Up
|
||||
</CommandItem>
|
||||
<CommandItem value="arrow down">
|
||||
<Squircle color="grey" class="w-4 h-4 mr-2" />
|
||||
Arrow Down
|
||||
</CommandItem>
|
||||
<CommandItem value="arrow left">
|
||||
<Squircle color="grey" class="w-4 h-4 mr-2" />
|
||||
Arrow Left
|
||||
</CommandItem>
|
||||
<CommandItem value="arrow right">
|
||||
<Squircle color="grey" class="w-4 h-4 mr-2" />
|
||||
Arrow Right
|
||||
</CommandItem>
|
||||
</CommandGroup>
|
||||
<CommandSeparator />
|
||||
<CommandGroup heading="MIDI Control Changes">
|
||||
<CommandItem value="cc0">
|
||||
<KeyboardMusic color="grey" class="w-4 h-4 mr-2" />
|
||||
Bank Select (CC0)
|
||||
</CommandItem>
|
||||
<CommandItem value="cc2">
|
||||
<KeyboardMusic color="grey" class="w-4 h-4 mr-2" />
|
||||
Modulation (CC1)
|
||||
</CommandItem>
|
||||
<CommandItem value="cc3">
|
||||
<KeyboardMusic color="grey" class="w-4 h-4 mr-2" />
|
||||
Foot Controller (CC4)
|
||||
</CommandItem>
|
||||
<CommandItem value="cc4">
|
||||
<KeyboardMusic color="grey" class="w-4 h-4 mr-2" />
|
||||
Portamento (CC5)
|
||||
</CommandItem>
|
||||
<CommandItem value="cc5">
|
||||
<KeyboardMusic color="grey" class="w-4 h-4 mr-2" />
|
||||
Volume (CC7)
|
||||
</CommandItem>
|
||||
</CommandGroup>
|
||||
<CommandGroup heading="Macros">
|
||||
<CommandItem value="Page Scroll">
|
||||
<Squircle color="grey" class="w-4 h-4 mr-2" />
|
||||
Page Scroller (M0)
|
||||
</CommandItem>
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
<CommandSeparator />
|
||||
|
||||
</Command>
|
||||
<Separator />
|
||||
</ConfigSection>
|
||||
|
||||
<ConfigSection
|
||||
:title="$t('config_options.mapping_configuration.knob_mapping.title')"
|
||||
:icon-component="GaugeCircle">
|
||||
<div class="flex flex-col p-8 pt-4">
|
||||
<span class="text-sm text-muted-foreground font-mono">Feedback Strength</span>
|
||||
<Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
|
||||
<div class="flex flex-row px-1 py-1.5">
|
||||
<div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
|
||||
<div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
|
||||
<div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
|
||||
<div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
|
||||
<div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<Separator />
|
||||
<div class="flex flex-col p-8 pt-4">
|
||||
<span class="text-sm text-muted-foreground font-mono">Bounce Back Strength</span>
|
||||
<Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
|
||||
<div class="flex flex-row px-1 py-1.5">
|
||||
<div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
|
||||
<div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
|
||||
<div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
|
||||
<div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
|
||||
<div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
|
||||
</div>
|
||||
</div>
|
||||
<Separator />
|
||||
<div class="flex flex-col p-8 pt-4">
|
||||
<span class="text-sm text-muted-foreground font-mono">Output Ramp Dampening</span>
|
||||
<Slider :default-value="[4]" :max="4" :step="1" class="pt-4" />
|
||||
<div class="flex flex-row px-1 py-1.5">
|
||||
<div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
|
||||
<div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
|
||||
<div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
|
||||
<div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
|
||||
<div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
|
||||
</div>
|
||||
</div>
|
||||
</ConfigSection>
|
||||
</template>
|
||||
<script setup>
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Tabs } from '@/components/ui/tabs'
|
||||
import {
|
||||
Command,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList, CommandSeparator,
|
||||
} from '@/components/ui/command'
|
||||
import { Slider } from '@/components/ui/slider'
|
||||
import { KeyboardMusic, Squircle, Keyboard, GaugeCircle, Play, Pause } from 'lucide-vue-next'
|
||||
import ConfigSection from '@/components/common/ConfigSection.vue'
|
||||
import KeyO from '@/assets/icons/iconKeyOrange.svg'
|
||||
import Key from '@/assets/icons/iconKeyWhite.svg'
|
||||
import KeyG from '@/assets/icons/iconKeyGrey.svg'
|
||||
import KeyD from '@/assets/icons/iconKeyDark.svg'
|
||||
import { ref } from 'vue'
|
||||
import KeySelectButton from '@/components/config/old/KeySelectButton.vue'
|
||||
|
||||
const selectedKey = ref('a') // TODO: replace with actual value
|
||||
|
||||
const keySelectOptions = {
|
||||
a: {
|
||||
icon: KeyO,
|
||||
titleKey: 'config_options.mapping_configuration.key_mapping.switch.a',
|
||||
invert: false,
|
||||
},
|
||||
b: {
|
||||
icon: Key,
|
||||
titleKey: 'config_options.mapping_configuration.key_mapping.switch.b',
|
||||
invert: true,
|
||||
},
|
||||
c: {
|
||||
icon: KeyG,
|
||||
titleKey: 'config_options.mapping_configuration.key_mapping.switch.c',
|
||||
invert: true,
|
||||
},
|
||||
d: {
|
||||
icon: KeyD,
|
||||
titleKey: 'config_options.mapping_configuration.key_mapping.switch.d',
|
||||
invert: true,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user