feat: 增加固件更新

src/index.css

@@ -2,8 +2,38 @@
   margin: 0;
   padding: 0;
 }
+html, body { width: 100%; height: 100%; padding: 0px; margin: 0px; }
 button {
   height: 50px;
   font-size: 14px;
   padding: 0px 30px;
-}
\ No newline at end of file
+  border-radius: 5px;
+  outline: none;
+  border: 1px solid #ccc;
+}
+.result-container {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+  box-sizing: border-box;
+}
+.list-container {
+  width: 50%;
+  height: 100%;
+}
+.log-container {
+  width: 50%;
+  height: 100%;
+}
+.log-container textarea {
+  width: 100%;
+  height: 100%;
+  min-height: 800px;
+  border: solid 1px #ccc;
+  border-radius: 5px;
+  outline: none;
+  padding: 5px;
+  box-sizing: border-box;
+}

src/index.tsx

@@ -4,11 +4,18 @@ import './index.css';
 import { Logger } from './Logger'
 
 const jensen = new Jensen();
+const firmwareVersions = [
+  { model: 'hidock-p1:mini', version: '2.1.0', url: 'https://jensen.test.hidock.com/firmwares/mini-2.1.0.bin' },
+  { model: 'hidock-p1', version: '1.2.18', url: 'https://jensen.test.hidock.com/firmwares/eason-1.2.18.bin' },
+  { model: 'hidock-p1', version: '1.2.14', url: 'https://jensen.test.hidock.com/firmwares/eason-v1.2.14.bin' }
+];
+
 
 export function Home() {
   const [files, setFiles] = useState<Jensen.FileInfo[]>([]);
   const [devices, setDevices] = useState<Jensen.BluetoothDevice[]>([]);
   const [greeting, setGreeting] = useState<string|null>(null);
+  const [firmwares, setFirmwares] = useState<typeof firmwareVersions|null>(null);
 
   useEffect(() => {
     jensen.connect();
@@ -273,6 +280,53 @@ export function Home() {
     alert(JSON.stringify(rst));
   }
 
+  const listFirmwares = async () => {
+    let model = jensen.getModel();
+    let versions = firmwareVersions.filter((item) => item.model == model);
+    setFirmwares(versions);
+  }
+
+  const updateFirmware = async (version: string, url: string) => {
+    // let rst = await jensen.requestFirmwareUpgrade(version, url);
+    // alert(JSON.stringify(rst));
+    alert('ready to update firmware, do not close/refresh this page, and wait for the update to complete');
+    // 版本号类似于1.2.3，需要转换为0x010203
+    // 将类似于"1.2.3"的字符串转换为0x010203的数值
+    let versionNumber = 0;
+    if (version && typeof version === 'string') {
+      let parts = version.split('.');
+      if (parts.length === 3) {
+        versionNumber = (parseInt(parts[0]) << 16) | (parseInt(parts[1]) << 8) | (parseInt(parts[2]));
+      } else {
+        alert('invalid version number');
+        return;
+      }
+    } else {
+      alert('invalid version number');
+      return;
+    }
+
+    let xhr = new XMLHttpRequest();
+    xhr.open('GET', url);
+    xhr.responseType = 'arraybuffer';
+    xhr.onload = function(e) {
+      if (this.status != 200) return alert('Http Error: ' + this.status);
+      jensen.requestFirmwareUpgrade(versionNumber, this.response.byteLength, 30).then((info) => {
+        if (info.result == 'accepted') {
+          // alert('firmware upgrade accepted');
+          jensen.uploadFirmware(Array.from(new Uint8Array(this.response)), 30).then((info) => {
+            alert(JSON.stringify(info));
+          });
+        }
+        else
+        {
+          alert('cannot upgrade firmware: ' + info.result);
+        }
+      });
+    }
+    xhr.send();
+  }
+
   return (
     <>
     <div style={{ display: 'flex', flexDirection: 'row', gap: '16px', padding: '16px', alignItems: 'center', flexWrap: 'wrap' }}>
@@ -288,31 +342,55 @@ export function Home() {
       <button onClick={updateUAC}>Update UAC</button>
       <button onClick={setWebUSBTimeout}>Set Timeout</button>
       <button onClick={getWebUSBTimeout}>Get Timeout</button>
+      <button onClick={listFirmwares}>Firmewares</button>
     </div>
-    <div id="files" style={{ padding: '0px 0px 0px 30px', marginBottom: '20px' }}>
-      <h3>Files: </h3>
-      <ol style={{ padding: '0px 0px 0px 30px', 'listStyle': 'none' }}>
-        { files.map((item, index) => {
-          return <li key={item.name}>{index} - {item?.name}, {item?.length} @ {item.duration}</li>
-        })}
-      </ol>
-    </div>
-    <div style={{ padding: '0px 0px 0px 30px', width: '500px' }}>
-      <h3>Bluetooth Device List: </h3>
-      {
-        greeting ? <div>{greeting}</div> : <></>
-      }
-      {
-        devices && devices.length ? (
-          devices.map((item, index) => {
-            return (
-              <div style={clsBleDevice}><span style={clsBleName}>({item.mac}) {item.name}</span><button style={clsBtnConnect} onClick={() => { doConnectBluetooth(item.mac) }}>Connect</button></div>
-            );
-          })
-        ) : (
-          <div>no devices...</div>
-        )
-      }
+    <div className="result-container">
+      <div className="list-container">
+        {
+          firmwares && firmwares.length ? (
+            <div style={{ padding: '0px 0px 0px 30px', marginBottom: '20px' }}>
+              <h3>Firmwares: </h3>
+              <ol style={{ padding: '0px 0px 0px 20px', 'listStyle': 'none', lineHeight: '20px' }}>
+                {
+                  firmwares.map((item, index) => {
+                    return <li key={item.version}>{item.version} - <a href="#" onClick={() => { updateFirmware(item.version, item.url) }}>Update</a></li>
+                  })
+                }
+              </ol>
+            </div>
+          ) : (<></>)
+        }
+        <div id="files" style={{ padding: '0px 0px 0px 30px', marginBottom: '20px' }}>
+          <h3>Files: </h3>
+          <ol style={{ padding: '0px 0px 0px 30px', 'listStyle': 'none' }}>
+            { files.map((item, index) => {
+              return <li key={item.name}>{index} - {item?.name}, {item?.length} @ {item.duration}</li>
+            })}
+          </ol>
+        </div>
+        <div style={{ padding: '0px 0px 0px 30px', width: '500px' }}>
+          <h3>Bluetooth Device List: </h3>
+          {
+            greeting ? <div>{greeting}</div> : <></>
+          }
+          {
+            devices && devices.length ? (
+              devices.map((item, index) => {
+                return (
+                  <div style={clsBleDevice}><span style={clsBleName}>({item.mac}) {item.name}</span><button style={clsBtnConnect} onClick={() => { doConnectBluetooth(item.mac) }}>Connect</button></div>
+                );
+              })
+            ) : (
+              <div>no devices...</div>
+            )
+          }
+        </div>
+      </div>
+      <div className="log-container">
+        <textarea id="log" style={{ width: '100%', height: '100%' }}>{Logger.messages.slice(-400).reverse().map((item) => {
+          return `${item.level} ${item.module} ${item.procedure} ${item.message}\n`;
+        }).join('')}</textarea>
+      </div>
     </div>
     </>
   );