From f6712e4fc0271ad2f025ae970956fa7aac6bfaf6 Mon Sep 17 00:00:00 2001 From: sverben <59171289+sverben@users.noreply.github.com> Date: Fri, 3 May 2024 17:37:36 +0200 Subject: [PATCH] feat: backgrounds --- src/assets/robots/backgrounds/flitz_nano.svg | 173 +++++++ src/assets/robots/backgrounds/flitz_uno.svg | 170 +++++++ src/assets/robots/backgrounds/orig_nano.svg | 431 +++++++++++++++++ .../robots/backgrounds/orig_nano_esp32.svg | 446 +++++++++++++++++ .../robots/backgrounds/orig_nano_rp2040.svg | 449 ++++++++++++++++++ src/assets/robots/backgrounds/orig_uno.svg | 428 +++++++++++++++++ .../components/workspace/blocks/Blocks.svelte | 27 +- src/lib/domain/robots.ts | 13 + src/lib/programmers/AvrDude.ts | 4 +- src/lib/programmers/DFU.ts | 2 +- src/lib/programmers/Pico.ts | 2 +- 11 files changed, 2140 insertions(+), 5 deletions(-) create mode 100644 src/assets/robots/backgrounds/flitz_nano.svg create mode 100644 src/assets/robots/backgrounds/flitz_uno.svg create mode 100644 src/assets/robots/backgrounds/orig_nano.svg create mode 100644 src/assets/robots/backgrounds/orig_nano_esp32.svg create mode 100644 src/assets/robots/backgrounds/orig_nano_rp2040.svg create mode 100644 src/assets/robots/backgrounds/orig_uno.svg diff --git a/src/assets/robots/backgrounds/flitz_nano.svg b/src/assets/robots/backgrounds/flitz_nano.svg new file mode 100644 index 0000000..7bbcb10 --- /dev/null +++ b/src/assets/robots/backgrounds/flitz_nano.svg @@ -0,0 +1,173 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/robots/backgrounds/flitz_uno.svg b/src/assets/robots/backgrounds/flitz_uno.svg new file mode 100644 index 0000000..fa6f5ed --- /dev/null +++ b/src/assets/robots/backgrounds/flitz_uno.svg @@ -0,0 +1,170 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/robots/backgrounds/orig_nano.svg b/src/assets/robots/backgrounds/orig_nano.svg new file mode 100644 index 0000000..cba6687 --- /dev/null +++ b/src/assets/robots/backgrounds/orig_nano.svg @@ -0,0 +1,431 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/robots/backgrounds/orig_nano_esp32.svg b/src/assets/robots/backgrounds/orig_nano_esp32.svg new file mode 100644 index 0000000..ba53fe1 --- /dev/null +++ b/src/assets/robots/backgrounds/orig_nano_esp32.svg @@ -0,0 +1,446 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/robots/backgrounds/orig_nano_rp2040.svg b/src/assets/robots/backgrounds/orig_nano_rp2040.svg new file mode 100644 index 0000000..c762686 --- /dev/null +++ b/src/assets/robots/backgrounds/orig_nano_rp2040.svg @@ -0,0 +1,449 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/robots/backgrounds/orig_uno.svg b/src/assets/robots/backgrounds/orig_uno.svg new file mode 100644 index 0000000..13a835f --- /dev/null +++ b/src/assets/robots/backgrounds/orig_uno.svg @@ -0,0 +1,428 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/lib/components/workspace/blocks/Blocks.svelte b/src/lib/components/workspace/blocks/Blocks.svelte index 698ba8b..65f1941 100644 --- a/src/lib/components/workspace/blocks/Blocks.svelte +++ b/src/lib/components/workspace/blocks/Blocks.svelte @@ -18,15 +18,27 @@ import { onMount } from "svelte"; import { locale } from "svelte-i18n"; import Code from "../panels/Code.svelte"; +let backgroundX = $state(0); + function getTheme(theme: Theme) { return theme === Theme.DARK ? dark : light; } +function updateSizing() { + const toolbox = ($workspace as WorkspaceSvg).getToolbox(); + backgroundX = + window.innerWidth / 2 + + (toolbox.getFlyout().isVisible() ? toolbox.getFlyout().getWidth() : 0) / 2 + + 40; +} + let element: HTMLDivElement; onMount(() => { - workspace.update(() => setupWorkspace($robot, element, getTheme($theme))); + workspace.set(setupWorkspace($robot, element, getTheme($theme))); + updateSizing(); $workspace.addChangeListener(() => { code.set(arduino.workspaceToCode($workspace)); + updateSizing(); }); }); @@ -55,6 +67,9 @@ theme.subscribe((theme) => {
+ {#if $robot.background} + {$robot.name} + {/if}
@@ -66,4 +81,14 @@ theme.subscribe((theme) => { .environment { position: relative; } + + .background { + position: absolute; + width: 100%; + max-width: 600px; + max-height: 600px; + top: 50%; + translate: -50% -50%; + z-index: -1; + } diff --git a/src/lib/domain/robots.ts b/src/lib/domain/robots.ts index c694bf8..032ffd0 100644 --- a/src/lib/domain/robots.ts +++ b/src/lib/domain/robots.ts @@ -1,5 +1,11 @@ import defaultCPP from "$assets/default-program.ino?raw"; import defaultPython from "$assets/default-program.py?raw"; +import flitzNanoBackground from "$assets/robots/backgrounds/flitz_nano.svg"; +import flitzUnoBackground from "$assets/robots/backgrounds/flitz_uno.svg"; +import originalNanoBackground from "$assets/robots/backgrounds/orig_nano.svg"; +import originalNanoESP32Background from "$assets/robots/backgrounds/orig_nano_esp32.svg"; +import originalNanoRP2040Background from "$assets/robots/backgrounds/orig_nano_rp2040.svg"; +import originalUnoBackground from "$assets/robots/backgrounds/orig_uno.svg"; import cppIcon from "$assets/robots/icons/l_c++.svg"; import clickIcon from "$assets/robots/icons/l_click.svg"; import flitzIcon from "$assets/robots/icons/l_flitz.svg"; @@ -42,6 +48,7 @@ export interface RobotDevice extends BaseRobot { programmer: Programmer; libraries: string[]; fqbn: string; + background?: string; } export interface RobotListing extends BaseRobot { variants: RobotDevice[][]; @@ -98,6 +105,7 @@ export const robotListing: Robot[][] = [ name: "Flitz Uno", libraries: DEFAULT_LIBRARIES, icon: flitzIcon, + background: flitzUnoBackground, }, { ...baseNano, @@ -106,6 +114,7 @@ export const robotListing: Robot[][] = [ name: "Flitz Nano", libraries: DEFAULT_LIBRARIES, icon: flitzIcon, + background: flitzNanoBackground, }, ], ], @@ -126,6 +135,7 @@ export const robotListing: Robot[][] = [ "Arduino_APDS9960", ]), icon: originalIcon, + background: originalUnoBackground, }, { ...baseNano, @@ -137,6 +147,7 @@ export const robotListing: Robot[][] = [ "Arduino_APDS9960", ]), icon: originalIcon, + background: originalNanoBackground, }, ], [ @@ -150,6 +161,7 @@ export const robotListing: Robot[][] = [ "Arduino_APDS9960", ]), icon: originalIcon, + background: originalNanoESP32Background, }, { ...baseNanoRP2040, @@ -161,6 +173,7 @@ export const robotListing: Robot[][] = [ "Arduino_APDS9960", ]), icon: originalIcon, + background: originalNanoRP2040Background, }, ], ], diff --git a/src/lib/programmers/AvrDude.ts b/src/lib/programmers/AvrDude.ts index 25618e5..64f9408 100644 --- a/src/lib/programmers/AvrDude.ts +++ b/src/lib/programmers/AvrDude.ts @@ -1,5 +1,5 @@ import type { Programmer } from "$domain/robots.types"; -import { uploadLog, type LeaphyPort } from "$state/workspace.svelte"; +import { type LeaphyPort, uploadLog } from "$state/workspace.svelte"; import Module from "@leaphy-robotics/avrdude-webassembly/avrdude.js"; declare global { @@ -48,7 +48,7 @@ export default class AvrDude implements Programmer { const disconnectPromise = new Promise((resolve) => { if (navigator.serial && port instanceof SerialPort) - port.addEventListener("disconnect", resolve) + port.addEventListener("disconnect", resolve); }); const oldConsoleError = console.error; const workerErrorPromise = new Promise((resolve) => { diff --git a/src/lib/programmers/DFU.ts b/src/lib/programmers/DFU.ts index a2c6b0c..a4e9eae 100644 --- a/src/lib/programmers/DFU.ts +++ b/src/lib/programmers/DFU.ts @@ -1,6 +1,6 @@ import type { Programmer } from "$domain/robots.types"; import { usbRequest } from "$state/upload.svelte"; -import { port as portState, type LeaphyPort } from "$state/workspace.svelte"; +import { type LeaphyPort, port as portState } from "$state/workspace.svelte"; import DFUUtil from "@leaphy-robotics/dfu-util-wasm"; import base64 from "base64-js"; import { delay } from "./utils"; diff --git a/src/lib/programmers/Pico.ts b/src/lib/programmers/Pico.ts index 4e5ef3a..373cf65 100644 --- a/src/lib/programmers/Pico.ts +++ b/src/lib/programmers/Pico.ts @@ -1,6 +1,6 @@ import type { Programmer } from "$domain/robots.types"; import { usbRequest } from "$state/upload.svelte"; -import { port as portState, type LeaphyPort } from "$state/workspace.svelte"; +import { type LeaphyPort, port as portState } from "$state/workspace.svelte"; import PicoTool from "@leaphy-robotics/picotool-wasm"; import base64 from "base64-js"; import { delay } from "./utils";