feat: settings wip

2026-01-20 08:52:59 +00:00 · 2023-07-24 22:58:10 +02:00
parent e64082d578
commit 2130b6c7b9
10 changed files with 338 additions and 164 deletions
--- a/src/lib/components/layout/Layout.svelte
+++ b/src/lib/components/layout/Layout.svelte
@@ -0,0 +1,89 @@
+<script>
+  import {serialPort} from "$lib/serial/connection"
+  import LayoutCC1 from "$lib/components/layout/LayoutCC1.svelte"
+
+  $: device = $serialPort?.device ?? "ONE"
+  let activeLayer = 0
+</script>
+
+<div>
+  <select bind:value={device}>
+    <option value="ONE">CC1</option>
+    <option value="LITE">Lite</option>
+  </select>
+
+  <fieldset>
+    {#each [["Numeric Layer", "123", 1], ["Primary Layer", "abc", 0], ["Function Layer", "function", 2]] as [title, icon, value]}
+      <button
+        {title}
+        class="icon"
+        on:click={() => (activeLayer = value)}
+        class:active={activeLayer === value}
+      >
+        {icon}
+      </button>
+    {/each}
+  </fieldset>
+
+  {#if device === "ONE"}
+    <LayoutCC1 bind:activeLayer />
+  {:else}
+    <p>Unsupported device ({$serialPort?.device})</p>
+  {/if}
+</div>
+
+<style lang="scss">
+  fieldset {
+    position: relative;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    margin-block-end: -36px;
+    padding: 0;
+
+    border: none;
+  }
+
+  button.icon {
+    cursor: pointer;
+
+    z-index: 1;
+
+    font-size: 24px;
+    color: var(--md-sys-color-on-surface-variant);
+
+    background: var(--md-sys-color-surface-variant);
+    border: none;
+
+    transition: all 250ms ease;
+
+    &:nth-child(2) {
+      z-index: 2;
+
+      aspect-ratio: 1;
+
+      font-size: 32px;
+
+      border-radius: 50%;
+      outline: 8px solid var(--md-sys-color-background);
+    }
+
+    &:first-child {
+      padding-inline-end: 16px;
+      border-radius: 16px 0 0 16px;
+    }
+
+    &:last-child {
+      padding-inline-start: 16px;
+      border-radius: 0 16px 16px 0;
+    }
+
+    &.active {
+      font-weight: 900;
+      color: var(--md-sys-color-on-tertiary);
+      background: var(--md-sys-color-tertiary);
+    }
+  }
+</style>
--- a/src/lib/components/layout/LayoutCC1.svelte
+++ b/src/lib/components/layout/LayoutCC1.svelte
@@ -1,121 +1,52 @@
 <script>
  import RingInput from "$lib/components/layout/RingInput.svelte"

-  let activeLayer = 0
+  export let activeLayer = 0
 </script>

-<div>
-  <fieldset>
-    {#each [["Numeric Layer", "123", 1], ["Primary Layer", "abc", 0], ["Function Layer", "function", 2]] as [title, icon, value]}
-      <button
-        {title}
-        class="icon"
-        on:click={() => (activeLayer = value)}
-        class:active={activeLayer === value}
-      >
-        {icon}
-      </button>
-    {/each}
-  </fieldset>
-
-  <div class="col layout" style="gap: 0">
-    <div class="row" style="gap: 156px">
-      <div class="row">
-        <RingInput {activeLayer} keys={{d: 30, e: 31, n: 32, w: 33, s: 34}} type="tertiary" />
-        <div class="col">
-          <RingInput {activeLayer} keys={{d: 25, e: 26, n: 27, w: 28, s: 29}} />
-          <RingInput {activeLayer} keys={{d: 40, e: 41, n: 42, w: 43, s: 44}} type="secondary" />
-        </div>
-        <div class="col">
-          <RingInput {activeLayer} keys={{d: 20, e: 21, n: 22, w: 23, s: 24}} />
-          <RingInput {activeLayer} keys={{d: 35, e: 36, n: 37, w: 38, s: 39}} type="secondary" />
-        </div>
-        <RingInput {activeLayer} keys={{d: 15, e: 16, n: 17, w: 18, s: 19}} />
+<div class="col layout" style="gap: 0">
+  <div class="row" style="gap: 156px">
+    <div class="row">
+      <RingInput {activeLayer} keys={{d: 30, e: 31, n: 32, w: 33, s: 34}} type="tertiary" />
+      <div class="col">
+        <RingInput {activeLayer} keys={{d: 25, e: 26, n: 27, w: 28, s: 29}} />
+        <RingInput {activeLayer} keys={{d: 40, e: 41, n: 42, w: 43, s: 44}} type="secondary" />
      </div>
-
-      <div class="row">
-        <RingInput {activeLayer} keys={{d: 60, w: 61, n: 62, e: 63, s: 64}} />
-        <div class="col">
-          <RingInput {activeLayer} keys={{d: 65, w: 66, n: 67, e: 68, s: 69}} />
-          <RingInput {activeLayer} keys={{d: 80, w: 81, n: 82, e: 83, s: 84}} />
-        </div>
-        <div class="col">
-          <RingInput {activeLayer} keys={{d: 70, w: 71, n: 72, e: 73, s: 74}} />
-          <RingInput {activeLayer} keys={{d: 85, w: 86, n: 87, e: 88, s: 89}} />
-        </div>
-        <RingInput {activeLayer} keys={{d: 75, w: 76, n: 77, e: 78, s: 79}} />
+      <div class="col">
+        <RingInput {activeLayer} keys={{d: 20, e: 21, n: 22, w: 23, s: 24}} />
+        <RingInput {activeLayer} keys={{d: 35, e: 36, n: 37, w: 38, s: 39}} type="secondary" />
      </div>
+      <RingInput {activeLayer} keys={{d: 15, e: 16, n: 17, w: 18, s: 19}} />
    </div>
-    <div class="row" style="gap: 48px; margin-top: -32px">
-      <RingInput {activeLayer} keys={{d: 10, e: 11, n: 12, w: 13, s: 14}} />
-      <RingInput {activeLayer} keys={{d: 55, w: 56, n: 57, e: 58, s: 59}} />
-    </div>
-    <div class="row" style="gap: 160px">
-      <RingInput {activeLayer} keys={{d: 5, e: 6, n: 7, w: 8, s: 9}} />
-      <RingInput {activeLayer} keys={{d: 50, w: 51, n: 52, e: 53, s: 54}} />
-    </div>
-    <div class="row" style="gap: 320px; margin-top: -12px">
-      <RingInput {activeLayer} keys={{d: 0, e: 1, n: 2, w: 3, s: 4}} type="secondary" />
-      <RingInput {activeLayer} keys={{d: 45, w: 46, n: 47, e: 48, s: 49}} type="secondary" />
+
+    <div class="row">
+      <RingInput {activeLayer} keys={{d: 60, w: 61, n: 62, e: 63, s: 64}} />
+      <div class="col">
+        <RingInput {activeLayer} keys={{d: 65, w: 66, n: 67, e: 68, s: 69}} />
+        <RingInput {activeLayer} keys={{d: 80, w: 81, n: 82, e: 83, s: 84}} />
+      </div>
+      <div class="col">
+        <RingInput {activeLayer} keys={{d: 70, w: 71, n: 72, e: 73, s: 74}} />
+        <RingInput {activeLayer} keys={{d: 85, w: 86, n: 87, e: 88, s: 89}} />
+      </div>
+      <RingInput {activeLayer} keys={{d: 75, w: 76, n: 77, e: 78, s: 79}} />
    </div>
  </div>
+  <div class="row" style="gap: 48px; margin-top: -32px">
+    <RingInput {activeLayer} keys={{d: 10, e: 11, n: 12, w: 13, s: 14}} />
+    <RingInput {activeLayer} keys={{d: 55, w: 56, n: 57, e: 58, s: 59}} />
+  </div>
+  <div class="row" style="gap: 160px">
+    <RingInput {activeLayer} keys={{d: 5, e: 6, n: 7, w: 8, s: 9}} />
+    <RingInput {activeLayer} keys={{d: 50, w: 51, n: 52, e: 53, s: 54}} />
+  </div>
+  <div class="row" style="gap: 320px; margin-top: -12px">
+    <RingInput {activeLayer} keys={{d: 0, e: 1, n: 2, w: 3, s: 4}} type="secondary" />
+    <RingInput {activeLayer} keys={{d: 45, w: 46, n: 47, e: 48, s: 49}} type="secondary" />
+  </div>
 </div>

 <style lang="scss">
-  fieldset {
-    position: relative;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    margin-block-end: -36px;
-    padding: 0;
-
-    border: none;
-  }
-
-  button.icon {
-    cursor: pointer;
-
-    z-index: 1;
-
-    font-size: 24px;
-    color: var(--md-sys-color-on-surface-variant);
-
-    background: var(--md-sys-color-surface-variant);
-    border: none;
-
-    transition: all 250ms ease;
-
-    &:nth-child(2) {
-      z-index: 2;
-
-      aspect-ratio: 1;
-
-      font-size: 32px;
-
-      border-radius: 50%;
-      outline: 8px solid var(--md-sys-color-background);
-    }
-
-    &:first-child {
-      padding-inline-end: 16px;
-      border-radius: 16px 0 0 16px;
-    }
-
-    &:last-child {
-      padding-inline-start: 16px;
-      border-radius: 0 16px 16px 0;
-    }
-
-    &.active {
-      font-weight: 900;
-      color: var(--md-sys-color-on-tertiary);
-      background: var(--md-sys-color-tertiary);
-    }
-  }
-
  .row,
  .col {
    display: flex;
--- a/src/lib/serial/device.ts
+++ b/src/lib/serial/device.ts
@@ -2,6 +2,7 @@ import {LineBreakTransformer} from "$lib/serial/line-break-transformer"
 import {serialLog} from "$lib/serial/connection"
 import type {Chord} from "$lib/serial/chord"
 import {parseChordActions, parsePhrase, stringifyChordActions, stringifyPhrase} from "$lib/serial/chord"
+import {dev} from "$app/environment"

 export const VENDOR_ID = 0x239a

@@ -24,8 +25,10 @@ export class CharaDevice {

  private lock?: Promise<true>

-  version!: string
-  deviceId!: string
+  version!: [number, number, number]
+  company!: "CHARACHORDER"
+  device!: "ONE" | "LITE"
+  chipset!: "M0" | "S2"

  constructor(private readonly baudRate = 115200) {}

@@ -58,8 +61,12 @@ export class CharaDevice {
      })
      .getReader()

-    this.version = await this.send("VERSION").then(it => it[0])
-    this.deviceId = await this.send("ID").then(it => it[0])
+    const [version] = await this.send("VERSION")
+    this.version = version.split(".").map(Number) as [number, number, number]
+    const [company, device, chipset] = await this.send("ID")
+    this.company = company as "CHARACHORDER"
+    this.device = device as "ONE" | "LITE"
+    this.chipset = chipset as "M0" | "S2"
  }

  private async internalRead() {
--- a/src/lib/serial/settings.ts
+++ b/src/lib/serial/settings.ts
@@ -1,41 +0,0 @@
-export interface DeviceSettings {
-  enableSerialLog: boolean
-  enableSerialRaw: boolean
-  enableSerialChord: boolean
-  enableSerialKeyboard: boolean
-  enableSerialMouse: boolean
-  enableSerialDebug: boolean
-  enableSerialHeader: boolean
-  enableHidKeyboard: boolean
-  pressThreshold: number
-  releaseThreshold: number
-  enableHidMouse: number
-  scrollDelay: number
-  enableSpurring: boolean
-  spurKillerToggle: number
-  spurKiller: number
-  enableChording: boolean
-  charKillerToggle: number
-  charCounterKiller: number
-}
-
-export const SETTING_IDS: Record<keyof DeviceSettings, number> = {
-  enableSerialLog: 0x01,
-  enableSerialRaw: 0x02,
-  enableSerialChord: 0x03,
-  enableSerialKeyboard: 0x04,
-  enableSerialMouse: 0x05,
-  enableSerialDebug: 0x06,
-  enableSerialHeader: 0x07,
-  enableHidKeyboard: 0x0a,
-  pressThreshold: 0x0b,
-  releaseThreshold: 0x0c,
-  enableHidMouse: 0x14,
-  scrollDelay: 0x15,
-  enableSpurring: 0x1e,
-  spurKillerToggle: 0x1f,
-  spurKiller: 0x20,
-  enableChording: 0x28,
-  charKillerToggle: 0x29,
-  charCounterKiller: 0x2a,
-}
--- a/src/lib/style/toggle.scss
+++ b/src/lib/style/toggle.scss
@@ -4,6 +4,7 @@ $height: 1.5em;

 label:has(input[type="checkbox"]) {
  cursor: pointer;
+  user-select: none;

  display: flex;
  gap: $padding;
@@ -12,7 +13,7 @@ label:has(input[type="checkbox"]) {

  font-size: 12px;

-  input {
+  input[type="checkbox"] {
    $width: calc($height * (5 / 3));
    $diameter: calc($height - ((2 * $padding) + (2 * $border)));
    $radius: calc($diameter / 2);