matei/zeroone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UPD: Refactoring

Browse Source
This commit is contained in:
Robert Kossessa
2024-01-24 01:12:43 +01:00
parent 077e3f48b8
commit 5720effb78
15 changed files with 100 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/ConfigPane.vue Normal file
View File

@@ -0,0 +1,38 @@
<template>
<div>
<div
class="px-6 h-20 flex items-center bg-zinc-900 bg-opacity-40"
@mouseenter="$refs.configPaneTitle.scramble(0.15, 100)">
<div>
<h1 class="text-lg">
<ScrambleText ref="configPaneTitle" class="align-middle" :text="$t(`config_options.${page}.title`)" />
</h1>
<p class="text-xs text-muted-foreground">
{{ $t(`config_options.${page}.subtitle`) }}
</p>
</div>
</div>
<component :is="configPages[page]" />
</div>
</template>
<script setup>
import LEDsConfig from '@/components/config/LEDsConfig.vue'
import ProgramConfig from '@/components/config/ProgramConfig.vue'
import MappingConfig from '@/components/config/MappingConfig.vue'
import HapticConfig from '@/components/config/HapticConfig.vue'
import ScrambleText from '@/components/effects/ScrambleText.vue'
defineProps({
page: {
type: String,
default: 'program_settings',
},
})
const configPages = {
program_settings: ProgramConfig,
feedback_designer: HapticConfig,
mapping_configuration: MappingConfig,
light_designer: LEDsConfig,
}
</script>

47
src/components/ConfigSelect.vue Normal file
View File

@@ -0,0 +1,47 @@
<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 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()"
@mouseenter="$refs.configSelect[index].scramble(0.15, 100)">
<div>
<h1 class="text-lg" :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 rounded-full h-4 align-middle bg-zinc-900 text-muted-foreground" />
</h1>
<p class="text-xs text-muted-foreground">
{{ $t(`config_options.${config.id}.subtitle`) }}
</p>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
import ScrambleText from '@/components/effects/ScrambleText.vue'
import { Badge } from '@/components/ui/badge/index.js'
const config_tabs = ref([
{ id: 'program_settings' },
{ id: 'feedback_designer' },
{ id: 'mapping_configuration' },
{ id: 'light_designer' },
{
id: 'gui_designer',
disabled: true,
badgeKey: 'common.coming_soon',
},
])
const current_tab = defineModel({
type: String,
default: 'program_settings',
})
</script>

41
src/components/Navbar.vue Normal file
View File

@@ -0,0 +1,41 @@
<template>
<div class="flex">
<Menubar class="w-full rounded-none bg-zinc-950">
<MenubarMenu>
<MenubarTrigger v-t="'navbar.device.title'" />
<MenubarContent>
<!-- TODO: Switch keyboard shortcut icons based on platform -->
<MenubarItem>
{{ $t('navbar.device.disconnect') }}
<MenubarShortcut>⌘D</MenubarShortcut>
</MenubarItem>
<MenubarItem>{{ $t('navbar.device.about') }}</MenubarItem>
<MenubarSeparator />
<MenubarItem>{{ $t('navbar.device.preferences') }}</MenubarItem>
<MenubarSeparator />
<MenubarItem>{{ $t('navbar.device.export') }}
<MenubarShortcut>⌘E</MenubarShortcut>
</MenubarItem>
<MenubarItem>{{ $t('navbar.device.import') }}
<MenubarShortcut>⌘I</MenubarShortcut>
</MenubarItem>
<MenubarSeparator />
<MenubarItem>{{ $t('navbar.device.quit') }}
<MenubarShortcut>⌘Q</MenubarShortcut>
</MenubarItem>
</MenubarContent>
</MenubarMenu>
</Menubar>
</div>
</template>
<script setup>
import {
Menubar,
MenubarMenu,
MenubarShortcut,
MenubarSeparator,
MenubarItem,
MenubarTrigger,
MenubarContent,
} from '@/components/ui/menubar/index.js'
</script>

12
src/components/ProfileManager.vue
View File

