Merge pull request #260 from microbit-foundation/216-improve-ui-detai…

…ls-in-in-pin-selection

Improve UI details in in pin selection

src/StaticConfiguration.ts

@@ -18,6 +18,7 @@ class StaticConfiguration {
   // In milliseconds, after turning on, how long should an output be on for?
   public static readonly defaultPinToggleTime = 1500;
   public static readonly defaultPinTurnOnState: PinTurnOnState = PinTurnOnState.X_TIME;
+  public static readonly pinIOEnabledByDefault: boolean = true;
 
   // What name should a downloaded hex file have?
   public static readonly downloadedHexFilename = 'firmware.hex';

src/components/OutputGesture.svelte

@@ -43,6 +43,8 @@
   let selectedPin: MBSpecs.UsableIOPin = gesture.output.outputPin
     ? gesture.output.outputPin.pin
     : StaticConfiguration.defaultOutputPin;
+
+  let pinIOEnabled = StaticConfiguration.pinIOEnabledByDefault;
   let turnOnTime = gesture.output.outputPin
     ? gesture.output.outputPin.turnOnTime
     : StaticConfiguration.defaultPinToggleTime;
@@ -73,14 +75,18 @@
       return;
     }
     if (action === 'turnOn') {
-      setOutputPin(true);
       triggerComponents();
       playSound();
       wasTriggered = true;
     } else {
-      setOutputPin(false);
       wasTriggered = false;
     }
+
+    if (!pinIOEnabled) {
+      return;
+    }
+    const shouldTurnPinOn = action === 'turnOn';
+    setOutputPin(shouldTurnPinOn);
   };
 
   $: {
@@ -134,6 +140,9 @@
   }
 
   const onPinSelect = (selected: MBSpecs.UsableIOPin) => {
+    if (selected === selectedPin) {
+      pinIOEnabled = !pinIOEnabled;
+    }
     selectedPin = selected;
     refreshAfterChange();
     updateGesturePinOutput(gesture.ID, selectedPin, turnOnState, turnOnTime);
@@ -257,7 +266,7 @@
   </div>
   <div class="ml-4">
     <PinSelector
-      {selectedPin}
+      selectedPin={pinIOEnabled ? selectedPin : undefined}
       {turnOnState}
       {turnOnTime}
       {onPinSelect}

src/components/output/PinSelector.svelte

@@ -4,6 +4,7 @@
   import { PinTurnOnState } from './PinSelectorUtil';
   import { t } from '../../i18n.js';
   import MBSpecs from '../../script/microbit-interfacing/MBSpecs.js';
+  import { currentData } from '../../script/stores/mlStore';
   export let onPinSelect: (pin: MBSpecs.UsableIOPin) => void;
   export let onTurnOnTimeSelect: (turnOnArgs: {
     turnOnState: PinTurnOnState;
@@ -12,7 +13,7 @@
 
   export let turnOnTime: number;
   export let turnOnState: PinTurnOnState;
-  export let selectedPin: MBSpecs.UsableIOPin;
+  export let selectedPin: MBSpecs.UsableIOPin | undefined;
 
   let selectedTurnOnState = turnOnState;
   let turnOnTimeInSeconds = turnOnTime / 1000;
@@ -42,45 +43,52 @@
 
 <GestureTilePart>
   <div class="flex flex-row">
-    {#each MBSpecs.IO_PIN_LAYOUT as val}
-      {#if includes(StaticConfiguration.supportedPins, val)}
+    {#each MBSpecs.IO_PIN_LAYOUT as currentPin}
+      {#if includes(StaticConfiguration.supportedPins, currentPin)}
         <!-- These are pins we support, make them selectable and yellow -->
-        {#if largePins.includes(val)}
+        {#if largePins.includes(currentPin)}
           <!-- Large pins -->
           <div
             on:click={() => {
-              onPinSelected(val);
+              onPinSelected(currentPin);
             }}
-            class="bg-yellow-400 h-8 w-7 rounded-bl-xl ml-1px rounded-br-xl hover:bg-yellow-300"
-            class:bg-yellow-600={selectedPin === val}>
-            <p class="text-center text-xs">{val}</p>
+            class="h-8 w-7 rounded-bl-xl ml-1px rounded-br-xl bg-yellow-300 cursor-pointer"
+            class:border-yellow-500={selectedPin === currentPin}
+            class:border-width-2={selectedPin === currentPin}
+            class:h-9={selectedPin === currentPin}
+            class:hover:bg-yellow-200={selectedPin !== currentPin}
+            class:bg-opacity-80={selectedPin !== currentPin}>
+            <p class="text-center text-xs select-none">{currentPin}</p>
           </div>
         {:else}
           <!-- Small pins -->
           <div
             on:click={() => {
-              onPinSelected(val);
+              onPinSelected(currentPin);
             }}
-            class:bg-yellow-600={selectedPin === val}
+            class:bg-yellow-600={selectedPin === currentPin}
             class="bg-yellow-400 h-7 w-1 rounded-bl-xl ml-1px rounded-br-xl hover:bg-yellow-300" />
         {/if}
       {:else}
         <!-- This are pins we DO NOT support, make them non-selectable and gray -->
-        {#if largePins.includes(val)}
+        {#if largePins.includes(currentPin)}
           <!-- Large pins -->
-          <div class="bg-amber-200 opacity-50 h-8 w-7 rounded-bl-xl ml-1px rounded-br-xl">
-            <p class="text-center text-xs">{val}</p>
+          <div class="bg-amber-200 opacity-40 h-8 w-7 rounded-bl-xl ml-1px rounded-br-xl">
+            <p class="text-center text-xs select-none">{currentPin}</p>
           </div>
         {:else}
           <!-- Small pins -->
           <div
-            class="bg-amber-200 opacity-50 h-7 w-1 rounded-bl-xl ml-1px rounded-br-xl" />
+            class="bg-amber-200 opacity-40 h-7 w-1 rounded-bl-xl ml-1px rounded-br-xl" />
         {/if}
       {/if}
     {/each}
   </div>
 
-  <div class="flex flex-col justify-center items-center">
+  <div
+    id="test"
+    class:hidden={selectedPin === undefined}
+    class="flex flex-col justify-center items-center">
     <div class="flex flex-row w-full mt-2 justify-around">
       <div class="flex flex-col">
         <input

src/components/skeletonloading/ImageSkeleton.svelte

@@ -1,3 +1,11 @@
+<!-- 
+  Skeleton loader takes a size and image, and will 'reserve' the given size on the page for the image, 
+  and will fill it will a generic 'loading' animation until the image loads, at which point will be replaced 
+
+  If you are unsure how much space should be allocated before-hand I recommend using dev-tools to inspect the image on the page,
+  then take it's dimension and use it as parameters. 
+  This doesn't account for smaller or larger screens, but is a good enough heuristic.
+-->
 <script lang="ts">
   import Skeleton from 'svelte-skeleton/Skeleton.svelte';