Skip to content

Commit

Permalink
Add instructions to wear the microbit
Browse files Browse the repository at this point in the history
  • Loading branch information
Marisa-Jenkins committed Dec 20, 2023
1 parent 47b3831 commit 33d4b1c
Show file tree
Hide file tree
Showing 6 changed files with 84 additions and 4 deletions.
29 changes: 25 additions & 4 deletions src/components/connection-prompt/ConnectDialogContainer.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
import BluetoothConnectingDialog from './bluetooth/BluetoothConnectingDialog.svelte';
import SelectMicrobitDialogBluetooth from './bluetooth/SelectMicrobitDialogBluetooth.svelte';
import MicrobitSerial from '../../script/microbit-interfacing/MicrobitSerial';
import MicrobitWearingInstructionDialog from './MicrobitWearingInstructionDialog.svelte';
let currentStage: 'usb' | 'usb1' | 'usb2' = 'usb1'; // "usb" is for the bluetooth connection flow, "usb1" and "usb2" determine the progress in the radio connection flow
Expand Down Expand Up @@ -106,7 +107,7 @@
currentStage = 'usb';
}}
onNextClick={() => {
$connectionDialogState.connectionState = ConnectDialogStates.CONNECT_CABLE;
$connectionDialogState.connectionState = ConnectDialogStates.WEARING_SETUP;
currentStage = 'usb1';
}} />
{:else if $connectionDialogState.connectionState === ConnectDialogStates.START_BLUETOOTH}
Expand All @@ -116,7 +117,27 @@
currentStage = 'usb1';
}}
onNextClick={() =>
($connectionDialogState.connectionState = ConnectDialogStates.CONNECT_CABLE)} />
($connectionDialogState.connectionState = ConnectDialogStates.WEARING_SETUP)} />
{:else if $connectionDialogState.connectionState === ConnectDialogStates.WEARING_SETUP}
{#if currentStage === 'usb'}
<MicrobitWearingInstructionDialog
{currentStage}
onBackClick={() =>
($connectionDialogState.connectionState =
ConnectDialogStates.START_BLUETOOTH)}
onNextClick={() =>
($connectionDialogState.connectionState =
ConnectDialogStates.CONNECT_CABLE)} />
{:else if currentStage === 'usb1'}
<MicrobitWearingInstructionDialog
{currentStage}
onBackClick={() =>
($connectionDialogState.connectionState =
ConnectDialogStates.START_RADIO)}
onNextClick={() =>
($connectionDialogState.connectionState =
ConnectDialogStates.CONNECT_CABLE)} />
{/if}
{:else if $connectionDialogState.connectionState === ConnectDialogStates.CONNECT_CABLE}
{#if currentStage === 'usb'}
<ConnectCableDialog
Expand All @@ -126,7 +147,7 @@
ConnectDialogStates.CONNECT_BATTERY)}
onBackClick={() =>
($connectionDialogState.connectionState =
ConnectDialogStates.START_BLUETOOTH)}
ConnectDialogStates.WEARING_SETUP)}
onNextClick={() =>
($connectionDialogState.connectionState =
ConnectDialogStates.CONNECT_TUTORIAL_USB)} />
Expand All @@ -138,7 +159,7 @@
currentStage = 'usb2';
}}
onBackClick={() =>
($connectionDialogState.connectionState = ConnectDialogStates.START_RADIO)}
($connectionDialogState.connectionState = ConnectDialogStates.WEARING_SETUP)}
onNextClick={() => {
$connectionDialogState.connectionState =
ConnectDialogStates.CONNECT_TUTORIAL_USB;
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<!--
(c) 2023, Center for Computational Thinking and Design at Aarhus University and contributors
SPDX-License-Identifier: MIT
-->

<script lang="ts">
import StandardButton from '../StandardButton.svelte';
import { t } from '../../i18n.ts';
import microbitStrapImage from '../../imgs/microbit_strap.png';
import microbitHolderImage from '../../imgs/microbit_holder.png';
export let onNextClick: () => void;
export let onBackClick: () => void;
export let currentStage: string;
const instructionsVideoLink = "https://youtu.be/PC1rzFFhggU?feature=shared&t=63";
</script>

<main>
<div class="w-200 leading-10">
<p class="font-bold text-2xl text-left pb-5">
{#if currentStage === 'usb'}
{$t('connectMB.wearingSetup.bluetooth.heading')}
{:else if currentStage === 'usb1'}
{$t('connectMB.wearingSetup.radioConnection.heading')}
{/if}
</p>
<p class="leading-normal">
<a class="text-link" href={instructionsVideoLink} target="_blank"
>{$t('connectMB.wearingSetup.subtitle1')}</a>
{$t('connectMB.wearingSetup.subtitle2')}
</p>
<div class="flex flex-col font-semibold text-center py-10">
<img src={microbitHolderImage} class="w-50 self-center pt-10"/>
<p>{$t('connectMB.wearingSetup.requirements1')}</p>
<img src={microbitStrapImage} class="w-150 self-center pt-10"/>
<p>{$t('connectMB.wearingSetup.requirements2')}</p>
</div>
</div>
<div class="flex">
<div class="flex w-full justify-end gap-x-5">
<StandardButton onClick={onBackClick}>{$t('connectMB.backButton')}</StandardButton>
<StandardButton type="primary" onClick={onNextClick}
>{$t('connectMB.nextButton')}</StandardButton>
</div>
</div>
</main>

Binary file added src/imgs/microbit_holder.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/imgs/microbit_strap.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 8 additions & 0 deletions src/messages/ui.en.json
Original file line number Diff line number Diff line change
Expand Up @@ -173,6 +173,14 @@
"connectMB.bluetoothStart.requirements4": "Battery holder",
"connectMB.bluetoothStart.switchRadio": "I have two micro:bits",

"connectMB.wearingSetup.radioConnection.heading": "Is micro:bit 1 ready to wear?",
"connectMB.wearingSetup.bluetooth.heading": "Is the micro:bit ready to wear?",
"connectMB.wearingSetup.subtitle1": "Watch this video for instructions ",
"connectMB.wearingSetup.subtitle2": " on how to attach your micro:bit and battery pack to your flexible micro:bit holder and wearable strap so that it is easy to wear on your wrist.",
"connectMB.wearingSetup.requirements1": "micro:bit holder",
"connectMB.wearingSetup.requirements2": "Wearable strap",


"connectMB.connectCableMB1.heading": "Connect cable to micro:bit 1",
"connectMB.connectCableMB1.subtitle": "Connect the first micro:bit to this computer with a USB cable so that the <brand name> program can be downloaded to it.",

Expand Down
1 change: 1 addition & 0 deletions src/script/stores/connectDialogStore.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export enum ConnectDialogStates {
START_BLUETOOTH, // Initial box to begin the bluetooth connection flow
START_OUTPUT, // Initial box if input microbit is already connected. Choice between same and other microbit for output
BAD_FIRMWARE, // We detected an issue with the firmware of the micro:bit trying to transfer program.
WEARING_SETUP, // Contains the instructions on how to attatch the strap to the micro:bit.
CONNECT_CABLE, // Instructions how to connect micro:bit via usb
CONNECT_TUTORIAL_USB, // Instructions how to select micro:bit on popup when connected by usb
USB_DOWNLOADING, // Downloading usb program status bar prompt
Expand Down

0 comments on commit 33d4b1c

Please sign in to comment.