@@ -2,7 +2,7 @@
<div>
<div class="p-4">
<h1 class="text-lg">
<ScrambleReveal :text="$t('profiles.title')" />
<ScrambleText :text="$t('profiles.title')" />
</h1>
<p class="text-xs text-muted-foreground">
{{ $t('profiles.subtitle') }}
@@ -10,15 +10,19 @@
</div>
<Separator />
<Pop />
<DeviceBar />
<SchemaTest />
</div>
</template>
<script>
import Pop from '@/components/patterns/Pop.vue'
import ScrambleReveal from '@/components/ScrambleText.vue'
import Pop from '@/components/old/Pop.vue'
import ScrambleReveal from '@/components/effects/ScrambleText.vue'
import { Separator } from '@/components/ui/separator/index.js'
import SchemaTest from '@/components/SchemaTest.vue'
import DeviceBar from '@/components/device-gui/DeviceBar.vue'
export default {
name: 'ProfileManager',
components: { Separator, Pop, ScrambleReveal },
components: { DeviceBar: DeviceBar, SchemaTest, Separator, Pop, ScrambleText: ScrambleReveal },
}
</script>

240
src/components/config/HapticConfig.vue Normal file
View File

@@ -0,0 +1,240 @@
<template>
<TabsContent value="haptic-config" class="mt-0">
<div class="w-96 bg-zinc-900 bg-opacity-40">
<div class="space-y-1 p-6">
<h1 class="leading-none text-lg">
{{ $t('config_options.feedback_designer.title') }}
</h1>
<p class="text-xs text-muted-foreground">
{{ $t('config_options.feedback_designer.subtitle') }}
</p>
</div>
<Separator />
<ScrollArea class="h-[720px]">
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
<div class="flex-none">
<GaugeCircle class="h-4 w-4" />
</div>
<div class="flex-initial"><h2 class="text-sm px-2 py-4">
{{ $t('config_options.feedback_designer.feedback_type.title') }}</h2></div>
</div>
<Separator />
<Tabs default-value="fd">
<TabsList class="grid grid-cols-4 h-auto text-muted-foreground">
<TabsTrigger value="fd">
<div class="grid grid-flow-row auto-rows-max justify-items-center ">
<div class="size-16 mb-2">
<img src="../../assets/gui-ico/ico-fd.svg">
</div>
<span
class="text-xs leading-3 text-wrap">{{ $t('config_options.feedback_designer.feedback_type.fine_detents')
}}</span>
</div>
</TabsTrigger>
<TabsTrigger value="cd">
<div class="grid grid-flow-row auto-rows-max justify-items-center">
<div class="size-16 mb-2">
<img src="../../assets/gui-ico/ico-cd.svg">
</div>
<span
class="text-xs leading-3 text-wrap">{{ $t('config_options.feedback_designer.feedback_type.coarse_detents')
}}</span>
</div>
</TabsTrigger>
<TabsTrigger value="vr">
<div class="grid grid-flow-row auto-rows-max justify-items-center">
<div class="size-16 mb-2">
<img src="../../assets/gui-ico/ico-vf.svg">
</div>
<span
class="text-xs leading-3 text-wrap">{{ $t('config_options.feedback_designer.feedback_type.viscous_rotation')
}}</span>
</div>
</TabsTrigger>
<TabsTrigger value="rt">
<div class="grid grid-flow-row auto-rows-max justify-items-center">
<div class="size-16 mb-2">
<img src="../../assets/gui-ico/ico-rc.svg">
</div>
<span class="text-xs leading-3 text-wrap">
{{ $t('config_options.feedback_designer.feedback_type.return_to_center') }}
</span>
</div>
</TabsTrigger>
</TabsList>
</Tabs>
<Separator />
<div class="flex flex-col p-8 pt-4">
<span
class="text-sm text-muted-foreground font-mono h-8 text-center">{{ $t('config_options.feedback_designer.total_positions')
}}</span>
<div class="flex w-full max-w-sm items-center gap-0">
<Button
type="submit" class="rounded-none text-xl font-pixellg align-middle font-bold"
@click="count--">
-
</Button>
<Input
id="positions"
v-model="count"
class="rounded-none border-none text-5xl font-pixellg focus-visible:ring-0"
type="number" placeholder="10" max="65535" min="10" />
<Button
type="submit" class="rounded-none text-xl font-pixellg font-bold"
@click="count++">
+
</Button>
</div>
</div>
<Separator />
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
<div class="flex-none">
<AudioWaveform class="h-4 w-4" />
</div>
<div class="grow">
<h2 class="text-sm px-2 py-4">{{ $t('config_options.feedback_designer.haptic_response.title')
}}</h2>
</div>
<div class="flex-none">
<Toggle
class="data-[state=on]:ring-emerald-600 data-[state=on]:ring-1" variant="outline"
size="sm" :default-value="true" aria-label="EnablePrimary">
<Power class="w-4 h-4" />
</Toggle>
</div>
</div>
<Separator />
<div class="flex flex-col p-8 pt-4">
<span
class="text-sm text-muted-foreground font-mono">{{ $t('config_options.feedback_designer.haptic_response.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">{{ $t('config_options.feedback_designer.haptic_response.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">{{ $t('config_options.feedback_designer.haptic_response.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>
<Separator />
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
<div class="flex-none">
<AudioLines class="h-4 w-4" />
</div>
<div class="grow"><h2 class="text-sm px-2 py-4">
{{ $t('config_options.feedback_designer.auditory_response.title') }}</h2></div>
<div class="flex-none">
<Toggle
class="data-[state=on]:ring-emerald-600 data-[state=on]:ring-1" variant="outline"
size="sm" :default-value="true" aria-label="EnablePrimary">
<Power class="w-4 h-4" />
</Toggle>
</div>
</div>
<Separator />
<div class="flex flex-col p-8 pt-4">
<span
class="text-sm text-muted-foreground font-mono">{{ $t('config_options.feedback_designer.auditory_response.haptic_level')
}}</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">{{ $t('config_options.feedback_designer.auditory_response.magnitude')
}}</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">Faint</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-2">Soft</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-7">Medium</div>
<div class="flex-1 text-xs text-muted-foreground font-mono text-right">Hard</div>
</div>
</div>
</ScrollArea>
<Separator />
</div>
</TabsContent>
</template>
<script>
import { ScrollArea } from '@/components/ui/scroll-area/index.js'
import { Tabs } from '@/components/ui/tabs/index.js'
import { Slider } from '@/components/ui/slider/index.js'
export default {
name: 'HapticConfig',
components: { Slider, Tabs, ScrollArea },
}
</script>
<style scoped>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
text-align: center;
}
</style>

