feat: connect dialog for micropython (#21)

leaphy-robotics · May 3, 2024 · 11f753f · 11f753f
1 parent 5d65d51
commit 11f753f
Show file tree

Hide file tree

Showing 6 changed files with 175 additions and 19 deletions.
diff --git a/src/assets/translations/en.json b/src/assets/translations/en.json
@@ -109,5 +109,8 @@
 	"DONT_SHOW": "Don't show again",
 	"EXAMPLES": "Examples",
 	"CREATE_FILE": "Create file",
-	"CREATE_FOLDER": "Create folder"
+	"CREATE_FOLDER": "Create folder",
+	"DOWNLOADING_FIRMWARE": "Downloading firmware",
+	"UPLOADING_FIRMWARE": "Uploading firmware",
+	"INSTALLING_LIBRARIES": "Installing libraries"
 }
diff --git a/src/assets/translations/nl.json b/src/assets/translations/nl.json
@@ -109,5 +109,8 @@
 	"DONT_SHOW": "Niet opnieuw tonen",
 	"EXAMPLES": "Voorbeelden",
 	"CREATE_FILE": "Bestand aanmaken",
-	"CREATE_FOLDER": "Map aanmaken"
+	"CREATE_FOLDER": "Map aanmaken",
+	"DOWNLOADING_FIRMWARE": "Firmware downloaden",
+	"UPLOADING_FIRMWARE": "Firmware uploaden",
+	"INSTALLING_LIBRARIES": "Bibliotheken installeren"
 }
