[Simulator] Add compass module to simulator

lang/ui.en.json

@@ -799,6 +799,10 @@
     "defaultMessage": "Collapse {title} module",
     "description": "Aria label for collapse simulator module button"
   },
+  "simulator-compass": {
+    "defaultMessage": "Compass",
+    "description": "Compass title"
+  },
   "simulator-data-logging-empty": {
     "defaultMessage": "No log entries.",
     "description": "Shown in the simulator Data logging table when there are no rows"

lang/ui.fr.json

@@ -798,6 +798,10 @@
     "defaultMessage": "Collapse {title} module",
     "description": "Aria label for collapse simulator module button"
   },
+  "simulator-compass": {
+    "defaultMessage": "Compass",
+    "description": "Compass title"
+  },
   "simulator-data-logging-empty": {
     "defaultMessage": "No log entries.",
     "description": "Shown in the simulator Data logging table when there are no rows"
@@ -807,7 +811,7 @@
     "description": "Shown below the Data logging table to warn that the log is full"
   },
   "simulator-data-logging-rows": {
-    "defaultMessage": "{count, plural, =0 {No rows} 1 {# row} other {# rows}}",
+    "defaultMessage": "{count, plural, =0 {No rows logged} 1 {# row logged} other {# rows logged}}",
     "description": "Indicator of the number of rows logged"
   },
   "simulator-data-logging-save-log": {

lang/ui.lol.json

@@ -798,6 +798,10 @@
     "defaultMessage": "Collapse {title} module",
     "description": "Aria label for collapse simulator module button"
   },
+  "simulator-compass": {
+    "defaultMessage": "Compass",
+    "description": "Compass title"
+  },
   "simulator-data-logging-empty": {
     "defaultMessage": "No log entries.",
     "description": "Shown in the simulator Data logging table when there are no rows"
@@ -807,7 +811,7 @@
     "description": "Shown below the Data logging table to warn that the log is full"
   },
   "simulator-data-logging-rows": {
-    "defaultMessage": "{count, plural, =0 {No rows} 1 {# row} other {# rows}}",
+    "defaultMessage": "{count, plural, =0 {No rows logged} 1 {# row logged} other {# rows logged}}",
     "description": "Indicator of the number of rows logged"
   },
   "simulator-data-logging-save-log": {

src/device/simulator.ts

@@ -70,6 +70,11 @@ export interface SimulatorState {
   accelerometerZ: RangeSensor;
   gesture: EnumSensor;
 
+  compassX: RangeSensor;
+  compassY: RangeSensor;
+  compassZ: RangeSensor;
+  compassHeading: RangeSensor;
+
   pin0: RangeSensor;
   pin1: RangeSensor;
   pin2: RangeSensor;
@@ -90,6 +95,10 @@ export type SensorStateKey = Extract<
   | "accelerometerX"
   | "accelerometerY"
   | "accelerometerZ"
+  | "compassX"
+  | "compassY"
+  | "compassZ"
+  | "compassHeading"
   | "gesture"
   | "pin0"
   | "pin1"

src/messages/ui.en.json

@@ -1811,6 +1811,12 @@
       "value": " module"
     }
   ],
+  "simulator-compass": [
+    {
+      "type": 0,
+      "value": "Compass"
+    }
+  ],
   "simulator-data-logging-empty": [
     {
       "type": 0,

src/messages/ui.fr.json

@@ -1811,6 +1811,12 @@
       "value": " module"
     }
   ],
+  "simulator-compass": [
+    {
+      "type": 0,
+      "value": "Compass"
+    }
+  ],
   "simulator-data-logging-empty": [
     {
       "type": 0,
@@ -1834,15 +1840,15 @@
             },
             {
               "type": 0,
-              "value": " row"
+              "value": " row logged"
             }
           ]
         },
         "=0": {
           "value": [
             {
               "type": 0,
-              "value": "No rows"
+              "value": "No rows logged"
             }
           ]
         },
@@ -1853,7 +1859,7 @@
             },
             {
               "type": 0,
-              "value": " rows"
+              "value": " rows logged"
             }
           ]
         }

src/messages/ui.lol.json

@@ -1755,6 +1755,12 @@
       "value": " module"
     }
   ],
+  "simulator-compass": [
+    {
+      "type": 0,
+      "value": "Compass"
+    }
+  ],
   "simulator-data-logging-empty": [
     {
       "type": 0,
@@ -1778,15 +1784,15 @@
             },
             {
               "type": 0,
-              "value": " row"
+              "value": " row logged"
             }
           ]
         },
         "=0": {
           "value": [
             {
               "type": 0,
-              "value": "No rows"
+              "value": "No rows logged"
             }
           ]
         },
@@ -1797,7 +1803,7 @@
             },
             {
               "type": 0,
-              "value": " rows"
+              "value": " rows logged"
             }
           ]
         }

src/simulator/AccelerometerModule.tsx

@@ -1,13 +1,9 @@
-import { HStack, IconButton, Select, Stack, Text } from "@chakra-ui/react";
+import { HStack, IconButton, Select, Stack } from "@chakra-ui/react";
 import { ChangeEvent, ReactNode, useCallback, useState } from "react";
 import { RiSendPlane2Line } from "react-icons/ri";
 import { useIntl } from "react-intl";
-import {
-  RangeSensor as RangeSensorType,
-  SensorStateKey,
-  SimulatorState,
-} from "../device/simulator";
-import RangeSensor from "./RangeSensor";
+import { SensorStateKey, SimulatorState } from "../device/simulator";
+import Axis from "./Axis";
 import { RunningStatus } from "./Simulator";
 
 interface AccelerometerModuleProps {
@@ -115,30 +111,4 @@ const Gesture = ({ icon, state, enabled, onValueChange }: GestureProps) => {
   );
 };
 
