nxp-imx · sarahfwang · Jul 21, 2023 · Jul 20, 2023 · Jul 20, 2023 · Aug 7, 2023
diff --git a/.gitignore b/.gitignore
@@ -14,4 +14,5 @@ CMakeCache.txt
 *.clst
 *.snap
 node_modules
-build
+build
+*-lock.json
diff --git a/webusb/index.js b/webusb/index.js
@@ -0,0 +1,2 @@
+window.ZstdCodec = require('zstd-codec').ZstdCodec;
+require("zstd-codec/lib/module.js").run((binding) => {console.log("running", binding); window.binding = binding} )
diff --git a/webusb/package.json b/webusb/package.json
@@ -3,26 +3,24 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "-": "^0.0.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "fs": "^0.0.1-security",
+    "g": "^2.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "^5.0.1",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "zstd-codec": "^0.1.4"
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build": "react-scripts build; browserify index.js -o build/bundle.js -t babelify --presets es2015; ",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -35,5 +33,8 @@
       "last 1 safari version"
     ]
   },
-  "proxy": "http://localhost:5000"
+  "devDependencies": {
+    "@babel/core": "^7.22.9",
+    "babelify": "^10.0.0"
+  }
 }
diff --git a/webusb/public/index.html b/webusb/public/index.html
@@ -25,8 +25,14 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>React App</title>
+    <script src="bundle.js"></script>
   </head>
+
   <body>
+    <h1>Sample Applications</h1>
+    <div id="container"></div>
+
+
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--

diff --git a/webusb/src/App.js b/webusb/src/App.js
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import Combined from "./components/Combined";
+import Decompress2 from "./components/Decompress";
 import usePopup from "./logic/usePopup";
 
 import './App.css'
@@ -12,6 +13,9 @@ const App = () => {
     return (
     <div className="App">
         <div className="u-flex u-column">
+            <div>
+                <Decompress2 />
+            </div>
             <div className="u-row">
                 <span className="link-container">bootloader [optional]: </span>
                 <span className="file-name">{bootFile? bootFile.name:""}</span>

diff --git a/webusb/src/components/Combined.js b/webusb/src/components/Combined.js
@@ -1,4 +1,3 @@
-import {useEffect, useState} from 'react';
 import ProgressBar from './ProgressBar';
 import useHIDBoot from '../logic/useHIDBoot';
 import useUSBFlash from '../logic/useUSBFlash'
@@ -7,28 +6,17 @@ import imgSrc from '../images/imx8qxp_mek_bootmode.png'
 import "./Combined.css"
 
 const Combined = ({bootFile, flashFile}) => {
-    // const [imgUrl, setImgUrl] = useState();
-
     const [{ requestHIDDevice, HIDdevice, bootProgress, bootTotal }] = useHIDBoot(bootFile);
     const [{ requestUSBDevice, USBDevice, flashProgress, flashTotal}] = useUSBFlash(flashFile);
 
-    // useEffect(() => {
-    //     const dothis = async()=>{
-    //         const response = await fetch("mode");
-    //         const blob = await response.blob();
-    //         setImgUrl(URL.createObjectURL(blob));
-    //     }
-    //     dothis();
-    // }, [])
-
     return(
         <div>
             <ul className="Popup-list">
                 <li>
                     <span>1. Switch Boot Mode to "SERIAL"</span>
                     <div className="u-flex u-center">
                         <div className="image-container">
-                        {imgSrc? <img className="boot-image" src={imgSrc}/>: ""}
+                        {imgSrc? <img className="boot-image" src={imgSrc} alt="boot mode switches"/>: ""}
                         </div>
                     </div>
                 </li>
@@ -55,7 +43,9 @@ const Combined = ({bootFile, flashFile}) => {
                         <div>
                             <span>3. </span>
                             <button onClick={requestUSBDevice}>Pair USBDevice </button>
-                            <div className="Popup-empty"> {USBDevice? `connected: ${USBDevice.productName}`: ""} </div>
+                            <div className="Popup-empty"> 
++                                {USBDevice? `connected: ${USBDevice.productName}`: ""} 
++                            </div>
                         </div>
                     </div>
                 </li>

diff --git a/webusb/src/components/Decompress.js b/webusb/src/components/Decompress.js
@@ -0,0 +1,26 @@
+import { useEffect, useState } from "react"
+import useDecompress from '../logic/useDecompress'
+import { DATA_SZ, BLK_SZ, PACKET_SZ } from "../helper/sparse";
+
+const Decompress = () => {
+    const [flashFile, setFlashFile] = useState();
+    const [{
+        requestUSBDevice
+    }] = useDecompress(flashFile);
+
+    useEffect(()=> {
+        console.log(ZstdCodec)
+        console.log(window.binding);
+    }, [])
+
+    return (
+        <div>
+            file to decompress:
+            <input type="file" onChange={(e) => setFlashFile(e.target.files[0])}/>
+
+            <button onClick={requestUSBDevice}>Pair USBDevice </button>
+        </div>
+    )
+}
+
+export default Decompress
diff --git a/webusb/src/helper/sparse.js b/webusb/src/helper/sparse.js
@@ -79,14 +79,12 @@ export function build_chunk_header (chunk_type, raw_data_bytelength, i) {
     }
 
     if (chunk_type === CHUNK_TYPE_DONT_CARE) {
-        chunk_format.chunk_sz = CHUNK_SZ * i; // don't care
+        chunk_format.chunk_sz = CHUNK_SZ * i; 
         chunk_format.total_sz = CHUNK_SZ*BLK_SZ * i + CHUNK_HEADER_SZ; // bytes raw_data + header
     }
-    else if (chunk_type === CHUNK_TYPE_RAW) { // raw_data
+    else if (chunk_type === CHUNK_TYPE_RAW) { 
         chunk_format.chunk_sz = Math.ceil(raw_data_bytelength/BLK_SZ);
         chunk_format.total_sz = raw_data_bytelength + CHUNK_HEADER_SZ;
-
-        console.log(chunk_format)
     }
 
     return obj_to_arr(chunk_format, chunk_header, CHUNK_HEADER_SZ);

diff --git a/webusb/src/index.js b/webusb/src/index.js
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+// import * as Z from 'zstd-codec'
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-Original file line number
+Diff line change
@@ Expand Up / @@ -14,4 +14,5 @@ CMakeCache.txt @@
     *.clst
     *.snap
     node_modules
-    build
+    build
+    *-lock.json
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		window.ZstdCodec = require('zstd-codec').ZstdCodec;
		require("zstd-codec/lib/module.js").run((binding) => {console.log("running", binding); window.binding = binding} )