- {!websocketAPI.isConnected && (
- <>
-
+ {!websocketAPI.isConnected && (
+
- {websocketAPI.isFirstConnection
- ? l10n.getString('websocket-connecting')
- : l10n.getString('websocket-connection_lost')}
-
-
- )}
- {websocketAPI.isConnected &&
+ {websocketAPI.isFirstConnection
+ ? l10n.getString('websocket-connecting')
+ : l10n.getString('websocket-connection_lost')}
+
+
+
+ );
+}
diff --git a/gui/src/components/SerialDetectionModal.tsx b/gui/src/components/SerialDetectionModal.tsx
index 70b6597a06..0164eb6099 100644
--- a/gui/src/components/SerialDetectionModal.tsx
+++ b/gui/src/components/SerialDetectionModal.tsx
@@ -39,12 +39,6 @@ export function SerialDetectionModal() {
const openWifi = () => {
setShowWifiForm(true);
- // if (!hasWifiCreds) {
- // setShowWifiForm(true);
- // } else {
- // closeModal();
- // nav('/onboarding/connect-trackers', { state: { alonePage: true } });
- // }
};
const modalWifiSubmit = (form: WifiFormData) => {
@@ -58,7 +52,11 @@ export function SerialDetectionModal() {
({ device }: NewSerialDeviceResponseT) => {
if (
config?.watchNewDevices &&
- !['/settings/serial', '/onboarding/connect-trackers'].includes(pathname)
+ ![
+ '/settings/serial',
+ '/onboarding/connect-trackers',
+ '/settings/firmware-tool',
+ ].includes(pathname)
) {
setOpen(device);
}
diff --git a/gui/src/components/TopBar.tsx b/gui/src/components/TopBar.tsx
index 63973af56a..4e5f76f44d 100644
--- a/gui/src/components/TopBar.tsx
+++ b/gui/src/components/TopBar.tsx
@@ -290,7 +290,9 @@ export function TopBar({
await invoke('update_tray_text');
} else if (
config?.connectedTrackersWarning &&
- connectedIMUTrackers.length > 0
+ connectedIMUTrackers.filter(
+ (t) => t.tracker.status !== TrackerStatus.TIMED_OUT
+ ).length > 0
) {
setConnectedTrackerWarning(true);
} else {
diff --git a/gui/src/components/UnknownDeviceModal.tsx b/gui/src/components/UnknownDeviceModal.tsx
index 0a291f3d91..847214fd83 100644
--- a/gui/src/components/UnknownDeviceModal.tsx
+++ b/gui/src/components/UnknownDeviceModal.tsx
@@ -25,7 +25,9 @@ export function UnknownDeviceModal() {
RpcMessage.UnknownDeviceHandshakeNotification,
({ macAddress }: UnknownDeviceHandshakeNotificationT) => {
if (
- ['/onboarding/connect-trackers'].includes(pathname) ||
+ ['/onboarding/connect-trackers', '/settings/firmware-tool'].includes(
+ pathname
+ ) ||
state.ignoredTrackers.has(macAddress as string) ||
(currentTracker !== null && currentTracker !== macAddress)
)
diff --git a/gui/src/components/commons/A.tsx b/gui/src/components/commons/A.tsx
index 6b42733dd8..9085b8a976 100644
--- a/gui/src/components/commons/A.tsx
+++ b/gui/src/components/commons/A.tsx
@@ -1,11 +1,13 @@
import { open } from '@tauri-apps/plugin-shell';
import { ReactNode } from 'react';
-export function A({ href, children }: { href: string; children?: ReactNode }) {
+export function A({ href, children }: { href?: string; children?: ReactNode }) {
return (
open(href).catch(() => window.open(href, '_blank'))}
+ onClick={() =>
+ href && open(href).catch(() => window.open(href, '_blank'))
+ }
className="underline"
>
{children}
diff --git a/gui/src/components/commons/Checkbox.tsx b/gui/src/components/commons/Checkbox.tsx
index 7287403612..ac2d824118 100644
--- a/gui/src/components/commons/Checkbox.tsx
+++ b/gui/src/components/commons/Checkbox.tsx
@@ -2,6 +2,10 @@ import classNames from 'classnames';
import { useMemo } from 'react';
import { Control, Controller } from 'react-hook-form';
+export const CHECKBOX_CLASSES = classNames(
+ 'bg-background-50 border-background-50 rounded-md w-5 h-5 text-accent-background-30 focus:border-accent-background-40 focus:ring-transparent focus:ring-offset-transparent focus:outline-transparent'
+);
+
export function CheckBox({
label,
variant = 'checkbox',
@@ -25,9 +29,7 @@ export function CheckBox({
const classes = useMemo(() => {
const vriantsMap = {
checkbox: {
- checkbox: classNames(
- 'bg-background-50 border-background-50 rounded-md w-5 h-5 text-accent-background-30 focus:border-accent-background-40 focus:ring-transparent focus:ring-offset-transparent focus:outline-transparent'
- ),
+ checkbox: CHECKBOX_CLASSES,
toggle: '',
pin: '',
},
diff --git a/gui/src/components/commons/Input.tsx b/gui/src/components/commons/Input.tsx
index 4c518497cc..0f229ba41e 100644
--- a/gui/src/components/commons/Input.tsx
+++ b/gui/src/components/commons/Input.tsx
@@ -98,7 +98,7 @@ export const InputInside = forwardRef<
>
{type === 'password' && (
+
+
+ {children}
+
+
@@ -25,6 +27,7 @@ export function ProgressBar({
colorClass={colorClass}
animated={animated}
parts={parts}
+ bottom={bottom}
>
))}
@@ -38,6 +41,7 @@ export function Bar({
height,
animated,
colorClass,
+ bottom,
}: {
index: number;
progress: number;
@@ -45,6 +49,7 @@ export function Bar({
height: number;
colorClass: string;
animated: boolean;
+ bottom: boolean;
}) {
const value = useMemo(
() => Math.min(Math.max((progress * parts) / 1 - index, 0), 1),
@@ -52,12 +57,16 @@ export function Bar({
);
return (
+
(null);
+ const refTop = useRef(null);
+ const [shouldAnimate, setShouldAnimate] = useState(false);
+ const { height } = useElemSize(ref);
+
+ const isSelected = active === index;
+ const isPrevious = active > index;
+
+ useEffect(() => {
+ if (!refTop.current) return;
+ if (isSelected)
+ setTimeout(() => {
+ if (!refTop.current) return;
+ refTop.current.scrollIntoView({ behavior: 'smooth' });
+ }, 500);
+ }, [isSelected]);
+
+ useLayoutEffect(() => {
+ setShouldAnimate(true);
+ }, [active]);
+
+ // Make it so it wont try to animate the size
+ // if we are not changing active step
+ useDebouncedEffect(
+ () => {
+ setShouldAnimate(false);
+ },
+ [active],
+ 1000
+ );
+
+ return (
+
+
+ {isPrevious ? (
+ {index + 1}
+ )}
+
+
+ );
+}
+
+type VerticalStepComponentType = FC<{
+ nextStep: () => void;
+ prevStep: () => void;
+ goTo: (id: string) => void;
+ isActive: boolean;
+}>;
+
+export type VerticalStep = {
+ title: string;
+ id?: string;
+ component: VerticalStepComponentType;
+};
+
+export default function VerticalStepper({ steps }: { steps: VerticalStep[] }) {
+ const [currStep, setStep] = useState(0);
+
+ const nextStep = () => {
+ if (currStep + 1 === steps.length) return;
+ setStep(currStep + 1);
+ };
+
+ const prevStep = () => {
+ if (currStep - 1 < 0) return;
+ setStep(currStep - 1);
+ };
+
+ const goTo = (id: string) => {
+ const step = steps.findIndex(({ id: stepId }) => stepId === id);
+ if (step === -1) throw new Error('step not found');
+
+ setStep(step);
+ };
+
+ return (
+ (null);
+ const { height } = useElemSize(ref);
+
+ return (
+ ;
+
+export function BoardPinsStep({
+ nextStep,
+ prevStep,
+}: {
+ nextStep: () => void;
+ prevStep: () => void;
+}) {
+ const { l10n } = useLocalization();
+ const {
+ isStepLoading: isLoading,
+ defaultConfig,
+ updatePins,
+ } = useFirmwareTool();
+ const { isFetching, data: batteryTypes } = useGetFirmwaresBatteries({});
+
+ const { reset, control, watch, formState } = useForm({
+ reValidateMode: 'onChange',
+ defaultValues: {
+ batteryResistances: [0, 0, 0],
+ },
+ mode: 'onChange',
+ });
+
+ const formValue = watch();
+ const ledEnabled = watch('enableLed');
+ const batteryType = watch('batteryType');
+
+ useEffect(() => {
+ if (!defaultConfig) return;
+ const { type, ...resetConfig } = defaultConfig.boardConfig;
+ reset({
+ ...resetConfig,
+ });
+ }, [defaultConfig]);
+
+ return (
+ <>
+ ;
+ name?: string;
+ progress?: number;
+ disabled?: boolean;
+}
+
+export function DeviceCardContent({ deviceNames, status }: DeviceCardProps) {
+ const { l10n } = useLocalization();
+
+ return (
+
+
+ );
+}
+
+export function FirmwareToolSettings() {
+ const queryClient = new QueryClient({
+ defaultOptions: {
+ queries: {
+ refetchOnWindowFocus: false, // default: true
+ },
+ },
+ });
+ return (
+
+
+ );
+}
diff --git a/gui/src/components/firmware-tool/FlashBtnStep.tsx b/gui/src/components/firmware-tool/FlashBtnStep.tsx
new file mode 100644
index 0000000000..1f948f35c3
--- /dev/null
+++ b/gui/src/components/firmware-tool/FlashBtnStep.tsx
@@ -0,0 +1,86 @@
+import { Localized, useLocalization } from '@fluent/react';
+import { Typography } from '@/components/commons/Typography';
+import { Button } from '@/components/commons/Button';
+import {
+ boardTypeToFirmwareToolBoardType,
+ useFirmwareTool,
+} from '@/hooks/firmware-tool';
+import { BoardType } from 'solarxr-protocol';
+
+export function FlashBtnStep({
+ nextStep,
+}: {
+ nextStep: () => void;
+ prevStep: () => void;
+ goTo: (id: string) => void;
+ isActive: boolean;
+}) {
+ const { l10n } = useLocalization();
+ const { defaultConfig } = useFirmwareTool();
+
+ return (
+ <>
+ ;
+ watch: UseFormWatch;
+ reset: UseFormReset;
+}) {
+ const { l10n } = useLocalization();
+ const { selectDevices } = useFirmwareTool();
+ const { sendRPCPacket, useRPCPacket } = useWebsocketAPI();
+ const [devices, setDevices] = useState>({});
+ const { state, setWifiCredentials } = useOnboarding();
+
+ useLayoutEffect(() => {
+ sendRPCPacket(RpcMessage.SerialDevicesRequest, new SerialDevicesRequestT());
+ selectDevices(null);
+ reset({
+ flashingMethod: FirmwareUpdateMethod.SerialFirmwareUpdate.toString(),
+ serial: {
+ ...state.wifi,
+ selectedDevicePort: undefined,
+ },
+ ota: undefined,
+ });
+ }, []);
+
+ useRPCPacket(
+ RpcMessage.SerialDevicesResponse,
+ (res: SerialDevicesResponseT) => {
+ setDevices((old) =>
+ res.devices.reduce(
+ (curr, device) => ({
+ ...curr,
+ [device?.port?.toString() ?? 'unknown']: device,
+ }),
+ old
+ )
+ );
+ }
+ );
+
+ useRPCPacket(
+ RpcMessage.NewSerialDeviceResponse,
+ ({ device }: NewSerialDeviceResponseT) => {
+ if (device?.port)
+ setDevices((old) => ({
+ ...old,
+ [device?.port?.toString() ?? 'unknown']: device,
+ }));
+ }
+ );
+
+ const serialValues = watch('serial');
+
+ useEffect(() => {
+ if (!serialValues) {
+ selectDevices(null);
+ return;
+ }
+
+ setWifiCredentials(serialValues.ssid, serialValues.password);
+ if (
+ serialValues.selectedDevicePort &&
+ devices[serialValues.selectedDevicePort]
+ ) {
+ selectDevices([
+ {
+ type: FirmwareUpdateMethod.SerialFirmwareUpdate,
+ deviceId: serialValues.selectedDevicePort,
+ deviceNames: [
+ devices[serialValues.selectedDevicePort].name?.toString() ??
+ 'unknown',
+ ],
+ },
+ ]);
+ } else {
+ selectDevices(null);
+ }
+ }, [JSON.stringify(serialValues), devices]);
+
+ return (
+ <>
+
+
+
+
+ {Object.keys(devices).length === 0 ? (
+
+
+ ) : (
+ ({
+ label: devices[port].name?.toString() ?? 'unknown',
+ value: port,
+ }))}
+ placeholder={l10n.getString(
+ 'firmware_tool-flash_method_serial-devices-placeholder'
+ )}
+ display="block"
+ direction="down"
+ >
+ )}
+
+ );
+}
+
+function OTADevicesList({
+ control,
+ watch,
+ reset,
+}: {
+ control: Control;
+ watch: UseFormWatch;
+ reset: UseFormReset;
+}) {
+ const { l10n } = useLocalization();
+ const { selectDevices, newConfig } = useFirmwareTool();
+ const { state } = useAppContext();
+
+ const devices =
+ state.datafeed?.devices.filter(({ trackers, hardwareInfo }) => {
+ // We make sure the device is not one of these types
+ if (
+ hardwareInfo?.officialBoardType === BoardType.SLIMEVR_LEGACY ||
+ hardwareInfo?.officialBoardType === BoardType.SLIMEVR_DEV ||
+ hardwareInfo?.officialBoardType === BoardType.CUSTOM
+ )
+ return false;
+
+ // if the device has no trackers it is prob misconfigured so we skip for safety
+ if (trackers.length <= 0) return false;
+
+ // We make sure that the tracker is in working condition before doing ota as an error (that could be hardware)
+ // could cause an error during the update
+ if (!trackers.every(({ status }) => status === TrackerStatus.OK))
+ return false;
+
+ const boardType = hardwareInfo?.officialBoardType ?? BoardType.UNKNOWN;
+ return (
+ boardTypeToFirmwareToolBoardType[boardType] ===
+ newConfig?.boardConfig?.type
+ );
+ }) || [];
+
+ const deviceNames = ({ trackers }: DeviceDataT) =>
+ trackers
+ .map(({ info }) => getTrackerName(l10n, info))
+ .filter((i): i is string => !!i);
+
+ const selectedDevices = watch('ota.selectedDevices');
+
+ useLayoutEffect(() => {
+ reset({
+ flashingMethod: FirmwareUpdateMethod.OTAFirmwareUpdate.toString(),
+ ota: {
+ selectedDevices: devices.reduce(
+ (curr, { id }) => ({ ...curr, [id?.id ?? 0]: false }),
+ {}
+ ),
+ },
+ serial: undefined,
+ });
+ selectDevices(null);
+ }, []);
+
+ useEffect(() => {
+ if (selectedDevices) {
+ selectDevices(
+ Object.keys(selectedDevices)
+ .filter((d) => selectedDevices[d])
+ .map((id) => id.substring('id-'.length))
+ .map((id) => {
+ const device = devices.find(
+ ({ id: dId }) => id === dId?.id.toString()
+ );
+
+ if (!device) throw new Error('no device found');
+ return {
+ type: FirmwareUpdateMethod.OTAFirmwareUpdate,
+ deviceId: id,
+ deviceNames: deviceNames(device),
+ };
+ })
+ );
+ }
+ }, [JSON.stringify(selectedDevices)]);
+
+ return (
+ <>
+
+
+ {devices.length === 0 && (
+
+
+ )}
+ ({
+ reValidateMode: 'onChange',
+ mode: 'onChange',
+ resolver: yupResolver(
+ object({
+ flashingMethod: string().optional(),
+ serial: object().when('flashingMethod', {
+ is: FirmwareUpdateMethod.SerialFirmwareUpdate.toString(),
+ then: (s) =>
+ s
+ .shape({
+ selectedDevicePort: string().required(),
+ ssid: string().required(
+ l10n.getString('onboarding-wifi_creds-ssid-required')
+ ),
+ password: string(),
+ })
+ .required(),
+ otherwise: (s) => s.optional(),
+ }),
+ ota: object().when('flashingMethod', {
+ is: FirmwareUpdateMethod.OTAFirmwareUpdate.toString(),
+ then: (s) =>
+ s
+ .shape({
+ selectedDevices: object(),
+ })
+ .required(),
+ otherwise: (s) => s.optional(),
+ }),
+ }) as ObjectSchema
+ ),
+ });
+
+ const flashingMethod = watch('flashingMethod');
+
+ return (
+ <>
+ ;
+ devices: DeviceDataT[];
+}) => {
+ const { l10n } = useLocalization();
+
+ return devices.map((device, index) => (
+ }) => {
+ const statusKeys = Object.keys(status);
+
+ return statusKeys.map((id, index) => {
+ const val = status[id];
+
+ if (!val) throw new Error('there should always be a val');
+ const { state } = useAppContext();
+ const device = state.datafeed?.devices.find(
+ ({ id: dId }) => id === dId?.id.toString()
+ );
+
+ return (
+ status === TrackerStatus.OK
+ )}
+ >
+ );
+ });
+};
+
+const MarkdownLink = (props: ComponentProps<'a'>) => (
+ {props.children}
+);
+
+export function FirmwareUpdate() {
+ const navigate = useNavigate();
+ const { l10n } = useLocalization();
+ const { sendRPCPacket, useRPCPacket } = useWebsocketAPI();
+ const [selectedDevices, setSelectedDevices] = useState([]);
+ const { state, currentFirmwareRelease } = useAppContext();
+ const [status, setStatus] = useState>({});
+
+ const devices =
+ state.datafeed?.devices.filter(
+ ({ trackers, hardwareInfo }) =>
+ trackers.length > 0 &&
+ currentFirmwareRelease &&
+ hardwareInfo &&
+ checkForUpdate(currentFirmwareRelease, hardwareInfo) &&
+ trackers.every(({ status }) => status === TrackerStatus.OK)
+ ) || [];
+
+ useRPCPacket(
+ RpcMessage.FirmwareUpdateStatusResponse,
+ (data: FirmwareUpdateStatusResponseT) => {
+ if (!data.deviceId) throw new Error('no device id');
+ const id =
+ data.deviceId instanceof DeviceIdTableT
+ ? data.deviceId.id?.id
+ : data.deviceId.port;
+ if (!id) throw new Error('invalid device id');
+
+ const selectedDevice = selectedDevices?.find(
+ ({ deviceId }) => deviceId === id.toString()
+ );
+
+ // We skip the status as it can be old trackers still sending status
+ if (!selectedDevice) return;
+
+ setStatus((last) => ({
+ ...last,
+ [id.toString()]: {
+ progress: data.progress / 100,
+ status: data.status,
+ type: selectedDevice.type,
+ deviceNames: selectedDevice.deviceNames,
+ },
+ }));
+ }
+ );
+
+ const {
+ control,
+ watch,
+ reset,
+ formState: { isValid },
+ } = useForm({
+ reValidateMode: 'onChange',
+ mode: 'onChange',
+ defaultValues: {
+ selectedDevices: devices.reduce(
+ (curr, { id }) => ({ ...curr, [id?.id ?? 0]: false }),
+ {}
+ ),
+ },
+ resolver: yupResolver(
+ object({
+ selectedDevices: object().test(
+ 'at-least-one-true',
+ 'At least one field must be true',
+ (value) => {
+ if (typeof value !== 'object' || value === null) return false;
+ return Object.values(value).some((val) => val === true);
+ }
+ ),
+ })
+ ),
+ });
+
+ const selectedDevicesForm = watch('selectedDevices');
+
+ const clear = () => {
+ setStatus({});
+ sendRPCPacket(
+ RpcMessage.FirmwareUpdateStopQueuesRequest,
+ new FirmwareUpdateStopQueuesRequestT()
+ );
+ };
+
+ useEffect(() => {
+ if (!currentFirmwareRelease) {
+ navigate('/');
+ return;
+ }
+ return () => {
+ clear();
+ };
+ }, []);
+
+ const queueFlashing = (selectedDevices: SelectedDevice[]) => {
+ clear();
+ const firmwareFile = currentFirmwareRelease?.firmwareFile;
+ if (!firmwareFile) throw new Error('invalid state - no firmware file');
+ const requests = getFlashingRequests(
+ selectedDevices,
+ [{ isFirmware: true, firmwareId: '', url: firmwareFile, offset: 0 }],
+ { wifi: undefined, alonePage: false, progress: 0 }, // we do not use serial
+ null // we do not use serial
+ );
+
+ requests.forEach((req) => {
+ sendRPCPacket(RpcMessage.FirmwareUpdateRequest, req);
+ });
+ };
+
+ const trackerWithErrors = useMemo(
+ () =>
+ Object.keys(status).filter((id) =>
+ firmwareUpdateErrorStatus.includes(status[id].status)
+ ),
+ [status]
+ );
+
+ const hasPendingTrackers = useMemo(
+ () =>
+ Object.keys(status).filter((id) =>
+ [
+ FirmwareUpdateStatus.NEED_MANUAL_REBOOT,
+ FirmwareUpdateStatus.DOWNLOADING,
+ FirmwareUpdateStatus.AUTHENTICATING,
+ FirmwareUpdateStatus.REBOOTING,
+ FirmwareUpdateStatus.SYNCING_WITH_MCU,
+ FirmwareUpdateStatus.UPLOADING,
+ FirmwareUpdateStatus.PROVISIONING,
+ ].includes(status[id].status)
+ ).length > 0,
+ [status]
+ );
+
+ const shouldShowRebootWarning = useMemo(
+ () =>
+ Object.keys(status).find((id) =>
+ [
+ FirmwareUpdateStatus.REBOOTING,
+ FirmwareUpdateStatus.UPLOADING,
+ ].includes(status[id].status)
+ ),
+ [status]
+ );
+
+ const retryError = () => {
+ const devices = trackerWithErrors.map((id) => {
+ const device = status[id];
+ return {
+ type: device.type,
+ deviceId: id,
+ deviceNames: device.deviceNames,
+ };
+ });
+
+ reset({
+ selectedDevices: devices.reduce(
+ (curr, { deviceId }) => ({ ...curr, [deviceId]: true }),
+ {}
+ ),
+ });
+ queueFlashing(devices);
+ };
+
+ const startUpdate = () => {
+ const selectedDevices = Object.keys(selectedDevicesForm)
+ .filter((d) => selectedDevicesForm[d])
+ .map((id) => {
+ const device = devices.find(({ id: dId }) => id === dId?.id.toString());
+
+ if (!device) throw new Error('no device found');
+ return {
+ type: FirmwareUpdateMethod.OTAFirmwareUpdate,
+ deviceId: id,
+ deviceNames: deviceNames(device, l10n),
+ };
+ });
+ if (!selectedDevices)
+ throw new Error('invalid state - no selected devices');
+ setSelectedDevices(selectedDevices);
+ queueFlashing(selectedDevices);
+ };
+
+ const canStartUpdate =
+ isValid &&
+ devices.length !== 0 &&
+ !hasPendingTrackers &&
+ trackerWithErrors.length === 0;
+ const canRetry =
+ isValid && devices.length !== 0 && trackerWithErrors.length !== 0;
+
+ const statusKeys = Object.keys(status);
+
+ return (
+
+
+
+ {title}
+
+
+
+ {children}
+ -
+ {steps.map(({ title, component: StepComponent }, index) => (
+
+
+ );
+}
+
+export function AddImusStep({
+ nextStep,
+ prevStep,
+ isActive,
+}: {
+ nextStep: () => void;
+ prevStep: () => void;
+ goTo: (id: string) => void;
+ isActive: boolean;
+}) {
+ const { l10n } = useLocalization();
+ const {
+ isStepLoading: isLoading,
+ newConfig,
+ defaultConfig,
+ updateImus,
+ } = useFirmwareTool();
+
+ const {
+ control,
+ formState: { isValid: isValidState },
+ reset,
+ watch,
+ } = useForm<{ imus: CreateImuConfigDTO[] }>({
+ defaultValues: {
+ imus: [],
+ },
+ reValidateMode: 'onChange',
+ mode: 'onChange',
+ });
+
+ useEffect(() => {
+ reset({
+ imus: newConfig?.imusConfig || [],
+ });
+ }, [isActive]);
+
+ const { isFetching, data: imuTypes } = useGetFirmwaresImus({});
+
+ const isAckchuallyLoading = isFetching || isLoading;
+ const form = watch();
+
+ const addImu = () => {
+ if (!newConfig || !defaultConfig) throw new Error('unreachable');
+
+ const imuPinToAdd =
+ defaultConfig.imuDefaults[form.imus.length ?? 0] ??
+ defaultConfig.imuDefaults[0];
+ const imuTypeToAdd: CreateImuConfigDTO['type'] =
+ form.imus[0]?.type ?? 'IMU_BNO085';
+ reset({
+ imus: [...form.imus, { ...imuPinToAdd, type: imuTypeToAdd }],
+ });
+ };
+ const deleteImu = (index: number) => {
+ reset({ imus: form.imus.filter((_, i) => i !== index) });
+ };
+
+ return (
+ <>
+
+
+
+
+ {index + 1}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {hasIntPin && (
+
+
+
+ )}
+
+
+
+
+
+ setOpen(!open)}
+ >
+
+ {l10n.getString(
+ open
+ ? 'firmware_tool-add_imus_step-show_less'
+ : 'firmware_tool-add_imus_step-show_more'
+ )}
+
+ {!open &&
+
+
+
+ );
+}
diff --git a/gui/src/components/firmware-tool/BoardPinsStep.tsx b/gui/src/components/firmware-tool/BoardPinsStep.tsx
new file mode 100644
index 0000000000..c2b8d32ff0
--- /dev/null
+++ b/gui/src/components/firmware-tool/BoardPinsStep.tsx
@@ -0,0 +1,198 @@
+import { Localized, useLocalization } from '@fluent/react';
+import { Typography } from '@/components/commons/Typography';
+import { LoaderIcon, SlimeState } from '@/components/commons/icon/LoaderIcon';
+import { useFirmwareTool } from '@/hooks/firmware-tool';
+import { Button } from '@/components/commons/Button';
+import { useForm } from 'react-hook-form';
+import { Input } from '@/components/commons/Input';
+import { useEffect } from 'react';
+import { CheckBox } from '@/components/commons/Checkbox';
+import { CreateBoardConfigDTO } from '@/firmware-tool-api/firmwareToolSchemas';
+import { Dropdown } from '@/components/commons/Dropdown';
+import classNames from 'classnames';
+import { useGetFirmwaresBatteries } from '@/firmware-tool-api/firmwareToolComponents';
+
+export type BoardPinsForm = Omit
+
+ {l10n.getString('firmware_tool-board_pins_step-description')}
+
+
+
+ {!isAckchuallyLoading && imuTypes && newConfig && (
+ <>
+
+
+
+ 1
+ ? 'md:grid-cols-2 mobile-settings:grid-cols-1'
+ : 'grid-cols-1'
+ )}
+ >
+ {form.imus.map((imu, index) => (
+ t == imu.type)
+ ?.hasIntPin ?? false
+ }
+ index={index}
+ onDelete={() => deleteImu(index)}
+ >
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+ {isAckchuallyLoading && (
+
+
+
+
+ )}
+
+
+
+ );
+}
diff --git a/gui/src/components/firmware-tool/BuildStep.tsx b/gui/src/components/firmware-tool/BuildStep.tsx
new file mode 100644
index 0000000000..d7195159d8
--- /dev/null
+++ b/gui/src/components/firmware-tool/BuildStep.tsx
@@ -0,0 +1,111 @@
+import { Localized, useLocalization } from '@fluent/react';
+import { Typography } from '@/components/commons/Typography';
+import { fetchPostFirmwaresBuild } from '@/firmware-tool-api/firmwareToolComponents';
+import { LoaderIcon, SlimeState } from '@/components/commons/icon/LoaderIcon';
+import { useFirmwareTool } from '@/hooks/firmware-tool';
+import {
+ BuildResponseDTO,
+ CreateBuildFirmwareDTO,
+} from '@/firmware-tool-api/firmwareToolSchemas';
+import { useEffect, useMemo } from 'react';
+import { firmwareToolBaseUrl } from '@/firmware-tool-api/firmwareToolFetcher';
+import { Button } from '@/components/commons/Button';
+
+export function BuildStep({
+ isActive,
+ goTo,
+ nextStep,
+}: {
+ nextStep: () => void;
+ prevStep: () => void;
+ goTo: (id: string) => void;
+ isActive: boolean;
+}) {
+ const { l10n } = useLocalization();
+ const { isGlobalLoading, newConfig, setBuildStatus, buildStatus } =
+ useFirmwareTool();
+
+ const startBuild = async () => {
+ try {
+ const res = await fetchPostFirmwaresBuild({
+ body: newConfig as CreateBuildFirmwareDTO,
+ });
+
+ setBuildStatus(res);
+ if (res.status !== 'DONE') {
+ const events = new EventSource(
+ `${firmwareToolBaseUrl}/firmwares/build-status/${res.id}`
+ );
+ events.onmessage = ({ data }) => {
+ const buildEvent: BuildResponseDTO = JSON.parse(data);
+ setBuildStatus(buildEvent);
+ };
+ }
+ } catch (e) {
+ console.error(e);
+ setBuildStatus({ id: '', status: 'ERROR' });
+ }
+ };
+
+ useEffect(() => {
+ if (!isActive) return;
+ startBuild();
+ }, [isActive]);
+
+ useEffect(() => {
+ if (!isActive) return;
+ if (buildStatus.status === 'DONE') {
+ nextStep();
+ }
+ }, [buildStatus]);
+
+ const hasPendingBuild = useMemo(
+ () => !['DONE', 'ERROR'].includes(buildStatus.status),
+ [buildStatus.status]
+ );
+
+ return (
+ <>
+
+
+ {l10n.getString('firmware_tool-board_pins_step-description')}
+
+
+
+ {!isLoading && !isFetching && batteryTypes && (
+
+ )}
+ {(isLoading || isFetching) && (
+
+
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/gui/src/components/firmware-tool/DeviceCard.tsx b/gui/src/components/firmware-tool/DeviceCard.tsx
new file mode 100644
index 0000000000..1ddfb3cc4f
--- /dev/null
+++ b/gui/src/components/firmware-tool/DeviceCard.tsx
@@ -0,0 +1,132 @@
+import { CHECKBOX_CLASSES } from '@/components/commons/Checkbox';
+import { ProgressBar } from '@/components/commons/ProgressBar';
+import { Typography } from '@/components/commons/Typography';
+import { firmwareUpdateErrorStatus } from '@/hooks/firmware-tool';
+import { useLocalization } from '@fluent/react';
+import classNames from 'classnames';
+import { Control, Controller } from 'react-hook-form';
+import {
+ FirmwareUpdateStatus,
+ TrackerStatus as TrackerStatusEnum,
+} from 'solarxr-protocol';
+import { TrackerStatus } from '@/components/tracker/TrackerStatus';
+
+interface DeviceCardProps {
+ deviceNames: string[];
+ status?: FirmwareUpdateStatus;
+ online?: boolean | null;
+}
+
+interface DeviceCardControlProps {
+ control?: Control
+
+ {l10n.getString('firmware_tool-build_step-description')}
+
+
+
+ {!isGlobalLoading && (
+
+
+
+ {l10n.getString('firmware_tool-build-' + buildStatus.status)}
+
+
+ )}
+ {isGlobalLoading && (
+
+
+
+
+ )}
+
+
+
+
+
+
+
+ {l10n.getString(
+ 'firmware_update-status-' + FirmwareUpdateStatus[status]
+ )}
+
+ ) : (
+ // placeholder so the size of the component does not change if there is no status
+ )}
+
+ );
+}
+
+export function DeviceCardControl({
+ control,
+ name,
+ progress,
+ disabled = false,
+ online = null,
+ ...props
+}: DeviceCardControlProps & DeviceCardProps) {
+ return (
+
+ {deviceNames.map((name) => (
+
+ {name}
+
+ ))}
+
+ {status !== undefined ? (
+
+ {control && name ? (
+ (
+
+ )}
+ >
+ ) : (
+
+ );
+}
diff --git a/gui/src/components/firmware-tool/FirmwareTool.tsx b/gui/src/components/firmware-tool/FirmwareTool.tsx
new file mode 100644
index 0000000000..b8d9ab7d7e
--- /dev/null
+++ b/gui/src/components/firmware-tool/FirmwareTool.tsx
@@ -0,0 +1,140 @@
+import { Localized, useLocalization } from '@fluent/react';
+import { Typography } from '@/components/commons/Typography';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import {
+ FirmwareToolContextC,
+ useFirmwareToolContext,
+} from '@/hooks/firmware-tool';
+import { AddImusStep } from './AddImusStep';
+import { SelectBoardStep } from './SelectBoardStep';
+import { BoardPinsStep } from './BoardPinsStep';
+import VerticalStepper from '@/components/commons/VerticalStepper';
+import { LoaderIcon, SlimeState } from '@/components/commons/icon/LoaderIcon';
+import { Button } from '@/components/commons/Button';
+import { SelectFirmwareStep } from './SelectFirmwareStep';
+import { BuildStep } from './BuildStep';
+import { FlashingMethodStep } from './FlashingMethodStep';
+import { FlashingStep } from './FlashingStep';
+import { FlashBtnStep } from './FlashBtnStep';
+import { FirmwareUpdateMethod } from 'solarxr-protocol';
+import { useMemo } from 'react';
+
+function FirmwareToolContent() {
+ const { l10n } = useLocalization();
+ const context = useFirmwareToolContext();
+ const { isError, isGlobalLoading: isLoading, retry, isCompatible } = context;
+
+ const steps = useMemo(() => {
+ const steps = [
+ {
+ id: 'SelectBoard',
+ component: SelectBoardStep,
+ title: l10n.getString('firmware_tool-board_step'),
+ },
+ {
+ component: BoardPinsStep,
+ title: l10n.getString('firmware_tool-board_pins_step'),
+ },
+ {
+ component: AddImusStep,
+ title: l10n.getString('firmware_tool-add_imus_step'),
+ },
+ {
+ id: 'SelectFirmware',
+ component: SelectFirmwareStep,
+ title: l10n.getString('firmware_tool-select_firmware_step'),
+ },
+ {
+ component: FlashingMethodStep,
+ id: 'FlashingMethod',
+ title: l10n.getString('firmware_tool-flash_method_step'),
+ },
+ {
+ component: BuildStep,
+ title: l10n.getString('firmware_tool-build_step'),
+ },
+ {
+ component: FlashingStep,
+ title: l10n.getString('firmware_tool-flashing_step'),
+ },
+ ];
+
+ if (
+ context.defaultConfig?.needBootPress &&
+ context.selectedDevices?.find(
+ ({ type }) => type === FirmwareUpdateMethod.SerialFirmwareUpdate
+ )
+ ) {
+ steps.splice(5, 0, {
+ component: FlashBtnStep,
+ title: l10n.getString('firmware_tool-flashbtn_step'),
+ });
+ }
+ return steps;
+ }, [context.defaultConfig?.needBootPress, context.selectedDevices, l10n]);
+
+ return (
+
+
+ )}
+
+
+ {online !== null && (
+
+
+ )}
+
+
+ {l10n.getString('firmware_tool')}
+
+
+
+ <>
+ {l10n
+ .getString('firmware_tool-description')
+ .split('\n')
+ .map((line, i) => (
+
+ {line}
+
+ ))}
+
+
+
+ {isError && (
+
+
+
+
+ ) : (
+
+
+ )}
+
+
+
+
+ )}
+ {isLoading && (
+
+
+
+
+ )}
+ {!isError && !isLoading &&
+
+
+ );
+}
diff --git a/gui/src/components/firmware-tool/FlashingMethodStep.tsx b/gui/src/components/firmware-tool/FlashingMethodStep.tsx
new file mode 100644
index 0000000000..f4405d9849
--- /dev/null
+++ b/gui/src/components/firmware-tool/FlashingMethodStep.tsx
@@ -0,0 +1,421 @@
+import { Localized, useLocalization } from '@fluent/react';
+import { Typography } from '@/components/commons/Typography';
+import { LoaderIcon, SlimeState } from '@/components/commons/icon/LoaderIcon';
+import {
+ boardTypeToFirmwareToolBoardType,
+ useFirmwareTool,
+} from '@/hooks/firmware-tool';
+import { Control, UseFormReset, UseFormWatch, useForm } from 'react-hook-form';
+import { Radio } from '@/components/commons/Radio';
+import { useWebsocketAPI } from '@/hooks/websocket-api';
+import { useEffect, useLayoutEffect, useState } from 'react';
+import { yupResolver } from '@hookform/resolvers/yup';
+
+import {
+ BoardType,
+ DeviceDataT,
+ FirmwareUpdateMethod,
+ NewSerialDeviceResponseT,
+ RpcMessage,
+ SerialDeviceT,
+ SerialDevicesRequestT,
+ SerialDevicesResponseT,
+ TrackerStatus,
+} from 'solarxr-protocol';
+import { Button } from '@/components/commons/Button';
+import { useAppContext } from '@/hooks/app';
+import { Input } from '@/components/commons/Input';
+import { Dropdown } from '@/components/commons/Dropdown';
+import { useOnboarding } from '@/hooks/onboarding';
+import { DeviceCardControl } from './DeviceCard';
+import { getTrackerName } from '@/hooks/tracker';
+import { ObjectSchema, object, string } from 'yup';
+
+interface FlashingMethodForm {
+ flashingMethod?: string;
+ serial?: {
+ selectedDevicePort: string;
+ ssid: string;
+ password?: string;
+ };
+ ota?: {
+ selectedDevices: { [key: string]: boolean };
+ };
+}
+
+function SerialDevicesList({
+ control,
+ watch,
+ reset,
+}: {
+ control: Control
+
+ {l10n.getString('firmware_tool-flashbtn_step-description')}
+
+ {defaultConfig?.boardConfig.type ===
+ boardTypeToFirmwareToolBoardType[BoardType.SLIMEVR] ? (
+ <>
+
+ {l10n.getString('firmware_tool-flashbtn_step-board_SLIMEVR')}
+
+
+ {l10n.getString('firmware_tool-flashbtn_step-board_OTHER')}
+
+
+ )}
+
+
+
+
+ ) : (
+ <>
+
+ R11
+
+ {l10n.getString(
+ 'firmware_tool-flashbtn_step-board_SLIMEVR-r11'
+ )}
+
+ 
+
+
+
+ R12
+
+ {l10n.getString(
+ 'firmware_tool-flashbtn_step-board_SLIMEVR-r12'
+ )}
+
+ 
+
+
+
+
+ R14
+
+ {l10n.getString(
+ 'firmware_tool-flashbtn_step-board_SLIMEVR-r14'
+ )}
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {devices.map((device) => (
+
+
+ );
+}
+
+export function FlashingMethodStep({
+ nextStep,
+ prevStep,
+}: {
+ nextStep: () => void;
+ prevStep: () => void;
+ isActive: boolean;
+}) {
+ const { l10n } = useLocalization();
+ const { isGlobalLoading, selectedDevices } = useFirmwareTool();
+
+ const {
+ control,
+ watch,
+ reset,
+ formState: { isValid },
+ } = useForm
+
+
+ );
+}
diff --git a/gui/src/components/firmware-tool/FlashingStep.tsx b/gui/src/components/firmware-tool/FlashingStep.tsx
new file mode 100644
index 0000000000..3c7f33bcc2
--- /dev/null
+++ b/gui/src/components/firmware-tool/FlashingStep.tsx
@@ -0,0 +1,220 @@
+import { Localized, useLocalization } from '@fluent/react';
+import { Typography } from '@/components/commons/Typography';
+import {
+ SelectedDevice,
+ firmwareUpdateErrorStatus,
+ getFlashingRequests,
+ useFirmwareTool,
+} from '@/hooks/firmware-tool';
+import { useEffect, useMemo, useState } from 'react';
+import { useWebsocketAPI } from '@/hooks/websocket-api';
+import {
+ DeviceIdTableT,
+ FirmwareUpdateMethod,
+ FirmwareUpdateStatus,
+ FirmwareUpdateStatusResponseT,
+ FirmwareUpdateStopQueuesRequestT,
+ RpcMessage,
+} from 'solarxr-protocol';
+import { useOnboarding } from '@/hooks/onboarding';
+import { DeviceCardControl } from './DeviceCard';
+import { WarningBox } from '@/components/commons/TipBox';
+import { Button } from '@/components/commons/Button';
+import { useNavigate } from 'react-router-dom';
+import { firmwareToolS3BaseUrl } from '@/firmware-tool-api/firmwareToolFetcher';
+
+export function FlashingStep({
+ goTo,
+ isActive,
+}: {
+ nextStep: () => void;
+ prevStep: () => void;
+ goTo: (id: string) => void;
+ isActive: boolean;
+}) {
+ const nav = useNavigate();
+ const { l10n } = useLocalization();
+ const { selectedDevices, buildStatus, selectDevices, defaultConfig } =
+ useFirmwareTool();
+ const { state: onboardingState } = useOnboarding();
+ const { sendRPCPacket, useRPCPacket } = useWebsocketAPI();
+ const [status, setStatus] = useState<{
+ [key: string]: {
+ status: FirmwareUpdateStatus;
+ type: FirmwareUpdateMethod;
+ progress: number;
+ deviceNames: string[];
+ };
+ }>({});
+
+ const clear = () => {
+ setStatus({});
+ sendRPCPacket(
+ RpcMessage.FirmwareUpdateStopQueuesRequest,
+ new FirmwareUpdateStopQueuesRequestT()
+ );
+ };
+
+ const queueFlashing = (selectedDevices: SelectedDevice[]) => {
+ clear();
+ if (!buildStatus.firmwareFiles)
+ throw new Error('invalid state - no firmware files');
+ const requests = getFlashingRequests(
+ selectedDevices,
+ buildStatus.firmwareFiles.map(({ url, ...fields }) => ({
+ url: `${firmwareToolS3BaseUrl}/${url}`,
+ ...fields,
+ })),
+ onboardingState,
+ defaultConfig
+ );
+
+ requests.forEach((req) => {
+ sendRPCPacket(RpcMessage.FirmwareUpdateRequest, req);
+ });
+ };
+
+ useEffect(() => {
+ if (!isActive) return;
+ if (!selectedDevices)
+ throw new Error('invalid state - no selected devices');
+ queueFlashing(selectedDevices);
+ return () => clear();
+ }, [isActive]);
+
+ useRPCPacket(
+ RpcMessage.FirmwareUpdateStatusResponse,
+ (data: FirmwareUpdateStatusResponseT) => {
+ if (!data.deviceId) throw new Error('no device id');
+ const id =
+ data.deviceId instanceof DeviceIdTableT
+ ? data.deviceId.id?.id
+ : data.deviceId.port;
+ if (!id) throw new Error('invalid device id');
+
+ const selectedDevice = selectedDevices?.find(
+ ({ deviceId }) => deviceId == id.toString()
+ );
+
+ // We skip the status as it can be old trackers still sending status
+ if (!selectedDevice) return;
+
+ setStatus((last) => ({
+ ...last,
+ [id.toString()]: {
+ progress: data.progress / 100,
+ status: data.status,
+ type: selectedDevice.type,
+ deviceNames: selectedDevice.deviceNames,
+ },
+ }));
+ }
+ );
+
+ const trackerWithErrors = useMemo(
+ () =>
+ Object.keys(status).filter((id) =>
+ firmwareUpdateErrorStatus.includes(status[id].status)
+ ),
+ [status, firmwareUpdateErrorStatus]
+ );
+
+ const retryError = () => {
+ const devices = trackerWithErrors.map((id) => {
+ const device = status[id];
+ return {
+ type: device.type,
+ deviceId: id,
+ deviceNames: device.deviceNames,
+ };
+ });
+
+ selectDevices(devices);
+ queueFlashing(devices);
+ };
+
+ const hasPendingTrackers = useMemo(
+ () =>
+ Object.keys(status).filter((id) =>
+ [
+ FirmwareUpdateStatus.NEED_MANUAL_REBOOT,
+ FirmwareUpdateStatus.DOWNLOADING,
+ FirmwareUpdateStatus.AUTHENTICATING,
+ FirmwareUpdateStatus.REBOOTING,
+ FirmwareUpdateStatus.SYNCING_WITH_MCU,
+ FirmwareUpdateStatus.UPLOADING,
+ FirmwareUpdateStatus.PROVISIONING,
+ ].includes(status[id].status)
+ ).length > 0,
+ [status]
+ );
+
+ const shouldShowRebootWarning = useMemo(
+ () =>
+ Object.keys(status).find((id) =>
+ [
+ FirmwareUpdateStatus.REBOOTING,
+ FirmwareUpdateStatus.UPLOADING,
+ ].includes(status[id].status)
+ ),
+ [status]
+ );
+
+ return (
+ <>
+
+
+ {l10n.getString('firmware_tool-flash_method_step-description')}
+
+
+
+ {!isGlobalLoading && (
+
+
+
+ )}
+ {isGlobalLoading && (
+
+
+
+
+
+
+ {flashingMethod ===
+ FirmwareUpdateMethod.SerialFirmwareUpdate.toString() && (
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+
+ );
+}
diff --git a/gui/src/components/firmware-tool/SelectBoardStep.tsx b/gui/src/components/firmware-tool/SelectBoardStep.tsx
new file mode 100644
index 0000000000..0bef4807c9
--- /dev/null
+++ b/gui/src/components/firmware-tool/SelectBoardStep.tsx
@@ -0,0 +1,95 @@
+import { Localized, useLocalization } from '@fluent/react';
+import { Typography } from '@/components/commons/Typography';
+import { LoaderIcon, SlimeState } from '@/components/commons/icon/LoaderIcon';
+import {
+ firmwareToolToBoardType,
+ useFirmwareTool,
+} from '@/hooks/firmware-tool';
+import { CreateBoardConfigDTO } from '@/firmware-tool-api/firmwareToolSchemas';
+import classNames from 'classnames';
+import { Button } from '@/components/commons/Button';
+import { useGetFirmwaresBoards } from '@/firmware-tool-api/firmwareToolComponents';
+import { BoardType } from 'solarxr-protocol';
+
+export function SelectBoardStep({
+ nextStep,
+ goTo,
+}: {
+ nextStep: () => void;
+ prevStep: () => void;
+ goTo: (id: string) => void;
+}) {
+ const { l10n } = useLocalization();
+ const { selectBoard, newConfig, defaultConfig } = useFirmwareTool();
+ const { isFetching, data: boards } = useGetFirmwaresBoards({});
+
+ return (
+ <>
+
+
+ {l10n.getString('firmware_tool-flashing_step-description')}
+
+
+
+
+ {shouldShowRebootWarning && (
+
+ Warning
+
+ )}
+
+ {Object.keys(status).map((id) => {
+ const val = status[id];
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/gui/src/components/firmware-tool/SelectFirmwareStep.tsx b/gui/src/components/firmware-tool/SelectFirmwareStep.tsx
new file mode 100644
index 0000000000..be19e875b8
--- /dev/null
+++ b/gui/src/components/firmware-tool/SelectFirmwareStep.tsx
@@ -0,0 +1,120 @@
+import { Localized, useLocalization } from '@fluent/react';
+import { Typography } from '@/components/commons/Typography';
+import { useGetFirmwaresVersions } from '@/firmware-tool-api/firmwareToolComponents';
+import { LoaderIcon, SlimeState } from '@/components/commons/icon/LoaderIcon';
+import { useFirmwareTool } from '@/hooks/firmware-tool';
+import classNames from 'classnames';
+import { Button } from '@/components/commons/Button';
+import { useMemo } from 'react';
+import { CheckBox } from '@/components/commons/Checkbox';
+import { useForm } from 'react-hook-form';
+
+export function SelectFirmwareStep({
+ nextStep,
+ prevStep,
+ goTo,
+}: {
+ nextStep: () => void;
+ prevStep: () => void;
+ goTo: (id: string) => void;
+}) {
+ const { l10n } = useLocalization();
+ const { selectVersion, newConfig, defaultConfig } = useFirmwareTool();
+ const { isFetching, data: firmwares } = useGetFirmwaresVersions({});
+
+ const { control, watch } = useForm<{ thirdParty: boolean }>({});
+
+ const showThirdParty = watch('thirdParty');
+
+ const getName = (name: string) => {
+ return showThirdParty ? name : name.substring(name.indexOf('/') + 1);
+ };
+
+ const filteredFirmwares = useMemo(() => {
+ return firmwares?.filter(
+ ({ name }) => name.split('/')[0] === 'SlimeVR' || showThirdParty
+ );
+ }, [firmwares, showThirdParty]);
+
+ return (
+ <>
+
+
+ {l10n.getString('firmware_tool-board_step-description')}
+
+
+
+ {!isFetching && (
+
+
+
+ )}
+ {isFetching && (
+
+ {boards?.map((board) => (
+
+ {
+ selectBoard(board as CreateBoardConfigDTO['type']);
+ }}
+ >
+ {l10n.getString(
+ `board_type-${
+ BoardType[
+ firmwareToolToBoardType[
+ board as CreateBoardConfigDTO['type']
+ ] ?? BoardType.UNKNOWN
+ ]
+ }`
+ )}
+
+ ))}
+
+
+
+
+
+
+
+
+
+ )}
+
+
+
+ );
+}
diff --git a/gui/src/components/firmware-update/FirmwareUpdate.tsx b/gui/src/components/firmware-update/FirmwareUpdate.tsx
new file mode 100644
index 0000000000..6ddd77080f
--- /dev/null
+++ b/gui/src/components/firmware-update/FirmwareUpdate.tsx
@@ -0,0 +1,402 @@
+import { Localized, ReactLocalization, useLocalization } from '@fluent/react';
+import { Typography } from '@/components/commons/Typography';
+import { getTrackerName } from '@/hooks/tracker';
+import { ComponentProps, useEffect, useMemo, useState } from 'react';
+import {
+ BoardType,
+ DeviceDataT,
+ DeviceIdTableT,
+ FirmwareUpdateMethod,
+ FirmwareUpdateStatus,
+ FirmwareUpdateStatusResponseT,
+ FirmwareUpdateStopQueuesRequestT,
+ HardwareInfoT,
+ RpcMessage,
+ TrackerStatus,
+} from 'solarxr-protocol';
+import semver from 'semver';
+import classNames from 'classnames';
+import { Button } from '@/components/commons/Button';
+import Markdown from 'react-markdown';
+import remark from 'remark-gfm';
+import { WarningBox } from '@/components/commons/TipBox';
+import { FirmwareRelease, useAppContext } from '@/hooks/app';
+import { DeviceCardControl } from '@/components/firmware-tool/DeviceCard';
+import { Control, useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router-dom';
+import { useWebsocketAPI } from '@/hooks/websocket-api';
+import {
+ firmwareUpdateErrorStatus,
+ getFlashingRequests,
+ SelectedDevice,
+} from '@/hooks/firmware-tool';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { object } from 'yup';
+import { LoaderIcon, SlimeState } from '@/components/commons/icon/LoaderIcon';
+import { A } from '@/components/commons/A';
+
+export function checkForUpdate(
+ currentFirmwareRelease: FirmwareRelease,
+ hardwareInfo: HardwareInfoT
+) {
+ return (
+ // TODO: This is temporary, end goal is to support all board types
+ hardwareInfo.officialBoardType === BoardType.SLIMEVR &&
+ semver.valid(currentFirmwareRelease.version) &&
+ semver.valid(hardwareInfo.firmwareVersion?.toString() ?? 'none') &&
+ semver.lt(
+ hardwareInfo.firmwareVersion?.toString() ?? 'none',
+ currentFirmwareRelease.version
+ )
+ );
+}
+
+interface FirmwareUpdateForm {
+ selectedDevices: { [key: string]: boolean };
+}
+
+interface UpdateStatus {
+ status: FirmwareUpdateStatus;
+ type: FirmwareUpdateMethod;
+ progress: number;
+ deviceNames: string[];
+}
+
+const deviceNames = ({ trackers }: DeviceDataT, l10n: ReactLocalization) =>
+ trackers
+ .map(({ info }) => getTrackerName(l10n, info))
+ .filter((i): i is string => !!i);
+
+const DeviceList = ({
+ control,
+ devices,
+}: {
+ control: Control
+
+ {l10n.getString('firmware_tool-select_firmware_step-description')}
+
+
+
+
+
+
+
+ {!isFetching && (
+
+
+
+ )}
+ {isFetching && (
+
+
+
+ {filteredFirmwares?.map((firmware) => (
+
+ {
+ selectVersion(firmware.name);
+ }}
+ >
+ {getName(firmware.name)}
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+ );
+}
diff --git a/gui/src/components/home/Home.tsx b/gui/src/components/home/Home.tsx
index 7af6ae6bf4..cb5bbd60b2 100644
--- a/gui/src/components/home/Home.tsx
+++ b/gui/src/components/home/Home.tsx
@@ -51,7 +51,7 @@ export function Home() {
+
+
+
+
+
+
+
+
+
+
+
+
+ {devices.length === 0 &&
+ !hasPendingTrackers &&
+ statusKeys.length == 0 && (
+
+ Warning
+
+ )}
+ {shouldShowRebootWarning && (
+
+ Warning
+
+ )}
+
+
+ {statusKeys.length > 0 ? (
+
+
+
+
+
+ )}
+
+
+
+
+
+
+ {currentFirmwareRelease?.changelog}
+
+
+
+
+
+
+
+
+
+
+ status.prioritized)
.length === 0 && 'hidden'
)}
@@ -70,7 +70,7 @@ export function Home() {
))}
-
+
{trackers.length === 0 && (
@@ -80,7 +80,7 @@ export function Home() {
)}
{!config?.debug && trackers.length > 0 && (
-
+
{trackers.map(({ tracker, device }, index) => (
sendToSettings(tracker)}
smol
+ showUpdates
interactable
warning={Object.values(statuses).some((status) =>
trackerStatusRelated(tracker, status)
diff --git a/gui/src/components/onboarding/pages/ConnectTracker.tsx b/gui/src/components/onboarding/pages/ConnectTracker.tsx
index cc93ba47fe..71b1214632 100644
--- a/gui/src/components/onboarding/pages/ConnectTracker.tsx
+++ b/gui/src/components/onboarding/pages/ConnectTracker.tsx
@@ -3,11 +3,9 @@ import classNames from 'classnames';
import { useEffect, useMemo, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import {
- AddUnknownDeviceRequestT,
RpcMessage,
StartWifiProvisioningRequestT,
StopWifiProvisioningRequestT,
- UnknownDeviceHandshakeNotificationT,
WifiProvisioningStatus,
WifiProvisioningStatusResponseT,
} from 'solarxr-protocol';
@@ -97,15 +95,6 @@ export function ConnectTrackersPage() {
}
);
- useRPCPacket(
- RpcMessage.UnknownDeviceHandshakeNotification,
- ({ macAddress }: UnknownDeviceHandshakeNotificationT) =>
- sendRPCPacket(
- RpcMessage.AddUnknownDeviceRequest,
- new AddUnknownDeviceRequestT(macAddress)
- )
- );
-
const isError =
provisioningStatus === WifiProvisioningStatus.CONNECTION_ERROR ||
provisioningStatus === WifiProvisioningStatus.COULD_NOT_FIND_SERVER;
diff --git a/gui/src/components/onboarding/pages/Home.tsx b/gui/src/components/onboarding/pages/Home.tsx
index b9df6460af..3c33c21d3b 100644
--- a/gui/src/components/onboarding/pages/Home.tsx
+++ b/gui/src/components/onboarding/pages/Home.tsx
@@ -13,7 +13,7 @@ export function HomePage() {
return (
<>
-
+
diff --git a/gui/src/components/settings/SettingsLayout.tsx b/gui/src/components/settings/SettingsLayout.tsx
index 491d53a8fc..40b6c37e72 100644
--- a/gui/src/components/settings/SettingsLayout.tsx
+++ b/gui/src/components/settings/SettingsLayout.tsx
@@ -40,6 +40,10 @@ export function SettingSelectorMobile() {
label: l10n.getString('settings-sidebar-serial'),
value: { url: '/settings/serial' },
},
+ {
+ label: l10n.getString('settings-sidebar-firmware-tool'),
+ value: { url: '/settings/firmware-tool' },
+ },
{
label: l10n.getString('settings-sidebar-advanced'),
value: { url: '/settings/advanced' },
@@ -99,7 +103,7 @@ export function SettingsLayout({ children }: { children: ReactNode }) {
+
diff --git a/gui/src/components/tracker/TrackerCard.tsx b/gui/src/components/tracker/TrackerCard.tsx
index 044647d3db..38a4c7f6c0 100644
--- a/gui/src/components/tracker/TrackerCard.tsx
+++ b/gui/src/components/tracker/TrackerCard.tsx
@@ -11,6 +11,10 @@ import { TrackerStatus } from './TrackerStatus';
import classNames from 'classnames';
import { useTracker } from '@/hooks/tracker';
import { BodyPartIcon } from '@/components/commons/BodyPartIcon';
+import { DownloadIcon } from '@/components/commons/icon/DownloadIcon';
+import { Link } from 'react-router-dom';
+import { useAppContext } from '@/hooks/app';
+import { checkForUpdate } from '@/components/firmware-update/FirmwareUpdate';
function TrackerBig({
device,
@@ -122,6 +126,7 @@ export function TrackerCard({
bg = 'bg-background-60',
shakeHighlight = true,
warning = false,
+ showUpdates = false,
}: {
tracker: TrackerDataT;
device?: DeviceDataT;
@@ -132,33 +137,51 @@ export function TrackerCard({
shakeHighlight?: boolean;
onClick?: MouseEventHandler;
warning?: boolean;
+ showUpdates?: boolean;
}) {
+ const { currentFirmwareRelease } = useAppContext();
const { useVelocity } = useTracker(tracker);
const velocity = useVelocity();
return (
-
{l10n.getString('settings-sidebar-serial')}
+
+ {l10n.getString('settings-sidebar-firmware-tool')}
+
- {smol &&
+
);
}
diff --git a/gui/src/components/tracker/TrackerSettings.tsx b/gui/src/components/tracker/TrackerSettings.tsx
index ccbc66fb06..0062943df5 100644
--- a/gui/src/components/tracker/TrackerSettings.tsx
+++ b/gui/src/components/tracker/TrackerSettings.tsx
@@ -1,4 +1,4 @@
-import { useLocalization } from '@fluent/react';
+import { Localized, useLocalization } from '@fluent/react';
import classNames from 'classnames';
import { IPv4 } from 'ip-num/IPNumber';
import { useEffect, useMemo, useState } from 'react';
@@ -6,6 +6,7 @@ import { useForm } from 'react-hook-form';
import { useParams } from 'react-router-dom';
import {
AssignTrackerRequestT,
+ BoardType,
BodyPart,
ForgetDeviceRequestT,
ImuType,
@@ -36,6 +37,8 @@ import { TrackerCard } from './TrackerCard';
import { Quaternion } from 'three';
import { useAppContext } from '@/hooks/app';
import { MagnetometerToggleSetting } from '@/components/settings/pages/MagnetometerToggleSetting';
+import semver from 'semver';
+import { checkForUpdate } from '@/components/firmware-update/FirmwareUpdate';
const rotationsLabels: [Quaternion, string][] = [
[rotationToQuatMap.BACK, 'tracker-rotation-back'],
@@ -149,6 +152,26 @@ export function TrackerSettingsPage() {
}
}, [firstLoad]);
+ const boardType = useMemo(() => {
+ if (tracker?.device?.hardwareInfo?.officialBoardType) {
+ return l10n.getString(
+ 'board_type-' +
+ BoardType[
+ tracker?.device?.hardwareInfo?.officialBoardType ??
+ BoardType.UNKNOWN
+ ]
+ );
+ } else if (tracker?.device?.hardwareInfo?.boardType) {
+ return tracker?.device?.hardwareInfo?.boardType;
+ } else {
+ return '--';
+ }
+ }, [
+ tracker?.device?.hardwareInfo?.officialBoardType,
+ tracker?.device?.hardwareInfo?.boardType,
+ l10n,
+ ]);
+
const macAddress = useMemo(() => {
if (
/(?:[a-zA-Z\d]{2}:){5}[a-zA-Z\d]{2}/.test(
@@ -161,6 +184,18 @@ export function TrackerSettingsPage() {
return null;
}, [tracker?.device?.hardwareInfo?.hardwareIdentifier]);
+ const { currentFirmwareRelease } = useAppContext();
+
+ const needUpdate =
+ currentFirmwareRelease &&
+ tracker?.device?.hardwareInfo &&
+ checkForUpdate(currentFirmwareRelease, tracker?.device?.hardwareInfo);
+ const updateUnavailable =
+ tracker?.device?.hardwareInfo?.officialBoardType !== BoardType.SLIMEVR ||
+ !semver.valid(
+ tracker?.device?.hardwareInfo?.firmwareVersion?.toString() ?? 'none'
+ );
+
return (
+ {smol &&
+ {showUpdates &&
+ tracker.status !== TrackerStatusEnum.DISCONNECTED &&
+ currentFirmwareRelease &&
+ device?.hardwareInfo &&
+ checkForUpdate(currentFirmwareRelease, device.hardwareInfo) && (
+
+
+
+
+
+ )}
+
+