214
src/components/config/LEDsConfig.vue Normal file
View File

@@ -0,0 +1,214 @@
<template>
<TabsContent value="led-config" class="mt-0">
<div class="w-96 bg-zinc-900 bg-opacity-40">
<div class="space-y-1 p-6">
<h1 class="leading-none text-lg">
{{ $t('config_options.light_designer.title') }}
</h1>
<p class="text-xs text-muted-foreground">
{{ $t('config_options.light_designer.subtitle') }}
</p>
</div>
<Separator />
<ScrollArea class="h-[720px]">
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
<div class="flex-none">
<GaugeCircle class="h-4 w-4" />
</div>
<div class="flex-initial"><h2 class="text-sm px-2 py-4">Feedback Type</h2></div>
</div>
<Separator />
<Tabs default-value="fd">
<TabsList class="grid grid-cols-4 h-auto text-muted-foreground">
<TabsTrigger value="fd">
<div class="grid grid-flow-row auto-rows-max justify-items-center ">
<div class="size-16 mb-2">
<img src="../../assets/gui-ico/ico-fd.svg">
</div>
<span class="text-xs leading-3 text-wrap">
Fine Detents
</span>
</div>
</TabsTrigger>
<TabsTrigger value="cd">
<div class="grid grid-flow-row auto-rows-max justify-items-center">
<div class="size-16 mb-2">
<img src="../../assets/gui-ico/ico-cd.svg">
</div>
<span class="text-xs leading-3 text-wrap">
Coarse Detents
</span>
</div>
</TabsTrigger>
<TabsTrigger value="vr">
<div class="grid grid-flow-row auto-rows-max justify-items-center">
<div class="size-16 mb-2">
<img src="../../assets/gui-ico/ico-vf.svg">
</div>
<span class="text-xs leading-3 text-wrap">
Viscous Rotation
</span>
</div>
</TabsTrigger>
<TabsTrigger value="rt">
<div class="grid grid-flow-row auto-rows-max justify-items-center">
<div class="size-16 mb-2">
<img src="../../assets/gui-ico/ico-rc.svg">
</div>
<span class="text-xs leading-3 text-wrap">
Return to Center
</span>
</div>
</TabsTrigger>
</TabsList>
</Tabs>
<Separator />
<div class="flex flex-col p-8 pt-4">
<span class="text-sm text-muted-foreground font-mono h-8 text-center">Total Positions</span>
<div class="flex w-full max-w-sm items-center gap-0">
<Button type="submit" class="rounded-l-full text-xl font-mono align-middle font-bold">
-
</Button>
<Input
id="positions" class="rounded-none text-xl font-pixellg" type="number" placeholder="10"
default-value="60" max="65535" min="10" />
<Button type="submit" class="rounded-r-full text-xl font-mono font-bold">
+
</Button>
</div>
</div>
<Separator />
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
<div class="flex-none">
<AudioWaveform class="h-4 w-4" />
</div>
<div class="grow">
<h2 class="text-sm px-2 py-4">Haptic Response</h2>
</div>
<div class="flex-none">
<Toggle
class="data-[state=on]:ring-emerald-600 data-[state=on]:ring-1" variant="outline"
size="sm" :default-value="true" aria-label="EnablePrimary">
<Power class="w-4 h-4" />
</Toggle>
</div>
</div>
<Separator />
<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>
<Separator />
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
<div class="flex-none">
<AudioLines class="h-4 w-4" />
</div>
<div class="grow"><h2 class="text-sm px-2 py-4"> Auditory Response</h2></div>
<div class="flex-none">
<Toggle
class="data-[state=on]:ring-emerald-600 data-[state=on]:ring-1" variant="outline"
size="sm" :default-value="true" aria-label="EnablePrimary">
<Power class="w-4 h-4" />
</Toggle>
</div>
</div>
<Separator />
<div class="flex flex-col p-8 pt-4">
<span class="text-sm text-muted-foreground font-mono">Auditory Haptic Level</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">Auditory Magnitude</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">Faint</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-2">Soft</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-7">Medium</div>
<div class="flex-1 text-xs text-muted-foreground font-mono text-right">Hard</div>
</div>
</div>
</ScrollArea>
<Separator />
</div>
</TabsContent>
</template>
<script>
export default {
name: 'LEDsConfig',
}
</script>
<style scoped>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
text-align: center;
}
</style>

