Add dialog on how to setup the micro:bit for wearing (#76)

microbit-foundation · Dec 21, 2023 · 9b739ec · 9b739ec
1 parent eebd2aa
commit 9b739ec
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 5 deletions.
diff --git a/src/components/connection-prompt/ConnectDialogContainer.svelte b/src/components/connection-prompt/ConnectDialogContainer.svelte
@@ -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
 
@@ -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}
@@ -116,7 +117,26 @@
           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
@@ -125,8 +145,7 @@
             ($connectionDialogState.connectionState =
               ConnectDialogStates.CONNECT_BATTERY)}
           onBackClick={() =>
-            ($connectionDialogState.connectionState =
-              ConnectDialogStates.START_BLUETOOTH)}
+            ($connectionDialogState.connectionState = ConnectDialogStates.WEARING_SETUP)}
           onNextClick={() =>
             ($connectionDialogState.connectionState =
               ConnectDialogStates.CONNECT_TUTORIAL_USB)} />
@@ -138,7 +157,7 @@
             currentStage = 'usb2';
           }}
           onBackClick={() =>
-            ($connectionDialogState.connectionState = ConnectDialogStates.START_RADIO)}
+            ($connectionDialogState.connectionState = ConnectDialogStates.WEARING_SETUP)}
           onNextClick={() => {
             $connectionDialogState.connectionState =
               ConnectDialogStates.CONNECT_TUTORIAL_USB;

diff --git a/src/components/connection-prompt/MicrobitWearingInstructionDialog.svelte b/src/components/connection-prompt/MicrobitWearingInstructionDialog.svelte
@@ -0,0 +1,52 @@
+<!--
+  (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">
+    <p class="font-bold text-2xl text-left leading-10">
+      {#if currentStage === 'usb'}
+        {$t('connectMB.wearingSetup.bluetooth.heading')}
+      {:else if currentStage === 'usb1'}
+        {$t('connectMB.wearingSetup.radioConnection.heading')}
+      {/if}
+    </p>
+    <div class="space-y-10 mt-5">
+      <p class="leading-normal">
+        <a class="text-link" href={instructionsVideoLink} target="_blank" rel="noopener"
+          >{$t('connectMB.wearingSetup.subtitle1')}</a>
+        {$t('connectMB.wearingSetup.subtitle2')}
+      </p>
+      <div class="flex flex-col font-semibold items-center gap-8">
+        <div class="flex flex-col items-center gap-y-2">
+          <img src={microbitHolderImage} class="w-50" alt="" />
+          <p>{$t('connectMB.wearingSetup.requirements1')}</p>
+        </div>
+        <div class="flex flex-col items-center gap-y-2">
+          <img src={microbitStrapImage} class="w-150" alt="" />
+          <p>{$t('connectMB.wearingSetup.requirements2')}</p>
+        </div>
+      </div>
+    </div>
+    <div class="flex justify-end gap-x-5 mt-8">
+      <StandardButton onClick={onBackClick}>{$t('connectMB.backButton')}</StandardButton>
+      <StandardButton type="primary" onClick={onNextClick}
+        >{$t('connectMB.nextButton')}</StandardButton>
+    </div>
+  </div>
+</main>
diff --git a/src/imgs/microbit_holder.png b/src/imgs/microbit_holder.png
diff --git a/src/imgs/microbit_strap.png b/src/imgs/microbit_strap.png
diff --git a/src/messages/ui.en.json b/src/messages/ui.en.json
@@ -183,6 +183,13 @@
   "connectMB.bluetoothStart.requirements4": "Battery holder",
   "connectMB.bluetoothStart.switchRadio": "Alternative method if you have 2 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 USB cable to micro:bit 1",
   "connectMB.connectCableMB1.subtitle": "Connect the micro:bit that is ready to wear (micro:bit 1) to this computer with a USB cable so that the machine learning tool program can be downloaded to it.",
 

diff --git a/src/script/stores/connectDialogStore.ts b/src/script/stores/connectDialogStore.ts
@@ -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