add cc1 visual layout

src/lib/assets/layouts/cc1.yml

@@ -1,25 +0,0 @@
-name: CC1
-col:
-  - row:
-      - switch: { d: 30, e: 31, n: 32, w: 33, s: 34 }
-      - switch: { d: 25, e: 26, n: 27, w: 28, s: 29 }
-      - switch: { d: 40, e: 41, n: 42, w: 43, s: 44 }
-      - switch: { d: 20, e: 21, n: 22, w: 23, s: 24 }
-      - switch: { d: 35, e: 36, n: 37, w: 38, s: 39 }
-      - switch: { d: 15, e: 16, n: 17, w: 18, s: 19 }
-      - switch: { d: 60, w: 61, n: 62, e: 63, s: 64 }
-      - switch: { d: 65, w: 66, n: 67, e: 68, s: 69 }
-      - switch: { d: 80, w: 81, n: 82, e: 83, s: 84 }
-      - switch: { d: 70, w: 71, n: 72, e: 73, s: 74 }
-      - switch: { d: 85, w: 86, n: 87, e: 88, s: 89 }
-      - switch: { d: 75, w: 76, n: 77, e: 78, s: 79 }
-  - row:
-      - switch: { d: 10, e: 11, n: 12, w: 13, s: 14 }
-      - switch: { d: 55, w: 56, n: 57, e: 58, s: 59 }
-  - row:
-      - switch: { d: 5, e: 6, n: 7, w: 8, s: 9 }
-      - switch: { d: 50, w: 51, n: 52, e: 53, s: 54 }
-  - offset: [ 0, 0 ]
-    row:
-      - switch: { d: 0, e: 1, n: 2, w: 3, s: 4 }
-      - switch: { d: 45, w: 46, n: 47, e: 48, s: 49 }

src/lib/assets/layouts/one.yml

@@ -0,0 +1,39 @@
+name: CC1
+col:
+  - offset: [2, 0]
+    row:
+      - switch: { d: 25, e: 26, n: 27, w: 28, s: 29 }
+      - switch: { d: 20, e: 21, n: 22, w: 23, s: 24 }
+      - offset: [4, 0]
+        switch: { d: 60, w: 61, n: 62, e: 63, s: 64 }
+      - switch: { d: 70, w: 71, n: 72, e: 73, s: 74 }
+  - offset: [2, 0]
+    row:
+      - switch: { d: 40, e: 41, n: 42, w: 43, s: 44 }
+      - switch: { d: 35, e: 36, n: 37, w: 38, s: 39 }
+      - offset: [4, 0]
+        switch: { d: 80, w: 81, n: 82, e: 83, s: 84 }
+      - switch: { d: 85, w: 86, n: 87, e: 88, s: 89 }
+  - offset: [0, -3]
+    row:
+      - switch: { d: 30, e: 31, n: 32, w: 33, s: 34 }
+      - offset: [4, 0]
+        switch: { d: 10, e: 11, n: 12, w: 13, s: 14 }
+      - switch: { d: 55, w: 56, n: 57, e: 58, s: 59 }
+      - offset: [4, 0]
+        switch: { d: 75, w: 76, n: 77, e: 78, s: 79 }
+  - row:
+      - offset: [5.5, 0.5]
+        switch: { d: 15, e: 16, n: 17, w: 18, s: 19 }
+      - offset: [1, 0.5]
+        switch: { d: 65, w: 66, n: 67, e: 68, s: 69 }
+  - row:
+      - offset: [4.5, -0.25]
+        switch: { d: 5, e: 6, n: 7, w: 8, s: 9 }
+      - offset: [3, -0.25]
+        switch: { d: 50, w: 51, n: 52, e: 53, s: 54 }
+  - row:
+      - offset: [3.5, -0.25]
+        switch: { d: 0, e: 1, n: 2, w: 3, s: 4 }
+      - offset: [5, -0.25]
+        switch: { d: 45, w: 46, n: 47, e: 48, s: 49 }

