feat: new connection flow

2026-01-10 20:12:48 +00:00 · 2023-07-23 17:44:26 +02:00
parent 998a400395
commit 4cc3343984
9 changed files with 221 additions and 96 deletions
--- a/icons.config.ts
+++ b/icons.config.ts
@@ -27,6 +27,7 @@ const config: IconsConfig = {
    "sync",
    "restart_alt",
    "usb",
+    "usb_off",
    "rule_settings",
    "123",
    "abc",
@@ -34,6 +35,7 @@ const config: IconsConfig = {
    "cloud_done",
    "backup",
    "cloud_download",
+    "cloud_off",
    "share",
    "ios_share",
    "close",
@@ -41,6 +43,14 @@ const config: IconsConfig = {
    "arrow_back_ios_new",
    "save",
    "settings_backup_restore",
+    "sort",
+    "filter",
+    "settings_power",
+    "link",
+    "link_off",
+    "chevron_right",
+    "check_circle",
+    "error",
  ],
  codePoints: {
    speed: "e9e4",
--- a/src/lib/popup.ts
+++ b/src/lib/popup.ts
@@ -8,6 +8,7 @@ export const popup: Action<HTMLButtonElement, ComponentType> = (node, Component)
  const edit = tippy(node, {
    interactive: true,
    trigger: "click",
+    sticky: true,
    onShow(instance) {
      target = instance.popper.querySelector(".tippy-content") as HTMLElement
      target.classList.add("active")
--- a/src/lib/preferences.ts
+++ b/src/lib/preferences.ts
@@ -3,12 +3,12 @@ import type {Action} from "svelte/action"

 export interface UserPreferences {
  backup: boolean
-  autoSync: boolean
+  autoConnect: boolean
 }

 export const userPreferences = writable<UserPreferences>({
  backup: false,
-  autoSync: true,
+  autoConnect: true,
 })

 export const preference: Action<HTMLInputElement, keyof UserPreferences> = (node, key) => {
--- a/src/lib/serial/connection.ts
+++ b/src/lib/serial/connection.ts
@@ -25,9 +25,9 @@ export const syncStatus: Writable<"done" | "error" | "downloading" | "uploading"

 let device: CharaDevice // @hmr:keep

-export async function initSerial() {
+export async function initSerial(manual = false) {
  const device = get(serialPort) ?? new CharaDevice()
-  await device.ready()
+  await device.init(manual)
  serialPort.set(device)

  syncStatus.set("downloading")
--- a/src/lib/serial/device.ts
+++ b/src/lib/serial/device.ts
@@ -14,74 +14,71 @@ export async function canAutoConnect() {
 }

 export class CharaDevice {
-  private readonly port: Promise<SerialPort>
-  private readonly reader: Promise<ReadableStreamDefaultReader<string>>
+  private port!: SerialPort
+  private reader!: ReadableStreamDefaultReader<string>

  private readonly abortController1 = new AbortController()
  private readonly abortController2 = new AbortController()

+  private streamClosed!: Promise<void>
+
  private lock?: Promise<true>

-  version: Promise<string>
-  deviceId: Promise<string>
+  version!: string
+  deviceId!: string

-  constructor(baudRate = 115200) {
-    this.port = getViablePorts().then(async ports => {
-      const port =
-        ports.length === 1
-          ? ports[0]
-          : await navigator.serial.requestPort({filters: [{usbVendorId: VENDOR_ID}]})
-      await port.open({baudRate})
-      const info = port.getInfo()
-      serialLog.update(it => {
-        it.push({
-          type: "system",
-          value: `Connected; ID: 0x${info.usbProductId?.toString(16)}; Vendor: 0x${info.usbVendorId?.toString(
-            16,
-          )}`,
-        })
-        return it
+  constructor(private readonly baudRate = 115200) {}
+
+  async init(manual = false) {
+    const ports = await getViablePorts()
+    this.port =
+      !manual && ports.length === 1
+        ? ports[0]
+        : await navigator.serial.requestPort({filters: [{usbVendorId: VENDOR_ID}]})
+    await this.port.open({baudRate: this.baudRate})
+    const info = this.port.getInfo()
+    serialLog.update(it => {
+      it.push({
+        type: "system",
+        value: `Connected; ID: 0x${info.usbProductId?.toString(16)}; Vendor: 0x${info.usbVendorId?.toString(
+          16,
+        )}`,
      })
-      return port
+      return it
    })
-    this.reader = this.port.then(async port => {
-      const decoderStream = new TextDecoderStream()
-      void port.readable!.pipeTo(decoderStream.writable, {signal: this.abortController1.signal})

-      return decoderStream
-        .readable!.pipeThrough(new TransformStream(new LineBreakTransformer()), {
-          signal: this.abortController2.signal,
-        })
-        .getReader()
+    const decoderStream = new TextDecoderStream()
+    this.streamClosed = this.port.readable!.pipeTo(decoderStream.writable, {
+      signal: this.abortController1.signal,
    })
-    this.lock = this.reader.then(() => {
-      delete this.lock
-      return true
-    })
-    this.version = this.send("VERSION")
-    this.deviceId = this.send("ID")
+
+    this.reader = decoderStream
+      .readable!.pipeThrough(new TransformStream(new LineBreakTransformer()), {
+        signal: this.abortController2.signal,
+      })
+      .getReader()
+
+    this.version = await this.send("VERSION")
+    this.deviceId = await this.send("ID")
  }

  private async internalRead() {
-    return this.reader.then(async it => {
-      const result: string = await it.read().then(({value}) => value!)
-      serialLog.update(it => {
-        it.push({
-          type: "output",
-          value: result,
-        })
-        return it
+    const {value} = await this.reader.read()
+    serialLog.update(it => {
+      it.push({
+        type: "output",
+        value: value!,
      })
-      return result
+      return it
    })
+    return value!
  }

  /**
   * Send a command to the device
   */
  private async internalSend(...command: string[]) {
-    const port = await this.port
-    const writer = port.writable!.getWriter()
+    const writer = this.port.writable!.getWriter()
    try {
      serialLog.update(it => {
        it.push({
@@ -96,19 +93,18 @@ export class CharaDevice {
    }
  }

-  async ready() {
-    await this.port
-  }
-
  async forget() {
-    await (await this.port).forget()
+    await this.disconnect()
+    await this.port.forget()
  }

  async disconnect() {
-    this.abortController1.abort()
-    this.abortController2.abort()
-    ;(await this.reader).releaseLock()
-    await (await this.port).close()
+    await this.reader.cancel()
+    await this.streamClosed.catch(() => {
+      /** noop */
+    })
+    this.reader.releaseLock()
+    await this.port.close()
  }

  /**
--- a/src/lib/style/tippy.scss
+++ b/src/lib/style/tippy.scss
@@ -1,7 +1,10 @@
 $padding: 16px;

 .tippy-box[data-theme~="surface-variant"] {
+  // overflow: hidden;
+
  color: var(--md-sys-color-on-surface-variant);
+
  background-color: var(--md-sys-color-surface-variant);
  filter: drop-shadow(0 0 12px #000a);
  border-radius: calc(24px + $padding);
@@ -11,10 +14,10 @@ $padding: 16px;
  }

  h2 {
-    margin-block-start: 8px;
-    margin-block-end: calc(8px + $padding);
    display: flex;
    justify-content: center;
+    margin-block-start: 8px;
+    margin-block-end: calc(8px + $padding);
  }

  @each $placement in top, bottom, right, left {
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -51,7 +51,7 @@
      } satisfies RegisterSWOptions)
    }

-    if ($userPreferences.autoSync && (await canAutoConnect())) await initSerial()
+    if ($userPreferences.autoConnect && (await canAutoConnect())) await initSerial()
  })

  $: webManifestLink = pwaInfo ? pwaInfo.webManifest.linkTag : ""
--- a/src/routes/ConnectionPopup.svelte
+++ b/src/routes/ConnectionPopup.svelte
@@ -1,52 +1,159 @@
-<script>
+<script lang="ts">
  import {initSerial, serialPort} from "$lib/serial/connection"
  import {browser} from "$app/environment"
  import {getViablePorts} from "$lib/serial/device"
+  import {slide, fade} from "svelte/transition"
+  import {preference} from "$lib/preferences"
+
+  let connectDialog = false
+  let powerDialog = false
 </script>

-<h2>Devices</h2>
+<section>
+  <h2>Device</h2>

-<div class="row">
-  <button disabled={$serialPort === undefined}><span class="icon">restart_alt</span>Reboot</button>
-  <button disabled={$serialPort === undefined}><span class="icon">rule_settings</span>Bootloader</button>
-</div>
-{#if browser}
-  {#await ($serialPort, getViablePorts()) then ports}
+  {#if $serialPort}
+    <p transition:slide>
+      {$serialPort.deviceId}
+      <br />
+      Version {$serialPort.version}
+    </p>
+  {/if}
+
+  {#if browser}
    <div class="row">
-      {#if ports.length === 0}
-        <button class="secondary" on:click={initSerial}>
-          <span class="icon">usb</span>Pair
-        </button>
-      {:else if $serialPort}
-        <button
-          class="secondary"
-          on:click={() => {
-            $serialPort.forget()
-            $serialPort = undefined
-          }}><span class="icon">usb</span>Unpair</button
-        >
-      {:else}
-        <button class="secondary" on:click={initSerial}><span class="icon">usb</span>Connect</button>
-      {/if}
-      {#if $serialPort}
-        <button
-          on:click={() => {
-            $serialPort.disconnect()
-            $serialPort = undefined
-          }}><span class="icon">usb</span>Disconnect</button
-        >
-      {/if}
+      <button
+        class:secondary={$serialPort}
+        class:error={!$serialPort}
+        on:click={() => (connectDialog = !connectDialog)}
+      >
+        {#if $serialPort}
+          <span class="icon">usb</span>
+        {:else}
+          <span class="icon">error</span>
+        {/if}
+        Connection
+        <span class="icon">chevron_right</span>
+      </button>
+      <button class="icon" disabled={$serialPort === undefined} on:click={() => (powerDialog = !powerDialog)}
+        >settings_power</button
+      >
    </div>
-  {/await}
-{/if}
+    {#await ($serialPort, getViablePorts()) then ports}
+      {#if connectDialog}
+        <div
+          class="backdrop"
+          transition:fade={{duration: 250}}
+          on:click={() => (connectDialog = !connectDialog)}
+        />
+        <dialog open transition:slide={{duration: 250}}>
+          <label><input type="checkbox" use:preference={"autoConnect"} />Auto Connect</label>
+          {#if $serialPort}
+            <button
+              on:click={() => {
+                $serialPort.disconnect()
+                $serialPort = undefined
+              }}><span class="icon">usb_off</span>Disconnect</button
+            >
+          {:else}
+            {#if ports.length > 0}
+              <button on:click={() => initSerial()}><span class="icon">usb</span>Connect</button>
+            {/if}
+            <button on:click={() => initSerial(true)}><span class="icon">link</span>Pair Device</button>
+          {/if}
+          {#if $serialPort}
+            <button
+              on:click={() => {
+                $serialPort.forget()
+                $serialPort = undefined
+              }}><span class="icon">link_off</span>Unpair Device</button
+            >
+          {/if}
+        </dialog>
+      {/if}
+    {/await}
+    {#if powerDialog}
+      <div class="backdrop" transition:fade={{duration: 250}} on:click={() => (powerDialog = !powerDialog)} />
+      <dialog open transition:slide={{duration: 250}}>
+        <h3>Boot Menu</h3>
+        <button><span class="icon">restart_alt</span>Reboot</button>
+        <button><span class="icon">rule_settings</span>Bootloader</button>
+      </dialog>
+    {/if}
+  {/if}
+</section>

 <style lang="scss">
+  h2 {
+    margin-block: 8px;
+  }
+
+  p {
+    margin-block: 8px;
+  }
+
+  section {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+  }
+
+  .backdrop {
+    position: absolute;
+    z-index: 1;
+    inset: 0;
+
+    background: #0005;
+    border-radius: 40px;
+  }
+
+  dialog {
+    position: relative;
+    z-index: 2;
+
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+
+    width: 100%;
+    margin: 0;
+    margin-block-start: 16px;
+    padding: 0;
+
+    color: var(--md-sys-color-on-secondary-container);
+
+    background: var(--md-sys-color-secondary-container);
+    border: none;
+    border-radius: 32px;
+  }
+
  .row {
    display: flex;
    gap: 8px;
    height: fit-content;
  }

+  dialog > * {
+    margin-inline: 16px;
+  }
+
+  dialog > :first-child {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 100%;
+    margin: 0;
+    padding-block: 8px;
+
+    color: var(--md-sys-color-on-secondary);
+
+    background: var(--md-sys-color-secondary);
+  }
+
  button {
    cursor: pointer;

@@ -85,6 +192,11 @@
      background: var(--md-sys-color-secondary);
    }

+    &.error {
+      color: var(--md-sys-color-on-error);
+      background: var(--md-sys-color-error);
+    }
+
    &:active:not(:disabled) {
      color: var(--md-sys-color-on-surface-variant);
      background: var(--md-sys-color-surface-variant);
--- a/src/routes/Navigation.svelte
+++ b/src/routes/Navigation.svelte
@@ -8,6 +8,7 @@
  import ConnectionPopup from "./ConnectionPopup.svelte"
  import {canAutoConnect} from "$lib/serial/device"
  import {browser} from "$app/environment"
+  import {userPreferences} from "$lib/preferences"

  const training = [
    {slug: "cpm", title: "CPM - Characters Per Minute", icon: "music_note"},
@@ -53,8 +54,10 @@
          backup
        {:else if $syncStatus === "uploading"}
          cloud_download
-        {:else}
+        {:else if $userPreferences.backup}
          cloud_done
+        {:else}
+          cloud_off
        {/if}
      </button>
    {/if}