show progress bar when automatically installing firmware

interface/src/app/status/SystemMonitor.tsx

@@ -1,14 +1,7 @@
 import { useState } from 'react';
 
 import CancelIcon from '@mui/icons-material/Cancel';
-import {
+import { Box, Button, Dialog, DialogContent, Typography } from '@mui/material';
-  Box,
-  Button,
-  CircularProgress,
-  Dialog,
-  DialogContent,
-  Typography
-} from '@mui/material';
 
 import { callAction } from 'api/app';
 import { readSystemStatus } from 'api/system';
@@ -20,6 +13,8 @@ import { useI18nContext } from 'i18n/i18n-react';
 import { SystemStatusCodes } from 'types';
 import { useInterval } from 'utils';
 
+import { LinearProgressWithLabel } from '../../components/upload/LinearProgressWithLabel';
+
 const SystemMonitor = () => {
   const [errorMessage, setErrorMessage] = useState<string>();
 
@@ -81,7 +76,7 @@ const SystemMonitor = () => {
             fontWeight={400}
             textAlign="center"
           >
-            {data?.status === SystemStatusCodes.SYSTEM_STATUS_UPLOADING
+            {data?.status >= SystemStatusCodes.SYSTEM_STATUS_UPLOADING
               ? LL.WAIT_FIRMWARE()
               : data?.status === SystemStatusCodes.SYSTEM_STATUS_RESTART_REQUESTED
                 ? LL.APPLICATION_RESTARTING()
@@ -110,9 +105,15 @@ const SystemMonitor = () => {
               <Typography mt={2} variant="h6" fontWeight={400} textAlign="center">
                 {LL.PLEASE_WAIT()}&hellip;
               </Typography>
-              <Box py={2}>
+              {data && data.status > SystemStatusCodes.SYSTEM_STATUS_UPLOADING && (
-                <CircularProgress size={32} />
+                <Box width="100%" pl={2} pr={2} py={2}>
-              </Box>
+                  <LinearProgressWithLabel
+                    value={Math.round(
+                      data?.status - SystemStatusCodes.SYSTEM_STATUS_UPLOADING
+                    )}
+                  />
+                </Box>
+              )}
             </>
           )}
         </Box>

interface/src/components/upload/LinearProgressWithLabel.tsx

@@ -0,0 +1,23 @@
+import {
+  Box,
+  LinearProgress,
+  type LinearProgressProps,
+  Typography
+} from '@mui/material';
+
+export function LinearProgressWithLabel(
+  props: LinearProgressProps & { value: number }
+) {
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'center' }}>
+      <Box sx={{ width: '100%', mr: 1 }}>
+        <LinearProgress variant="determinate" {...props} />
+      </Box>
+      <Box sx={{ minWidth: 35 }}>
+        <Typography variant="body2" color="text.secondary">{`${Math.round(
+          props.value
+        )}%`}</Typography>
+      </Box>
+    </Box>
+  );
+}

interface/src/components/upload/SingleUpload.tsx

@@ -2,13 +2,7 @@ import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 
 import CancelIcon from '@mui/icons-material/Cancel';
-import {
+import { Box, Button, Typography } from '@mui/material';
-  Box,
-  Button,
-  LinearProgress,
-  type LinearProgressProps,
-  Typography
-} from '@mui/material';
 
 import * as SystemApi from 'api/system';
 
@@ -16,21 +10,7 @@ import { useRequest } from 'alova/client';
 import { useI18nContext } from 'i18n/i18n-react';
 
 import DragNdrop from './DragNdrop';
-
+import { LinearProgressWithLabel } from './LinearProgressWithLabel';
-function LinearProgressWithLabel(props: LinearProgressProps & { value: number }) {
-  return (
-    <Box sx={{ display: 'flex', alignItems: 'center' }}>
-      <Box sx={{ width: '100%', mr: 1 }}>
-        <LinearProgress variant="determinate" {...props} />
-      </Box>
-      <Box sx={{ minWidth: 35 }}>
-        <Typography variant="body2" color="text.secondary">{`${Math.round(
-          props.value
-        )}%`}</Typography>
-      </Box>
-    </Box>
-  );
-}
 
 const SingleUpload = ({ doRestart }) => {
   const [md5, setMd5] = useState<string>();

interface/src/types/system.ts

@@ -5,7 +5,7 @@ import type { NetworkConnectionStatus } from './network';
 export enum SystemStatusCodes {
   SYSTEM_STATUS_NORMAL = 0,
   SYSTEM_STATUS_PENDING_UPLOAD = 1,
-  SYSTEM_STATUS_UPLOADING = 2,
+  SYSTEM_STATUS_UPLOADING = 100,
   SYSTEM_STATUS_ERROR_UPLOAD = 3,
   SYSTEM_STATUS_PENDING_RESTART = 4,
   SYSTEM_STATUS_RESTART_REQUESTED = 5

src/core/system.cpp

@@ -2061,7 +2061,12 @@ bool System::uploadFirmwareURL(const char * url) {
 
     // we're about to start the upload, set the status so the Web System Monitor spots it
     EMSESP::system_.systemStatus(SYSTEM_STATUS::SYSTEM_STATUS_UPLOADING);
-    // TODO do we need to stop the UART with EMSuart::stop() ?
+    // TODO do we need to stop the UART first with EMSuart::stop() ?
+
+    // set a callback so we can monitor progress in the WebUI
+    Update.onProgress([](size_t progress, size_t total) {
+        EMSESP::system_.systemStatus(SYSTEM_STATUS::SYSTEM_STATUS_UPLOADING+(progress * 100 / total));
+    });
 
     // get tcp stream and send it to Updater
     WiFiClient * stream = http.getStreamPtr();

src/core/system.h

@@ -62,7 +62,7 @@ enum PHY_type : uint8_t { PHY_TYPE_NONE = 0, PHY_TYPE_LAN8720, PHY_TYPE_TLK110 }
 enum SYSTEM_STATUS : uint8_t {
     SYSTEM_STATUS_NORMAL            = 0,
     SYSTEM_STATUS_PENDING_UPLOAD    = 1,
-    SYSTEM_STATUS_UPLOADING         = 2,
+    SYSTEM_STATUS_UPLOADING         = 100,
     SYSTEM_STATUS_ERROR_UPLOAD      = 3,
     SYSTEM_STATUS_PENDING_RESTART   = 4,
     SYSTEM_STATUS_RESTART_REQUESTED = 5