Add graph line settings to aid accessibility

lang/ui.en.json

@@ -731,6 +731,34 @@
     "defaultMessage": "Default (red, blue, green)",
     "description": "Graph colour scheme option"
   },
+  "graph-line-scheme": {
+    "defaultMessage": "Graph line style",
+    "description": "Graph line scheme setting label"
+  },
+  "graph-line-scheme-accessible": {
+    "defaultMessage": "Accessible lines (solid, dashed, dots)",
+    "description": "Graph line scheme option"
+  },
+  "graph-line-scheme-solid": {
+    "defaultMessage": "Solid lines",
+    "description": "Graph line scheme option"
+  },
+  "graph-line-weight": {
+    "defaultMessage": "Graph line thickness",
+    "description": "Graph line weight setting label"
+  },
+  "graph-line-weight-normal": {
+    "defaultMessage": "Normal",
+    "description": "Graph line weight option"
+  },
+  "graph-line-weight-thick": {
+    "defaultMessage": "Thick",
+    "description": "Graph line weight option"
+  },
+  "graph-line-weight-thin": {
+    "defaultMessage": "Thin",
+    "description": "Graph line weight option"
+  },
   "help-label": {
     "defaultMessage": "Help",
     "description": "Help icon aria label"
@@ -1659,4 +1687,4 @@
     "defaultMessage": "unplug and replug the USB cable",
     "description": "WebUSB error dialog"
   }
-}
+}

package.json

@@ -64,6 +64,7 @@
     "@microbit/makecode-embed": "^0.0.0-alpha.7",
     "@microbit/microbit-connection": "^0.0.0-alpha.29",
     "@microbit/ml-header-generator": "^0.4.3",
+    "@microbit/smoothie": "^1.37.0-microbit.1",
     "@tensorflow/tfjs": "^4.20.0",
     "@types/w3c-web-serial": "^1.0.6",
     "@types/w3c-web-usb": "^1.0.6",
@@ -81,7 +82,6 @@
     "react-intl": "^6.6.8",
     "react-router": "^6.24.0",
     "react-router-dom": "^6.24.0",
-    "smoothie": "^1.36.1",
     "zustand": "^4.5.5"
   }
 }

src/components/LiveGraph.tsx

@@ -2,14 +2,18 @@ import { HStack, usePrevious } from "@chakra-ui/react";
 import { useSize } from "@chakra-ui/react-use-size";
 import { AccelerometerDataEvent } from "@microbit/microbit-connection";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { SmoothieChart, TimeSeries } from "smoothie";
+import { SmoothieChart, TimeSeries } from "@microbit/smoothie";
 import { useConnectActions } from "../connect-actions-hooks";
 import { ConnectionStatus } from "../connect-status-hooks";
 import { useConnectionStage } from "../connection-stage-hooks";
 import { useGraphColors } from "../hooks/use-graph-colors";
 import { maxAccelerationScaleForGraphs } from "../mlConfig";
 import { useSettings, useStore } from "../store";
 import LiveGraphLabels from "./LiveGraphLabels";