279
src/components/config/MappingConfig.vue Normal file
View File

@@ -0,0 +1,279 @@
<template>
<TabsContent value="map-config" class="mt-0">
<div class="w-96 bg-zinc-900 bg-opacity-40">
<div class="space-y-1 p-6">
<h1 class="leading-none text-lg">
{{ $t('config_options.mapping_configuration.title') }}
</h1>
<p class="text-xs text-muted-foreground">
{{ $t('config_options.mapping_configuration.subtitle') }}
</p>
</div>
<Separator />
<ScrollArea class="h-[720px]">
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
<div class="flex-none">
<Keyboard class="h-4 w-4" />
</div>
<div class="flex-initial"><h2 class="text-sm px-2 py-4">
{{ $t('config_options.mapping_configuration.key_mapping.title') }}</h2></div>
</div>
<Separator />
<Tabs default-value="fd">
<TabsList class="grid grid-cols-4 h-auto text-muted-foreground">
<TabsTrigger value="fd">
<div class="grid grid-flow-row auto-rows-max justify-items-center ">
<div class="size-16 mb-2">
<img src="../../assets/gui-ico/ico-key-o.svg">
</div>
<span class="text-xs leading-3 text-wrap">
{{ $t('config_options.mapping_configuration.key_mapping.switch.a') }}
<Badge class="bg-orange-400 mt-2">Shift</Badge>
</span>
</div>
</TabsTrigger>
<TabsTrigger value="cd">
<div class="grid grid-flow-row auto-rows-max justify-items-center">
<div class="size-16 mb-2">
<img src="../../assets/gui-ico/ico-key.svg">
</div>
<span class="text-xs leading-3 text-wrap">
{{ $t('config_options.mapping_configuration.key_mapping.switch.b') }}
<Badge class="bg-zinc-400 mt-2">Fn1</Badge>
</span>
</div>
</TabsTrigger>
<TabsTrigger value="vr">
<div class="grid grid-flow-row auto-rows-max justify-items-center">
<div class="size-16 mb-2">
<img src="../../assets/gui-ico/ico-key-g.svg">
</div>
<span class="text-xs leading-3 text-wrap">
{{ $t('config_options.mapping_configuration.key_mapping.switch.c') }}
<Badge class="bg-zinc-400 mt-2">Fn2</Badge>
</span>
</div>
</TabsTrigger>
<TabsTrigger value="rt">
<div class="grid grid-flow-row auto-rows-max justify-items-center">
<div class="size-16 mb-2">
<img src="../../assets/gui-ico/ico-key-d.svg">
</div>
<span class="text-xs leading-3 text-wrap">
{{ $t('config_options.mapping_configuration.key_mapping.switch.d') }}
<Badge class="bg-zinc-400 mt-2">M0</Badge>
</span>
</div>
</TabsTrigger>
</TabsList>
</Tabs>
<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 />
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
<div class="flex-none">
<GaugeCircle class="h-4 w-4" />
</div>
<div class="grow">
<h2 class="text-sm px-2 py-4">{{ $t('config_options.mapping_configuration.knob_mapping.title')
}}</h2>
</div>
<div class="flex-none">
<Toggle
class="data-[state=on]:ring-emerald-600 data-[state=on]:ring-1" variant="outline"
size="sm" :default-value="true" aria-label="EnablePrimary">
<Power class="w-4 h-4" />
</Toggle>
</div>
</div>
<Separator />
<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>
<Separator />
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
<div class="flex-none">
<AudioLines class="h-4 w-4" />
</div>
<div class="grow"><h2 class="text-sm px-2 py-4"> Auditory Response</h2></div>
<div class="flex-none">
<Toggle
class="data-[state=on]:ring-emerald-600 data-[state=on]:ring-1" variant="outline"
size="sm" :default-value="true" aria-label="EnablePrimary">
<Power class="w-4 h-4" />
</Toggle>
</div>
</div>
<Separator />
<div class="flex flex-col p-8 pt-4">
<span class="text-sm text-muted-foreground font-mono">Auditory Haptic Level</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">Auditory Magnitude</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">Faint</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-2">Soft</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-7">Medium</div>
<div class="flex-1 text-xs text-muted-foreground font-mono text-right">Hard</div>
</div>
</div>
</ScrollArea>
<Separator />
</div>
</TabsContent>
</template>
<script>
export default {
name: 'MappingConfig',
}
</script>
<style scoped>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
text-align: center;
}
</style>