src/lib/components/layout/GenericLayout.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import rawLayout from "$lib/assets/layouts/cc1.yml"
   import {compileLayout} from "$lib/serialization/visual-layout"
   import type {VisualLayout, CompiledLayoutKey} from "$lib/serialization/visual-layout"
   import {changes, layout} from "$lib/serial/connection"
@@ -25,7 +24,8 @@
     console.assert(iconFontSize % 1 === 0, "Icon font size must be an integer")
   }
 
-  const layoutInfo = compileLayout(rawLayout as VisualLayout)
+  export let visualLayout: VisualLayout
+  $: layoutInfo = compileLayout(visualLayout)
 
   function getCenter(key: CompiledLayoutKey): [x: number, y: number] {
     return [key.pos[0] + key.size[0] / 2, key.pos[1] + key.size[1] / 2]

src/lib/components/layout/KeyboardKey.svelte

@@ -44,6 +44,7 @@
     {@const multiplier = 1.4}
     <g style:transform="rotateZ({key.rotate}rad) translate({innerMargin}px, {innerMargin}px)">
       <path
+        opacity="0.4"
         d="M{posX + p1},{posY} a{r1},{r1} 0 0,1 {-p1},{p1} l0,{-(p1 - p2)} a{r2},{r2} 0 0,0 {p2},{-p2}z"
       />
       <KeyText
@@ -83,6 +84,12 @@
     stroke: currentcolor;
   }
 
+  path {
+    fill: currentcolor;
+    fill-opacity: 0.2;
+    stroke-opacity: 0.6;
+  }
+
   g:hover {
     cursor: default;
     opacity: 0.6;

src/lib/components/layout/Layout.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
   import {serialPort} from "$lib/serial/connection"
-  import LayoutCC1 from "$lib/components/layout/LayoutCC1.svelte"
   import {action} from "$lib/title"
   import GenericLayout from "$lib/components/layout/GenericLayout.svelte"
   import {getContext} from "svelte"
   import type {Writable} from "svelte/store"
 
+  export let layoutOverride: "ONE" | "LITE" | undefined
+
   $: device = $serialPort?.device ?? "ONE"
   const activeLayer = getContext<Writable<number>>("active-layer")
 
@@ -14,6 +15,11 @@
     ["Primary Layer", "abc", 0],
     ["Function Layer", "function", 2],
   ] as const
+
+  const layouts = {
+    ONE: () => import("$lib/assets/layouts/one.yml"),
+    LITE: () => import("$lib/assets/layouts/lite.yml"),
+  }
 </script>
 
 <div class="container">
@@ -30,12 +36,9 @@
     {/each}
   </fieldset>
 
-  {#if device === "ONE"}
-    <GenericLayout />
-    <!-- <LayoutCC1 bind:activeLayer /> -->
-  {:else}
-    <p>Unsupported device ({$serialPort?.device})</p>
-  {/if}
+  {#await layouts[layoutOverride || device]() then { default: visualLayout }}
+    <GenericLayout {visualLayout} />
+  {/await}
 </div>
 
 <style lang="scss">

src/routes/config/layout/+page.svelte

@@ -68,11 +68,17 @@
   setContext("active-layer", writable(0))
 
   let fileInput: HTMLInputElement
+  let layoutOverride: "ONE" | "LITE" | undefined = undefined
 </script>
 
 <svelte:window use:share={shareLayout} />
 
 <section>
+  <select bind:value={layoutOverride}>
+    <option value={undefined}>Auto</option>
+    <option value="ONE">CC1</option>
+    <option value="LITE">Lite</option>
+  </select>
   <!-- <label class="icon"
     >upload_file<input
       bind:this={fileInput}
@@ -81,7 +87,7 @@
       accept="text/csv, application/json"
     /></label
   > -->
-  <Layout />
+  <Layout {layoutOverride} />
 </section>
 
 <style lang="scss">