Skip to content

Commit

Permalink
feat: add DriverInstall.svelte help and button to Uploader.svelte (#123)
Browse files Browse the repository at this point in the history
* feat: add DriverInstall.svelte help and button to Uploader.svelte

* chore: fix biome issues

* chore: fix translations

Co-authored-by: Ronald Moesbergen <[email protected]>

* chore: fix translations

Co-authored-by: Ronald Moesbergen <[email protected]>

* chore: uncomment code that downloads

* chore: make everything use the new downloadDrivers system

* fix: maybe not close the tab after the download?

---------

Co-authored-by: Ronald Moesbergen <[email protected]>
  • Loading branch information
koen1711 and rmoesbergen authored Sep 20, 2024
1 parent 086ee2f commit 11716d0
Show file tree
Hide file tree
Showing 7 changed files with 85 additions and 29 deletions.
Binary file added src/assets/install_drivers.mp4
Binary file not shown.
6 changes: 4 additions & 2 deletions src/assets/translations/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
"PROJECT": "My projects",
"HELP": "Tips",
"HELP_FORUM": "Leaphy Discord (Help forum)",
"DOWNLOAD_DRIVERS": "Windows drivers",
"DOWNLOAD_DRIVERS": "Download drivers",
"MORE": "More...",
"MORE_ABOUT": "About Easybloqs",
"UPLOAD": "Upload to robot",
Expand Down Expand Up @@ -136,5 +136,7 @@
"CONTINUE": "Continue",
"UNKNOWN_BOARD": "Unknown",
"CLEAR_PROJECT": "Clear project",
"CLEAR_PROJECT_DESC": "Selecting this robot will clear your project, are you sure?"
"CLEAR_PROJECT_DESC": "Selecting this robot will clear your project, are you sure?",
"DRIVER_INSTALL_TITLE": "How to install drivers?",
"DRIVER_INSTALL_TEXT": "Please follow the steps in the instruction video below to install the drivers."
}
6 changes: 4 additions & 2 deletions src/assets/translations/nl.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
"PROJECT": "Mijn projecten",
"HELP": "Tips",
"HELP_FORUM": "Leaphy Discord (Help Forum)",
"DOWNLOAD_DRIVERS": "Windows drivers",
"DOWNLOAD_DRIVERS": "Download drivers",
"MORE": "Meer...",
"MORE_ABOUT": "Over Easybloqs",
"UPLOAD": "Upload naar robot",
Expand Down Expand Up @@ -136,5 +136,7 @@
"CONTINUE": "Ga door",
"UNKNOWN_BOARD": "Onbekend",
"CLEAR_PROJECT": "Wis project",
"CLEAR_PROJECT_DESC": "Door deze robot te selecteren wis je je project, weet je het zeker?"
"CLEAR_PROJECT_DESC": "Door deze robot te selecteren wis je je project, weet je het zeker?",
"DRIVER_INSTALL_TITLE": "Hoe installeer je drivers?",
"DRIVER_INSTALL_TEXT": "Bekijk het filmpje voor uitleg hoe je de drivers kunt installeren."
}
27 changes: 2 additions & 25 deletions src/lib/components/core/header/Header.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import leaphyLogo from "$assets/leaphy-logo.svg";
import Connect from "$components/core/popups/popups/Connect.svelte";
import Button from "$components/ui/Button.svelte";
import ContextItem from "$components/ui/ContextItem.svelte";
import Select from "$components/ui/Select.svelte";
import { loadWorkspaceFromString } from "$domain/blockly/blockly";
import { FileHandle } from "$domain/handles";
import { getSelector, robots } from "$domain/robots";
Expand Down Expand Up @@ -57,6 +56,7 @@ import { serialization } from "blockly";
import JSZip from "jszip";
import type { Writable } from "svelte/store";
import { get } from "svelte/store";
import { downloadDrivers } from "../../../drivers";
import MicroPythonIO from "../../../micropython";
import About from "../popups/popups/About.svelte";
import Examples from "../popups/popups/Examples.svelte";
Expand Down Expand Up @@ -212,29 +212,6 @@ function about() {
});
}
async function drivers() {
const response = await fetch(
"https://api.github.com/repos/leaphy-robotics/leaphy-firmware/contents/drivers",
);
const data = await response.json();
const files = data.map(({ download_url }) => download_url);
const zip = new JSZip();
await Promise.all(
files.map(async (url) => {
const res = await fetch(url);
zip.file(url.split("/").pop(), await res.blob());
}),
);
const a = document.createElement("a");
const url = URL.createObjectURL(await zip.generateAsync({ type: "blob" }));
a.href = url;
a.download = "leaphy-drivers.zip";
a.click();
URL.revokeObjectURL(url);
}
function undo() {
if (!$workspace) return;
Expand Down Expand Up @@ -390,7 +367,7 @@ function runPython() {
<ContextItem
icon={faDownload}
name={$_("DOWNLOAD_DRIVERS")}
onclick={drivers}
onclick={downloadDrivers}
{open}
/>
{/snippet}
Expand Down
32 changes: 32 additions & 0 deletions src/lib/components/core/popups/popups/DriverInstall.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<script lang="ts">
import install_drivers from "$assets/install_drivers.mp4";
import Button from "$components/ui/Button.svelte";
import { type PopupState, popups } from "$state/popup.svelte";
import { getContext } from "svelte";
import { _ } from "svelte-i18n";
import type { Writable } from "svelte/store";
const popupState = getContext<Writable<PopupState>>("state");
function close() {
popups.close($popupState.id);
}
</script>

<div class="content">
<h1>{$_("DRIVER_INSTALL_TITLE")}</h1>
<p>{$_("DRIVER_INSTALL_TEXT")}</p>
<video src={install_drivers} controls={true} width={600}></video>
<Button name={$_("CLOSE")} mode={"accent"} onclick={close} bold={true} />
</div>

<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
width: 800px;
padding: 20px;
gap: 20px;
text-align: center;
}
</style>
10 changes: 10 additions & 0 deletions src/lib/components/core/popups/popups/Uploader.svelte
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<script lang="ts">
import { _ } from "svelte-i18n";
import DriverInstall from "$components/core/popups/popups/DriverInstall.svelte";
import Button from "$components/ui/Button.svelte";
import ProgressBar from "$components/ui/ProgressBar.svelte";
import { type PopupState, popups } from "$state/popup.svelte";
Expand All @@ -12,8 +13,10 @@ import {
port,
robot,
} from "$state/workspace.svelte";
import JSZip from "jszip";
import { getContext, onMount } from "svelte";
import type { Writable } from "svelte/store";
import { downloadDrivers } from "../../../../drivers";
interface Props {
source?: string;
Expand Down Expand Up @@ -140,6 +143,13 @@ async function connectUSB() {
{:else}
<ProgressBar {progress} />
{/if}
{#if failed}
<Button
name={$_("DOWNLOAD_DRIVERS")}
mode={"accent"}
onclick={() => {close(); downloadDrivers();}}
/>
{/if}
{/if}
</div>

Expand Down
33 changes: 33 additions & 0 deletions src/lib/drivers.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import DriverInstall from "$components/core/popups/popups/DriverInstall.svelte";
import { popups } from "$state/popup.svelte";
import JSZip from "jszip";

async function downloadDrivers() {
const response = await fetch(
"https://api.github.com/repos/leaphy-robotics/leaphy-firmware/contents/drivers",
);
const data = await response.json();
const files = data.map(({ download_url }) => download_url);
const zip = new JSZip();

await Promise.all(
files.map(async (url) => {
const res = await fetch(url);
zip.file(url.split("/").pop(), await res.blob());
}),
);

const a = document.createElement("a");
const url = URL.createObjectURL(await zip.generateAsync({ type: "blob" }));
a.href = url;
a.download = "leaphy-drivers.zip";
a.click();
URL.revokeObjectURL(url);
await popups.open({
component: DriverInstall,
data: {},
allowInteraction: true,
});
}

export { downloadDrivers };

0 comments on commit 11716d0

Please sign in to comment.