156
src/components/config/ProgramConfig.vue Normal file
View File

@@ -0,0 +1,156 @@
<template>
<TabsContent value="prog-config" class="mt-0">
<div class="w-96 bg-zinc-900 bg-opacity-40">
<div class="space-y-1 p-6">
<h1 class="leading-none text-lg">
{{ $t('config_options.program_settings.title') }}
</h1>
<p class="text-xs text-muted-foreground">
{{ $t('config_options.program_settings.subtitle') }}
</p>
</div>
<Separator />
<ScrollArea class="h-[720px]">
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
<div class="flex-none">
<Cable class="h-4 w-4" />
</div>
<div class="flex-initial"><h2 class="text-sm px-2 py-4">
{{ $t('config_options.program_settings.connection_type.title') }}</h2></div>
</div>
<Separator />
<Tabs default-value="fd">
<TabsList class="grid grid-cols-2 h-auto text-muted-foreground">
<TabsTrigger value="fd">
<div class="grid grid-flow-row auto-rows-max justify-items-center ">
<div class="w-24 size-w mb-2">
<img src="../../assets/gui-ico/ico-usb-logo.svg" alt="usb-logo">
</div>
<span
class="text-xs leading-3 text-wrap">{{ $t('config_options.program_settings.connection_type.usb')
}}</span>
</div>
</TabsTrigger>
<TabsTrigger value="cd">
<div class="grid grid-flow-row auto-rows-max justify-items-center">
<div class="w-24 size-w mb-2">
<img src="../../assets/gui-ico/ico-midi-logo.svg" alt="midi-logo">
</div>
<span class="text-xs leading-3 text-wrap">
{{ $t('config_options.program_settings.connection_type.midi') }}
</span>
</div>
</TabsTrigger>
</TabsList>
</Tabs>
<Separator />
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
<div class="flex-none">
<Type class="h-4 w-4" />
</div>
<div class="grow">
<h2 class="text-sm px-2 py-4">{{ $t('config_options.program_settings.profile_properties.title')
}}</h2>
</div>
</div>
<Separator />
<div class="flex flex-col p-8 py-4">
<span
class="text-sm text-muted-foreground font-mono pb-4">{{ $t('config_options.program_settings.profile_properties.program_name')
}}</span>
<Input
type="text" :placeholder="$t('config_options.program_settings.profile_properties.program_name')"
class="text-xl border-0 text-center border-b rounded-none focus-visible:ring-0 focus-visible:border-emerald-500 font-pixelsm uppercase"
default-value="Oscillator 1" maxlength="20" />
<Label for="text" class="text-muted-foreground text-right mt-1 text-xs">16/20</Label>
</div>
<Separator />
<div class="flex flex-col p-8 py-4">
<span
class="text-sm text-muted-foreground font-mono pb-4">{{ $t('config_options.program_settings.profile_properties.program_description')
}}</span>
<Textarea
class="text-lg px-3 bg-inherit text-center focus-visible:outline-none border-b focus-visible:border-emerald-500 resize-none font-pixelsm text-muted-foreground uppercase"
:placeholder="$t('config_options.program_settings.profile_properties.program_description')"
default-value="Adjust Korg Oscillator Waveform " rows="2"
maxlength="50" />
<Label for="textarea" class="text-muted-foreground text-right mt-1 text-xs">24/50</Label>
<div class="flex items-center space-x-4 space-y-1">
<Switch id="airplane-mode" default-checked="true" />
<Label
for="airplane-mode"
class="text-xs text-muted-foreground">{{
$t('config_options.program_settings.profile_properties.show_description')
}}</Label>
</div>
</div>
<Separator />
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
<div class="flex-none">
<Replace class="h-4 w-4" />
</div>
<div class="grow"><h2 class="text-sm px-2 py-4">
{{ $t('config_options.program_settings.internal_profile_toggle.title') }}</h2></div>
<div class="flex-none">
<Toggle
class="data-[state=on]:ring-emerald-600 data-[state=on]:ring-1" variant="outline"
size="sm" :default-value="true" aria-label="EnablePrimary">
<Power class="w-4 h-4" />
</Toggle>
</div>
</div>
<p class="flex flex-col p-8 py-4 text-muted-foreground text-xs">
{{ $t('config_options.program_settings.internal_profile_toggle.subtitle') }}
<Separator class="mt-4" />
<span class="space-y-4">{{ $t('config_options.program_settings.internal_profile_toggle.operation')
}}: <Badge class="bg-orange-500">SHIFT</Badge> + <Badge
class="bg-zinc-500">Fn3</Badge> + <Badge>Rotation</Badge></span>
<Separator class="my-4" />
<span>{{ $t('config_options.program_settings.internal_profile_toggle.warning') }}</span>
</p>
</ScrollArea>
<Separator />
</div>
</TabsContent>
</template>
<script>
export default {
name: 'ProgramConfig',
}
</script>
<style scoped>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
text-align: center;
}
</style>

