From 594136afe56eade29a0149c8b1b6ead0827a3cfd Mon Sep 17 00:00:00 2001
From: Robert Kossessa <github@kosro.de>
Date: Mon, 22 Jan 2024 22:41:00 +0100
Subject: [PATCH] ADD: Vue-based devgui slider

---
 package.json                               |  1 +
 src/App.vue                                | 57 ++++++++++-------
 src/components/device-gui/PixelBarTest.vue | 71 ++++++++++++++++++++++
 src/components/patterns/Pop.vue            |  5 +-
 src/components/patterns/QuickPreview.vue   |  6 +-
 src/main.js                                | 31 +---------
 6 files changed, 115 insertions(+), 56 deletions(-)
 create mode 100644 src/components/device-gui/PixelBarTest.vue

diff --git a/package.json b/package.json
index a826064..7e513bc 100644
--- a/package.json
+++ b/package.json
@@ -73,6 +73,7 @@
       "space-before-function-paren": "off",
       "object-curly-spacing": "off",
       "comma-dangle": "off",
+      "vue/html-self-closing": "warn",
       "@intlify/vue-i18n/no-v-html": "off",
       "@intlify/vue-i18n/no-dynamic-keys": "off",
       "@intlify/vue-i18n/no-raw-text": [
diff --git a/src/App.vue b/src/App.vue
index 4ee7f2d..decab24 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -76,7 +76,7 @@ const state = reactive({ count: 12 })
       <div class="flex">
         <Menubar class="w-full rounded-none bg-zinc-950">
           <MenubarMenu>
-            <MenubarTrigger v-t="'navbar.device.title'"></MenubarTrigger>
+            <MenubarTrigger v-t="'navbar.device.title'" />
             <MenubarContent>
               <!-- TODO: Switch keyboard shortcut icons based on platform -->
               <MenubarItem>
@@ -253,7 +253,7 @@ const state = reactive({ count: 12 })
                         <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" />
+                              <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')
@@ -263,7 +263,7 @@ const state = reactive({ count: 12 })
                         <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" />
+                              <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')
@@ -273,7 +273,7 @@ const state = reactive({ count: 12 })
                         <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" />
+                              <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')
@@ -283,7 +283,7 @@ const state = reactive({ count: 12 })
                         <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" />
+                              <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') }}
@@ -468,7 +468,7 @@ const state = reactive({ count: 12 })
                         <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" />
+                              <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') }}
@@ -479,7 +479,7 @@ const state = reactive({ count: 12 })
                         <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" />
+                              <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') }}
@@ -490,7 +490,7 @@ const state = reactive({ count: 12 })
                         <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" />
+                              <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') }}
@@ -501,7 +501,7 @@ const state = reactive({ count: 12 })
                         <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" />
+                              <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') }}
@@ -727,7 +727,7 @@ const state = reactive({ count: 12 })
                         <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" />
+                              <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')
@@ -737,7 +737,7 @@ const state = reactive({ count: 12 })
                         <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" />
+                              <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') }}
@@ -757,7 +757,8 @@ const state = reactive({ count: 12 })
                         <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>
+                        <h2 class="text-sm px-2 py-4">{{ $t('config_options.program_settings.profile_properties.title')
+                          }}</h2>
                       </div>
 
 
@@ -765,7 +766,9 @@ const state = reactive({ count: 12 })
                     <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>
+                      <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"
@@ -775,15 +778,21 @@ const state = reactive({ count: 12 })
                     </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>
+                      <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"
+                        :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>
+                        <Label
+for="airplane-mode"
+                               class="text-xs text-muted-foreground">{{ $t('config_options.program_settings.profile_properties.show_description')
+                          }}</Label>
                       </div>
                     </div>
                     <Separator />
@@ -793,7 +802,8 @@ const state = reactive({ count: 12 })
                       <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="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"
@@ -807,8 +817,9 @@ const state = reactive({ count: 12 })
                     <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>
+                      <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>
@@ -850,7 +861,7 @@ const state = reactive({ count: 12 })
                         <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" />
+                              <img src="@/assets/gui-ico/ico-fd.svg">
                             </div>
                             <span class="text-xs leading-3 text-wrap">
         Fine Detents
@@ -860,7 +871,7 @@ const state = reactive({ count: 12 })
                         <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" />
+                              <img src="@/assets/gui-ico/ico-cd.svg">
                             </div>
                             <span class="text-xs leading-3 text-wrap">
         Coarse Detents
@@ -870,7 +881,7 @@ const state = reactive({ count: 12 })
                         <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" />
+                              <img src="@/assets/gui-ico/ico-vf.svg">
                             </div>
                             <span class="text-xs leading-3 text-wrap">
         Viscous Rotation
@@ -880,7 +891,7 @@ const state = reactive({ count: 12 })
                         <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" />
+                              <img src="@/assets/gui-ico/ico-rc.svg">
                             </div>
                             <span class="text-xs leading-3 text-wrap">
         Return to Center
diff --git a/src/components/device-gui/PixelBarTest.vue b/src/components/device-gui/PixelBarTest.vue
new file mode 100644
index 0000000..d3a7a98
--- /dev/null
+++ b/src/components/device-gui/PixelBarTest.vue
@@ -0,0 +1,71 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { Input } from '@/components/ui/input'
+
+const width = ref(160)
+const count = ref(40)
+const percent = ref(60)
+const gap_width = ref(2)
+
+const show_controls = ref(true)
+
+const rect_width = computed(() => {
+  return (width.value - ((count.value + 1) * gap_width.value)) / (count.value)
+})
+const current_pos = computed(() => {
+  return Math.round((percent.value / 100) * count.value)
+})
+</script>
+
+<template>
+  <div class="flex-1 flex flex-col justify-center items-center my-2">
+    {{ current_pos }}
+    <svg xmlns="http://www.w3.org/2000/svg" :width="width+12" height="16">
+      <g>
+        <rect
+          v-for="(_, i) in count"
+          :key="`key${i}`"
+          :style="`fill:${i < current_pos ? '#fff' : '#4a4a4a'}`"
+          :width="rect_width"
+          :height="i===0 || i===count-1 ? 8 : 5"
+          :x="6+gap_width+i*(rect_width+gap_width)"
+          y="0" />
+        <g :transform="`translate(${6+(rect_width+gap_width)*current_pos},0)`">
+          <rect
+            style="fill:#000"
+            :width="6"
+            height="13"
+            x="0"
+            y="0"
+          />
+          <rect
+            style="fill:#c66936"
+            :width="2"
+            height="11"
+            :x="2"
+            y="0"
+          />
+          <rect
+            style="fill:#c66936"
+            :width="2"
+            :height="2"
+            x="0"
+            y="11"
+          />
+          <rect
+            style="fill:#c66936"
+            :width="2"
+            :height="2"
+            :x="4"
+            y="11"
+          />
+        </g>
+      </g>
+    </svg>
+    <div v-if="show_controls  ">
+      <Input v-model="percent" type="number" placeholder="Fill" class="m-2" />
+      <Input v-model="count" type="number" placeholder="Count" class="m-2" />
+      <Input v-model="width" type="number" placeholder="Width" class="m-2" />
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/components/patterns/Pop.vue b/src/components/patterns/Pop.vue
index 1e1464f..7cda053 100644
--- a/src/components/patterns/Pop.vue
+++ b/src/components/patterns/Pop.vue
@@ -12,17 +12,20 @@ import {
   CommandShortcut,
 } from '@/components/ui/command'
 import { Input } from '@/components/ui/input'
+import PixelBarTest from '@/components/device-gui/PixelBarTest.vue'
 </script>
 
 <template>
 
+  <PixelBarTest />
+
   <input
     v-model="defaultName"
     type="text"
     aria-label="Add Profile"
     placeholder="add Profile"
     @keyup.enter="addNewProfile"
-  />
+  >
   <Command>
 
     <CommandList>
diff --git a/src/components/patterns/QuickPreview.vue b/src/components/patterns/QuickPreview.vue
index 0b51093..087e1b0 100644
--- a/src/components/patterns/QuickPreview.vue
+++ b/src/components/patterns/QuickPreview.vue
@@ -6,15 +6,17 @@
   <div class="flex self-center bg-cover w-72 h-72 mb-7" style="background-image: url(src/assets/gui-ico/xl-bg-ico.svg)">
     <div v-if="profiles" class="flex flex-col w-full justify-center p-10 rounded-full overflow-hidden">
       <div class="self-center w-8 mb-1 opacity-50">
-        <img src="@/assets/gui-ico/ico-midi-logo.svg" />
+        <img src="@/assets/gui-ico/ico-midi-logo.svg" alt="midi-logo" />
       </div>
-      <h2 v-for="feedbackConfig in profiles" class="self-center font-pixellg text-5xl ">{{ feedbackConfig.pos }}</h2>
+      <h2 v-for="feedbackConfig in profiles" :key="feedbackConfig" class="self-center font-pixellg text-5xl ">
+        {{ feedbackConfig.pos }}</h2>
 
       <div class="self-center font-pixelsm text-md pt-1 pb-2">{{ profiles.name }}</div>
       <div id="scales" class="flex self-center text-xs py-0"></div>
 
       <div
         v-for="profileConfig in profiles"
+        :key="profileConfig"
         class="self-center text-center text-muted-foreground font-pixelsm text-xs pt-0.5 w-40">
         {{ profileConfig.profileDesc }}
       </div>
diff --git a/src/main.js b/src/main.js
index 51f1887..b8eea4d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -26,33 +26,4 @@ const app = createApp(App)
 
 app.use(i18n)
 app.use(store)
-app.mount('#app')
-
-var startPos = 0
-var totalPos = 360
-var currentPos = 156
-var minRange = 0
-var maxRange = 40
-
-document.addEventListener('DOMContentLoaded', function() {
-  //....
-
-// Quick Preview GUI indicator Render
-  var scale = document.getElementById('scale')
-
-  Number.prototype.map = function(in_min, in_max, out_min, out_max) {
-    return (this - in_min) * (out_max - out_min) / (in_max - in_min) + out_min
-  }
-  var guiCurrentPos = Math.round(currentPos.map(startPos, totalPos, minRange, maxRange))
-
-  for (var i = 0; i < 40; i = i + 1) {
-    scale.innerHTML += '<div class=\'bg-white\'></div>'
-    if (i - 1 < guiCurrentPos) {
-      scale.getElementsByTagName('div')[i].classList.add('active')
-      if (i == guiCurrentPos) {
-        scale.getElementsByTagName('div')[guiCurrentPos].classList.add('current')
-      }
-    }
-
-  }
-})
\ No newline at end of file
+app.mount('#app')
\ No newline at end of file