+import {
+  graphLineStyleStringToArray,
+  useGraphLineStyles,
+} from "../hooks/use-graph-line-styles";
 
 export const smoothenDataPoint = (curr: number, next: number) => {
   // TODO: Factor out so that recording graph can do the same
@@ -20,13 +24,16 @@ export const smoothenDataPoint = (curr: number, next: number) => {
 const LiveGraph = () => {
   const { isConnected, status } = useConnectionStage();
   const connectActions = useConnectActions();
-  const [{ graphColorScheme }] = useSettings();
+  const [{ graphColorScheme, graphLineScheme, graphLineWeight }] =
+    useSettings();
 
   const colors = useGraphColors(graphColorScheme);
+  const lineStyles = useGraphLineStyles(graphLineScheme);
   const canvasRef = useRef<HTMLCanvasElement>(null);
 
   const [chart, setChart] = useState<SmoothieChart | undefined>(undefined);
-  const lineWidth = 2;
+  const lineWidth =
+    graphLineWeight === "normal" ? 2 : graphLineWeight === "thin" ? 1 : 3;
 
   const liveGraphContainerRef = useRef(null);
   const { width, height } = useSize(liveGraphContainerRef) ?? {
@@ -58,9 +65,21 @@ const LiveGraph = () => {
       enableDpiScaling: false,
     });
 
-    smoothieChart.addTimeSeries(lineX, { lineWidth, strokeStyle: colors.x });
-    smoothieChart.addTimeSeries(lineY, { lineWidth, strokeStyle: colors.y });
-    smoothieChart.addTimeSeries(lineZ, { lineWidth, strokeStyle: colors.z });
+    smoothieChart.addTimeSeries(lineX, {
+      lineWidth,
+      strokeStyle: colors.x,
+      lineDash: graphLineStyleStringToArray(lineStyles.x),
+    });
+    smoothieChart.addTimeSeries(lineY, {
+      lineWidth,
+      strokeStyle: colors.y,
+      lineDash: graphLineStyleStringToArray(lineStyles.y),
+    });
+    smoothieChart.addTimeSeries(lineZ, {
+      lineWidth,
+      strokeStyle: colors.z,
+      lineDash: graphLineStyleStringToArray(lineStyles.z),
+    });
 
     smoothieChart.addTimeSeries(recordLines, {
       lineWidth: 3,
@@ -73,7 +92,19 @@ const LiveGraph = () => {
     return () => {
       smoothieChart.stop();
     };
-  }, [colors.x, colors.y, colors.z, lineX, lineY, lineZ, recordLines]);
+  }, [
+    colors.x,
+    colors.y,
+    colors.z,
+    lineStyles.x,
+    lineStyles.y,
+    lineStyles.z,
+    lineWidth,
+    lineX,
+    lineY,
+    lineZ,
+    recordLines,
+  ]);
 
   useEffect(() => {
     if (isConnected || status === ConnectionStatus.ReconnectingAutomatically) {
@@ -134,6 +165,7 @@ const LiveGraph = () => {
       overflow="hidden"
     >
       <canvas
+        dir="rtl"
         ref={canvasRef}
         height={height}
         id="smoothie-chart"

src/components/RecordingGraph.tsx

@@ -12,26 +12,29 @@ import { XYZData } from "../model";
 import { getConfig as getRecordingChartConfig } from "../recording-graph";
 import { useGraphColors } from "../hooks/use-graph-colors";
 import { useSettings } from "../store";
+import { useGraphLineStyles } from "../hooks/use-graph-line-styles";
 
 interface RecordingGraphProps extends BoxProps {
   data: XYZData;
 }
 
 const RecordingGraph = ({ data, children, ...rest }: RecordingGraphProps) => {
-  const [{ graphColorScheme }] = useSettings();
+  const [{ graphColorScheme, graphLineScheme, graphLineWeight }] =
+    useSettings();
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const colors = useGraphColors(graphColorScheme);
+  const lineStyles = useGraphLineStyles(graphLineScheme);
   useEffect(() => {
     Chart.unregister(...registerables);
     Chart.register([LinearScale, LineController, PointElement, LineElement]);
     const chart = new Chart(
       canvasRef.current?.getContext("2d") ?? new HTMLCanvasElement(),
-      getRecordingChartConfig(data, colors)
+      getRecordingChartConfig(data, colors, lineStyles, graphLineWeight)
     );
     return () => {
       chart.destroy();
     };
-  }, [colors, data]);
+  }, [colors, data, graphLineWeight, lineStyles]);
 
   return (
     <Box

src/components/SettingsDialog.tsx

@@ -20,7 +20,12 @@ import {
 } from "@chakra-ui/react";
 import { useCallback, useMemo } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
-import { defaultSettings, graphColorSchemeOptions } from "../settings";
+import {
+  defaultSettings,
+  graphColorSchemeOptions,
+  graphLineSchemeOptions as graphLineSchemeOptions,
+  graphLineWeightOptions,
+} from "../settings";
 import { useSettings } from "../store";
 import SelectFormControl, { createOptions } from "./SelectFormControl";
 import { ConfirmDialog } from "./ConfirmDialog";
@@ -64,6 +69,16 @@ export const SettingsDialog = ({
         "graph-color-scheme",
         intl
       ),
+      graphLineScheme: createOptions(
+        graphLineSchemeOptions,
+        "graph-line-scheme",
+        intl
+      ),
+      graphLineWeight: createOptions(
+        graphLineWeightOptions,
+        "graph-line-weight",
+        intl
+      ),
     };
   }, [intl]);
   return (
@@ -107,6 +122,30 @@ export const SettingsDialog = ({
                     })
                   }
                 />
+                <SelectFormControl
+                  id="graphLineScheme"
+                  label={intl.formatMessage({ id: "graph-line-scheme" })}
+                  options={options.graphLineScheme}
+                  value={settings.graphLineScheme}
+                  onChange={(graphLineScheme) =>
+                    setSettings({
+                      ...settings,
+                      graphLineScheme,
+                    })
+                  }
+                />
+                <SelectFormControl
+                  id="graphLineWeight"
+                  label={intl.formatMessage({ id: "graph-line-weight" })}
+                  options={options.graphLineWeight}
+                  value={settings.graphLineWeight}
+                  onChange={(graphLineWeight) =>
+                    setSettings({
+                      ...settings,
+                      graphLineWeight,
+                    })
+                  }
+                />
                 <FormControl>
                   <Button variant="link" onClick={handleResetToDefault}>
                     <FormattedMessage id="restore-defaults-action" />

src/hooks/use-graph-line-styles.ts

@@ -0,0 +1,33 @@
+import { GraphLineScheme } from "../settings";
+
+export interface GraphLineStyles {
+  x: undefined | string;
+  y: undefined | string;
+  z: undefined | string;
+}
+
+export const useGraphLineStyles = (
+  graphLineScheme: GraphLineScheme
+): GraphLineStyles => {
+  switch (graphLineScheme) {
+    case "accessible": {
+      return {
+        x: undefined,
+        y: "10,5",
+        z: "2,2",
+      };
+    }
+    default: {
+      return {
+        x: undefined,
+        y: undefined,
+        z: undefined,
+      };
+    }
+  }
+};
+
+export const graphLineStyleStringToArray = (value: string | undefined) =>
+  value
+    ? (value.split(",").map((x) => Number(x)) as [number, number])
+    : undefined;

src/messages/ui.en.json

@@ -1249,6 +1249,48 @@
       "value": "Default (red, blue, green)"
     }
   ],
+  "graph-line-scheme": [
+    {
+      "type": 0,
+      "value": "Graph line style"
+    }
+  ],
+  "graph-line-scheme-accessible": [
+    {
+      "type": 0,
+      "value": "Accessible lines (solid, dashed, dots)"
+    }
+  ],
+  "graph-line-scheme-solid": [
+    {
+      "type": 0,
+      "value": "Solid lines"
+    }
+  ],
+  "graph-line-weight": [
+    {
+      "type": 0,
+      "value": "Graph line thickness"
+    }
+  ],
+  "graph-line-weight-normal": [
+    {
+      "type": 0,
+      "value": "Normal"
+    }
+  ],
+  "graph-line-weight-thick": [
+    {
+      "type": 0,
+      "value": "Thick"
+    }
+  ],
+  "graph-line-weight-thin": [
+    {
+      "type": 0,
+      "value": "Thin"
+    }
+  ],
   "help-label": [
     {
       "type": 0,
@@ -1810,9 +1852,13 @@
     }
   ],
   "makecode-load-error-dialog-body": [
+    {
+      "type": 1,
+      "value": "appNameFull"
+    },
     {
       "type": 0,
-      "value": "micro:bit CreateAI has failed to load MakeCode. Please check your internet connection, reload the page then try again."
+      "value": " has failed to load MakeCode. Please check your internet connection, reload the page then try again."
     }
   ],
   "makecode-load-error-dialog-title": [