-interface AxisProps {
-  axis: SensorStateKey;
-  label: string;
-  state: SimulatorState;
-  onValueChange: (id: SensorStateKey, value: any) => void;
-}
-
-const Axis = ({
-  axis,
-  label,
-  state,
-  onValueChange: onSensorChange,
-}: AxisProps) => (
-  <RangeSensor
-    id={axis}
-    title={label}
-    icon={
-      <Text boxSize={6} textAlign="center">
-        {label}
-      </Text>
-    }
-    sensor={state[axis] as RangeSensorType}
-    onSensorChange={onSensorChange}
-  />
-);
-
 export default AccelerometerModule;

src/simulator/Axis.tsx

@@ -0,0 +1,44 @@
+/**
+ * (c) 2022, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { Text } from "@chakra-ui/react";
+import {
+  RangeSensor as RangeSensorType,
+  SensorStateKey,
+  SimulatorState,
+} from "../device/simulator";
+import RangeSensor from "./RangeSensor";
+
+interface AxisProps {
+  axis: SensorStateKey;
+  label: string;
+  state: SimulatorState;
+  onValueChange: (id: SensorStateKey, value: any) => void;
+}
+
+const Axis = ({
+  axis,
+  label,
+  state,
+  onValueChange: onSensorChange,
+}: AxisProps) => (
+  <RangeSensor
+    id={axis}
+    title={label}
+    icon={
+      label ? (
+        <Text boxSize={6} textAlign="center">
+          {label}
+        </Text>
+      ) : (
+        ""
+      )
+    }
+    sensor={state[axis] as RangeSensorType}
+    onSensorChange={onSensorChange}
+  />
+);
+
+export default Axis;

src/simulator/ButtonsModule.tsx

@@ -32,10 +32,10 @@ const ButtonsModule = ({
           icon
         ) : (
           <>
-            <Text height={8} alignItems="center" display="flex">
+            <Text height={8} fontSize="sm" alignItems="center" display="flex">
               <FormattedMessage id="simulator-input-press" />
             </Text>
-            <Text>
+            <Text fontSize="sm">
               <FormattedMessage id="simulator-input-hold" />
             </Text>
           </>

src/simulator/CompassModule.tsx

@@ -0,0 +1,99 @@
+/**
+ * (c) 2022, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { Box, HStack, Icon, Stack, Text } from "@chakra-ui/react";
+import { ReactNode, useEffect, useRef } from "react";
+import {
+  RangeSensor as RangeSensorType,
+  SensorStateKey,
+  SimulatorState,
+} from "../device/simulator";
+import Axis from "./Axis";
+import { ReactComponent as CompassHeadingIcon } from "./icons/compass-heading.svg";
+import RangeSensor from "./RangeSensor";
+
+interface CompassModuleProps {
+  icon: ReactNode;
+  state: SimulatorState;
+  onValueChange: (id: SensorStateKey, value: any) => void;
+  minimised: boolean;
+}
+
+const CompassModule = ({
+  icon,
+  state,
+  onValueChange,
+  minimised,
+}: CompassModuleProps) => {
+  const ref = useRef<SVGSVGElement>(null);
+  const compassHeading = state["compassHeading"];
+  useEffect(() => {
+    const needle = ref.current?.querySelector("#Needle");
+    if (needle) {
+      (
+        needle as HTMLElement
+      ).style.transform = `rotate(${compassHeading.value}deg)`;
+    }
+  }, [compassHeading]);
+  return (
+    <Box>
+      {minimised ? (
+        <RangeSensor
+          id="compassHeading"
+          icon={icon}
+          title="compass heading"
+          sensor={compassHeading as RangeSensorType}
+          onSensorChange={onValueChange}
+          minimised={minimised}
+        />
+      ) : (
+        <>
+          <Text as="h4" fontSize="sm">
+            Heading
+          </Text>
+          <HStack spacing={3} pl={4} width="100%">
+            <Axis
+              axis="compassHeading"
+              label=""
+              state={state}
+              onValueChange={onValueChange}
+            />
+            <Icon
+              ref={ref}
+              as={CompassHeadingIcon}
+              color="blimpTeal.400"
+              boxSize="20"
+            />
+          </HStack>
+          <Stack spacing={5} mt={5}>
+            <Text as="h4" fontSize="sm">
+              Magnetic field strength
+            </Text>
+            <Axis
+              axis="compassX"
+              label="x"
+              state={state}
+              onValueChange={onValueChange}
+            />
+            <Axis
+              axis="compassY"
+              label="y"
+              state={state}
+              onValueChange={onValueChange}
+            />
+            <Axis
+              axis="compassZ"
+              label="z"
+              state={state}
+              onValueChange={onValueChange}
+            />
+          </Stack>
+        </>
+      )}
+    </Box>
+  );
+};
+
+export default CompassModule;

src/simulator/PinsModule.tsx

@@ -36,10 +36,10 @@ const PinsModule = ({
           icon
         ) : (
           <>
-            <Text height={8} alignItems="center" display="flex">
+            <Text height={8} fontSize="sm" alignItems="center" display="flex">
               <FormattedMessage id="simulator-input-press" />
             </Text>
-            <Text>
+            <Text fontSize="sm">
               <FormattedMessage id="simulator-input-hold" />
             </Text>
           </>