0
src/components/device-gui/PixelBarTest.vue → src/components/device-gui/DeviceBar.vue
View File

25
src/components/device-gui/DevicePreview.vue Normal file
View File

@@ -0,0 +1,25 @@
<template>
<div>
<div>
<div class="p-4">
<h1 class="text-lg">
<ScrambleReveal :text="$t('preview.title')" />
</h1>
</div>
<QuickPreview />
</div>
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
<h2>{{ $t('config_options.title') }}</h2>
</div>
</div>
</template>
<script>
import QuickPreview from '@/components/old/QuickPreview.vue'
import ScrambleReveal from '@/components/effects/ScrambleText.vue'
import ConfigSelect from '@/components/ConfigSelect.vue'
export default {
name: 'DevicePreview',
components: { ConfigSelect, ScrambleReveal, QuickPreview },
}
</script>

6
src/components/ScrambleText.vue → src/components/effects/ScrambleText.vue
View File

@@ -28,6 +28,8 @@ const props = defineProps({
},
})
let scrambling = false
const content = ref('')
function randomCharacter(characterSet = props.characterSet) {
@@ -35,6 +37,8 @@ function randomCharacter(characterSet = props.characterSet) {
}
function scramble(scrambleAmount = props.scrambleAmount, replaceInterval = props.replaceInterval, fillInterval = props.fillInterval, characterSet = props.characterSet, text = props.text) {
if (scrambling) return
scrambling = true
content.value = ''
const fillContent = function() {
if (content.value.length < text.length) {
@@ -59,6 +63,8 @@ function scramble(scrambleAmount = props.scrambleAmount, replaceInterval = props
const index = indices[Math.floor(Math.random() * indices.length)]
content.value = content.value.substring(0, index) + text.charAt(index) + content.value.substring(index + 1)
setTimeout(replaceContent, replaceInterval * (1 + Math.random()))
} else {
scrambling = false
}
}
replaceContent()

56
src/components/patterns/Pop.vue → src/components/old/Pop.vue
View File

@@ -12,44 +12,38 @@ import {
CommandShortcut,
} from '@/components/ui/command'
import { Input } from '@/components/ui/input'
import PixelBarTest from '@/components/device-gui/PixelBarTest.vue'
import PixelBarTest from '@/components/device-gui/DeviceBar.vue'
import SchemaTest from '@/components/SchemaTest.vue'
</script>
<template>
<div class="h-60">
<input
v-model="defaultName"
type="text"
aria-label="Add Profile"
placeholder="add Profile"
@keyup.enter="addNewProfile"
>
<Command>
<!-- Dumping ground for testing components -->
<CommandList>
<PixelBarTest />
<SchemaTest />
<input
v-model="defaultName"
type="text"
aria-label="Add Profile"
placeholder="add Profile"
@keyup.enter="addNewProfile"
>
<Command>
<CommandList>
<CommandInput placeholder="Search Profile..." />
<CommandEmpty>No profile found</CommandEmpty>
<CommandGroup v-for="(profileTag, index) in tags" :key="index" :heading="profileTag">
<CommandItem
v-for="(name, id, innerIndex) in names(profileTag)" :key="innerIndex" class="cursor-pointer"
:value="name.id">
<FileDigit color="grey" class="w-4 h-4 mr-2" />
{{ name.name }} <span class="text-xs pl-2 text-muted-foreground text-right">uID: {{ name.id }} </span>
</CommandItem>
</CommandGroup>
</CommandList>
<CommandSeparator />
</Command>
<CommandInput placeholder="Search Profile..." />
<CommandEmpty>No profile found</CommandEmpty>
<CommandGroup v-for="(profileTag, index) in tags" :key="index" :heading="profileTag">
<CommandItem
v-for="(name, id, innerIndex) in names(profileTag)" :key="innerIndex" class="cursor-pointer"
:value="name.id">
<FileDigit color="grey" class="w-4 h-4 mr-2" />
{{ name.name }} <span class="text-xs pl-2 text-muted-foreground text-right">uID: {{ name.id }} </span>
</CommandItem>
</CommandGroup>
</CommandList>
<CommandSeparator />
</Command>
</div>
</template>
<script>

0
src/components/patterns/QuickPreview.vue → src/components/old/QuickPreview.vue
View File