diff --git a/src/lib/components/core/header/Header.svelte b/src/lib/components/core/header/Header.svelte
@@ -233,7 +233,7 @@ async function blocks() {
 async function connectPython() {
 	await port.connect(Prompt.MAYBE);
 	const io = new MicroPythonIO();
-	await io.enterREPLMode();
+	await io.initialize();
 	microPythonIO.set(io);
 }
 

diff --git a/src/lib/components/core/popups/popups/PythonUploader.svelte b/src/lib/components/core/popups/popups/PythonUploader.svelte
@@ -0,0 +1,154 @@
+<script lang="ts">
+import { _ } from "svelte-i18n";
+
+import Button from "$components/ui/Button.svelte";
+import ProgressBar from "$components/ui/ProgressBar.svelte";
+import { type PopupState, popups } from "$state/popup.svelte";
+import { usbRequest } from "$state/upload.svelte";
+import {
+	Prompt,
+	SUPPORTED_VENDOR_IDS,
+	installed,
+	port,
+	robot,
+} from "$state/workspace.svelte";
+import { getContext, onMount } from "svelte";
+import type { Writable } from "svelte/store";
+import type MicroPythonIO from "../../../../micropython";
+
+interface Props {
+	io: MicroPythonIO;
+}
+const popupState = getContext<Writable<PopupState>>("state");
+const { io }: Props = $props();
+let progress = $state(0);
+let currentState = $state("CONNECTING");
+let error = $state<string | null>(null);
+let done = $state(false);
+
+class UploadError extends Error {
+	constructor(
+		public name: string,
+		public description: string,
+	) {
+		super();
+	}
+}
+
+async function upload(res: Record<string, string>) {
+	try {
+		await port.reserve();
+		await $robot.programmer.upload($port, res);
+	} catch (e) {
+		console.log(e);
+		throw new UploadError("UPDATE_FAILED", e);
+	}
+	port.release();
+}
+
+onMount(async () => {
+	try {
+		const installed = await io.enterREPLMode();
+		progress += 100 / 5;
+
+		currentState = "DOWNLOADING_FIRMWARE";
+		let firmware: Record<string, string>;
+		if (!installed) firmware = await io.getFirmware();
+		progress += 100 / 5;
+
+		currentState = "UPLOADING_FIRMWARE";
+		if (!installed) await upload(firmware);
+		progress += 100 / 5;
+
+		currentState = "CONNECTING";
+		if (!installed) await io.enterREPLMode();
+		progress += 100 / 5;
+
+		currentState = "INSTALLING_LIBRARIES";
+		await io.packageManager.flashLibrary(
+			"github:leaphy-robotics/leaphy-micropython/package.json",
+		);
+		progress += 100 / 5;
+
+		popups.close($popupState.id);
+	} catch (e) {
+		done = true;
+		currentState = "UPLOAD_FAILED";
+		error = e.description;
+	}
+});
+
+function close() {
+	popups.close($popupState.id);
+}
+
+async function connectUSB() {
+	const [device] = await navigator.usb.getDevices();
+	if (device) return usbRequest.respond(device);
+
+	usbRequest.respond(
+		await navigator.usb.requestDevice({
+			filters: SUPPORTED_VENDOR_IDS.map((vendor) => ({
+				vendorId: vendor,
+			})),
+		}),
+	);
+}
+</script>
+
+    <div class="content" class:error={!!error}>
+        {#if $usbRequest}
+            <h2 class="state">{$_("RECONNECT")}</h2>
+            <div class="info">{$_("RECONNECT_INFO")}</div>
+            <Button name={"Reconnect"} mode={"primary"} onclick={connectUSB} />
+        {:else}
+            <h2 class="state">{$_(currentState)}</h2>
+
+            {#if error}
+                <code class="error-result">{error}</code>
+            {/if}
+            {#if done}
+                <Button
+                    name={"Go back to editor"}
+                    mode={"primary"}
+                    onclick={close}
+                />
+            {:else}
+                <ProgressBar {progress} />
+            {/if}
+        {/if}
+    </div>
+
+    <style>
+        h2 {
+            margin: 0;
+        }
+    
+        .content {
+            display: flex;
+            flex-direction: column;
+            padding: 20px;
+            gap: 20px;
+            justify-content: center;
+            align-items: center;
+            min-width: 400px;
+            max-width: 80vw;
+            min-height: 200px;
+            max-height: 80vh;
+        }
+    
+        .state {
+            font-weight: bold;
+        }
+    
+        .error h2 {
+            color: red;
+        }
+        .error-result {
+            background: var(--secondary);
+            border-radius: 5px;
+            padding: 10px;
+            color: red;
+        }
+    </style>
+
diff --git a/src/lib/micropython/index.ts b/src/lib/micropython/index.ts
@@ -1,3 +1,4 @@
+import PythonUploader from "$components/core/popups/popups/PythonUploader.svelte";
 import Uploader from "$components/core/popups/popups/Uploader.svelte";
 import { popups } from "$state/popup.svelte";
 import { port } from "$state/workspace.svelte";
@@ -64,6 +65,14 @@ export default class MicroPythonIO {
 	public writer: WritableStreamDefaultWriter<Uint8Array>;
 	public running: boolean;
 
+	async initialize() {
+		await popups.open({
+			component: PythonUploader,
+			data: { io: this },
+			allowInteraction: false,
+		});
+	}
+
 	async getFirmware() {
 		const res = await fetch(
 			"https://raw.githubusercontent.com/leaphy-robotics/leaphy-firmware/main/micropython/firmware.uf2",
@@ -103,21 +112,11 @@ export default class MicroPythonIO {
 			this.writer.releaseLock();
 
 			port.release();
-			await popups.open({
-				component: Uploader,
-				data: { program: await this.getFirmware() },
-				allowInteraction: false,
-			});
-
-			return await this.enterREPLMode();
+			return false;
 		}
 
 		await this.commands.loadCommands();
-		await this.packageManager.flashLibrary(
-			"github:leaphy-robotics/leaphy-micropython/package.json",
-		);
-
-		console.log(this.fs);
+		return true;
 	}
 
 	runCode(code: string) {

diff --git a/src/lib/micropython/packagagemanager.ts b/src/lib/micropython/packagagemanager.ts
@@ -38,13 +38,10 @@ export class PackageManager {
 	}
 
 	async checkLibraryVersion(version: string, name: string) {
-		console.log(version, name);
 		if (!(await this.io.fs.exists(`${name}.json`))) return false;
 
-		console.log("exists");
 		try {
 			const contents = JSON.parse(atob(await this.io.fs.read(`${name}.json`)));
-			console.log(contents);
 
 			return version === contents.version;
 		} catch {
@@ -64,7 +61,7 @@ export class PackageManager {
 		const manifest = JSON.parse(await this.fetchMip(url));
 		const version = manifest.version;
 		if (await this.checkLibraryVersion(version, this.getLibraryName(url)))
-			return console.log("not installing");
+			return;
 
 		const files = manifest.urls;
 		const contents = await Promise.all(