ADD: Dev Playground (for testing components) & LEDRing

src/components/config/ConfigPane.vue

@@ -22,6 +22,7 @@ import ProfileConfig from '@/components/config/pages/ProfileConfig.vue'
 import MappingConfig from '@/components/config/pages/MappingConfig.vue'
 import HapticConfig from '@/components/config/pages/HapticConfig.vue'
 import ScrambleText from '@/components/effects/ScrambleText.vue'
+import DevPlayground from '@/components/config/pages/DevPlayground.vue'
 
 defineProps({
   page: {
@@ -35,5 +36,6 @@ const configPages = {
   feedback_designer: HapticConfig,
   mapping_configuration: MappingConfig,
   light_designer: LEDsConfig,
+  dev_playground: DevPlayground,
 }
 </script>

src/components/config/ConfigSelect.vue

@@ -8,7 +8,7 @@
       :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" :class="{'text-muted-foreground': config.disabled}">
+        <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')"
@@ -39,6 +39,7 @@ const config_tabs = ref([
     disabled: true,
     badgeKey: 'common.coming_soon',
   },
+  { id: 'dev_playground' },
 ])
 
 const current_tab = defineModel({

src/components/config/pages/DevPlayground.vue

@@ -0,0 +1,8 @@
+<template>
+  <WIP />
+  <DeviceLEDRing />
+</template>
+<script setup>
+import WIP from '@/components/WIP.vue'
+import DeviceLEDRing from '@/components/device/DeviceLEDRing.vue'
+</script>

src/components/device/DeviceBar.vue

@@ -36,7 +36,7 @@ function onMouseUp() {
 
 <template>
     <span @mousedown="onMouseDown">
-      <svg ref="bar" xmlns="http://www.w3.org/2000/svg" :width="width+12" height="32">
+      <svg ref="bar" :width="width+12" height="32">
         <g>
           <rect
             v-for="(_, i) in count"

src/components/device/DeviceLEDRing.vue

@@ -0,0 +1,37 @@
+<template>
+  <svg :width="size" :height="size" filter="url(#blur)" class="mix-blend-screen">
+    <filter id="blur" color-interpolation-filters="sRGB">
+      <feGaussianBlur
+        v-for="index in blurSteps" :key="index" in="SourceGraphic" :stdDeviation="blur*index"
+        :result="index" />
+      <feMerge result="blurMerge">
+        <feMergeNode v-for="index in blurSteps" :key="index" :in="index" />
+        <feMergeNode in="SourceGraphic" />
+      </feMerge>
+    </filter>
+    <circle
+      v-for="index in ledCount" :key="index"
+      :r="radius"
+      :cx="size/2"
+      :cy="size/2"
+      fill="none"
+      :stroke-width="ledWidth"
+      :stroke-dashoffset="index/ledCount*ledArcSize"
+      :stroke-dasharray="`${ledArcSize/ledCount} ${ledArcSize}`"
+      :stroke="`rgb(${index/ledCount*255} ${index/ledCount*255-128} ${0})`" />
+  </svg>
+</template>
+<script setup>
+import { computed, ref } from 'vue'
+
+const radius = ref(120)
+const ledWidth = ref(5)
+const ledCount = ref(60)
+const blur = ref(10)
+const blurSteps = ref(3)
+const padding = ref(20)
+
+const size = computed(() => (radius.value + padding.value) * 2 + ledWidth.value)
+const ledArcSize = computed(() => 2 * Math.PI * radius.value)
+
+</script>

src/lang/en.json

@@ -3,6 +3,10 @@
     "coming_soon": "COMING SOON"
   },
   "config_options": {
+    "dev_playground": {
+      "subtitle": "UI Designer's Paradise",
+      "title": "Dev Playground"
+    },
     "feedback_designer": {
       "auditory_response": {
         "haptic_level": "Auditory Haptic Level",