User Preferences (#77)

* Initial implementation

* Flashbar

* Latency added

* Change tresholds

* Threshold adjust + fix

* Refactoring

* Resolution approach

* Clean-up, un-used values

* Enable user preferences for new features

* Tweak menu label

* Change icons

* bump

* update readme

---------

Co-authored-by: MarkRoss-Eviden <[email protected]>
Co-authored-by: Mark Ross <[email protected]>

Author: larsll

README.md

@@ -18,32 +18,25 @@ Whether you're a casual racer or a DeepRacer developer, this custom console prov
 
 ## How to install on your car
 
-### Option 1 - Using Debian Package
+### Using Debian Package
 
 - Find the latest release - https://github.com/aws-deepracer-community/deepracer-custom-console/releases
 - SSH to your car
-- Run `curl -L -o deepracer-console-new.deb https://github.com/aws-deepracer-community/deepracer-custom-console/releases/download/v2.2.2/aws-deepracer-community-device-console_2.2.2.0_all.deb`
+- Run `curl -L -o deepracer-console-new.deb https://github.com/aws-deepracer-community/deepracer-custom-console/releases/download/v2.2.9/aws-deepracer-community-device-console_2.2.9.0_all.deb`
 - Run `sudo dpkg -i deepracer-console-new.deb`
+- Run `sudo systemctl restart deepracer-core.service` to restart the DeepRacer service
 - Open your browser and navigate to the IP address of the car and login using your password
 
 If you should need to restore the original UI run:
 - `sudo apt remove aws-deepracer-community-device-console`
 - `sudo apt install aws-deepracer-device-console`
 
-### Option 2 - Using scripts within this repo
-
-- Find the latest release - https://github.com/aws-deepracer-community/deepracer-custom-console/releases
-- SSH to your car
-- Run `git clone https://github.com/aws-deepracer-community/deepracer-custom-console`
-- Run `cd deepracer-custom-console`
-- Run `curl -L -o deepracer-console-new.zip https://github.com/aws-deepracer-community/deepracer-custom-console/releases/download/v2.2.2/aws-deepracer-community-device-console-v2.2.2.zip` (or the latest tagged version you want to install) to download the zip package
-- Run `sudo ./deepracer-backup-console.sh` to take a backup of the original UI
-- Run `sudo ./deepracer-deploy-console.sh` to install the new Cloudscape UI
-- Run `sudo systemctl restart deepracer-core.service` to restart the DeepRacer service
-- Run `sudo systemctl restart nginx` to restart nginx
-- Open your browser and navigate to the IP address of the car and login using your password
-
-If you should need to restore the original UI run `sudo ./deepracer-restore-console.sh`
+Note - some features also require the deepracer-custom-car code - https://github.com/aws-deepracer-community/deepracer-custom-car
+- Follow the instructions in that repo to install
+- If some features require the 'experimental' custom-car-code then update your car with the following config
+    -  Run `sudo vi /etc/apt/sources.list.d/aws_deepracer-community.list` and then comment out the first line and uncomment the third line
+    -  Run `sudo apt update && sudo apt upgrade`
+    - Run `sudo systemctl restart deepracer-core.service` to restart the DeepRacer service
 
 ## Development Guide
 

website/src/common/helpers/storage-helper.ts

@@ -4,6 +4,8 @@ import { NavigationPanelState } from "../types";
 const PREFIX = "deepracer";
 const THEME_STORAGE_NAME = `${PREFIX}-theme`;
 const NAVIGATION_PANEL_STATE_STORAGE_NAME = `${PREFIX}-navigation-panel-state`;
+const SPEED_ADJUSTMENT_KEY = `${PREFIX}-speed-adjustment`;
+const DEVICE_STATUS_KEY = `${PREFIX}-device-status`;
 
 export abstract class StorageHelper {
   static getTheme() {
@@ -50,4 +52,24 @@ export abstract class StorageHelper {
 
     return newState;
   }
+
+  // Speed adjustment methods
+  static getEnableSpeedAdjustment(): boolean {
+    const savedValue = localStorage.getItem(SPEED_ADJUSTMENT_KEY);
+    return savedValue ? JSON.parse(savedValue) : false;
+  }
+
+  static setEnableSpeedAdjustment(value: boolean): void {
+    localStorage.setItem(SPEED_ADJUSTMENT_KEY, JSON.stringify(value));
+  }
+
+  // Device status methods
+  static getEnableDeviceStatus(): boolean {
+    const savedValue = localStorage.getItem(DEVICE_STATUS_KEY);
+    return savedValue ? JSON.parse(savedValue) : false;
+  }
+
+  static setEnableDeviceStatus(value: boolean): void {
+    localStorage.setItem(DEVICE_STATUS_KEY, JSON.stringify(value));
+  }
 }

website/src/common/hooks/use-preferences.ts

@@ -0,0 +1,46 @@
+import { createContext, useContext, useState, useCallback } from "react";
+import { StorageHelper } from "../helpers/storage-helper";
+
+export interface Settings {
+  enableSpeedAdjustment: boolean;
+  enableDeviceStatus: boolean;
+}
+
+interface PreferencesContextType {
+  settings: Settings;
+  setEnableSpeedAdjustment: (value: boolean) => void;
+  setEnableDeviceStatus: (value: boolean) => void;
+}
+
+export const PreferencesContext = createContext<PreferencesContextType | null>(null);
+
+export const usePreferencesProvider = () => {
+  const [settings, setSettings] = useState<Settings>({
+    enableSpeedAdjustment: StorageHelper.getEnableSpeedAdjustment(),
+    enableDeviceStatus: StorageHelper.getEnableDeviceStatus(),
+  });
+
+  const setEnableSpeedAdjustment = useCallback((value: boolean) => {
+    StorageHelper.setEnableSpeedAdjustment(value);
+    setSettings((prev) => ({ ...prev, enableSpeedAdjustment: value }));
+  }, []);
+
+  const setEnableDeviceStatus = useCallback((value: boolean) => {
+    StorageHelper.setEnableDeviceStatus(value);
+    setSettings((prev) => ({ ...prev, enableDeviceStatus: value }));
+  }, []);
+
+  return {
+    settings,
+    setEnableSpeedAdjustment,
+    setEnableDeviceStatus,
+  };
+};
+
+export const usePreferences = (): PreferencesContextType => {
+  const context = useContext(PreferencesContext);
+  if (!context) {
+    throw new Error("usePreferences must be used within a PreferencesProvider");
+  }
+  return context;
+};

website/src/components/context-provider.tsx

@@ -4,6 +4,7 @@ import { NetworkContext, useNetworkProvider } from "../common/hooks/use-network"
 import { SupportedApisContext, useSupportedApisProvider } from "../common/hooks/use-supported-apis";
 import { ModelsContext, useModelsProvider } from "../common/hooks/use-models";
 import { AuthContext, useAuthProvider } from "../common/hooks/use-authentication";
+import { PreferencesContext, usePreferencesProvider } from "../common/hooks/use-preferences";
 
 // Main Context Provider Component
 export const ContextProvider: React.FC<{
@@ -13,15 +14,18 @@ export const ContextProvider: React.FC<{
   const networkContextValue = useNetworkProvider();
   const supportedApisContextValue = useSupportedApisProvider();
   const modelsContextValue = useModelsProvider();
+  const preferencesContextValue = usePreferencesProvider();
 
   return (
-    <BatteryContext.Provider value={batteryContextValue}>
-      <NetworkContext.Provider value={networkContextValue}>
-        <SupportedApisContext.Provider value={supportedApisContextValue}>
-          <ModelsContext.Provider value={modelsContextValue}>{children}</ModelsContext.Provider>
-        </SupportedApisContext.Provider>
-      </NetworkContext.Provider>
-    </BatteryContext.Provider>
+    <SupportedApisContext.Provider value={supportedApisContextValue}>
+      <PreferencesContext.Provider value={preferencesContextValue}>
+        <BatteryContext.Provider value={batteryContextValue}>
+          <NetworkContext.Provider value={networkContextValue}>
+            <ModelsContext.Provider value={modelsContextValue}>{children}</ModelsContext.Provider>
+          </NetworkContext.Provider>
+        </BatteryContext.Provider>
+      </PreferencesContext.Provider>
+    </SupportedApisContext.Provider>
   );
 };
 

website/src/components/global-header.tsx

@@ -3,10 +3,18 @@ import { TopNavigation } from "@cloudscape-design/components";
 import { Mode } from "@cloudscape-design/global-styles";
 import { StorageHelper } from "../common/helpers/storage-helper";
 import { APP_NAME } from "../common/constants";
+import { useSupportedApis } from "../common/hooks/use-supported-apis";
+import { usePreferences } from "../common/hooks/use-preferences";
 
 export default function GlobalHeader() {
   const [theme, setTheme] = useState<Mode>(StorageHelper.getTheme());
 
+  // Get API support information
+  const { isDeviceStatusSupported } = useSupportedApis();
+
+  // Use settings context instead of local state
+  const { settings, setEnableSpeedAdjustment, setEnableDeviceStatus } = usePreferences();
+
   const onChangeThemeClick = () => {
     if (theme === Mode.Dark) {
       setTheme(StorageHelper.applyTheme(Mode.Light));
@@ -15,13 +23,24 @@ export default function GlobalHeader() {
     }
   };
 
+  // Helper function to toggle settings
+  const toggleSetting = (id: string) => {
+    if (id === "speed-adjustment") {
+      setEnableSpeedAdjustment(!settings.enableSpeedAdjustment);
+    } else if (id === "device-status" && isDeviceStatusSupported) {
+      // Only allow toggle if supported
+      setEnableDeviceStatus(!settings.enableDeviceStatus);
+    }
+  };
+
   return (
     <div
       style={{ zIndex: 1002, top: 0, left: 0, right: 0, position: "fixed" }}
       id="awsui-top-navigation"
     >
       <TopNavigation
         identity={{
+          title: "AWS DeepRacer",
           href: "/",
           logo: { src: "/static/images/deepracer.png", alt: `${APP_NAME} Logo` },
         }}
@@ -31,6 +50,28 @@ export default function GlobalHeader() {
             text: theme === Mode.Dark ? "Light Mode" : "Dark Mode",
             onClick: onChangeThemeClick,
           },
+          {
+            type: "menu-dropdown",
+            iconName: "settings",
+            items: [
+              {
+                id: "speed-adjustment",
+                text:
+                  (settings.enableSpeedAdjustment ? "Disable " : "Enable ") + "5x Speed Adjustment",
+                iconName: "angle-right-double",
+              },
+              {
+                id: "device-status",
+                text: (settings.enableDeviceStatus ? "Disable " : "Enable ") + "Car Health Monitoring",
+                iconName: "heart",
+                disabled: !isDeviceStatusSupported,
+                description: !isDeviceStatusSupported ? "Not supported on this device" : undefined,
+              },
+            ],
+            onItemClick: (event) => {
+              toggleSetting(event.detail.id);
+            },
+          },
         ]}
       />
     </div>