feat: ota progress bar

fix: can't set settings with inverse/scale

src/lib/serial/device.ts

@@ -477,10 +477,14 @@ export class CharaDevice {
     return Number(await this.send(1, ["RAM"]).then(([bytes]) => bytes));
   }
 
-  async updateFirmware(file: File | Blob): Promise<void> {
+  async updateFirmware(
+    file: ArrayBuffer,
+    progress: (transferred: number, total: number) => void,
+  ): Promise<void> {
     while (this.lock) {
       await this.lock;
     }
+
     let resolveLock: (result: true) => void;
     this.lock = new Promise<true>((resolve) => {
       resolveLock = resolve;
@@ -510,46 +514,46 @@ export class CharaDevice {
           });
           return it;
         });
-      } finally {
-        writer.releaseLock();
-      }
 
-      // Wait for the device to be ready
+        // Wait for the device to be ready
-      const signal = await this.reader.read();
+        const signal = await this.reader.read();
-      serialLog.update((it) => {
+        serialLog.update((it) => {
-        it.push({
+          it.push({
-          type: "output",
+            type: "output",
-          value: signal.value!.trim(),
+            value: signal.value!.trim(),
+          });
+          return it;
         });
-        return it;
-      });
 
-      await file.stream().pipeTo(this.port.writable!);
+        const chunkSize = 128;
+        for (let i = 0; i < file.byteLength; i += chunkSize) {
+          const chunk = file.slice(i, i + chunkSize);
+          await writer.write(new Uint8Array(chunk));
+          progress(i + chunk.byteLength, file.byteLength);
+        }
 
-      serialLog.update((it) => {
+        serialLog.update((it) => {
-        it.push({
+          it.push({
-          type: "input",
+            type: "input",
-          value: `...${file.size} bytes`,
+            value: `...${file.byteLength} bytes`,
+          });
+          return it;
         });
-        return it;
-      });
 
-      const result = (await this.reader.read()).value!.trim();
+        const result = (await this.reader.read()).value!.trim();
-      serialLog.update((it) => {
+        serialLog.update((it) => {
-        it.push({
+          it.push({
-          type: "output",
+            type: "output",
-          value: result!,
+            value: result!,
+          });
+          return it;
         });
-        return it;
-      });
 
-      if (result !== "OTA OK") {
+        if (result !== "OTA OK") {
-        throw new Error(result);
+          throw new Error(result);
-      }
+        }
 
-      const writer2 = this.port.writable!.getWriter();
+        await writer.write(new TextEncoder().encode(`RST RESTART\r\n`));
-      try {
-        await writer2.write(new TextEncoder().encode(`RST RESTART\r\n`));
         serialLog.update((it) => {
           it.push({
             type: "input",
@@ -558,7 +562,7 @@ export class CharaDevice {
           return it;
         });
       } finally {
-        writer2.releaseLock();
+        writer.releaseLock();
       }
 
       await this.suspend();

src/lib/setting.ts

@@ -49,6 +49,8 @@ export const setting: Action<
     if (isNumeric) {
       value = Number(node.value);
       if (Number.isNaN(value)) return;
+      if (min !== undefined) value = Math.max(min, value);
+      if (max !== undefined) value = Math.min(max, value);
       value = Math.floor(
         inverse !== undefined
           ? inverse / value
@@ -56,8 +58,6 @@ export const setting: Action<
             ? value / scale
             : value,
       );
-      if (min !== undefined) value = Math.max(min, value);
-      if (max !== undefined) value = Math.min(max, value);
     } else {
       value = node.checked ? 1 : 0;
     }

src/routes/(app)/ccos/[device]/[version]/+page.svelte

@@ -13,6 +13,7 @@
   let unsafeUpdate = $state(false);
 
   let terminalOutput = $state("");
+  let progress = $state(0);
 
   let step = $state(0);
   let eraseAll = $state(false);
@@ -28,9 +29,11 @@
     try {
       const file = await fetch(
         `${data.meta.path}/${data.meta.update.ota}`,
-      ).then((it) => it.blob());
+      ).then((it) => it.arrayBuffer());
 
-      await port.updateFirmware(file);
+      await port.updateFirmware(file, (transferred, total) => {
+        progress = transferred / total;
+      });
 
       success = true;
     } catch (e) {
@@ -194,7 +197,9 @@
     <section>
       <button
         class="update-button"
-        class:working
+        class:working={working && (progress <= 0 || progress >= 1)}
+        class:progress={working && progress > 0 && progress < 1}
+        style:--progress="{progress * 100}%"
         class:primary={!buttonError}
         class:error={buttonError}
         disabled={working || $serialPort === undefined || !isCorrectDevice}
@@ -422,6 +427,7 @@
       background: none;
     }
 
+    &.progress,
     &.working {
       border-color: transparent;
     }
@@ -445,15 +451,23 @@
       height: 30%;
       width: 120%;
     }
-  }
 
+    &.progress::after {
+      z-index: -2;
+      position: absolute;
+      left: 0;
+      content: "";
+      background: var(--md-sys-color-primary);
+      opacity: 0.2;
+      height: 100%;
+      width: var(--progress);
+    }
+  }
 
   .version {
     color: var(--md-sys-color-secondary);
   }
 
-
-
   .incorrect-device {
     color: var(--md-sys-color-error);
   }

src/routes/(app)/config/settings/+page.svelte

@@ -132,7 +132,11 @@
                     type="number"
                     min={settingValue(item.range[0], item)}
                     max={settingValue(item.range[1], item)}
-                    step={settingValue(item.step, item)}
+                    step={item.inverse !== undefined ||
+                    item.scale !== undefined ||
+                    item.step === undefined
+                      ? undefined
+                      : settingValue(item.step, item)}
                     use:setting={{
                       id: item.id,
                       inverse: item.inverse,