From 787880f797891cd19669527cf23a49807953f6d5 Mon Sep 17 00:00:00 2001
From: Sarah Wang <sarah.wang_1@nxp.com>
Date: Fri, 21 Jul 2023 11:15:39 -0500
Subject: [PATCH 01/15] cleanup 2 at nxp/master

---
 webusb/src/components/Combined.js   | 18 ++++--------------
 webusb/src/components/Decompress.js | 26 ++++++++++++++++++++++++++
 webusb/src/helper/sparse.js         |  6 ++----
 webusb/src/logic/useUSBFlash.js     |  3 +--
 4 files changed, 33 insertions(+), 20 deletions(-)
 create mode 100644 webusb/src/components/Decompress.js

diff --git a/webusb/src/components/Combined.js b/webusb/src/components/Combined.js
index e52427ef..75214035 100644
--- 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,20 +6,9 @@ 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">
@@ -28,7 +16,7 @@ const Combined = ({bootFile, flashFile}) => {
                     <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
new file mode 100644
index 00000000..57d18621
--- /dev/null
+++ 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
index cf454acf..7e59eca9 100644
--- 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/logic/useUSBFlash.js b/webusb/src/logic/useUSBFlash.js
index 30e757e3..bc33cfe2 100644
--- a/webusb/src/logic/useUSBFlash.js
+++ b/webusb/src/logic/useUSBFlash.js
@@ -31,7 +31,7 @@
 
 import {useEffect, useState} from 'react';
 import {str_to_arr, ab_to_str} from '../helper/functions.js'
-import {CHUNK_SZ, BLK_SZ, CHUNK_TYPE_RAW, CHUNK_TYPE_DONT_CARE, build_sparse_header, build_chunk_header} from '../helper/sparse.js'
+import {CHUNK_SZ, BLK_SZ, PACKET_SZ, CHUNK_TYPE_RAW, CHUNK_TYPE_DONT_CARE, build_sparse_header, build_chunk_header} from '../helper/sparse.js'
 
 const USBrequestParams = { filters: [{ vendorId: 8137, productId: 0x0152 }] };
 
@@ -77,7 +77,6 @@ const useUSBFlash = (flashFile) => {
 
     const doFlash = async () => {
         // downloads and splits image into chunks to be processed
-        const PACKET_SZ = 0x10000;
         const DATA_SZ = CHUNK_SZ * BLK_SZ; // in bytes
         if (flashFile===null) {return;}
 

From 08b5fd6dfc8b946b39db28db1dda8f6f65ed7373 Mon Sep 17 00:00:00 2001
From: Sarah Wang <sarah.wang_1@nxp.com>
Date: Thu, 20 Jul 2023 15:10:11 -0500
Subject: [PATCH 02/15] webusb: add zstd decompress support for wic image

---
 .gitignore                        |   3 +-
 webusb/index.js                   |   2 +
 webusb/package.json               |  19 +-
 webusb/public/index.html          |   6 +
 webusb/src/App.js                 |   4 +
 webusb/src/index.js               |   1 +
 webusb/src/logic/useDecompress.js | 293 ++++++++++++++++++++++++++++++
 7 files changed, 318 insertions(+), 10 deletions(-)
 create mode 100644 webusb/index.js
 create mode 100644 webusb/src/logic/useDecompress.js

diff --git a/.gitignore b/.gitignore
index 9c22502f..c8b87a88 100644
--- a/.gitignore
+++ b/.gitignore
@@ -14,4 +14,5 @@ CMakeCache.txt
 *.clst
 *.snap
 node_modules
-build
\ No newline at end of file
+build
+*-lock.json
\ No newline at end of file
diff --git a/webusb/index.js b/webusb/index.js
new file mode 100644
index 00000000..82d6e3bd
--- /dev/null
+++ 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
index befb1d02..1b5db90e 100644
--- 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
index 690b31d0..2ded04a7 100644
--- 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
index 2e8f4b41..06826b0a 100644
--- 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/index.js b/webusb/src/index.js
index d563c0fb..6d78a231 100644
--- 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(
diff --git a/webusb/src/logic/useDecompress.js b/webusb/src/logic/useDecompress.js
new file mode 100644
index 00000000..7a6f23cd
--- /dev/null
+++ b/webusb/src/logic/useDecompress.js
@@ -0,0 +1,293 @@
+
+import {useEffect, useState} from 'react';
+import {str_to_arr, ab_to_str} from '../helper/functions.js'
+import {CHUNK_SZ, BLK_SZ, CHUNK_TYPE_RAW, CHUNK_TYPE_DONT_CARE, build_sparse_header, build_chunk_header} from '../helper/sparse.js'
+
+const USBrequestParams = { filters: [{ vendorId: 8137, productId: 0x0152 }] };
+
+const PACKET_SZ = 0x10000;
+const DATA_SZ = CHUNK_SZ * BLK_SZ; // in bytes
+
+const useDecompress = (flashFile) => {
+    const [USBDevice, setUSBDevice] = useState();
+    const [flashProgress, setFlashProgress] = useState();
+    const [flashTotal, setFlashTotal] = useState();
+
+    useEffect (()=> {
+        if (USBDevice) {
+            USBDevice.open().then(()=>{
+                console.log(`Opened USB Device: ${USBDevice.productName}`);
+            }, (err)=> {
+                console.log(err)
+            })
+            .then(()=> {
+                if (flashFile)
+                    decompressFileToTransform();
+            })
+        }
+
+    }, [USBDevice])
+
+    const requestUSBDevice = () => { // first thing called with button
+        navigator.usb
+        .requestDevice(USBrequestParams)
+        .then((device) => {
+            setUSBDevice(device);
+        })
+        .catch((e) => {
+            console.error(`There is no device. ${e}`);
+        });
+    }
+
+    async function preBoot () {
+        await USBDevice.claimInterface(0);
+
+        await send_data(await str_to_arr("UCmd:setenv fastboot_dev mmc"), "OKAY");
+        await send_data(await str_to_arr("UCmd:setenv mmcdev ${emmc_dev}"), "OKAY");
+        await send_data(await str_to_arr("UCmd:mmc dev ${emmc_dev}"), "OKAY");
+
+        console.log("preboot complete")
+    }
+
+    const processChunk = async(data, curr_len, i) => {
+        console.log(data, curr_len, i);
+
+        // ignore, fill with zeroes
+        if (curr_len != data.length) {
+            let fill_len = (Math.ceil(curr_len/BLK_SZ)*BLK_SZ - curr_len);
+            // let fill = new Uint8Array(fill_len);
+            data.set(curr_len, new Uint8Array(fill_len));
+            data = data.slice(0, curr_len+fill_len);
+        }
+
+        let hex_len = (data.length + 52).toString(16); // 52 comes from headers
+        await send_data(await str_to_arr(`download:${hex_len}`), `DATA${hex_len}`);
+        await send_headers(data.length, i);
+
+        let offset=0;
+        while (offset < data.length) {
+            let packet_len = Math.min(PACKET_SZ, DATA_SZ - offset);
+            await USBDevice.transferOut(1, data.slice(offset, offset + packet_len));
+            console.log("transferout", data.slice(offset, offset + packet_len));
+            offset += packet_len;
+        }
+
+        let result = await USBDevice.transferIn(1, 1048);
+        if ("OKAY" !== await ab_to_str(result.data.buffer)) {
+            throw new Error ("failed to send data:", await ab_to_str(result.data.buffer))
+        }
+
+        await flash_all();
+        console.log("FLASH SUCCESS")
+    }
+
+    async function send_packet(raw_data) {
+        await USBDevice.transferOut(1, raw_data);
+        console.log("transferout", raw_data);
+    }
+
+    async function send_chunk_headers (chunk_len, i) {
+        let hex_len = (chunk_len + 52).toString(16); // 52 comes from headers
+        await send_data(await str_to_arr(`download:${hex_len}`), `DATA${hex_len}`);
+        await send_headers(chunk_len, i);
+    }
+
+    async function send_headers(raw_data_bytelength, i) {
+        let sparse = await build_sparse_header(raw_data_bytelength, i);
+        let dont_care = await build_chunk_header(CHUNK_TYPE_DONT_CARE, raw_data_bytelength, i);
+        let raw = await build_chunk_header(CHUNK_TYPE_RAW, raw_data_bytelength, i);
+
+        let headers = new Uint8Array(52);
+        headers.set(sparse, 0);
+        headers.set(dont_care, 28);
+        headers.set(raw, 40);
+
+        await USBDevice.transferOut(1, headers);
+    }
+
+    async function send_flash () {
+        let result = await USBDevice.transferIn(1, 1048);
+        if ("OKAY" !== await ab_to_str(result.data.buffer)) {
+            throw new Error ("failed to send data:", await ab_to_str(result.data.buffer))
+        }
+
+        await flash_all();
+    }
+
+    /*
+    * data: string or arraybuffer
+    * success_str: checks response of usb
+    * Throws error if USB input does not match success_str
+    */
+    async function send_data(data, success_str) {
+        await USBDevice.transferOut(1, data);
+        let result = await USBDevice.transferIn(1, 1048);
+
+        if (success_str !== await ab_to_str(result.data.buffer)) {
+            throw new Error ("failed to send data:",await ab_to_str(result.data.buffer))
+        }
+    }
+
+    async function flash_all () {
+        await send_data(await str_to_arr("flash:all"), "OKAY");
+        console.log("flash");
+    }
+
+    const decompressFileToTransform = async(e) => {
+        console.log(USBDevice);
+
+        if (!flashFile) return;
+
+        const file = flashFile;
+        let buff = await file.arrayBuffer()
+        let data = new Uint8Array(buff);
+        let totalBytes = 0;
+
+        console.log(data)
+
+        if (!window.binding) {
+            console.log("no binding");
+            return;
+        }
+
+        const stream = new binding.ZstdDecompressStreamBinding();
+        const transform = new TransformStream();
+        const writer = transform.writable.getWriter();
+
+        const callback = (decompressed) => {
+            totalBytes += decompressed.length;
+            writer.write(decompressed);
+        }
+
+        if (!stream.begin()) {
+            console.log("stream.begin() error");
+            return null;
+        }
+
+        console.log("start unzipping");
+
+        let i = 0;
+        const size = 1024*1024*2;
+        while (size*i < data.length) {
+            let end = Math.min(size*(i+1), data.length);
+            let slice = data.slice(size*i, end);
+
+            if (!stream.transform(slice, callback)) {
+                console.log(`stream.transform() error on slice ${size*i} to ${end}`);
+                return null;
+            }
+
+            i++;
+        }
+
+        if (!stream.end(callback)) {
+            console.log("stream.end() error");
+            return null;
+        }
+
+        console.log("finishing unzipping");
+
+        const readable = transform.readable;
+        doFlash(readable, PACKET_SZ, totalBytes);
+    }
+
+    const doFlash = async(readable, size, totalSize) => {
+        await preBoot();
+
+        const reader = readable.getReader();
+
+        let offset = 0;
+        let sofar = new Uint8Array(size);
+        let i=0;
+        let totalBytes = 0;
+
+        let i_last = Math.floor(totalSize/DATA_SZ);
+        let last_len = totalSize - Math.floor(totalSize/DATA_SZ)*DATA_SZ;
+
+        console.log(i_last, last_len);
+
+        let isFirst = true;
+        let bytesChunk = 0;
+
+        reader.read().then(async function processText ({ done, value }) {
+            // Result objects contain two properties:
+            // done  - true if the stream has already given you all its data.
+            // value - some data. Always undefined when done is true.
+
+            totalBytes += value.length;
+            console.log(totalBytes);
+
+            // Send chunk headers
+            if (isFirst) {
+                let send_len;
+                if (i==i_last) {
+                    send_len = Math.ceil(last_len/BLK_SZ)*BLK_SZ
+                }
+                else {
+                    send_len = DATA_SZ;
+                }
+                await send_chunk_headers(send_len, i);
+                console.log("Sent headers", send_len, i)
+
+                isFirst = false;
+            }
+
+            while (offset + value.length >= size) {
+                sofar.set(value.slice(0, size-offset), offset); // Whole packet is ready to send
+                bytesChunk += size-offset;
+                await send_packet(sofar);
+
+                console.log("bytes", bytesChunk, i);
+
+                if (bytesChunk == DATA_SZ) {
+                    await send_flash();
+                    bytesChunk = 0;
+                    i++;
+                    isFirst = true;
+                }
+                value = value.slice(size-offset, value.length);
+                offset = 0;
+            }
+
+            sofar.set(value, offset);
+            offset += value.length;
+            bytesChunk += value.length
+
+            if (i==i_last && bytesChunk==last_len) {
+                console.log("reached last send", i, bytesChunk);
+
+                // Pad last packet with zeros
+                let fill_len = Math.ceil(last_len/BLK_SZ)*BLK_SZ - last_len;
+                sofar.set(new Uint8Array(fill_len), offset);
+                sofar = sofar.slice(0, offset+fill_len);
+
+                console.log(sofar);
+
+                await send_packet(sofar);
+                await send_flash();
+            }
+
+            if (done) {
+                console.log("stream done")
+                return;
+            }
+            // Read some more, and call this function again
+            return reader.read().then(processText);
+          });
+    }
+
+    return [{
+        requestUSBDevice,
+        USBDevice,
+        flashProgress,
+        flashTotal,
+        preBoot,
+        processChunk,
+        send_chunk_headers,
+        send_packet,
+        send_flash,
+        flash_all,
+    }]
+}
+
+export default useDecompress;
\ No newline at end of file

From a4c7c4ed2f82e90ee594c78ae5f0ce80ca3b570f Mon Sep 17 00:00:00 2001
From: Sarah Wang <sarah.wang_1@nxp.com>
Date: Thu, 20 Jul 2023 15:10:11 -0500
Subject: [PATCH 03/15] webusb: add zstd decompress support for wic image

---
 .gitignore                        |   3 +-
 webusb/index.js                   |   2 +
 webusb/package.json               |  19 +-
 webusb/public/index.html          |   6 +
 webusb/src/App.js                 |   4 +
 webusb/src/index.js               |   1 +
 webusb/src/logic/useDecompress.js | 293 ++++++++++++++++++++++++++++++
 7 files changed, 318 insertions(+), 10 deletions(-)
 create mode 100644 webusb/index.js
 create mode 100644 webusb/src/logic/useDecompress.js

diff --git a/.gitignore b/.gitignore
index 9c22502f..c8b87a88 100644
--- a/.gitignore
+++ b/.gitignore
@@ -14,4 +14,5 @@ CMakeCache.txt
 *.clst
 *.snap
 node_modules
-build
\ No newline at end of file
+build
+*-lock.json
\ No newline at end of file
diff --git a/webusb/index.js b/webusb/index.js
new file mode 100644
index 00000000..82d6e3bd
--- /dev/null
+++ 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
index befb1d02..1b5db90e 100644
--- 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
index 690b31d0..2ded04a7 100644
--- 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
index 2e8f4b41..06826b0a 100644
--- 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/index.js b/webusb/src/index.js
index d563c0fb..6d78a231 100644
--- 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(
diff --git a/webusb/src/logic/useDecompress.js b/webusb/src/logic/useDecompress.js
new file mode 100644
index 00000000..7a6f23cd
--- /dev/null
+++ b/webusb/src/logic/useDecompress.js
@@ -0,0 +1,293 @@
+
+import {useEffect, useState} from 'react';
+import {str_to_arr, ab_to_str} from '../helper/functions.js'
+import {CHUNK_SZ, BLK_SZ, CHUNK_TYPE_RAW, CHUNK_TYPE_DONT_CARE, build_sparse_header, build_chunk_header} from '../helper/sparse.js'
+
+const USBrequestParams = { filters: [{ vendorId: 8137, productId: 0x0152 }] };
+
+const PACKET_SZ = 0x10000;
+const DATA_SZ = CHUNK_SZ * BLK_SZ; // in bytes
+
+const useDecompress = (flashFile) => {
+    const [USBDevice, setUSBDevice] = useState();
+    const [flashProgress, setFlashProgress] = useState();
+    const [flashTotal, setFlashTotal] = useState();
+
+    useEffect (()=> {
+        if (USBDevice) {
+            USBDevice.open().then(()=>{
+                console.log(`Opened USB Device: ${USBDevice.productName}`);
+            }, (err)=> {
+                console.log(err)
+            })
+            .then(()=> {
+                if (flashFile)
+                    decompressFileToTransform();
+            })
+        }
+
+    }, [USBDevice])
+
+    const requestUSBDevice = () => { // first thing called with button
+        navigator.usb
+        .requestDevice(USBrequestParams)
+        .then((device) => {
+            setUSBDevice(device);
+        })
+        .catch((e) => {
+            console.error(`There is no device. ${e}`);
+        });
+    }
+
+    async function preBoot () {
+        await USBDevice.claimInterface(0);
+
+        await send_data(await str_to_arr("UCmd:setenv fastboot_dev mmc"), "OKAY");
+        await send_data(await str_to_arr("UCmd:setenv mmcdev ${emmc_dev}"), "OKAY");
+        await send_data(await str_to_arr("UCmd:mmc dev ${emmc_dev}"), "OKAY");
+
+        console.log("preboot complete")
+    }
+
+    const processChunk = async(data, curr_len, i) => {
+        console.log(data, curr_len, i);
+
+        // ignore, fill with zeroes
+        if (curr_len != data.length) {
+            let fill_len = (Math.ceil(curr_len/BLK_SZ)*BLK_SZ - curr_len);
+            // let fill = new Uint8Array(fill_len);
+            data.set(curr_len, new Uint8Array(fill_len));
+            data = data.slice(0, curr_len+fill_len);
+        }
+
+        let hex_len = (data.length + 52).toString(16); // 52 comes from headers
+        await send_data(await str_to_arr(`download:${hex_len}`), `DATA${hex_len}`);
+        await send_headers(data.length, i);
+
+        let offset=0;
+        while (offset < data.length) {
+            let packet_len = Math.min(PACKET_SZ, DATA_SZ - offset);
+            await USBDevice.transferOut(1, data.slice(offset, offset + packet_len));
+            console.log("transferout", data.slice(offset, offset + packet_len));
+            offset += packet_len;
+        }
+
+        let result = await USBDevice.transferIn(1, 1048);
+        if ("OKAY" !== await ab_to_str(result.data.buffer)) {
+            throw new Error ("failed to send data:", await ab_to_str(result.data.buffer))
+        }
+
+        await flash_all();
+        console.log("FLASH SUCCESS")
+    }
+
+    async function send_packet(raw_data) {
+        await USBDevice.transferOut(1, raw_data);
+        console.log("transferout", raw_data);
+    }
+
+    async function send_chunk_headers (chunk_len, i) {
+        let hex_len = (chunk_len + 52).toString(16); // 52 comes from headers
+        await send_data(await str_to_arr(`download:${hex_len}`), `DATA${hex_len}`);
+        await send_headers(chunk_len, i);
+    }
+
+    async function send_headers(raw_data_bytelength, i) {
+        let sparse = await build_sparse_header(raw_data_bytelength, i);
+        let dont_care = await build_chunk_header(CHUNK_TYPE_DONT_CARE, raw_data_bytelength, i);
+        let raw = await build_chunk_header(CHUNK_TYPE_RAW, raw_data_bytelength, i);
+
+        let headers = new Uint8Array(52);
+        headers.set(sparse, 0);
+        headers.set(dont_care, 28);
+        headers.set(raw, 40);
+
+        await USBDevice.transferOut(1, headers);
+    }
+
+    async function send_flash () {
+        let result = await USBDevice.transferIn(1, 1048);
+        if ("OKAY" !== await ab_to_str(result.data.buffer)) {
+            throw new Error ("failed to send data:", await ab_to_str(result.data.buffer))
+        }
+
+        await flash_all();
+    }
+
+    /*
+    * data: string or arraybuffer
+    * success_str: checks response of usb
+    * Throws error if USB input does not match success_str
+    */
+    async function send_data(data, success_str) {
+        await USBDevice.transferOut(1, data);
+        let result = await USBDevice.transferIn(1, 1048);
+
+        if (success_str !== await ab_to_str(result.data.buffer)) {
+            throw new Error ("failed to send data:",await ab_to_str(result.data.buffer))
+        }
+    }
+
+    async function flash_all () {
+        await send_data(await str_to_arr("flash:all"), "OKAY");
+        console.log("flash");
+    }
+
+    const decompressFileToTransform = async(e) => {
+        console.log(USBDevice);
+
+        if (!flashFile) return;
+
+        const file = flashFile;
+        let buff = await file.arrayBuffer()
+        let data = new Uint8Array(buff);
+        let totalBytes = 0;
+
+        console.log(data)
+
+        if (!window.binding) {
+            console.log("no binding");
+            return;
+        }
+
+        const stream = new binding.ZstdDecompressStreamBinding();
+        const transform = new TransformStream();
+        const writer = transform.writable.getWriter();
+
+        const callback = (decompressed) => {
+            totalBytes += decompressed.length;
+            writer.write(decompressed);
+        }
+
+        if (!stream.begin()) {
+            console.log("stream.begin() error");
+            return null;
+        }
+
+        console.log("start unzipping");
+
+        let i = 0;
+        const size = 1024*1024*2;
+        while (size*i < data.length) {
+            let end = Math.min(size*(i+1), data.length);
+            let slice = data.slice(size*i, end);
+
+            if (!stream.transform(slice, callback)) {
+                console.log(`stream.transform() error on slice ${size*i} to ${end}`);
+                return null;
+            }
+
+            i++;
+        }
+
+        if (!stream.end(callback)) {
+            console.log("stream.end() error");
+            return null;
+        }
+
+        console.log("finishing unzipping");
+
+        const readable = transform.readable;
+        doFlash(readable, PACKET_SZ, totalBytes);
+    }
+
+    const doFlash = async(readable, size, totalSize) => {
+        await preBoot();
+
+        const reader = readable.getReader();
+
+        let offset = 0;
+        let sofar = new Uint8Array(size);
+        let i=0;
+        let totalBytes = 0;
+
+        let i_last = Math.floor(totalSize/DATA_SZ);
+        let last_len = totalSize - Math.floor(totalSize/DATA_SZ)*DATA_SZ;
+
+        console.log(i_last, last_len);
+
+        let isFirst = true;
+        let bytesChunk = 0;
+
+        reader.read().then(async function processText ({ done, value }) {
+            // Result objects contain two properties:
+            // done  - true if the stream has already given you all its data.
+            // value - some data. Always undefined when done is true.
+
+            totalBytes += value.length;
+            console.log(totalBytes);
+
+            // Send chunk headers
+            if (isFirst) {
+                let send_len;
+                if (i==i_last) {
+                    send_len = Math.ceil(last_len/BLK_SZ)*BLK_SZ
+                }
+                else {
+                    send_len = DATA_SZ;
+                }
+                await send_chunk_headers(send_len, i);
+                console.log("Sent headers", send_len, i)
+
+                isFirst = false;
+            }
+
+            while (offset + value.length >= size) {
+                sofar.set(value.slice(0, size-offset), offset); // Whole packet is ready to send
+                bytesChunk += size-offset;
+                await send_packet(sofar);
+
+                console.log("bytes", bytesChunk, i);
+
+                if (bytesChunk == DATA_SZ) {
+                    await send_flash();
+                    bytesChunk = 0;
+                    i++;
+                    isFirst = true;
+                }
+                value = value.slice(size-offset, value.length);
+                offset = 0;
+            }
+
+            sofar.set(value, offset);
+            offset += value.length;
+            bytesChunk += value.length
+
+            if (i==i_last && bytesChunk==last_len) {
+                console.log("reached last send", i, bytesChunk);
+
+                // Pad last packet with zeros
+                let fill_len = Math.ceil(last_len/BLK_SZ)*BLK_SZ - last_len;
+                sofar.set(new Uint8Array(fill_len), offset);
+                sofar = sofar.slice(0, offset+fill_len);
+
+                console.log(sofar);
+
+                await send_packet(sofar);
+                await send_flash();
+            }
+
+            if (done) {
+                console.log("stream done")
+                return;
+            }
+            // Read some more, and call this function again
+            return reader.read().then(processText);
+          });
+    }
+
+    return [{
+        requestUSBDevice,
+        USBDevice,
+        flashProgress,
+        flashTotal,
+        preBoot,
+        processChunk,
+        send_chunk_headers,
+        send_packet,
+        send_flash,
+        flash_all,
+    }]
+}
+
+export default useDecompress;
\ No newline at end of file

From 65755ae75714d7128a4973a176c3d9cf8dffab45 Mon Sep 17 00:00:00 2001
From: William Wang <wwang.00@outlook.com>
Date: Mon, 7 Aug 2023 11:03:25 -0500
Subject: [PATCH 04/15] merge

---
 webusb/src/App.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/webusb/src/App.js b/webusb/src/App.js
index 06826b0a..11e180f1 100644
--- a/webusb/src/App.js
+++ b/webusb/src/App.js
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import Combined from "./components/Combined";
 import Decompress2 from "./components/Decompress";
+import Decompress from "./components/Decompress";
 import usePopup from "./logic/usePopup";
 
 import './App.css'
@@ -15,6 +16,7 @@ const App = () => {
         <div className="u-flex u-column">
             <div>
                 <Decompress2 />
+                <Decompress />
             </div>
             <div className="u-row">
                 <span className="link-container">bootloader [optional]: </span>

From 34a07ae610081a67cea6b3af08e067cde6ab6c77 Mon Sep 17 00:00:00 2001
From: William Wang <wwang.00@outlook.com>
Date: Mon, 7 Aug 2023 10:35:45 -0500
Subject: [PATCH 05/15] working on this, change later

---
 webusb/src/App.js                      |  12 +-
 webusb/src/components/Decompress.js    |   5 +-
 webusb/src/components/DecompressAlt.js |  27 +++
 webusb/src/logic/notes.js              |  28 +++
 webusb/src/logic/useDecompress2.js     | 245 +++++++++++++++++++++++++
 webusb/src/logic/useDecompress3.js     | 197 ++++++++++++++++++++
 webusb/src/logic/useHIDBoot.js         |   1 +
 7 files changed, 510 insertions(+), 5 deletions(-)
 create mode 100644 webusb/src/components/DecompressAlt.js
 create mode 100644 webusb/src/logic/notes.js
 create mode 100644 webusb/src/logic/useDecompress2.js
 create mode 100644 webusb/src/logic/useDecompress3.js

diff --git a/webusb/src/App.js b/webusb/src/App.js
index 11e180f1..0401fd97 100644
--- a/webusb/src/App.js
+++ b/webusb/src/App.js
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import Combined from "./components/Combined";
 import Decompress2 from "./components/Decompress";
 import Decompress from "./components/Decompress";
+import DecompressAlt from "./components/DecompressAlt"
 import usePopup from "./logic/usePopup";
 
 import './App.css'
@@ -17,6 +18,7 @@ const App = () => {
             <div>
                 <Decompress2 />
                 <Decompress />
+                <DecompressAlt />
             </div>
             <div className="u-row">
                 <span className="link-container">bootloader [optional]: </span>
@@ -39,13 +41,17 @@ const App = () => {
             <div className="popup-button">
                 <button onClick = {showPopup}>USB_down</button>
             </div>
-
-            <div className="popup-loc ">
+            
+            {/* for testing purpose, just let you input files without waiting */}
+            {/* <div className="popup-loc ">
                 <div className="popup-container" style={show?{}:{display:'none'}}>
                     <Combined bootFile={bootFile} flashFile={flashFile}/>
                     <button onClick={()=>closePopup()}>close</button>
                 </div>
-            </div>
+            </div> */}
+
+            <Combined bootFile={bootFile} flashFile={flashFile}/>
+
             <span>{error}</span>
         </div>
 
diff --git a/webusb/src/components/Decompress.js b/webusb/src/components/Decompress.js
index 57d18621..f1dccafd 100644
--- a/webusb/src/components/Decompress.js
+++ b/webusb/src/components/Decompress.js
@@ -1,12 +1,13 @@
 import { useEffect, useState } from "react"
-import useDecompress from '../logic/useDecompress'
+// import useDecompress from '../logic/useDecompress'
+import useDecompress2 from '../logic/useDecompress2'
 import { DATA_SZ, BLK_SZ, PACKET_SZ } from "../helper/sparse";
 
 const Decompress = () => {
     const [flashFile, setFlashFile] = useState();
     const [{
         requestUSBDevice
-    }] = useDecompress(flashFile);
+    }] = useDecompress2(flashFile);
 
     useEffect(()=> {
         console.log(ZstdCodec)
diff --git a/webusb/src/components/DecompressAlt.js b/webusb/src/components/DecompressAlt.js
new file mode 100644
index 00000000..f4217bc3
--- /dev/null
+++ b/webusb/src/components/DecompressAlt.js
@@ -0,0 +1,27 @@
+import { useEffect, useState } from "react"
+// import useDecompress from '../logic/useDecompress'
+import useDecompress from '../logic/useDecompress3'
+import { DATA_SZ, BLK_SZ, PACKET_SZ } from "../helper/sparse";
+
+const DecompressAlt = () => {
+    const [flashFile, setFlashFile] = useState();
+    const [{
+        requestUSBDevice
+    }] = useDecompress(flashFile);
+
+    useEffect(()=> {
+        console.log(ZstdCodec)
+        console.log(window.binding);
+    }, [])
+
+    return (
+        <div>
+            file to decompress (3):
+            <input type="file" onChange={(e) => setFlashFile(e.target.files[0])}/>
+
+            <button onClick={requestUSBDevice}>Pair USBDevice </button>
+        </div>
+    )
+}
+
+export default DecompressAlt
diff --git a/webusb/src/logic/notes.js b/webusb/src/logic/notes.js
new file mode 100644
index 00000000..ffba6881
--- /dev/null
+++ b/webusb/src/logic/notes.js
@@ -0,0 +1,28 @@
+async function callback() {
+
+    await send_data();
+
+    callback();
+}
+
+function caller () {
+    stream.transform(chunk_offset, slice, callback);
+}
+
+///
+
+function transform (chunk, callback){
+    // fill up a src_bytes worth from chunk
+    decompress(src_bytes);
+}
+
+function decompress(src_bytes) {
+    // loop over src_bytes
+
+    while (condition){
+        let decompressed = zstd_decompress(src_bytes);
+        callback(decompressed)
+    }
+
+    src_bytes.clear();
+}
\ No newline at end of file
diff --git a/webusb/src/logic/useDecompress2.js b/webusb/src/logic/useDecompress2.js
new file mode 100644
index 00000000..a464c0c4
--- /dev/null
+++ b/webusb/src/logic/useDecompress2.js
@@ -0,0 +1,245 @@
+
+import {useEffect, useState} from 'react';
+import {str_to_arr, ab_to_str} from '../helper/functions.js'
+import {CHUNK_SZ, BLK_SZ, CHUNK_TYPE_RAW, CHUNK_TYPE_DONT_CARE, build_sparse_header, build_chunk_header} from '../helper/sparse.js'
+
+const USBrequestParams = { filters: [{ vendorId: 8137, productId: 0x0152 }] };
+
+const PACKET_SZ = 0x10000;
+const DATA_SZ = CHUNK_SZ * BLK_SZ; // in bytes
+
+const useDecompress2 = (flashFile) => {
+    const [USBDevice, setUSBDevice] = useState();
+    const [flashProgress, setFlashProgress] = useState();
+    const [flashTotal, setFlashTotal] = useState();
+    const [chunkOffset, setChunkOffset] = useState(-1);
+
+    useEffect (()=> {
+        if (USBDevice) {
+            USBDevice.open().then(()=>{
+                console.log(`Opened USB Device: ${USBDevice.productName}`);
+            }, (err)=> {
+                console.log(err)
+            })
+            .then(()=> {
+                if (flashFile)
+                    decompressFileToTransform();
+            })
+        }
+
+    }, [USBDevice])
+
+    useEffect(()=> {
+        // called when another thing is processed from src_bytes
+
+        if (chunkOffset < 0) return;
+
+        console.log(chunkOffset);
+    }, [chunkOffset])
+
+    const requestUSBDevice = () => { // first thing called with button
+        navigator.usb
+        .requestDevice(USBrequestParams)
+        .then((device) => {
+            setUSBDevice(device);
+        })
+        .catch((e) => {
+            console.error(`There is no device. ${e}`);
+        });
+    }
+
+    
+    async function preBoot () {
+        await USBDevice.claimInterface(0);
+
+        await send_data(await str_to_arr("UCmd:setenv fastboot_dev mmc"), "OKAY");
+        await send_data(await str_to_arr("UCmd:setenv mmcdev ${emmc_dev}"), "OKAY");
+        await send_data(await str_to_arr("UCmd:mmc dev ${emmc_dev}"), "OKAY");
+
+        console.log("preboot complete")
+    }
+
+    const processChunk = async(data, curr_len, i) => {
+        console.log(data, curr_len, i);
+
+        // ignore, fill with zeroes
+        if (curr_len != data.length) {
+            let fill_len = (Math.ceil(curr_len/BLK_SZ)*BLK_SZ - curr_len);
+            // let fill = new Uint8Array(fill_len);
+            data.set(curr_len, new Uint8Array(fill_len));
+            data = data.slice(0, curr_len+fill_len);
+        }
+
+        let hex_len = (data.length + 52).toString(16); // 52 comes from headers
+        await send_data(await str_to_arr(`download:${hex_len}`), `DATA${hex_len}`);
+        await send_headers(data.length, i);
+
+        let offset=0;
+        while (offset < data.length) {
+            let packet_len = Math.min(PACKET_SZ, DATA_SZ - offset);
+            await USBDevice.transferOut(1, data.slice(offset, offset + packet_len));
+            console.log("transferout", data.slice(offset, offset + packet_len));
+            offset += packet_len;
+        }
+
+        let result = await USBDevice.transferIn(1, 1048);
+        if ("OKAY" !== await ab_to_str(result.data.buffer)) {
+            throw new Error ("failed to send data:", await ab_to_str(result.data.buffer))
+        }
+
+        await flash_all();
+        console.log("FLASH SUCCESS")
+    }
+
+    async function send_packet(raw_data) {
+        await USBDevice.transferOut(1, raw_data);
+        console.log("transferout", raw_data);
+    }
+
+    async function send_chunk_headers (chunk_len, i) {
+        let hex_len = (chunk_len + 52).toString(16); // 52 comes from headers
+        await send_data(await str_to_arr(`download:${hex_len}`), `DATA${hex_len}`);
+        await send_headers(chunk_len, i);
+    }
+
+    async function send_headers(raw_data_bytelength, i) {
+        let sparse = await build_sparse_header(raw_data_bytelength, i);
+        let dont_care = await build_chunk_header(CHUNK_TYPE_DONT_CARE, raw_data_bytelength, i);
+        let raw = await build_chunk_header(CHUNK_TYPE_RAW, raw_data_bytelength, i);
+
+        let headers = new Uint8Array(52);
+        headers.set(sparse, 0);
+        headers.set(dont_care, 28);
+        headers.set(raw, 40);
+
+        await USBDevice.transferOut(1, headers);
+    }
+
+    async function send_flash () {
+        let result = await USBDevice.transferIn(1, 1048);
+        if ("OKAY" !== await ab_to_str(result.data.buffer)) {
+            throw new Error ("failed to send data:", await ab_to_str(result.data.buffer))
+        }
+
+        await flash_all();
+    }
+
+    /*
+    * data: string or arraybuffer
+    * success_str: checks response of usb
+    * Throws error if USB input does not match success_str
+    */
+    async function send_data(data, success_str) {
+        await USBDevice.transferOut(1, data);
+        let result = await USBDevice.transferIn(1, 1048);
+
+        if (success_str !== await ab_to_str(result.data.buffer)) {
+            throw new Error ("failed to send data:",await ab_to_str(result.data.buffer))
+        }
+    }
+
+    async function flash_all () {
+        await send_data(await str_to_arr("flash:all"), "OKAY");
+        console.log("flash");
+    }
+
+    const decompressFileToTransform = async(e) => {
+        console.log(USBDevice);
+
+        if (!flashFile) return;
+
+        const file = flashFile;
+        let buff = await file.arrayBuffer()
+        let data = new Uint8Array(buff);
+        let totalBytes = 0;
+
+        console.log(data)
+
+        if (!window.binding) {
+            console.log("no binding");
+            return;
+        }
+
+        const stream = new binding.ZstdDecompressStreamBinding();
+        // const transform = new TransformStream();
+        // const writer = transform.writable.getWriter();
+
+        const callback = (decompressed) => {
+            console.log(decompressed);
+            // totalBytes += decompressed.length;
+            // writer.write(decompressed);
+        }
+
+        if (!stream.begin()) {
+            console.log("stream.begin() error");
+            return null;
+        }
+
+        console.log("start unzipping");
+
+        let i = 0;
+        const size = 1024*1024;
+        
+        let end = Math.min(size*(i+1), data.length);
+        let chunk = data.slice(size*i, end);
+
+        let prev_offset = 0;
+        let curr_offset = 0;
+        let printpos = 0;
+        let pos = stream.transform(chunk, 0, 0, callback);
+        console.log({pos});
+        printpos = printpos + pos;
+        curr_offset = prev_offset + pos;
+
+        if (curr_offset == chunk.length) {
+            //read another chunk
+        }
+        else {
+            // still in the middle of reading a chunk
+            console.log("pos", pos, "curr_offset", curr_offset, "printpos", printpos);
+            let pos = stream.transform(chunk, 131075, 131075, callback);
+            console.log(pos);
+
+            if (pos==0) {
+                // it's time to move onto a new src_bytes
+                prev_offset = curr_offset;
+
+                pos = stream.transform(chunk, 131075, 0, callback);
+                console.log(pos);
+                curr_offset = prev_offset + pos;
+                console.log(curr_offset);
+                    
+                pos = stream.transform(chunk, curr_offset, pos, callback);
+            }
+
+        }
+
+
+        // if (!stream.end(callback)) {
+        //     console.log("stream.end() error");
+        //     return null;
+        // }
+
+        // console.log("finishing unzipping");
+
+        // const readable = transform.readable;
+        // doFlash(readable, PACKET_SZ, totalBytes);
+    }
+
+    
+
+    return [{
+        requestUSBDevice,
+        USBDevice,
+        flashProgress,
+        flashTotal,
+        preBoot,
+        processChunk,
+        send_chunk_headers,
+        send_packet,
+        send_flash,
+        flash_all,
+    }]
+}
+
+export default useDecompress2;
\ No newline at end of file
diff --git a/webusb/src/logic/useDecompress3.js b/webusb/src/logic/useDecompress3.js
new file mode 100644
index 00000000..7c6b041d
--- /dev/null
+++ b/webusb/src/logic/useDecompress3.js
@@ -0,0 +1,197 @@
+
+import {useEffect, useState} from 'react';
+import {str_to_arr, ab_to_str} from '../helper/functions.js'
+import {CHUNK_SZ, BLK_SZ, CHUNK_TYPE_RAW, CHUNK_TYPE_DONT_CARE, build_sparse_header, build_chunk_header} from '../helper/sparse.js'
+
+const USBrequestParams = { filters: [{ vendorId: 8137, productId: 0x0152 }] };
+
+const PACKET_SZ = 0x10000;
+const DATA_SZ = CHUNK_SZ * BLK_SZ; // in bytes
+
+const useDecompress = (flashFile) => {
+    const [USBDevice, setUSBDevice] = useState();
+    const [flashProgress, setFlashProgress] = useState();
+    const [flashTotal, setFlashTotal] = useState();
+
+    useEffect (()=> {
+        if (USBDevice) {
+            USBDevice.open().then(()=>{
+                console.log(`Opened USB Device: ${USBDevice.productName}`);
+            }, (err)=> {
+                console.log(err)
+            })
+            .then(()=> {
+                if (flashFile)
+                    decompressFileToTransform();
+            })
+        }
+
+    }, [USBDevice])
+
+    const requestUSBDevice = () => { // first thing called with button
+        navigator.usb
+        .requestDevice(USBrequestParams)
+        .then((device) => {
+            setUSBDevice(device);
+        })
+        .catch((e) => {
+            console.error(`There is no device. ${e}`);
+        });
+    }
+
+    async function preBoot () {
+        await USBDevice.claimInterface(0);
+
+        await send_data(await str_to_arr("UCmd:setenv fastboot_dev mmc"), "OKAY");
+        await send_data(await str_to_arr("UCmd:setenv mmcdev ${emmc_dev}"), "OKAY");
+        await send_data(await str_to_arr("UCmd:mmc dev ${emmc_dev}"), "OKAY");
+
+        console.log("preboot complete")
+    }
+
+    const processChunk = async(data, curr_len, i) => {
+        console.log(data, curr_len, i);
+
+        // ignore, fill with zeroes
+        if (curr_len != data.length) {
+            let fill_len = (Math.ceil(curr_len/BLK_SZ)*BLK_SZ - curr_len);
+            // let fill = new Uint8Array(fill_len);
+            data.set(curr_len, new Uint8Array(fill_len));
+            data = data.slice(0, curr_len+fill_len);
+        }
+
+        let hex_len = (data.length + 52).toString(16); // 52 comes from headers
+        await send_data(await str_to_arr(`download:${hex_len}`), `DATA${hex_len}`);
+        await send_headers(data.length, i);
+
+        let offset=0;
+        while (offset < data.length) {
+            let packet_len = Math.min(PACKET_SZ, DATA_SZ - offset);
+            await USBDevice.transferOut(1, data.slice(offset, offset + packet_len));
+            console.log("transferout", data.slice(offset, offset + packet_len));
+            offset += packet_len;
+        }
+
+        let result = await USBDevice.transferIn(1, 1048);
+        if ("OKAY" !== await ab_to_str(result.data.buffer)) {
+            throw new Error ("failed to send data:", await ab_to_str(result.data.buffer))
+        }
+
+        await flash_all();
+        console.log("FLASH SUCCESS")
+    }
+
+    async function send_packet(raw_data) {
+        await USBDevice.transferOut(1, raw_data);
+        console.log("transferout", raw_data);
+    }
+
+    async function send_chunk_headers (chunk_len, i) {
+        let hex_len = (chunk_len + 52).toString(16); // 52 comes from headers
+        await send_data(await str_to_arr(`download:${hex_len}`), `DATA${hex_len}`);
+        await send_headers(chunk_len, i);
+    }
+
+    async function send_headers(raw_data_bytelength, i) {
+        let sparse = await build_sparse_header(raw_data_bytelength, i);
+        let dont_care = await build_chunk_header(CHUNK_TYPE_DONT_CARE, raw_data_bytelength, i);
+        let raw = await build_chunk_header(CHUNK_TYPE_RAW, raw_data_bytelength, i);
+
+        let headers = new Uint8Array(52);
+        headers.set(sparse, 0);
+        headers.set(dont_care, 28);
+        headers.set(raw, 40);
+
+        await USBDevice.transferOut(1, headers);
+    }
+
+    async function send_flash () {
+        let result = await USBDevice.transferIn(1, 1048);
+        if ("OKAY" !== await ab_to_str(result.data.buffer)) {
+            throw new Error ("failed to send data:", await ab_to_str(result.data.buffer))
+        }
+
+        await flash_all();
+    }
+
+    /*
+    * data: string or arraybuffer
+    * success_str: checks response of usb
+    * Throws error if USB input does not match success_str
+    */
+    async function send_data(data, success_str) {
+        await USBDevice.transferOut(1, data);
+        let result = await USBDevice.transferIn(1, 1048);
+
+        if (success_str !== await ab_to_str(result.data.buffer)) {
+            throw new Error ("failed to send data:",await ab_to_str(result.data.buffer))
+        }
+    }
+
+    async function flash_all () {
+        await send_data(await str_to_arr("flash:all"), "OKAY");
+        console.log("flash");
+    }
+
+    const decompressFileToTransform = async(e) => {
+        console.log(USBDevice);
+
+        if (!flashFile) return;
+
+        const file = flashFile;
+        let buff = await file.arrayBuffer()
+        let data = new Uint8Array(buff);
+        let totalBytes = 0;
+
+        console.log(data)
+
+        if (!window.binding) {
+            console.log("no binding");
+            return;
+        }
+
+        const stream = new binding.ZstdDecompressStreamBinding();
+
+        const callback = (decompressed) => {
+            console.log(decompressed);
+        }
+
+        if (!stream.begin()) {
+            console.log("stream.begin() error");
+            return null;
+        }
+
+        console.log("start unzipping");
+
+        let i = 0;
+        const size = 1024*1024*2;
+        while (i < 3) {
+            let end = Math.min(size*(i+1), data.length);
+            let slice = data.slice(size*i, end);
+
+            if (!stream.transform(slice, callback)) {
+                console.log(`stream.transform() error on slice ${size*i} to ${end}`);
+                return null;
+            }
+
+            i++;
+        }
+
+    }
+
+
+    return [{
+        requestUSBDevice,
+        USBDevice,
+        flashProgress,
+        flashTotal,
+        preBoot,
+        processChunk,
+        send_chunk_headers,
+        send_packet,
+        send_flash,
+        flash_all,
+    }]
+}
+
+export default useDecompress;
\ No newline at end of file
diff --git a/webusb/src/logic/useHIDBoot.js b/webusb/src/logic/useHIDBoot.js
index 58ef82c3..135fe30c 100644
--- a/webusb/src/logic/useHIDBoot.js
+++ b/webusb/src/logic/useHIDBoot.js
@@ -49,6 +49,7 @@ const useHIDBoot = (bootFile) => {
     useEffect(() => {
         const downloadBoot = async() => {
             if (!HIDdevice) return;
+            console.log(HIDdevice);
             await HIDdevice.open();
             console.log("Opened device: " + HIDdevice.productName);
 

From 9816f3f72c8d164a27fb3725192d56593a519d12 Mon Sep 17 00:00:00 2001
From: Sarah Wang <sarah.wang_1@nxp.com>
Date: Mon, 7 Aug 2023 13:56:11 -0500
Subject: [PATCH 06/15] bunch of stuff that doesn't work

---
 webusb/src/App.js                        |  14 +-
 webusb/src/components/Decompress2.js     |  54 ++++
 webusb/src/logic/check-what-was-wrong.js |  79 ++++++
 webusb/src/logic/notes.js                |  76 +++++
 webusb/src/logic/reduced.js              |  95 +++++++
 webusb/src/logic/useDecompress.js        |  15 +-
 webusb/src/logic/useDecompress2.js       | 339 ++++++++++++++++++++++
 webusb/src/logic/useDecompress3.js       | 342 +++++++++++++++++++++++
 webusb/src/logic/useDecompress4.js       | 229 +++++++++++++++
 webusb/src/logic/useHIDBoot.js           |   2 +-
 10 files changed, 1234 insertions(+), 11 deletions(-)
 create mode 100644 webusb/src/components/Decompress2.js
 create mode 100644 webusb/src/logic/check-what-was-wrong.js
 create mode 100644 webusb/src/logic/notes.js
 create mode 100644 webusb/src/logic/reduced.js
 create mode 100644 webusb/src/logic/useDecompress2.js
 create mode 100644 webusb/src/logic/useDecompress3.js
 create mode 100644 webusb/src/logic/useDecompress4.js

diff --git a/webusb/src/App.js b/webusb/src/App.js
index 06826b0a..604c9ed8 100644
--- a/webusb/src/App.js
+++ b/webusb/src/App.js
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import Combined from "./components/Combined";
-import Decompress2 from "./components/Decompress";
+import Decompress from "./components/Decompress";
+import Decompress2 from "./components/Decompress2"
 import usePopup from "./logic/usePopup";
 
 import './App.css'
@@ -14,6 +15,11 @@ const App = () => {
     <div className="App">
         <div className="u-flex u-column">
             <div>
+                Decompress (stream)
+                <Decompress />
+            </div>
+            <div>
+                Decompress (callback)
                 <Decompress2 />
             </div>
             <div className="u-row">
@@ -38,12 +44,14 @@ const App = () => {
                 <button onClick = {showPopup}>USB_down</button>
             </div>
 
-            <div className="popup-loc ">
+            <Combined bootFile={bootFile} flashFile={flashFile}/>
+
+            {/* <div className="popup-loc ">
                 <div className="popup-container" style={show?{}:{display:'none'}}>
                     <Combined bootFile={bootFile} flashFile={flashFile}/>
                     <button onClick={()=>closePopup()}>close</button>
                 </div>
-            </div>
+            </div> */}
             <span>{error}</span>
         </div>
 
diff --git a/webusb/src/components/Decompress2.js b/webusb/src/components/Decompress2.js
new file mode 100644
index 00000000..dff33f35
--- /dev/null
+++ b/webusb/src/components/Decompress2.js
@@ -0,0 +1,54 @@
+import { useEffect, useState } from "react"
+import useDecompress4 from '../logic/useDecompress4'
+import { DATA_SZ, BLK_SZ, PACKET_SZ } from "../helper/sparse";
+
+const Decompress2 = () => {
+    const [flashFile, setFlashFile] = useState();
+
+    const [{
+        requestUSBDevice,
+        decompressFileToTransform
+    }] = useDecompress4(flashFile);
+
+    useEffect(()=> {
+        console.log(ZstdCodec)
+        console.log(window.binding);
+    }, [])
+
+    // useEffect(()=> {
+    //     function sleep(ms) {
+    //         let p1 = new Promise(resolve => setTimeout(resolve, ms));
+    //         let p2 = p1.then(() => {
+    //             console.log('after first setTimeout')
+    //             return (
+    //                 new Promise(resolve => setTimeout(resolve, ms))
+    //             )
+    //         });
+    //         return p2.then(()=> Promise.resolve("hello")); // returns a promise
+    //       }
+          
+    //       // Usage:
+
+          
+    //       console.log("Start");
+          
+    //       (async () => {
+    //         for (let i=0; i<3; i++) {
+    //             let res = await sleep(2000); // Sleep for 2 seconds
+    //             console.log(res);
+    //         }
+    //         console.log("End");
+    //       })();        
+    // }, [])
+
+    return (
+        <div>
+            file to decompress:
+            <input type="file" onChange={(e) => setFlashFile(e.target.files[0])}/>
+
+            <button onClick={requestUSBDevice}>Choose USB Dev </button>
+        </div>
+    )
+}
+
+export default Decompress2
diff --git a/webusb/src/logic/check-what-was-wrong.js b/webusb/src/logic/check-what-was-wrong.js
new file mode 100644
index 00000000..b4be1cca
--- /dev/null
+++ b/webusb/src/logic/check-what-was-wrong.js
@@ -0,0 +1,79 @@
+// no awaits
+    // function process_chunk2 (chunk, i) {
+    //     console.log("process chunk", chunk);
+
+    //     let hex_len = (chunk.length + 52).toString(16); // 52 comes from headers
+    //     USBDevice.transferOut(1, str_to_arr(`download:${hex_len}`)).then (result => {
+    //         if (`DATA${hex_len}` !== ab_to_str(result.data.buffer)) {
+    //             throw new Error ("failed to send data:", ab_to_str(result.data.buffer))
+    //         }
+    //     }).then(() => {
+    //         let sparse = build_sparse_header(raw_data_bytelength, i);
+    //         let dont_care = build_chunk_header(CHUNK_TYPE_DONT_CARE, raw_data_bytelength, i);
+    //         let raw = build_chunk_header(CHUNK_TYPE_RAW, raw_data_bytelength, i);
+
+    //         let headers = new Uint8Array(52);
+    //         headers.set(sparse, 0);
+    //         headers.set(dont_care, 28);
+    //         headers.set(raw, 40);
+
+    //         USBDevice.transferOut(1, headers);
+    //     }).then (()=> {
+    //         let offset=0;
+    //         while (offset < chunk.length) {
+    //             // let packet_len = Math.min(PACKET_SZ, DATA_SZ - offset);
+    //             let packet_len = PACKET_SZ;
+    //             USBDevice.transferOut(1, chunk.slice(offset, offset + packet_len));
+    //             console.log("transferout", chunk.slice(offset, offset + packet_len));
+    //             offset += packet_len;
+    //             console.log("offset in transfer", offset)
+    //         }
+
+    //         // let result = await USBDevice.transferIn(1, 1048);
+
+    //         USBDevice.transferIn(1, 1048).then(result => {
+    //             console.log(result);
+    //             if ("OKAY" !== ab_to_str(result.data.buffer)) {
+    //                 throw new Error (`failed to send data on i: ${i}`, ab_to_str(result.data.buffer))
+    //             }
+    //         })
+    //     }) .then (()=> {
+    //         USBDevice.transferOut(1, str_to_arr("flash:all"))
+    //         .then(result => {
+    //             if ("OKAY" !== ab_to_str(result.data.buffer)) {
+    //                 throw new Error ("failed to send data:", ab_to_str(result.data.buffer))
+    //             }
+    //         })
+    //     })
+
+
+        // let hex_len = (chunk.length + 52).toString(16); // 52 comes from headers
+        // send_data(str_to_arr(`download:${hex_len}`), `DATA${hex_len}`);
+        // send_headers(chunk.length, i);
+        // console.log("sent headers")
+
+        // let offset=0;
+        // while (offset < chunk.length) {
+        //     // let packet_len = Math.min(PACKET_SZ, DATA_SZ - offset);
+        //     let packet_len = PACKET_SZ;
+        //     USBDevice.transferOut(1, chunk.slice(offset, offset + packet_len));
+        //     console.log("transferout", chunk.slice(offset, offset + packet_len));
+        //     offset += packet_len;
+        //     console.log("offset in transfer", offset)
+        // }
+
+        // // let result = await USBDevice.transferIn(1, 1048);
+
+        // // USBDevice.transferIn(1, 1048).then(result => {
+        // //     console.log(result);
+        // //     if ("OKAY" !== ab_to_str(result.data.buffer)) {
+        // //         throw new Error (`failed to send data on i: ${i}`, ab_to_str(result.data.buffer))
+        // //     }
+        // // })
+
+        // USBDevice.transferIn(1, 1048);
+        // flash_all();
+        // console.log("FLASH SUCCESS")
+    // }
+
+    
diff --git a/webusb/src/logic/notes.js b/webusb/src/logic/notes.js
new file mode 100644
index 00000000..27b2d845
--- /dev/null
+++ b/webusb/src/logic/notes.js
@@ -0,0 +1,76 @@
+let buffer = new Uint8Array();
+
+let decompress_sz = 1024*64;
+
+const callback = (decompressed) => {
+    let temp = new Uint8Array(buffer.length + decompressed.length);
+    temp.set(buffer, 0);
+    temp.set(decompressed, buffer.length);
+    buffer = temp;
+}
+
+const decompress = async(data) => {
+
+    if (!stream.begin()) {
+        console.log("stream.begin() error");
+        return null;
+    }
+
+    let offset = 0;
+    while (offset < data.length) {
+        let slice = data.slice(offset, offset + decompress_sz);
+        await stream.transform(slice, callback);
+
+        // do something with buffer after one round of transform
+        doSomething(buffer);
+        buffer = new Uint8Array();
+
+        offset += decompress_sz;
+    }
+
+    if (!stream.end(callback)) {
+        console.log("stream.end() error");
+        return null;
+    }
+}
+
+/**
+hi ricky, sorry to bother you again, but I was wondering what you would do if you ended up with a buffer that is too big.
+
+what we are trying to do right now is save a buffer after one round of stream.transform, then process the buffer.
+
+the reason is because each stream.transform calls callback multiple times. then, we can't do any reading/writing to the usb within callback, because
+the stream.transform function currently doesn't wait on each callback to finish before executing the next callback (we must send output and read input
+in a certain order). So what we are trying right now is saving all the decompressed data from one call of stream.transform, then so all the reading/writing we need from that decompressed data.
+
+the problem right now is that the last transform results in an
+arraybuffer that is too large (700 MB), because the last part that is decompressed is a lot of zeroes, which are compressed compactly. 
+
+I'm wondering if you have suggestions on how to deal with this?
+ */
+
+
+function sleep(ms) {
+    let p1 = new Promise(resolve => setTimeout(resolve, ms));
+    let p2 = p1.then(() => {
+        console.log('after first setTimeout')
+        return (
+            new Promise(resolve => setTimeout(resolve, ms))
+        )
+    });
+    return p2.then(()=> new Promise.resolve("hello")); // returns a promise
+  }
+  
+   
+  
+  // Usage:
+  console.log("Start");
+  
+  (async () => {
+    for (let i=0; i<3; i++) {
+        let res = await sleep(2000); // Sleep for 2 seconds
+        console.log(res);
+    }
+    console.log("End");
+  })();
+
diff --git a/webusb/src/logic/reduced.js b/webusb/src/logic/reduced.js
new file mode 100644
index 00000000..0399e9d1
--- /dev/null
+++ b/webusb/src/logic/reduced.js
@@ -0,0 +1,95 @@
+/*
+
+GOAL: 
+
+process a chunk's worth of data and send it through USB, one chunk after another :
+chunk1
+chunk2
+chunk3...
+
+when a chunk's worth of data has been decompressed, 
+do 'process_chunk' on it
+before decompressing more
+
+
+PROBLEM: 
+
+making 'callback' an async function, like
+```
+const callback = async(decompressed) => { 
+    ...
+    await process_chunk(curr_chunk);
+}
+
+```
+still batches all the 'process_chunk' events until the end
+
+*/
+
+
+const process_chunk = async(chunk, i) => {
+    // call functions on chunk that do asynchronous stuff to chunk
+    // 'transferData' is an async function
+    await transferData(chunk)
+}
+
+const decompressFileToTransform = async(file) => {
+    let data = new Uint8Array(await file.arrayBuffer());
+
+
+    /* CALLBACK FUNCTION USED BY ZSTD-CODEC */
+
+    let curr_chunk = new Uint8Array(DATA_SZ);
+    let curr_chunk_offset = 0;
+
+    const callback = (decompressed) => { // 'decompressed' is an Uint8Array, usually 131072 bytes
+        while(curr_chunk_offset + decompressed.length >= DATA_SZ) { // 'DATA_SZ' is num of bytes in a chunk
+            curr_chunk.set(decompressed.slice(0, DATA_SZ - curr_chunk_offset), curr_chunk_offset);
+            
+            process_chunk(curr_chunk);
+
+            curr_chunk_offset = 0;
+            decompressed = decompressed.slice(DATA_SZ - curr_chunk_offset, decompressed.length);
+        }
+
+        curr_chunk.set(decompressed, curr_chunk_offset);
+        curr_chunk_offset += decompressed.length;
+    }
+
+
+    /* 
+        ZSTD-CODEC: https://github.com/yoshihitoh/zstd-codec
+
+        sends decompressed data to 'callback' function
+    */
+   
+    const stream = new binding.ZstdDecompressStreamBinding();
+
+    if (!stream.begin()) {
+        console.log("stream.begin() error");
+        return null;
+    }
+
+    console.log("start unzipping");
+
+    let i = 0;
+    const size = 1024*1024*2; // 2MB of data at a time
+    while (size*i < data.length) {
+        let end = Math.min(size*(i+1), data.length);
+        let slice = data.slice(size*i, end);
+
+        if (!stream.transform(slice, callback)) {
+            console.log(`stream.transform() error on slice ${size*i} to ${end}`);
+            return null;
+        }
+
+        i++;
+    }
+
+    if (!stream.end(callback)) {
+        console.log("stream.end() error");
+        return null;
+    }
+
+    console.log("finishing unzipping");
+}
\ No newline at end of file
diff --git a/webusb/src/logic/useDecompress.js b/webusb/src/logic/useDecompress.js
index 7a6f23cd..78a83196 100644
--- a/webusb/src/logic/useDecompress.js
+++ b/webusb/src/logic/useDecompress.js
@@ -151,12 +151,13 @@ const useDecompress = (flashFile) => {
         }
 
         const stream = new binding.ZstdDecompressStreamBinding();
-        const transform = new TransformStream();
-        const writer = transform.writable.getWriter();
+        // const transform = new TransformStream();
+        // const writer = transform.writable.getWriter();
 
         const callback = (decompressed) => {
-            totalBytes += decompressed.length;
-            writer.write(decompressed);
+            // totalBytes += decompressed.length;
+            // writer.write(decompressed);
+            console.log(decompressed);
         }
 
         if (!stream.begin()) {
@@ -185,10 +186,10 @@ const useDecompress = (flashFile) => {
             return null;
         }
 
-        console.log("finishing unzipping");
+        // console.log("finishing unzipping");
 
-        const readable = transform.readable;
-        doFlash(readable, PACKET_SZ, totalBytes);
+        // const readable = transform.readable;
+        // doFlash(readable, PACKET_SZ, totalBytes);
     }
 
     const doFlash = async(readable, size, totalSize) => {
diff --git a/webusb/src/logic/useDecompress2.js b/webusb/src/logic/useDecompress2.js
new file mode 100644
index 00000000..bbfb719f
--- /dev/null
+++ b/webusb/src/logic/useDecompress2.js
@@ -0,0 +1,339 @@
+
+import {useEffect, useState} from 'react';
+import {str_to_arr, ab_to_str} from '../helper/functions.js'
+import {CHUNK_SZ, BLK_SZ, CHUNK_TYPE_RAW, CHUNK_TYPE_DONT_CARE, build_sparse_header, build_chunk_header} from '../helper/sparse.js'
+
+const USBrequestParams = { filters: [{ vendorId: 8137, productId: 0x0152 }] };
+
+const PACKET_SZ = 0x10000;
+const DATA_SZ = CHUNK_SZ * BLK_SZ; // in bytes
+
+let promises = [];
+let promise1 = Promise.resolve(0)
+
+let cap = 2;
+
+const useDecompress2 = (flashFile) => {
+    const [USBDevice, setUSBDevice] = useState();
+    const [flashProgress, setFlashProgress] = useState();
+    const [flashTotal, setFlashTotal] = useState();
+
+    useEffect (()=> {
+        if (USBDevice) {
+            USBDevice.open().then(()=>{
+                console.log(`Opened USB Device: ${USBDevice.productName}`);
+            }, (err)=> {
+                console.log(err)
+            })
+            .then(()=> {
+                if (flashFile)
+                    decompressFileToTransform();
+            })
+        }
+
+    }, [USBDevice])
+
+    const requestUSBDevice = () => { // first thing called with button
+        navigator.usb
+        .requestDevice(USBrequestParams)
+        .then((device) => {
+            setUSBDevice(device);
+        })
+        .catch((e) => {
+            console.error(`There is no device. ${e}`);
+        });
+    }   
+
+    /*
+        breaking down this function:
+        USBDevice.claimInterface is an async function that would run off to the side
+        BUT if we await it, then we wait for it to finish
+        only then can we send any data to the usb, because we have claimed an interface
+
+        await USBDevice.claimInterface is the same as saying:
+        USBDevice.claimInterface() returns a Promise, and then on the .then(),
+        you can follow up with things
+        ...
+        otherwise, claimInterface is an async function that runs off to the side
+    */
+
+    async function preBoot () {
+        console.log("start preBoot");
+        await USBDevice.claimInterface(0);
+
+        send_data(str_to_arr("UCmd:setenv fastboot_dev mmc"), "OKAY");
+        send_data(str_to_arr("UCmd:setenv mmcdev ${emmc_dev}"), "OKAY");
+        send_data(str_to_arr("UCmd:mmc dev ${emmc_dev}"), "OKAY");
+
+        console.log("preboot complete")
+    }
+
+    async function send_headers(raw_data_bytelength, i) {
+        console.log("start send_headers", i);
+        let sparse = build_sparse_header(raw_data_bytelength, i);
+        let dont_care = build_chunk_header(CHUNK_TYPE_DONT_CARE, raw_data_bytelength, i);
+        let raw = build_chunk_header(CHUNK_TYPE_RAW, raw_data_bytelength, i);
+
+        let headers = new Uint8Array(52);
+        headers.set(sparse, 0);
+        headers.set(dont_care, 28);
+        headers.set(raw, 40);
+
+        await USBDevice.transferOut(1, headers);
+        console.log("sent headers", headers);
+    }
+
+    async function send_packet(raw_data) {
+        // console.log("start send_packet", raw_data);
+        await USBDevice.transferOut(1, raw_data);
+        // console.log("sent packet", raw_data);
+    }
+
+    /*
+    * data: string or arraybuffer
+    * success_str: checks response of usb
+    * Throws error if USB input does not match success_str
+    */
+    async function send_data(data, success_str) {
+        console.log("start send_data", data);
+        await USBDevice.transferOut(1, data);
+        console.log("after transferOut", data);
+
+        let result = await USBDevice.transferIn(1, 1048);
+
+        if (success_str !== ab_to_str(result.data.buffer)) {
+            console.log('err with', data);
+            console.log('err message', result.data.buffer);
+            throw new Error ("failed to send data:",ab_to_str(result.data.buffer))
+        }
+        else {
+            console.log("sent data", data);
+        }
+    }
+
+    async function flash_all () {
+        await send_data(str_to_arr("flash:all"), "OKAY");
+        console.log("sent flash");
+    }
+
+    async function checkTransferIn (success_str) {
+        console.log("start check transferIn");
+        // let data = new ArrayBuffer()
+        // await USBDevice.transferOut(1, data);
+        // console.log("after transferOut", data);
+
+        let result = await USBDevice.transferIn(1, 1048);
+        console.log("after transferIn")
+        if (success_str != ab_to_str(result.data.buffer)) {
+            console.log('err with DONWLOAD OKAY');
+            console.log('err message', result.data.buffer);
+            throw new Error ("failed to send data:", ab_to_str(result.data.buffer))
+        }
+        else {
+            console.log("transferIn success with", result.data.buffer);
+        }
+    }
+    
+    
+    const process_chunk = (chunk, i) => {
+        console.log("process chunk", chunk);
+
+        let hex_len = (chunk.length + 52).toString(16); // 52 comes from headers
+
+        //WAITS FOR RESPONSE
+        send_data(str_to_arr(`download:${hex_len}`), `DATA${hex_len}`); //scheduleing the writes
+
+        send_headers(chunk.length, i);
+
+        let offset=0;
+        while (offset < chunk.length) {
+            // let packet_len = Math.min(PACKET_SZ, DATA_SZ - offset);
+            let packet_len = PACKET_SZ;
+            let packet = chunk.slice(offset, offset + packet_len);
+            // USBDevice.transferOut(1, chunk.slice(offset, offset + packet_len));
+            send_packet(packet);
+            // console.log("transferout", chunk.slice(offset, offset + packet_len));
+            offset += packet_len;
+            // console.log("offset in transfer", offset)
+        }
+
+        // WAITS FOR RESPONSE
+        checkTransferIn('OKAY');
+
+        //WAITS FOR RESPONSE
+        flash_all();
+        // console.log("FLASH SUCCESS")
+    }
+
+    const step_1 = (chunk) => {
+        console.log('executing step_1', chunk);
+        let hex_len = (chunk.length + 52).toString(16); // 52 comes from headers
+
+        //WAITS FOR RESPONSE
+        let success_str = `DATA${hex_len}`;
+        // return new Promise((resolve, reject)=> {
+        //     // send_data(str_to_arr(`download:${hex_len}`), `DATA${hex_len}`); //original write message
+        //     send_packet(str_to_arr(`download:${hex_len}`)).then(()=> {
+        //         USBDevice.transferIn(1, 1048).then(result => {
+        //             if (success_str !== ab_to_str(result.data.buffer)) {
+        //                 console.log('err with', chunk);
+        //                 console.log('err message', result.data.buffer);
+        //                 reject(`error trying to send ${chunk}. error message: ${result.data.buffer}`)
+        //             }
+        //             else {
+        //                 resolve(`sent data, ${chunk}`);
+        //             }
+        //         })
+        //     })
+
+        // })
+        USBDevice.transferOut(1, str_to_arr(`download:${hex_len}`));
+    }
+
+    //for reference:
+
+    // const process_chunk = async(data, curr_len, i) => {
+    //     console.log(data, curr_len, i);
+
+    //     // ignore, fill with zeroes
+    //     if (curr_len != data.length) {
+    //         let fill_len = (Math.ceil(curr_len/BLK_SZ)*BLK_SZ - curr_len);
+    //         // let fill = new Uint8Array(fill_len);
+    //         data.set(curr_len, new Uint8Array(fill_len));
+    //         data = data.slice(0, curr_len+fill_len);
+    //     }
+
+    //     let hex_len = (data.length + 52).toString(16); // 52 comes from headers
+    //     await send_data(await str_to_arr(`download:${hex_len}`), `DATA${hex_len}`);
+    //     await send_headers(data.length, i);
+
+    //     let offset=0;
+    //     while (offset < data.length) {
+    //         let packet_len = Math.min(PACKET_SZ, DATA_SZ - offset);
+    //         await USBDevice.transferOut(1, data.slice(offset, offset + packet_len));
+    //         console.log("transferout", data.slice(offset, offset + packet_len));
+    //         offset += packet_len;
+    //     }
+
+    //     let result = await USBDevice.transferIn(1, 1048);
+    //     if ("OKAY" !== await ab_to_str(result.data.buffer)) {
+    //         throw new Error ("failed to send data:", await ab_to_str(result.data.buffer))
+    //     }
+
+    //     await flash_all();
+    //     console.log("FLASH SUCCESS")
+    // }
+
+
+    const decompressFileToTransform = async() => {
+        console.log("decompressFileToTransform");
+        console.log("USBDevice", USBDevice);
+
+        preBoot();
+
+        if (!flashFile) return;
+
+        console.log("file", flashFile)
+        const file = flashFile;
+        let data = new Uint8Array(await file.arrayBuffer());
+        let totalBytes = 0;
+        console.log(data)
+
+        if (!window.binding) {
+            console.log("no binding");
+            return;
+        }
+
+        let num_callbacks = 0;
+        let num_chunks = 0;
+        let curr_chunk = new Uint8Array(DATA_SZ);
+        let curr_chunk_offset = 0;
+
+        const stream = new binding.ZstdDecompressStreamBinding();
+
+        const callback = (decompressed) => {
+            console.log(promise1);
+            promise1.then(async(message)=> {
+                //  if (num_chunks==cap) return;
+                // console.log("num_chunks", num_chunks);
+                console.log(message);
+                promise1 = Promise.resolve(0);
+
+                totalBytes += decompressed.length;
+                while(curr_chunk_offset + decompressed.length >= DATA_SZ) {
+                    curr_chunk.set(decompressed.slice(0, DATA_SZ - curr_chunk_offset), curr_chunk_offset);
+
+                    // process_chunk(curr_chunk.length, num_chunks);
+
+                    console.log('hi');
+                    step_1(curr_chunk, num_chunks);
+                    let result = await USBDevice.transferIn(1, 1048);
+                    console.log('result', result);
+                    console.log('curr chunk', curr_chunk);
+                    await send_headers(curr_chunk.length, num_chunks);
+                    // await send_chunk_by_packets(chunk);
+                    
+                    
+                    curr_chunk_offset = 0;
+                    decompressed = decompressed.slice(DATA_SZ - curr_chunk_offset, decompressed.length);
+                    num_chunks++;
+                }
+                curr_chunk.set(decompressed, curr_chunk_offset);
+                curr_chunk_offset += decompressed.length;
+                num_callbacks++;
+            })
+        }
+
+        const end_callback = () => {
+            console.log("end");
+            console.log(totalBytes);
+
+            console.log(curr_chunk, curr_chunk_offset) // different
+            curr_chunk = curr_chunk.slice(0, curr_chunk_offset);
+            console.log(curr_chunk);
+        }
+
+        console.log("start unzipping");
+
+        if (!stream.begin()) {
+            console.log("stream.begin() error");
+            return null;
+        }
+
+        let i = 0;
+        const size = 1024*1024*2; // 2MB of data at a time
+        // while (size*i < data.length) {
+        while (size*i < data.length) {
+            let end = Math.min(size*(i+1), data.length);
+            let slice = data.slice(size*i, end);
+
+            console.log("loop running transform")
+            if (!stream.transform(slice, callback)) {
+                console.log(`stream.transform() error on slice ${size*i} to ${end}`);
+                return null;
+            }
+            // console.log(`transform on ${size*i} to ${end}`);
+
+            i++;
+        }
+
+        if (!stream.end(callback)) {
+            console.log("stream.end() error");
+            return null;
+        }
+
+        // // end_callback();
+
+        // console.log("finishing unzipping");
+
+        // console.log(num_callbacks);
+        // console.log(num_chunks);
+    }
+
+    return [{
+        requestUSBDevice,
+        decompressFileToTransform
+    }]
+}
+
+export default useDecompress2;
diff --git a/webusb/src/logic/useDecompress3.js b/webusb/src/logic/useDecompress3.js
new file mode 100644
index 00000000..8bc9d91e
--- /dev/null
+++ b/webusb/src/logic/useDecompress3.js
@@ -0,0 +1,342 @@
+
+import {useEffect, useState} from 'react';
+import {str_to_arr, ab_to_str} from '../helper/functions.js'
+import {CHUNK_SZ, BLK_SZ, CHUNK_TYPE_RAW, CHUNK_TYPE_DONT_CARE, build_sparse_header, build_chunk_header} from '../helper/sparse.js'
+
+const USBrequestParams = { filters: [{ vendorId: 8137, productId: 0x0152 }] };
+
+const PACKET_SZ = 0x10000;
+const DATA_SZ = CHUNK_SZ * BLK_SZ; // in bytes
+
+let cap = 2;
+
+const useDecompress3 = (flashFile) => {
+    const [USBDevice, setUSBDevice] = useState();
+    const [flashProgress, setFlashProgress] = useState();
+    const [flashTotal, setFlashTotal] = useState();
+
+    useEffect (()=> {
+        if (USBDevice) {
+            USBDevice.open().then(()=>{
+                console.log(`Opened USB Device: ${USBDevice.productName}`);
+            }, (err)=> {
+                console.log(err)
+            })
+            .then(()=> {
+                if (flashFile)
+                    decompressFileToTransform();
+            })
+        }
+
+    }, [USBDevice])
+
+    const requestUSBDevice = () => { // first thing called with button
+        navigator.usb
+        .requestDevice(USBrequestParams)
+        .then((device) => {
+            setUSBDevice(device);
+        })
+        .catch((e) => {
+            console.error(`There is no device. ${e}`);
+        });
+    }   
+
+    /*
+        breaking down this function:
+        USBDevice.claimInterface is an async function that would run off to the side
+        BUT if we await it, then we wait for it to finish
+        only then can we send any data to the usb, because we have claimed an interface
+
+        await USBDevice.claimInterface is the same as saying:
+        USBDevice.claimInterface() returns a Promise, and then on the .then(),
+        you can follow up with things
+        ...
+        otherwise, claimInterface is an async function that runs off to the side
+    */
+
+    async function preBoot () {
+        console.log("start preBoot");
+        await USBDevice.claimInterface(0);
+
+        send_data(str_to_arr("UCmd:setenv fastboot_dev mmc"), "OKAY");
+        send_data(str_to_arr("UCmd:setenv mmcdev ${emmc_dev}"), "OKAY");
+        send_data(str_to_arr("UCmd:mmc dev ${emmc_dev}"), "OKAY");
+
+        console.log("preboot complete")
+    }
+
+    async function send_headers(raw_data_bytelength, i) {
+        console.log("start send_headers", i);
+        let sparse = build_sparse_header(raw_data_bytelength, i);
+        let dont_care = build_chunk_header(CHUNK_TYPE_DONT_CARE, raw_data_bytelength, i);
+        let raw = build_chunk_header(CHUNK_TYPE_RAW, raw_data_bytelength, i);
+
+        let headers = new Uint8Array(52);
+        headers.set(sparse, 0);
+        headers.set(dont_care, 28);
+        headers.set(raw, 40);
+
+        await USBDevice.transferOut(1, headers);
+        console.log("sent headers", headers);
+    }
+
+    async function send_packet(raw_data, flag="", callback) {
+        console.log("start send_packet", raw_data, flag);
+        USBDevice.transferOut(1, raw_data);
+        callback();
+    }
+
+    /*
+    * data: string or arraybuffer
+    * success_str: checks response of usb
+    * Throws error if USB input does not match success_str
+    */
+    async function send_data(data, success_str) {
+        console.log("start send_data", data);
+        await USBDevice.transferOut(1, data);
+        console.log("after transferOut", data);
+
+        let result = await USBDevice.transferIn(1, 1048);
+
+        if (success_str !== ab_to_str(result.data.buffer)) {
+            console.log('err with', data);
+            console.log('err message', result.data.buffer);
+            throw new Error ("failed to send data:",ab_to_str(result.data.buffer))
+        }
+        else {
+            console.log("after transferIn for", data);
+        }
+    }
+
+    async function wait_reply(data, success_str) {
+        let result = await USBDevice.transferIn(1, 1048);
+
+        if (success_str !== ab_to_str(result.data.buffer)) {
+            console.log('err with', data);
+            console.log('err message', result.data.buffer);
+            throw new Error ("failed to send data:",ab_to_str(result.data.buffer))
+        }
+        else {
+            console.log("after transferIn for", data);
+        }
+    }
+
+    async function flash_all () {
+        await send_data(str_to_arr("flash:all"), "OKAY");
+        console.log("sent flash");
+    }
+
+    function dostuff (chunk) {
+        //last packet: receive "OKAY" after
+        send_packet(chunk.slice(chunk.length-PACKET_SZ), `${chunk.length/PACKET_SZ - 1}, last`);
+        wait_reply(chunk.slice(chunk.length-PACKET_SZ), "OKAY");
+
+        //flash: receive "OKAY" after
+        send_packet(str_to_arr("flash:all"));
+        wait_reply(str_to_arr("flash:all"), "OKAY");
+    }
+    
+    const process_chunk2 = (chunk, i) => {
+        console.log("process chunk", chunk);
+
+        let hex_len = (chunk.length + 52).toString(16); // 52 comes from headers
+
+        // before any writes: receive `DATA${length}` after
+        send_packet(str_to_arr(`download:${hex_len}`));
+        wait_reply(str_to_arr(`download:${hex_len}`), `DATA${hex_len}`);
+
+        send_headers(chunk.length, i);
+
+        let offset=0;
+        while (offset < (chunk.length - PACKET_SZ)) {
+            // let packet_len = Math.min(PACKET_SZ, DATA_SZ - offset);
+            let packet_len = PACKET_SZ;
+            let packet = chunk.slice(offset, offset + packet_len);
+           
+            send_packet(packet, offset/PACKET_SZ);
+        
+            offset += packet_len;
+        }
+
+        dostuff(chunk);
+        
+    }
+
+    //for reference:
+
+    const process_chunk_doesnt = (data, curr_len, i) => {
+        console.log(data, curr_len, i);
+
+        let hex_len = (data.length + 52).toString(16); // 52 comes from headers
+        send_data(str_to_arr(`download:${hex_len}`), `DATA${hex_len}`);
+        send_headers(data.length, i);
+
+        let last_packet_i = data.length/PACKET_SZ-1;
+        for (let i=0; i<last_packet_i; i++) {
+            let packet_len = PACKET_SZ;
+            let packet = data.slice(i*PACKET_SZ, i*PACKET_SZ + packet_len);
+            send_packet(packet);
+        }
+        let last_packet = data.slice((last_packet_i)*PACKET_SZ);
+        send_data(last_packet, "OKAY")
+
+        flash_all();
+    }
+
+    const process_chunk = (data, curr_len, i) => {
+        console.log(data, curr_len, i);
+
+        let hex_len = (data.length + 52).toString(16); // 52 comes from headers
+        USBDevice.transferOut(1, str_to_arr(`download:${hex_len}`)).then(()=> {
+            USBDevice.transferIn(1, 1048).then(result => {
+                console.log(result);
+
+                if (`DATA${hex_len}` !== ab_to_str(result.data.buffer)) {
+                    console.log('err with', data);
+                    console.log('err message', result.data.buffer);
+                    throw new Error ("failed to send data:",ab_to_str(result.data.buffer))
+                }
+                else {
+                    console.log("sent data", data);
+                }
+            })
+        })
+        
+        send_headers(data.length, i);
+
+        let last_packet_i = data.length/PACKET_SZ-1;
+        for (let i=0; i<last_packet_i; i++) {
+            let packet_len = PACKET_SZ;
+            let packet = data.slice(i*PACKET_SZ, i*PACKET_SZ + packet_len);
+            USBDevice.transferOut(1, packet);
+        }
+        let last_packet = data.slice((last_packet_i)*PACKET_SZ);
+
+        USBDevice.transferOut(1, last_packet).then(()=> {
+            USBDevice.transferIn(1, 1048).then(result => {
+                console.log(result);
+
+                if ('OKAY' !== ab_to_str(result.data.buffer)) {
+                    console.log('err with', data);
+                    console.log('err message', result.data.buffer);
+                    throw new Error ("failed to send data:",ab_to_str(result.data.buffer))
+                }
+                else {
+                    console.log("sent data", data);
+                }
+            })
+        })
+        
+        USBDevice.transferOut(1, str_to_arr("flash:all")).then(()=> {
+            USBDevice.transferIn(1, 1048).then(result => {
+                console.log(result);
+
+                if ('OKAY' !== ab_to_str(result.data.buffer)) {
+                    console.log('err with', data);
+                    console.log('err message', result.data.buffer);
+                    throw new Error ("failed to send data:",ab_to_str(result.data.buffer))
+                }
+                else {
+                    console.log("sent data", data);
+                }
+            })
+        })
+    }
+
+    const decompressFileToTransform = async() => {
+        console.log("decompressFileToTransform");
+        console.log("USBDevice", USBDevice);
+
+        preBoot();
+
+        if (!flashFile) return;
+
+        console.log("file", flashFile)
+        const file = flashFile;
+        let data = new Uint8Array(await file.arrayBuffer());
+        let totalBytes = 0;
+        console.log(data)
+
+        if (!window.binding) {
+            console.log("no binding");
+            return;
+        }
+
+        let num_callbacks = 0;
+        let num_chunks = 0;
+        let curr_chunk = new Uint8Array(DATA_SZ);
+        let curr_chunk_offset = 0;
+
+        const stream = new binding.ZstdDecompressStreamBinding();
+
+        const callback = (decompressed) => {
+            if (num_chunks==cap) return;
+            totalBytes += decompressed.length;
+            while(curr_chunk_offset + decompressed.length >= DATA_SZ) {
+                curr_chunk.set(decompressed.slice(0, DATA_SZ - curr_chunk_offset), curr_chunk_offset);
+
+                // process_chunk(curr_chunk, DATA_SZ, num_chunks);
+                process_chunk2(curr_chunk, num_chunks);
+                
+                curr_chunk_offset = 0;
+                decompressed = decompressed.slice(DATA_SZ - curr_chunk_offset, decompressed.length);
+                num_chunks++;
+            }
+            curr_chunk.set(decompressed, curr_chunk_offset);
+            curr_chunk_offset += decompressed.length;
+            num_callbacks++;
+        }
+
+        const end_callback = () => {
+            console.log("end");
+            console.log(totalBytes);
+
+            console.log(curr_chunk, curr_chunk_offset) // different
+            curr_chunk = curr_chunk.slice(0, curr_chunk_offset);
+            console.log(curr_chunk);
+        }
+
+        console.log("start unzipping");
+
+        if (!stream.begin()) {
+            console.log("stream.begin() error");
+            return null;
+        }
+
+        let i = 0;
+        const size = 1024*1024*2; // 2MB of data at a time
+        // while (size*i < data.length) {
+        while (size*i < data.length) {
+            let end = Math.min(size*(i+1), data.length);
+            let slice = data.slice(size*i, end);
+
+            console.log("loop running transform")
+            if (!stream.transform(slice, callback)) {
+                console.log(`stream.transform() error on slice ${size*i} to ${end}`);
+                return null;
+            }
+            // console.log(`transform on ${size*i} to ${end}`);
+
+            i++;
+        }
+
+        if (!stream.end(callback)) {
+            console.log("stream.end() error");
+            return null;
+        }
+
+        // // end_callback();
+
+        // console.log("finishing unzipping");
+
+        // console.log(num_callbacks);
+        // console.log(num_chunks);
+    }
+
+    return [{
+        requestUSBDevice,
+        decompressFileToTransform
+    }]
+}
+
+export default useDecompress3;
diff --git a/webusb/src/logic/useDecompress4.js b/webusb/src/logic/useDecompress4.js
new file mode 100644
index 00000000..1167df1a
--- /dev/null
+++ b/webusb/src/logic/useDecompress4.js
@@ -0,0 +1,229 @@
+
+import {useEffect, useState} from 'react';
+import {str_to_arr, ab_to_str} from '../helper/functions.js'
+import {CHUNK_SZ, BLK_SZ, CHUNK_TYPE_RAW, CHUNK_TYPE_DONT_CARE, build_sparse_header, build_chunk_header} from '../helper/sparse.js'
+
+const USBrequestParams = { filters: [{ vendorId: 8137, productId: 0x0152 }] };
+
+const PACKET_SZ = 0x10000;
+const DATA_SZ = CHUNK_SZ * BLK_SZ; // in bytes
+
+let cap = 2;
+
+const decompress_sz = 1024*64;
+let totalBytes = 0;
+
+let buffer = new Uint8Array();
+
+const useDecompress4 = (flashFile) => {
+    const [USBDevice, setUSBDevice] = useState();
+    const [flashProgress, setFlashProgress] = useState();
+    const [flashTotal, setFlashTotal] = useState();
+    const [stream, setStream] = useState();
+    const [decompress_i, setDecompress_i] = useState(0);
+
+    useEffect (()=> {
+        if (USBDevice) {
+            USBDevice.open().then(()=>{
+                console.log(`Opened USB Device: ${USBDevice.productName}`);
+            }, (err)=> {
+                console.log(err)
+            })
+            .then(()=> {
+                if (flashFile)
+                    decompressFileToTransform();
+            })
+        }
+
+    }, [USBDevice])
+
+    useEffect(()=> {
+        setTimeout(()=> { // takes a while for this to load?
+            const s = new binding.ZstdDecompressStreamBinding();
+            setStream(s);
+        }, 500)
+    }, [])
+
+    
+    const requestUSBDevice = () => { // first thing called with button
+        navigator.usb
+        .requestDevice(USBrequestParams)
+        .then((device) => {
+            setUSBDevice(device);
+        })
+        .catch((e) => {
+            console.error(`There is no device. ${e}`);
+        });
+    }   
+    async function send_data(data, success_str) {
+        await USBDevice.transferOut(1, data);
+        let result = await USBDevice.transferIn(1, 1048);
+
+        if (success_str !== ab_to_str(result.data.buffer)) {
+            console.log('err message', result.data.buffer);
+            throw new Error ("failed to send data:", ab_to_str(result.data.buffer))
+        }
+        else {
+            console.log("transfer in reply after sending", data);
+        }
+    }
+
+    async function preBoot () {
+        await USBDevice.claimInterface(0);
+
+        await send_data(str_to_arr("UCmd:setenv fastboot_dev mmc"), "OKAY");
+        await send_data(str_to_arr("UCmd:setenv mmcdev ${emmc_dev}"), "OKAY");
+        await send_data(str_to_arr("UCmd:mmc dev ${emmc_dev}"), "OKAY");
+
+        console.log("preboot complete")
+    }
+
+    /*
+    * data: string or arraybuffer
+    * success_str: checks response of usb
+    * Throws error if USB input does not match success_str
+    */
+    
+    /// new stuff
+
+    const appendBuffer = (new_buffer) => {
+        console.log("length", buffer.length + new_buffer.length);
+        let temp = new Uint8Array(buffer.length + new_buffer.length);
+        temp.set(buffer, 0);
+        temp.set(new_buffer, buffer.length);
+        // console.log("temp, buffer so far", temp);
+        buffer = temp;
+    }
+
+    const callback = (decompressed) => {
+        // console.log("callback")
+
+        // if (decompressed.length + buffer.length < DATA_SZ) {
+        //     appendBuffer(decompressed);
+        // }
+
+        // let padCount = DATA_SZ - buffer.length;
+        // appendBuffer(decompressed.slice(0, padCount));
+        // console.log(buffer); // do something
+
+        // setBuffer(decompressed.slice(padCount));
+        // while (true) {
+        //     console.log(buffer.slice(0, DATA_SZ));
+        //     let temp = buffer.slice(DATA_SZ);
+
+        //     if (temp.length<DATA_SZ) {
+        //         setBuffer(temp);
+        //         break;
+        //     }
+        // }
+
+        // appendBuffer(decompressed);
+        // let temp = new Uint8Array(buffer.length + decompressed.length);
+        // temp.set(buffer, 0);
+        // temp.set(decompressed, buffer.length);
+        // buffer = temp;
+
+        // console.log(buffer);
+        // totalBytes += decompressed.length;
+        // console.log(totalBytes);
+
+        totalBytes+= decompressed.length;
+    }
+
+
+    const decompressFileToTransform = async() => {
+        console.log("binding", stream);
+        await preBoot(); // problem was you didn't reset the board
+        console.log("after preboot");
+
+        if (!flashFile) return;
+
+        const file = flashFile;
+        let data = new Uint8Array(await file.arrayBuffer());
+
+        if (!window.binding) {
+            console.log("no binding");
+            return;
+        }
+
+        // let num_callbacks = 0;
+        // let num_chunks = 0;
+        // let curr_chunk = new Uint8Array(DATA_SZ);
+        // let curr_chunk_offset = 0;
+
+        
+
+        // const callback = (decompressed) => {
+        //     if (num_chunks==cap) return;
+        //     totalBytes += decompressed.length;
+        //     while(curr_chunk_offset + decompressed.length >= DATA_SZ) {
+        //         curr_chunk.set(decompressed.slice(0, DATA_SZ - curr_chunk_offset), curr_chunk_offset);
+
+        //         // process_chunk(curr_chunk, DATA_SZ, num_chunks);
+        //         process_chunk2(curr_chunk, num_chunks);
+                
+        //         curr_chunk_offset = 0;
+        //         decompressed = decompressed.slice(DATA_SZ - curr_chunk_offset, decompressed.length);
+        //         num_chunks++;
+        //     }
+        //     curr_chunk.set(decompressed, curr_chunk_offset);
+        //     curr_chunk_offset += decompressed.length;
+        //     num_callbacks++;
+        // }
+
+        // console.log("start unzipping");
+
+        if (!stream.begin()) {
+            console.log("stream.begin() error");
+            return null;
+        }
+
+        let offset = 0;
+        while (offset < data.length) {
+            let slice = data.slice(offset, offset + decompress_sz);
+            let res = await stream.transform(slice, callback);
+
+            if (!res) {console.log("stream transform fail"); return null;}
+
+            // console.log("buffer after transform", buffer);
+            // buffer = new Uint8Array();
+            console.log("bytes after transform", totalBytes);
+            totalBytes = 0;
+            offset += decompress_sz;
+        }
+
+        if (!stream.end(callback)) {
+            console.log("stream.end() error");
+            return null;
+        }
+
+        // let i = 0;
+        // const size = 1024*1024*2; // 2MB of data at a time
+        // // while (size*i < data.length) {
+        // while (size*i < data.length) {
+        //     let end = Math.min(size*(i+1), data.length);
+        //     let slice = data.slice(size*i, end);
+
+        //     console.log("loop running transform")
+        //     if (!stream.transform(slice, callback)) {
+        //         console.log(`stream.transform() error on slice ${size*i} to ${end}`);
+        //         return null;
+        //     }
+        //     // console.log(`transform on ${size*i} to ${end}`);
+
+        //     i++;
+        // }
+
+        // if (!stream.end(callback)) {
+        //     console.log("stream.end() error");
+        //     return null;
+        // }
+    }
+
+    return [{
+        requestUSBDevice,
+        decompressFileToTransform
+    }]
+}
+
+export default useDecompress4;
diff --git a/webusb/src/logic/useHIDBoot.js b/webusb/src/logic/useHIDBoot.js
index 58ef82c3..069641cc 100644
--- a/webusb/src/logic/useHIDBoot.js
+++ b/webusb/src/logic/useHIDBoot.js
@@ -98,7 +98,7 @@ const useHIDBoot = (bootFile) => {
             const packet = await bootFile.slice(1024*i, 1024*i+len).arrayBuffer();
             await HIDdevice.sendReport(outputReportId, packet)
             setBootProgress((1024*i + len));
-            console.log(1024*i + len)
+            // console.log(1024*i + len)
         }
     }
 

From e311d6245e1c15f112224407928aea59c11513c5 Mon Sep 17 00:00:00 2001
From: Sarah Wang <sarah.wang_1@nxp.com>
Date: Mon, 7 Aug 2023 15:21:54 -0500
Subject: [PATCH 07/15] scuffed, but logic is correct

---
 webusb/src/components/Decompress2.js |   3 +-
 webusb/src/logic/useDecompress2.js   | 292 ++++++-----------------
 webusb/src/logic/useDecompress3.js   | 342 ---------------------------
 webusb/src/logic/useDecompress4.js   | 229 ------------------
 4 files changed, 69 insertions(+), 797 deletions(-)
 delete mode 100644 webusb/src/logic/useDecompress3.js
 delete mode 100644 webusb/src/logic/useDecompress4.js

diff --git a/webusb/src/components/Decompress2.js b/webusb/src/components/Decompress2.js
index dff33f35..904cb3c4 100644
--- a/webusb/src/components/Decompress2.js
+++ b/webusb/src/components/Decompress2.js
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react"
-import useDecompress4 from '../logic/useDecompress4'
+import useDecompress4 from '../logic/useDecompress2'
 import { DATA_SZ, BLK_SZ, PACKET_SZ } from "../helper/sparse";
 
 const Decompress2 = () => {
@@ -15,6 +15,7 @@ const Decompress2 = () => {
         console.log(window.binding);
     }, [])
 
+    // async test
     // useEffect(()=> {
     //     function sleep(ms) {
     //         let p1 = new Promise(resolve => setTimeout(resolve, ms));
diff --git a/webusb/src/logic/useDecompress2.js b/webusb/src/logic/useDecompress2.js
index bbfb719f..f12d06f3 100644
--- a/webusb/src/logic/useDecompress2.js
+++ b/webusb/src/logic/useDecompress2.js
@@ -44,19 +44,6 @@ const useDecompress2 = (flashFile) => {
         });
     }   
 
-    /*
-        breaking down this function:
-        USBDevice.claimInterface is an async function that would run off to the side
-        BUT if we await it, then we wait for it to finish
-        only then can we send any data to the usb, because we have claimed an interface
-
-        await USBDevice.claimInterface is the same as saying:
-        USBDevice.claimInterface() returns a Promise, and then on the .then(),
-        you can follow up with things
-        ...
-        otherwise, claimInterface is an async function that runs off to the side
-    */
-
     async function preBoot () {
         console.log("start preBoot");
         await USBDevice.claimInterface(0);
@@ -69,24 +56,11 @@ const useDecompress2 = (flashFile) => {
     }
 
     async function send_headers(raw_data_bytelength, i) {
-        console.log("start send_headers", i);
-        let sparse = build_sparse_header(raw_data_bytelength, i);
-        let dont_care = build_chunk_header(CHUNK_TYPE_DONT_CARE, raw_data_bytelength, i);
-        let raw = build_chunk_header(CHUNK_TYPE_RAW, raw_data_bytelength, i);
-
-        let headers = new Uint8Array(52);
-        headers.set(sparse, 0);
-        headers.set(dont_care, 28);
-        headers.set(raw, 40);
-
-        await USBDevice.transferOut(1, headers);
-        console.log("sent headers", headers);
+        
     }
 
     async function send_packet(raw_data) {
-        // console.log("start send_packet", raw_data);
-        await USBDevice.transferOut(1, raw_data);
-        // console.log("sent packet", raw_data);
+        
     }
 
     /*
@@ -95,148 +69,48 @@ const useDecompress2 = (flashFile) => {
     * Throws error if USB input does not match success_str
     */
     async function send_data(data, success_str) {
-        console.log("start send_data", data);
-        await USBDevice.transferOut(1, data);
-        console.log("after transferOut", data);
-
-        let result = await USBDevice.transferIn(1, 1048);
-
-        if (success_str !== ab_to_str(result.data.buffer)) {
-            console.log('err with', data);
-            console.log('err message', result.data.buffer);
-            throw new Error ("failed to send data:",ab_to_str(result.data.buffer))
-        }
-        else {
-            console.log("sent data", data);
-        }
+        
     }
 
     async function flash_all () {
-        await send_data(str_to_arr("flash:all"), "OKAY");
-        console.log("sent flash");
-    }
-
-    async function checkTransferIn (success_str) {
-        console.log("start check transferIn");
-        // let data = new ArrayBuffer()
-        // await USBDevice.transferOut(1, data);
-        // console.log("after transferOut", data);
-
-        let result = await USBDevice.transferIn(1, 1048);
-        console.log("after transferIn")
-        if (success_str != ab_to_str(result.data.buffer)) {
-            console.log('err with DONWLOAD OKAY');
-            console.log('err message', result.data.buffer);
-            throw new Error ("failed to send data:", ab_to_str(result.data.buffer))
-        }
-        else {
-            console.log("transferIn success with", result.data.buffer);
-        }
+       
     }
-    
-    
-    const process_chunk = (chunk, i) => {
-        console.log("process chunk", chunk);
-
-        let hex_len = (chunk.length + 52).toString(16); // 52 comes from headers
-
-        //WAITS FOR RESPONSE
-        send_data(str_to_arr(`download:${hex_len}`), `DATA${hex_len}`); //scheduleing the writes
-
-        send_headers(chunk.length, i);
-
-        let offset=0;
-        while (offset < chunk.length) {
-            // let packet_len = Math.min(PACKET_SZ, DATA_SZ - offset);
-            let packet_len = PACKET_SZ;
-            let packet = chunk.slice(offset, offset + packet_len);
-            // USBDevice.transferOut(1, chunk.slice(offset, offset + packet_len));
-            send_packet(packet);
-            // console.log("transferout", chunk.slice(offset, offset + packet_len));
-            offset += packet_len;
-            // console.log("offset in transfer", offset)
-        }
-
-        // WAITS FOR RESPONSE
-        checkTransferIn('OKAY');
-
-        //WAITS FOR RESPONSE
-        flash_all();
-        // console.log("FLASH SUCCESS")
-    }
-
-    const step_1 = (chunk) => {
-        console.log('executing step_1', chunk);
-        let hex_len = (chunk.length + 52).toString(16); // 52 comes from headers
-
-        //WAITS FOR RESPONSE
-        let success_str = `DATA${hex_len}`;
-        // return new Promise((resolve, reject)=> {
-        //     // send_data(str_to_arr(`download:${hex_len}`), `DATA${hex_len}`); //original write message
-        //     send_packet(str_to_arr(`download:${hex_len}`)).then(()=> {
-        //         USBDevice.transferIn(1, 1048).then(result => {
-        //             if (success_str !== ab_to_str(result.data.buffer)) {
-        //                 console.log('err with', chunk);
-        //                 console.log('err message', result.data.buffer);
-        //                 reject(`error trying to send ${chunk}. error message: ${result.data.buffer}`)
-        //             }
-        //             else {
-        //                 resolve(`sent data, ${chunk}`);
-        //             }
-        //         })
-        //     })
-
-        // })
-        USBDevice.transferOut(1, str_to_arr(`download:${hex_len}`));
-    }
-
-    //for reference:
-
-    // const process_chunk = async(data, curr_len, i) => {
-    //     console.log(data, curr_len, i);
-
-    //     // ignore, fill with zeroes
-    //     if (curr_len != data.length) {
-    //         let fill_len = (Math.ceil(curr_len/BLK_SZ)*BLK_SZ - curr_len);
-    //         // let fill = new Uint8Array(fill_len);
-    //         data.set(curr_len, new Uint8Array(fill_len));
-    //         data = data.slice(0, curr_len+fill_len);
-    //     }
-
-    //     let hex_len = (data.length + 52).toString(16); // 52 comes from headers
-    //     await send_data(await str_to_arr(`download:${hex_len}`), `DATA${hex_len}`);
-    //     await send_headers(data.length, i);
 
-    //     let offset=0;
-    //     while (offset < data.length) {
-    //         let packet_len = Math.min(PACKET_SZ, DATA_SZ - offset);
-    //         await USBDevice.transferOut(1, data.slice(offset, offset + packet_len));
-    //         console.log("transferout", data.slice(offset, offset + packet_len));
-    //         offset += packet_len;
-    //     }
+    // async test
+    async function dothingsinorder (a) {
+        console.log(a);
 
-    //     let result = await USBDevice.transferIn(1, 1048);
-    //     if ("OKAY" !== await ab_to_str(result.data.buffer)) {
-    //         throw new Error ("failed to send data:", await ab_to_str(result.data.buffer))
-    //     }
+        function sleep(i, ms){
+            let pq = new Promise((resolve, reject) => {
+                setTimeout(()=> {
+                    resolve("hi", i);
+                }, ms)
+            })
 
-    //     await flash_all();
-    //     console.log("FLASH SUCCESS")
-    // }
+            return pq;
+        }
+          // Usage:
 
+        for (let i=0; i<3; i++) {
+            await sleep(i, 2000); // Sleep for 2 seconds
+            console.log("end of", i)
+        }
 
-    const decompressFileToTransform = async() => {
-        console.log("decompressFileToTransform");
-        console.log("USBDevice", USBDevice);
+        console.log("end of ", a);
+    }
+        
 
-        preBoot();
+ 
+    const decompressFileToTransform = async(e) => {
+        console.log(USBDevice);
 
         if (!flashFile) return;
 
-        console.log("file", flashFile)
         const file = flashFile;
-        let data = new Uint8Array(await file.arrayBuffer());
+        let buff = await file.arrayBuffer()
+        let data = new Uint8Array(buff);
         let totalBytes = 0;
+
         console.log(data)
 
         if (!window.binding) {
@@ -244,90 +118,58 @@ const useDecompress2 = (flashFile) => {
             return;
         }
 
-        let num_callbacks = 0;
-        let num_chunks = 0;
-        let curr_chunk = new Uint8Array(DATA_SZ);
-        let curr_chunk_offset = 0;
-
         const stream = new binding.ZstdDecompressStreamBinding();
 
         const callback = (decompressed) => {
-            console.log(promise1);
-            promise1.then(async(message)=> {
-                //  if (num_chunks==cap) return;
-                // console.log("num_chunks", num_chunks);
-                console.log(message);
-                promise1 = Promise.resolve(0);
-
-                totalBytes += decompressed.length;
-                while(curr_chunk_offset + decompressed.length >= DATA_SZ) {
-                    curr_chunk.set(decompressed.slice(0, DATA_SZ - curr_chunk_offset), curr_chunk_offset);
-
-                    // process_chunk(curr_chunk.length, num_chunks);
-
-                    console.log('hi');
-                    step_1(curr_chunk, num_chunks);
-                    let result = await USBDevice.transferIn(1, 1048);
-                    console.log('result', result);
-                    console.log('curr chunk', curr_chunk);
-                    await send_headers(curr_chunk.length, num_chunks);
-                    // await send_chunk_by_packets(chunk);
-                    
-                    
-                    curr_chunk_offset = 0;
-                    decompressed = decompressed.slice(DATA_SZ - curr_chunk_offset, decompressed.length);
-                    num_chunks++;
-                }
-                curr_chunk.set(decompressed, curr_chunk_offset);
-                curr_chunk_offset += decompressed.length;
-                num_callbacks++;
-            })
-        }
-
-        const end_callback = () => {
-            console.log("end");
-            console.log(totalBytes);
-
-            console.log(curr_chunk, curr_chunk_offset) // different
-            curr_chunk = curr_chunk.slice(0, curr_chunk_offset);
-            console.log(curr_chunk);
+            console.log(decompressed);
         }
 
-        console.log("start unzipping");
-
         if (!stream.begin()) {
             console.log("stream.begin() error");
             return null;
         }
 
-        let i = 0;
-        const size = 1024*1024*2; // 2MB of data at a time
-        // while (size*i < data.length) {
-        while (size*i < data.length) {
-            let end = Math.min(size*(i+1), data.length);
-            let slice = data.slice(size*i, end);
-
-            console.log("loop running transform")
-            if (!stream.transform(slice, callback)) {
-                console.log(`stream.transform() error on slice ${size*i} to ${end}`);
-                return null;
-            }
-            // console.log(`transform on ${size*i} to ${end}`);
-
-            i++;
-        }
+        console.log("start unzipping");
 
-        if (!stream.end(callback)) {
-            console.log("stream.end() error");
-            return null;
-        }
+        let i = 0;
+        const size = 1024*1024*2;
+      
+        let end = Math.min(size*(i+1), data.length);
+        let chunk = data.slice(size*i, end);
 
-        // // end_callback();
+        let prev_chunk_offset = 0;
+        let curr_chunk_offset = 0;
 
-        // console.log("finishing unzipping");
+        let curr_pos = 0;
+
+        let pos = await stream.transform(chunk, 0, 0, callback);
+        await dothingsinorder("first");
+        curr_chunk_offset = prev_chunk_offset + pos;
+        curr_pos = 0 + pos;
+
+        console.log(curr_chunk_offset, curr_pos);
+
+        pos = await stream.transform(chunk, curr_chunk_offset, curr_pos, callback);
+        
+        console.log(pos)
+        if (pos == 0) {
+            // means you need to reset for a new src_bytes_
+            prev_chunk_offset = curr_chunk_offset; // because pos resets every src_bytes_ 
+            
+            pos = await stream.transform(chunk, curr_chunk_offset, 0, callback);
+            await dothingsinorder("second");
+            curr_pos = 0 + pos;
+            curr_chunk_offset = prev_chunk_offset + pos;
+            console.log(curr_pos, curr_chunk_offset);
+
+            pos = stream.transform(chunk, curr_chunk_offset, curr_pos, callback);
+            await dothingsinorder("third");
+        }
 
-        // console.log(num_callbacks);
-        // console.log(num_chunks);
+        // if (!stream.end(callback)) {
+        //     console.log("stream.end() error");
+        //     return null;
+        // }
     }
 
     return [{
diff --git a/webusb/src/logic/useDecompress3.js b/webusb/src/logic/useDecompress3.js
deleted file mode 100644
index 8bc9d91e..00000000
--- a/webusb/src/logic/useDecompress3.js
+++ /dev/null
@@ -1,342 +0,0 @@
-
-import {useEffect, useState} from 'react';
-import {str_to_arr, ab_to_str} from '../helper/functions.js'
-import {CHUNK_SZ, BLK_SZ, CHUNK_TYPE_RAW, CHUNK_TYPE_DONT_CARE, build_sparse_header, build_chunk_header} from '../helper/sparse.js'
-
-const USBrequestParams = { filters: [{ vendorId: 8137, productId: 0x0152 }] };
-
-const PACKET_SZ = 0x10000;
-const DATA_SZ = CHUNK_SZ * BLK_SZ; // in bytes
-
-let cap = 2;
-
-const useDecompress3 = (flashFile) => {
-    const [USBDevice, setUSBDevice] = useState();
-    const [flashProgress, setFlashProgress] = useState();
-    const [flashTotal, setFlashTotal] = useState();
-
-    useEffect (()=> {
-        if (USBDevice) {
-            USBDevice.open().then(()=>{
-                console.log(`Opened USB Device: ${USBDevice.productName}`);
-            }, (err)=> {
-                console.log(err)
-            })
-            .then(()=> {
-                if (flashFile)
-                    decompressFileToTransform();
-            })
-        }
-
-    }, [USBDevice])
-
-    const requestUSBDevice = () => { // first thing called with button
-        navigator.usb
-        .requestDevice(USBrequestParams)
-        .then((device) => {
-            setUSBDevice(device);
-        })
-        .catch((e) => {
-            console.error(`There is no device. ${e}`);
-        });
-    }   
-
-    /*
-        breaking down this function:
-        USBDevice.claimInterface is an async function that would run off to the side
-        BUT if we await it, then we wait for it to finish
-        only then can we send any data to the usb, because we have claimed an interface
-
-        await USBDevice.claimInterface is the same as saying:
-        USBDevice.claimInterface() returns a Promise, and then on the .then(),
-        you can follow up with things
-        ...
-        otherwise, claimInterface is an async function that runs off to the side
-    */
-
-    async function preBoot () {
-        console.log("start preBoot");
-        await USBDevice.claimInterface(0);
-
-        send_data(str_to_arr("UCmd:setenv fastboot_dev mmc"), "OKAY");
-        send_data(str_to_arr("UCmd:setenv mmcdev ${emmc_dev}"), "OKAY");
-        send_data(str_to_arr("UCmd:mmc dev ${emmc_dev}"), "OKAY");
-
-        console.log("preboot complete")
-    }
-
-    async function send_headers(raw_data_bytelength, i) {
-        console.log("start send_headers", i);
-        let sparse = build_sparse_header(raw_data_bytelength, i);
-        let dont_care = build_chunk_header(CHUNK_TYPE_DONT_CARE, raw_data_bytelength, i);
-        let raw = build_chunk_header(CHUNK_TYPE_RAW, raw_data_bytelength, i);
-
-        let headers = new Uint8Array(52);
-        headers.set(sparse, 0);
-        headers.set(dont_care, 28);
-        headers.set(raw, 40);
-
-        await USBDevice.transferOut(1, headers);
-        console.log("sent headers", headers);
-    }
-
-    async function send_packet(raw_data, flag="", callback) {
-        console.log("start send_packet", raw_data, flag);
-        USBDevice.transferOut(1, raw_data);
-        callback();
-    }
-
-    /*
-    * data: string or arraybuffer
-    * success_str: checks response of usb
-    * Throws error if USB input does not match success_str
-    */
-    async function send_data(data, success_str) {
-        console.log("start send_data", data);
-        await USBDevice.transferOut(1, data);
-        console.log("after transferOut", data);
-
-        let result = await USBDevice.transferIn(1, 1048);
-
-        if (success_str !== ab_to_str(result.data.buffer)) {
-            console.log('err with', data);
-            console.log('err message', result.data.buffer);
-            throw new Error ("failed to send data:",ab_to_str(result.data.buffer))
-        }
-        else {
-            console.log("after transferIn for", data);
-        }
-    }
-
-    async function wait_reply(data, success_str) {
-        let result = await USBDevice.transferIn(1, 1048);
-
-        if (success_str !== ab_to_str(result.data.buffer)) {
-            console.log('err with', data);
-            console.log('err message', result.data.buffer);
-            throw new Error ("failed to send data:",ab_to_str(result.data.buffer))
-        }
-        else {
-            console.log("after transferIn for", data);
-        }
-    }
-
-    async function flash_all () {
-        await send_data(str_to_arr("flash:all"), "OKAY");
-        console.log("sent flash");
-    }
-
-    function dostuff (chunk) {
-        //last packet: receive "OKAY" after
-        send_packet(chunk.slice(chunk.length-PACKET_SZ), `${chunk.length/PACKET_SZ - 1}, last`);
-        wait_reply(chunk.slice(chunk.length-PACKET_SZ), "OKAY");
-
-        //flash: receive "OKAY" after
-        send_packet(str_to_arr("flash:all"));
-        wait_reply(str_to_arr("flash:all"), "OKAY");
-    }
-    
-    const process_chunk2 = (chunk, i) => {
-        console.log("process chunk", chunk);
-
-        let hex_len = (chunk.length + 52).toString(16); // 52 comes from headers
-
-        // before any writes: receive `DATA${length}` after
-        send_packet(str_to_arr(`download:${hex_len}`));
-        wait_reply(str_to_arr(`download:${hex_len}`), `DATA${hex_len}`);
-
-        send_headers(chunk.length, i);
-
-        let offset=0;
-        while (offset < (chunk.length - PACKET_SZ)) {
-            // let packet_len = Math.min(PACKET_SZ, DATA_SZ - offset);
-            let packet_len = PACKET_SZ;
-            let packet = chunk.slice(offset, offset + packet_len);
-           
-            send_packet(packet, offset/PACKET_SZ);
-        
-            offset += packet_len;
-        }
-
-        dostuff(chunk);
-        
-    }
-
-    //for reference:
-
-    const process_chunk_doesnt = (data, curr_len, i) => {
-        console.log(data, curr_len, i);
-
-        let hex_len = (data.length + 52).toString(16); // 52 comes from headers
-        send_data(str_to_arr(`download:${hex_len}`), `DATA${hex_len}`);
-        send_headers(data.length, i);
-
-        let last_packet_i = data.length/PACKET_SZ-1;
-        for (let i=0; i<last_packet_i; i++) {
-            let packet_len = PACKET_SZ;
-            let packet = data.slice(i*PACKET_SZ, i*PACKET_SZ + packet_len);
-            send_packet(packet);
-        }
-        let last_packet = data.slice((last_packet_i)*PACKET_SZ);
-        send_data(last_packet, "OKAY")
-
-        flash_all();
-    }
-
-    const process_chunk = (data, curr_len, i) => {
-        console.log(data, curr_len, i);
-
-        let hex_len = (data.length + 52).toString(16); // 52 comes from headers
-        USBDevice.transferOut(1, str_to_arr(`download:${hex_len}`)).then(()=> {
-            USBDevice.transferIn(1, 1048).then(result => {
-                console.log(result);
-
-                if (`DATA${hex_len}` !== ab_to_str(result.data.buffer)) {
-                    console.log('err with', data);
-                    console.log('err message', result.data.buffer);
-                    throw new Error ("failed to send data:",ab_to_str(result.data.buffer))
-                }
-                else {
-                    console.log("sent data", data);
-                }
-            })
-        })
-        
-        send_headers(data.length, i);
-
-        let last_packet_i = data.length/PACKET_SZ-1;
-        for (let i=0; i<last_packet_i; i++) {
-            let packet_len = PACKET_SZ;
-            let packet = data.slice(i*PACKET_SZ, i*PACKET_SZ + packet_len);
-            USBDevice.transferOut(1, packet);
-        }
-        let last_packet = data.slice((last_packet_i)*PACKET_SZ);
-
-        USBDevice.transferOut(1, last_packet).then(()=> {
-            USBDevice.transferIn(1, 1048).then(result => {
-                console.log(result);
-
-                if ('OKAY' !== ab_to_str(result.data.buffer)) {
-                    console.log('err with', data);
-                    console.log('err message', result.data.buffer);
-                    throw new Error ("failed to send data:",ab_to_str(result.data.buffer))
-                }
-                else {
-                    console.log("sent data", data);
-                }
-            })
-        })
-        
-        USBDevice.transferOut(1, str_to_arr("flash:all")).then(()=> {
-            USBDevice.transferIn(1, 1048).then(result => {
-                console.log(result);
-
-                if ('OKAY' !== ab_to_str(result.data.buffer)) {
-                    console.log('err with', data);
-                    console.log('err message', result.data.buffer);
-                    throw new Error ("failed to send data:",ab_to_str(result.data.buffer))
-                }
-                else {
-                    console.log("sent data", data);
-                }
-            })
-        })
-    }
-
-    const decompressFileToTransform = async() => {
-        console.log("decompressFileToTransform");
-        console.log("USBDevice", USBDevice);
-
-        preBoot();
-
-        if (!flashFile) return;
-
-        console.log("file", flashFile)
-        const file = flashFile;
-        let data = new Uint8Array(await file.arrayBuffer());
-        let totalBytes = 0;
-        console.log(data)
-
-        if (!window.binding) {
-            console.log("no binding");
-            return;
-        }
-
-        let num_callbacks = 0;
-        let num_chunks = 0;
-        let curr_chunk = new Uint8Array(DATA_SZ);
-        let curr_chunk_offset = 0;
-
-        const stream = new binding.ZstdDecompressStreamBinding();
-
-        const callback = (decompressed) => {
-            if (num_chunks==cap) return;
-            totalBytes += decompressed.length;
-            while(curr_chunk_offset + decompressed.length >= DATA_SZ) {
-                curr_chunk.set(decompressed.slice(0, DATA_SZ - curr_chunk_offset), curr_chunk_offset);
-
-                // process_chunk(curr_chunk, DATA_SZ, num_chunks);
-                process_chunk2(curr_chunk, num_chunks);
-                
-                curr_chunk_offset = 0;
-                decompressed = decompressed.slice(DATA_SZ - curr_chunk_offset, decompressed.length);
-                num_chunks++;
-            }
-            curr_chunk.set(decompressed, curr_chunk_offset);
-            curr_chunk_offset += decompressed.length;
-            num_callbacks++;
-        }
-
-        const end_callback = () => {
-            console.log("end");
-            console.log(totalBytes);
-
-            console.log(curr_chunk, curr_chunk_offset) // different
-            curr_chunk = curr_chunk.slice(0, curr_chunk_offset);
-            console.log(curr_chunk);
-        }
-
-        console.log("start unzipping");
-
-        if (!stream.begin()) {
-            console.log("stream.begin() error");
-            return null;
-        }
-
-        let i = 0;
-        const size = 1024*1024*2; // 2MB of data at a time
-        // while (size*i < data.length) {
-        while (size*i < data.length) {
-            let end = Math.min(size*(i+1), data.length);
-            let slice = data.slice(size*i, end);
-
-            console.log("loop running transform")
-            if (!stream.transform(slice, callback)) {
-                console.log(`stream.transform() error on slice ${size*i} to ${end}`);
-                return null;
-            }
-            // console.log(`transform on ${size*i} to ${end}`);
-
-            i++;
-        }
-
-        if (!stream.end(callback)) {
-            console.log("stream.end() error");
-            return null;
-        }
-
-        // // end_callback();
-
-        // console.log("finishing unzipping");
-
-        // console.log(num_callbacks);
-        // console.log(num_chunks);
-    }
-
-    return [{
-        requestUSBDevice,
-        decompressFileToTransform
-    }]
-}
-
-export default useDecompress3;
diff --git a/webusb/src/logic/useDecompress4.js b/webusb/src/logic/useDecompress4.js
deleted file mode 100644
index 1167df1a..00000000
--- a/webusb/src/logic/useDecompress4.js
+++ /dev/null
@@ -1,229 +0,0 @@
-
-import {useEffect, useState} from 'react';
-import {str_to_arr, ab_to_str} from '../helper/functions.js'
-import {CHUNK_SZ, BLK_SZ, CHUNK_TYPE_RAW, CHUNK_TYPE_DONT_CARE, build_sparse_header, build_chunk_header} from '../helper/sparse.js'
-
-const USBrequestParams = { filters: [{ vendorId: 8137, productId: 0x0152 }] };
-
-const PACKET_SZ = 0x10000;
-const DATA_SZ = CHUNK_SZ * BLK_SZ; // in bytes
-
-let cap = 2;
-
-const decompress_sz = 1024*64;
-let totalBytes = 0;
-
-let buffer = new Uint8Array();
-
-const useDecompress4 = (flashFile) => {
-    const [USBDevice, setUSBDevice] = useState();
-    const [flashProgress, setFlashProgress] = useState();
-    const [flashTotal, setFlashTotal] = useState();
-    const [stream, setStream] = useState();
-    const [decompress_i, setDecompress_i] = useState(0);
-
-    useEffect (()=> {
-        if (USBDevice) {
-            USBDevice.open().then(()=>{
-                console.log(`Opened USB Device: ${USBDevice.productName}`);
-            }, (err)=> {
-                console.log(err)
-            })
-            .then(()=> {
-                if (flashFile)
-                    decompressFileToTransform();
-            })
-        }
-
-    }, [USBDevice])
-
-    useEffect(()=> {
-        setTimeout(()=> { // takes a while for this to load?
-            const s = new binding.ZstdDecompressStreamBinding();
-            setStream(s);
-        }, 500)
-    }, [])
-
-    
-    const requestUSBDevice = () => { // first thing called with button
-        navigator.usb
-        .requestDevice(USBrequestParams)
-        .then((device) => {
-            setUSBDevice(device);
-        })
-        .catch((e) => {
-            console.error(`There is no device. ${e}`);
-        });
-    }   
-    async function send_data(data, success_str) {
-        await USBDevice.transferOut(1, data);
-        let result = await USBDevice.transferIn(1, 1048);
-
-        if (success_str !== ab_to_str(result.data.buffer)) {
-            console.log('err message', result.data.buffer);
-            throw new Error ("failed to send data:", ab_to_str(result.data.buffer))
-        }
-        else {
-            console.log("transfer in reply after sending", data);
-        }
-    }
-
-    async function preBoot () {
-        await USBDevice.claimInterface(0);
-
-        await send_data(str_to_arr("UCmd:setenv fastboot_dev mmc"), "OKAY");
-        await send_data(str_to_arr("UCmd:setenv mmcdev ${emmc_dev}"), "OKAY");
-        await send_data(str_to_arr("UCmd:mmc dev ${emmc_dev}"), "OKAY");
-
-        console.log("preboot complete")
-    }
-
-    /*
-    * data: string or arraybuffer
-    * success_str: checks response of usb
-    * Throws error if USB input does not match success_str
-    */
-    
-    /// new stuff
-
-    const appendBuffer = (new_buffer) => {
-        console.log("length", buffer.length + new_buffer.length);
-        let temp = new Uint8Array(buffer.length + new_buffer.length);
-        temp.set(buffer, 0);
-        temp.set(new_buffer, buffer.length);
-        // console.log("temp, buffer so far", temp);
-        buffer = temp;
-    }
-
-    const callback = (decompressed) => {
-        // console.log("callback")
-
-        // if (decompressed.length + buffer.length < DATA_SZ) {
-        //     appendBuffer(decompressed);
-        // }
-
-        // let padCount = DATA_SZ - buffer.length;
-        // appendBuffer(decompressed.slice(0, padCount));
-        // console.log(buffer); // do something
-
-        // setBuffer(decompressed.slice(padCount));
-        // while (true) {
-        //     console.log(buffer.slice(0, DATA_SZ));
-        //     let temp = buffer.slice(DATA_SZ);
-
-        //     if (temp.length<DATA_SZ) {
-        //         setBuffer(temp);
-        //         break;
-        //     }
-        // }
-
-        // appendBuffer(decompressed);
-        // let temp = new Uint8Array(buffer.length + decompressed.length);
-        // temp.set(buffer, 0);
-        // temp.set(decompressed, buffer.length);
-        // buffer = temp;
-
-        // console.log(buffer);
-        // totalBytes += decompressed.length;
-        // console.log(totalBytes);
-
-        totalBytes+= decompressed.length;
-    }
-
-
-    const decompressFileToTransform = async() => {
-        console.log("binding", stream);
-        await preBoot(); // problem was you didn't reset the board
-        console.log("after preboot");
-
-        if (!flashFile) return;
-
-        const file = flashFile;
-        let data = new Uint8Array(await file.arrayBuffer());
-
-        if (!window.binding) {
-            console.log("no binding");
-            return;
-        }
-
-        // let num_callbacks = 0;
-        // let num_chunks = 0;
-        // let curr_chunk = new Uint8Array(DATA_SZ);
-        // let curr_chunk_offset = 0;
-
-        
-
-        // const callback = (decompressed) => {
-        //     if (num_chunks==cap) return;
-        //     totalBytes += decompressed.length;
-        //     while(curr_chunk_offset + decompressed.length >= DATA_SZ) {
-        //         curr_chunk.set(decompressed.slice(0, DATA_SZ - curr_chunk_offset), curr_chunk_offset);
-
-        //         // process_chunk(curr_chunk, DATA_SZ, num_chunks);
-        //         process_chunk2(curr_chunk, num_chunks);
-                
-        //         curr_chunk_offset = 0;
-        //         decompressed = decompressed.slice(DATA_SZ - curr_chunk_offset, decompressed.length);
-        //         num_chunks++;
-        //     }
-        //     curr_chunk.set(decompressed, curr_chunk_offset);
-        //     curr_chunk_offset += decompressed.length;
-        //     num_callbacks++;
-        // }
-
-        // console.log("start unzipping");
-
-        if (!stream.begin()) {
-            console.log("stream.begin() error");
-            return null;
-        }
-
-        let offset = 0;
-        while (offset < data.length) {
-            let slice = data.slice(offset, offset + decompress_sz);
-            let res = await stream.transform(slice, callback);
-
-            if (!res) {console.log("stream transform fail"); return null;}
-
-            // console.log("buffer after transform", buffer);
-            // buffer = new Uint8Array();
-            console.log("bytes after transform", totalBytes);
-            totalBytes = 0;
-            offset += decompress_sz;
-        }
-
-        if (!stream.end(callback)) {
-            console.log("stream.end() error");
-            return null;
-        }
-
-        // let i = 0;
-        // const size = 1024*1024*2; // 2MB of data at a time
-        // // while (size*i < data.length) {
-        // while (size*i < data.length) {
-        //     let end = Math.min(size*(i+1), data.length);
-        //     let slice = data.slice(size*i, end);
-
-        //     console.log("loop running transform")
-        //     if (!stream.transform(slice, callback)) {
-        //         console.log(`stream.transform() error on slice ${size*i} to ${end}`);
-        //         return null;
-        //     }
-        //     // console.log(`transform on ${size*i} to ${end}`);
-
-        //     i++;
-        // }
-
-        // if (!stream.end(callback)) {
-        //     console.log("stream.end() error");
-        //     return null;
-        // }
-    }
-
-    return [{
-        requestUSBDevice,
-        decompressFileToTransform
-    }]
-}
-
-export default useDecompress4;

From b4c8df12f592cd1bb749a8cc44fcf22bc828a1c9 Mon Sep 17 00:00:00 2001
From: William Wang <wwang.00@outlook.com>
Date: Tue, 8 Aug 2023 22:19:49 -0500
Subject: [PATCH 08/15] can decompress one chunk and do promises in an async
 callback

---
 webusb/src/App.js                  |   2 +-
 webusb/src/logic/useDecompress.js  |   2 +-
 webusb/src/logic/useDecompress2.js | 300 ++++++++++++-----------------
 3 files changed, 124 insertions(+), 180 deletions(-)

diff --git a/webusb/src/App.js b/webusb/src/App.js
index 0401fd97..316d8869 100644
--- a/webusb/src/App.js
+++ b/webusb/src/App.js
@@ -16,7 +16,7 @@ const App = () => {
     <div className="App">
         <div className="u-flex u-column">
             <div>
-                <Decompress2 />
+                <Decompress2 /> (2)
                 <Decompress />
                 <DecompressAlt />
             </div>
diff --git a/webusb/src/logic/useDecompress.js b/webusb/src/logic/useDecompress.js
index 7a6f23cd..e7bdf4c6 100644
--- a/webusb/src/logic/useDecompress.js
+++ b/webusb/src/logic/useDecompress.js
@@ -1,4 +1,4 @@
-
+// stream reader version
 import {useEffect, useState} from 'react';
 import {str_to_arr, ab_to_str} from '../helper/functions.js'
 import {CHUNK_SZ, BLK_SZ, CHUNK_TYPE_RAW, CHUNK_TYPE_DONT_CARE, build_sparse_header, build_chunk_header} from '../helper/sparse.js'
diff --git a/webusb/src/logic/useDecompress2.js b/webusb/src/logic/useDecompress2.js
index a464c0c4..a04fe481 100644
--- a/webusb/src/logic/useDecompress2.js
+++ b/webusb/src/logic/useDecompress2.js
@@ -1,5 +1,7 @@
 
+
 import {useEffect, useState} from 'react';
+import { unstable_renderSubtreeIntoContainer } from 'react-dom';
 import {str_to_arr, ab_to_str} from '../helper/functions.js'
 import {CHUNK_SZ, BLK_SZ, CHUNK_TYPE_RAW, CHUNK_TYPE_DONT_CARE, build_sparse_header, build_chunk_header} from '../helper/sparse.js'
 
@@ -8,24 +10,32 @@ const USBrequestParams = { filters: [{ vendorId: 8137, productId: 0x0152 }] };
 const PACKET_SZ = 0x10000;
 const DATA_SZ = CHUNK_SZ * BLK_SZ; // in bytes
 
+const size = 1024*1024;
+
 const useDecompress2 = (flashFile) => {
     const [USBDevice, setUSBDevice] = useState();
     const [flashProgress, setFlashProgress] = useState();
     const [flashTotal, setFlashTotal] = useState();
     const [chunkOffset, setChunkOffset] = useState(-1);
+    const [stream, setStream] = useState();
+    const [data, setData] = useState();
+    const [i, setI] = useState(0);
+    const [chunk, setChunk] = useState();
+
+    useEffect(()=> {
+        if (!flashFile) return;
+
+        (async() => {
+            let d = new Uint8Array(await flashFile.arrayBuffer());
+            setData(d);
+        })()
+        
+
+    }, [flashFile])
 
     useEffect (()=> {
-        if (USBDevice) {
-            USBDevice.open().then(()=>{
-                console.log(`Opened USB Device: ${USBDevice.productName}`);
-            }, (err)=> {
-                console.log(err)
-            })
-            .then(()=> {
-                if (flashFile)
-                    decompressFileToTransform();
-            })
-        }
+
+        if (flashFile) decompressFileToTransform();
 
     }, [USBDevice])
 
@@ -38,207 +48,141 @@ const useDecompress2 = (flashFile) => {
     }, [chunkOffset])
 
     const requestUSBDevice = () => { // first thing called with button
-        navigator.usb
-        .requestDevice(USBrequestParams)
-        .then((device) => {
-            setUSBDevice(device);
-        })
-        .catch((e) => {
-            console.error(`There is no device. ${e}`);
-        });
+        setUSBDevice(1);
     }
 
-    
-    async function preBoot () {
-        await USBDevice.claimInterface(0);
-
-        await send_data(await str_to_arr("UCmd:setenv fastboot_dev mmc"), "OKAY");
-        await send_data(await str_to_arr("UCmd:setenv mmcdev ${emmc_dev}"), "OKAY");
-        await send_data(await str_to_arr("UCmd:mmc dev ${emmc_dev}"), "OKAY");
-
-        console.log("preboot complete")
+    const another = () => {
+        let p = new Promise((resolve, reject) => {
+            setTimeout(()=> resolve(3), 3000);
+        })
+        return p;
     }
-
-    const processChunk = async(data, curr_len, i) => {
-        console.log(data, curr_len, i);
-
-        // ignore, fill with zeroes
-        if (curr_len != data.length) {
-            let fill_len = (Math.ceil(curr_len/BLK_SZ)*BLK_SZ - curr_len);
-            // let fill = new Uint8Array(fill_len);
-            data.set(curr_len, new Uint8Array(fill_len));
-            data = data.slice(0, curr_len+fill_len);
-        }
-
-        let hex_len = (data.length + 52).toString(16); // 52 comes from headers
-        await send_data(await str_to_arr(`download:${hex_len}`), `DATA${hex_len}`);
-        await send_headers(data.length, i);
-
-        let offset=0;
-        while (offset < data.length) {
-            let packet_len = Math.min(PACKET_SZ, DATA_SZ - offset);
-            await USBDevice.transferOut(1, data.slice(offset, offset + packet_len));
-            console.log("transferout", data.slice(offset, offset + packet_len));
-            offset += packet_len;
-        }
-
-        let result = await USBDevice.transferIn(1, 1048);
-        if ("OKAY" !== await ab_to_str(result.data.buffer)) {
-            throw new Error ("failed to send data:", await ab_to_str(result.data.buffer))
-        }
-
-        await flash_all();
-        console.log("FLASH SUCCESS")
+    const callbackold = async() => {
+        // console.log(1);
+        // let p1 = new Promise((resolve, reject) => {
+        //     setTimeout(()=> {
+        //         resolve(2);
+        //     }, 3000)
+        // })
+        // let res = await p1;
+        // console.log(res);
+        // res = await another();
+        // console.log(res);
+        // read(callback)
     }
 
-    async function send_packet(raw_data) {
-        await USBDevice.transferOut(1, raw_data);
-        console.log("transferout", raw_data);
+    const readold = (cb) => {
+        // console.log("read");
+        // cb();
     }
 
-    async function send_chunk_headers (chunk_len, i) {
-        let hex_len = (chunk_len + 52).toString(16); // 52 comes from headers
-        await send_data(await str_to_arr(`download:${hex_len}`), `DATA${hex_len}`);
-        await send_headers(chunk_len, i);
+    const decompressFileToTransformold = async(e) => {
+        // read(callback);
     }
 
-    async function send_headers(raw_data_bytelength, i) {
-        let sparse = await build_sparse_header(raw_data_bytelength, i);
-        let dont_care = await build_chunk_header(CHUNK_TYPE_DONT_CARE, raw_data_bytelength, i);
-        let raw = await build_chunk_header(CHUNK_TYPE_RAW, raw_data_bytelength, i);
-
-        let headers = new Uint8Array(52);
-        headers.set(sparse, 0);
-        headers.set(dont_care, 28);
-        headers.set(raw, 40);
-
-        await USBDevice.transferOut(1, headers);
+    const p1 = () => {
+        return new Promise((res, rej) => {
+            setTimeout(()=>{
+                res(1);
+            }, 0)
+        })
     }
 
-    async function send_flash () {
-        let result = await USBDevice.transferIn(1, 1048);
-        if ("OKAY" !== await ab_to_str(result.data.buffer)) {
-            throw new Error ("failed to send data:", await ab_to_str(result.data.buffer))
-        }
-
-        await flash_all();
+    const p2 = () => {
+        return new Promise((res, rej) => {
+            setTimeout(()=>{
+                res(2);
+            }, 3000)
+        })
     }
 
-    /*
-    * data: string or arraybuffer
-    * success_str: checks response of usb
-    * Throws error if USB input does not match success_str
-    */
-    async function send_data(data, success_str) {
-        await USBDevice.transferOut(1, data);
-        let result = await USBDevice.transferIn(1, 1048);
-
-        if (success_str !== await ab_to_str(result.data.buffer)) {
-            throw new Error ("failed to send data:",await ab_to_str(result.data.buffer))
-        }
+    const p3 = () => {
+        return new Promise((res, rej) => {
+            setTimeout(()=>{
+                res(3);
+            }, 3000)
+        })
     }
 
-    async function flash_all () {
-        await send_data(await str_to_arr("flash:all"), "OKAY");
-        console.log("flash");
+    const callback = async(decompressed) => {
+        let res = await p1();
+        console.log(res);
+        // res = await p2();
+        // console.log(res);
+        // res = await p3();
+        // console.log(res);
+
+        console.log(decompressed);
+        if (!stream.read(callback)){
+            // load in a new chunk
+            console.log("NEED NEW CHUNK NOM")
+
+            //test this next:
+            // doLoad();
+        }
     }
 
-    const decompressFileToTransform = async(e) => {
-        console.log(USBDevice);
-
-        if (!flashFile) return;
-
-        const file = flashFile;
-        let buff = await file.arrayBuffer()
-        let data = new Uint8Array(buff);
-        let totalBytes = 0;
-
-        console.log(data)
+    useEffect(()=> {
+        // after updating i, know it's ready to load a chunk
+        if (!chunk) return;
 
-        if (!window.binding) {
-            console.log("no binding");
-            return;
+        if (!stream.load(chunk)) {
+            console.log("stream.load() error");
+            return null;
         }
+        stream.read(callback);
+    }, [i])
 
-        const stream = new binding.ZstdDecompressStreamBinding();
-        // const transform = new TransformStream();
-        // const writer = transform.writable.getWriter();
+    useEffect(()=> {
+        if (!chunk) return;
 
-        const callback = (decompressed) => {
-            console.log(decompressed);
-            // totalBytes += decompressed.length;
-            // writer.write(decompressed);
-        }
+        let new_i = i+1;
+        setI(new_i);
+    }, [chunk])
 
-        if (!stream.begin()) {
-            console.log("stream.begin() error");
-            return null;
-        }
+    const doLoad = async() => {
+        // if size*i < data.length? needed?
+        let chunk = data.slice(size*i, Math.min(size*(i+1), data.length));
+        setChunk(chunk);
+    }
 
-        console.log("start unzipping");
+    useEffect(() => {
+        if (!stream) return;
 
-        let i = 0;
-        const size = 1024*1024;
-        
-        let end = Math.min(size*(i+1), data.length);
-        let chunk = data.slice(size*i, end);
-
-        let prev_offset = 0;
-        let curr_offset = 0;
-        let printpos = 0;
-        let pos = stream.transform(chunk, 0, 0, callback);
-        console.log({pos});
-        printpos = printpos + pos;
-        curr_offset = prev_offset + pos;
-
-        if (curr_offset == chunk.length) {
-            //read another chunk
-        }
-        else {
-            // still in the middle of reading a chunk
-            console.log("pos", pos, "curr_offset", curr_offset, "printpos", printpos);
-            let pos = stream.transform(chunk, 131075, 131075, callback);
-            console.log(pos);
-
-            if (pos==0) {
-                // it's time to move onto a new src_bytes
-                prev_offset = curr_offset;
-
-                pos = stream.transform(chunk, 131075, 0, callback);
-                console.log(pos);
-                curr_offset = prev_offset + pos;
-                console.log(curr_offset);
-                    
-                pos = stream.transform(chunk, curr_offset, pos, callback);
+        (async() => {
+            // let data = new Uint8Array(await flashFile.arrayBuffer());
+            // let chunk = data.slice(0, size);
+            // i++;
+            if (!stream.begin()) {
+                console.log("stream.begin() error");
+                return null;
             }
+            // if (!stream.load(chunk)) {
+            //     console.log("stream.load() error");
+            //     return null;
+            // }
 
-        }
+            // stream.read(callback);
 
+            doLoad();
+        })()
+    }, [stream])
 
-        // if (!stream.end(callback)) {
-        //     console.log("stream.end() error");
-        //     return null;
-        // }
+    const decompressFileToTransform = async(e) => {
+        console.log("data", data);
+        // read(callback);
 
-        // console.log("finishing unzipping");
+        if (!window.binding) {
+            console.log("no binding");
+            return;
+        }
 
-        // const readable = transform.readable;
-        // doFlash(readable, PACKET_SZ, totalBytes);
+        const s = new binding.ZstdDecompressReadBinding();
+        setStream(s);
     }
 
-    
-
     return [{
         requestUSBDevice,
-        USBDevice,
-        flashProgress,
-        flashTotal,
-        preBoot,
-        processChunk,
-        send_chunk_headers,
-        send_packet,
-        send_flash,
-        flash_all,
     }]
 }
 

From 8ab6186ba1f75467c69e0196e4293e4c0bde5a9c Mon Sep 17 00:00:00 2001
From: William Wang <wwang.00@outlook.com>
Date: Tue, 8 Aug 2023 22:52:20 -0500
Subject: [PATCH 09/15] decompress multiple chunks one after another

---
 webusb/src/logic/useDecompress2.js | 29 ++++++++++++++++++-----------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/webusb/src/logic/useDecompress2.js b/webusb/src/logic/useDecompress2.js
index a04fe481..e1192f8d 100644
--- a/webusb/src/logic/useDecompress2.js
+++ b/webusb/src/logic/useDecompress2.js
@@ -12,6 +12,8 @@ const DATA_SZ = CHUNK_SZ * BLK_SZ; // in bytes
 
 const size = 1024*1024;
 
+let total = 0;
+
 const useDecompress2 = (flashFile) => {
     const [USBDevice, setUSBDevice] = useState();
     const [flashProgress, setFlashProgress] = useState();
@@ -113,12 +115,15 @@ const useDecompress2 = (flashFile) => {
         // console.log(res);
 
         console.log(decompressed);
+        total += decompressed.length;
+
+        // uncomment below this
         if (!stream.read(callback)){
             // load in a new chunk
             console.log("NEED NEW CHUNK NOM")
 
             //test this next:
-            // doLoad();
+            doLoad();
         }
     }
 
@@ -137,11 +142,22 @@ const useDecompress2 = (flashFile) => {
         if (!chunk) return;
 
         let new_i = i+1;
+        console.log("already eaten", i*size, "of the data");
         setI(new_i);
     }, [chunk])
 
     const doLoad = async() => {
-        // if size*i < data.length? needed?
+        // reached the end of processing data
+        if (size*i >= data.length) {
+            console.log("at the end")
+            console.log(total);
+            if(!stream.end(callback)) {
+                console.log("stream.end() fail");
+                return;
+            }
+            return;
+        }
+
         let chunk = data.slice(size*i, Math.min(size*(i+1), data.length));
         setChunk(chunk);
     }
@@ -150,19 +166,10 @@ const useDecompress2 = (flashFile) => {
         if (!stream) return;
 
         (async() => {
-            // let data = new Uint8Array(await flashFile.arrayBuffer());
-            // let chunk = data.slice(0, size);
-            // i++;
             if (!stream.begin()) {
                 console.log("stream.begin() error");
                 return null;
             }
-            // if (!stream.load(chunk)) {
-            //     console.log("stream.load() error");
-            //     return null;
-            // }
-
-            // stream.read(callback);
 
             doLoad();
         })()

From 9fd7296b6ec0102f2f697105e976e21ec2e41f58 Mon Sep 17 00:00:00 2001
From: Sarah Wang <sarah.wang_1@nxp.com>
Date: Thu, 10 Aug 2023 10:33:33 -0500
Subject: [PATCH 10/15] decompress works

---
 webusb/src/logic/useDecompress2.js | 21 +++++++++++----------
 webusb/src/logic/useFlash.js       | 14 +++++++++++---
 2 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/webusb/src/logic/useDecompress2.js b/webusb/src/logic/useDecompress2.js
index a580a958..77f5e19e 100644
--- a/webusb/src/logic/useDecompress2.js
+++ b/webusb/src/logic/useDecompress2.js
@@ -21,8 +21,8 @@ const useDecompress2 = (flashFile) => {
     const total = useRef(0);
     const stream = useRef();
     const data = useRef();
-    const i = useRef(0);
-    const chunk_i = useRef(0);
+    const i = useRef(0); // for indexing through flashfile
+    const chunk_i = useRef(0); // for building chunk headers
 
 
     const [USBDevice, setUSBDevice] = useState();
@@ -42,14 +42,14 @@ const useDecompress2 = (flashFile) => {
     // things to test: do you have to await on 
     const processChunk = async(chunk) => {
         console.log('processing...');
-        let res = await p2();
-        console.log(res);
-        res = await p3();
-        console.log(res);
-        await p3();
+        // let res = await p2();
+        // console.log(res);
+        // res = await p3();
+        // console.log(res);
+        // await p3();
 
-        await process_chunk(USBDevice, chunk);
-        // chunk_i.current += 1; TODO: CHANGE THIS FOR ME
+        await process_chunk(USBDevice, chunk, chunk_i.current);
+        chunk_i.current += 1; //TODO: CHANGE THIS FOR ME
 
         console.log("COMPLETED ONE CHUNK");
         console.log(chunk);
@@ -157,10 +157,11 @@ const useDecompress2 = (flashFile) => {
                 console.log("stream.end() fail");
                 return;
             }
+            chunk_processor.current.flush(processChunk);
             return;
         }
 
-        let chunk = data.current.slice(size*i.current, Math.min(size*(i.current+1), data.current.length));
+        let chunk = data.current.slice(size*i.current, Math.min(size*(i.current+1), data.current.length)); //TODO: maybe don't need min thigs, handled automatically
         i.current += 1;
 
         if (!stream.current.load(chunk)) {
diff --git a/webusb/src/logic/useFlash.js b/webusb/src/logic/useFlash.js
index 13cf8605..e216fa48 100644
--- a/webusb/src/logic/useFlash.js
+++ b/webusb/src/logic/useFlash.js
@@ -15,6 +15,7 @@ async function get_reply(USBDevice, success_str) {
     if (success_str !== ab_to_str(result.data.buffer)) {
         throw new Error ("failed to send data:", ab_to_str(result.data.buffer))
     }
+    console.log(result.data.buffer);
 }
 
 async function send_output(USBDevice, data) {
@@ -67,11 +68,15 @@ async function send_chunk_begin (USBDevice, chunk_len, i) {
 
 async function flash_all (USBDevice) {
     await send_data(USBDevice, str_to_arr("flash:all"), "OKAY");
+    console.log("flash all");
 }
 
 export async function process_chunk (USBDevice, chunk, i) {
+    console.log("process_chunk");
+    console.log(USBDevice, chunk, i);
     // pad chunk with zeros
-    let pad_count = (chunk.length/BLK_SZ)*BLK_SZ - chunk.length;
+
+    let pad_count = Math.ceil(chunk.length/BLK_SZ)*BLK_SZ - chunk.length
 
     if (pad_count) {
         let pad = new Uint8Array(pad_count);
@@ -79,18 +84,21 @@ export async function process_chunk (USBDevice, chunk, i) {
         new_chunk.set(chunk, 0);
         new_chunk.set(pad, chunk.length);
         chunk = new_chunk;
+        console.log("new chunk", chunk)
     }
 
     await send_chunk_begin(USBDevice, chunk.length, i);
+    console.log("sent chunk begin")
     
     let offset = 0;
     let packet;
     while (offset < chunk.length) {
         packet = chunk.slice(offset, offset + PACKET_SZ);
         await send_output(USBDevice, packet);
+        console.log("sent output")
         offset += PACKET_SZ;
     }
+    console.log("finished loop")
     await get_reply(USBDevice, "OKAY");
-    await flash_all();
-
+    await flash_all(USBDevice);
 }
\ No newline at end of file

From 5a5926e4adf6ab787cdd1436770b3b7d46cd360a Mon Sep 17 00:00:00 2001
From: Sarah Wang <sarah.wang_1@nxp.com>
Date: Thu, 10 Aug 2023 10:43:59 -0500
Subject: [PATCH 11/15] deleted a lot of Decompress copies and notes

---
 webusb/src/App.js                        |   4 -
 webusb/src/components/Decompress.js      |   2 -
 webusb/src/components/Decompress2.js     |  54 ------
 webusb/src/components/DecompressAlt.js   |  27 ---
 webusb/src/logic/check-what-was-wrong.js |  79 --------
 webusb/src/logic/notes.js                | 107 -----------
 webusb/src/logic/reduced.js              |  95 ----------
 webusb/src/logic/useDecompress3.js       | 197 -------------------
 webusb/src/logic/useDecompress4.js       | 229 -----------------------
 webusb/src/logic/useUSBFlash.js          |   1 +
 10 files changed, 1 insertion(+), 794 deletions(-)
 delete mode 100644 webusb/src/components/Decompress2.js
 delete mode 100644 webusb/src/components/DecompressAlt.js
 delete mode 100644 webusb/src/logic/check-what-was-wrong.js
 delete mode 100644 webusb/src/logic/notes.js
 delete mode 100644 webusb/src/logic/reduced.js
 delete mode 100644 webusb/src/logic/useDecompress3.js
 delete mode 100644 webusb/src/logic/useDecompress4.js

diff --git a/webusb/src/App.js b/webusb/src/App.js
index 316d8869..0b048ccd 100644
--- a/webusb/src/App.js
+++ b/webusb/src/App.js
@@ -1,8 +1,6 @@
 import React, { useState } from 'react';
 import Combined from "./components/Combined";
-import Decompress2 from "./components/Decompress";
 import Decompress from "./components/Decompress";
-import DecompressAlt from "./components/DecompressAlt"
 import usePopup from "./logic/usePopup";
 
 import './App.css'
@@ -16,9 +14,7 @@ const App = () => {
     <div className="App">
         <div className="u-flex u-column">
             <div>
-                <Decompress2 /> (2)
                 <Decompress />
-                <DecompressAlt />
             </div>
             <div className="u-row">
                 <span className="link-container">bootloader [optional]: </span>
diff --git a/webusb/src/components/Decompress.js b/webusb/src/components/Decompress.js
index f1dccafd..0c6ffe83 100644
--- a/webusb/src/components/Decompress.js
+++ b/webusb/src/components/Decompress.js
@@ -1,7 +1,5 @@
 import { useEffect, useState } from "react"
-// import useDecompress from '../logic/useDecompress'
 import useDecompress2 from '../logic/useDecompress2'
-import { DATA_SZ, BLK_SZ, PACKET_SZ } from "../helper/sparse";
 
 const Decompress = () => {
     const [flashFile, setFlashFile] = useState();
diff --git a/webusb/src/components/Decompress2.js b/webusb/src/components/Decompress2.js
deleted file mode 100644
index 75a20efc..00000000
--- a/webusb/src/components/Decompress2.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import { useEffect, useState } from "react"
-import useDecompress2 from '../logic/useDecompress2'
-import { DATA_SZ, BLK_SZ, PACKET_SZ } from "../helper/sparse";
-
-const Decompress2 = () => {
-    const [flashFile, setFlashFile] = useState();
-
-    const [{
-        // requestUSBDevice,
-    }] = useDecompress2(flashFile);
-
-    useEffect(()=> {
-        console.log(ZstdCodec)
-        console.log(window.binding);
-    }, [])
-
-    // async test
-    // useEffect(()=> {
-    //     function sleep(ms) {
-    //         let p1 = new Promise(resolve => setTimeout(resolve, ms));
-    //         let p2 = p1.then(() => {
-    //             console.log('after first setTimeout')
-    //             return (
-    //                 new Promise(resolve => setTimeout(resolve, ms))
-    //             )
-    //         });
-    //         return p2.then(()=> Promise.resolve("hello")); // returns a promise
-    //       }
-          
-    //       // Usage:
-
-          
-    //       console.log("Start");
-          
-    //       (async () => {
-    //         for (let i=0; i<3; i++) {
-    //             let res = await sleep(2000); // Sleep for 2 seconds
-    //             console.log(res);
-    //         }
-    //         console.log("End");
-    //       })();        
-    // }, [])
-
-    return (
-        <div>
-            file to decompress:
-            <input type="file" onChange={(e) => setFlashFile(e.target.files[0])}/>
-
-            {/* <button onClick={requestUSBDevice}>Choose USB Dev </button> */}
-        </div>
-    )
-}
-
-export default Decompress2
diff --git a/webusb/src/components/DecompressAlt.js b/webusb/src/components/DecompressAlt.js
deleted file mode 100644
index f4217bc3..00000000
--- a/webusb/src/components/DecompressAlt.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import { useEffect, useState } from "react"
-// import useDecompress from '../logic/useDecompress'
-import useDecompress from '../logic/useDecompress3'
-import { DATA_SZ, BLK_SZ, PACKET_SZ } from "../helper/sparse";
-
-const DecompressAlt = () => {
-    const [flashFile, setFlashFile] = useState();
-    const [{
-        requestUSBDevice
-    }] = useDecompress(flashFile);
-
-    useEffect(()=> {
-        console.log(ZstdCodec)
-        console.log(window.binding);
-    }, [])
-
-    return (
-        <div>
-            file to decompress (3):
-            <input type="file" onChange={(e) => setFlashFile(e.target.files[0])}/>
-
-            <button onClick={requestUSBDevice}>Pair USBDevice </button>
-        </div>
-    )
-}
-
-export default DecompressAlt
diff --git a/webusb/src/logic/check-what-was-wrong.js b/webusb/src/logic/check-what-was-wrong.js
deleted file mode 100644
index b4be1cca..00000000
--- a/webusb/src/logic/check-what-was-wrong.js
+++ /dev/null
@@ -1,79 +0,0 @@
-// no awaits
-    // function process_chunk2 (chunk, i) {
-    //     console.log("process chunk", chunk);
-
-    //     let hex_len = (chunk.length + 52).toString(16); // 52 comes from headers
-    //     USBDevice.transferOut(1, str_to_arr(`download:${hex_len}`)).then (result => {
-    //         if (`DATA${hex_len}` !== ab_to_str(result.data.buffer)) {
-    //             throw new Error ("failed to send data:", ab_to_str(result.data.buffer))
-    //         }
-    //     }).then(() => {
-    //         let sparse = build_sparse_header(raw_data_bytelength, i);
-    //         let dont_care = build_chunk_header(CHUNK_TYPE_DONT_CARE, raw_data_bytelength, i);
-    //         let raw = build_chunk_header(CHUNK_TYPE_RAW, raw_data_bytelength, i);
-
-    //         let headers = new Uint8Array(52);
-    //         headers.set(sparse, 0);
-    //         headers.set(dont_care, 28);
-    //         headers.set(raw, 40);
-
-    //         USBDevice.transferOut(1, headers);
-    //     }).then (()=> {
-    //         let offset=0;
-    //         while (offset < chunk.length) {
-    //             // let packet_len = Math.min(PACKET_SZ, DATA_SZ - offset);
-    //             let packet_len = PACKET_SZ;
-    //             USBDevice.transferOut(1, chunk.slice(offset, offset + packet_len));
-    //             console.log("transferout", chunk.slice(offset, offset + packet_len));
-    //             offset += packet_len;
-    //             console.log("offset in transfer", offset)
-    //         }
-
-    //         // let result = await USBDevice.transferIn(1, 1048);
-
-    //         USBDevice.transferIn(1, 1048).then(result => {
-    //             console.log(result);
-    //             if ("OKAY" !== ab_to_str(result.data.buffer)) {
-    //                 throw new Error (`failed to send data on i: ${i}`, ab_to_str(result.data.buffer))
-    //             }
-    //         })
-    //     }) .then (()=> {
-    //         USBDevice.transferOut(1, str_to_arr("flash:all"))
-    //         .then(result => {
-    //             if ("OKAY" !== ab_to_str(result.data.buffer)) {
-    //                 throw new Error ("failed to send data:", ab_to_str(result.data.buffer))
-    //             }
-    //         })
-    //     })
-
-
-        // let hex_len = (chunk.length + 52).toString(16); // 52 comes from headers
-        // send_data(str_to_arr(`download:${hex_len}`), `DATA${hex_len}`);
-        // send_headers(chunk.length, i);
-        // console.log("sent headers")
-
-        // let offset=0;
-        // while (offset < chunk.length) {
-        //     // let packet_len = Math.min(PACKET_SZ, DATA_SZ - offset);
-        //     let packet_len = PACKET_SZ;
-        //     USBDevice.transferOut(1, chunk.slice(offset, offset + packet_len));
-        //     console.log("transferout", chunk.slice(offset, offset + packet_len));
-        //     offset += packet_len;
-        //     console.log("offset in transfer", offset)
-        // }
-
-        // // let result = await USBDevice.transferIn(1, 1048);
-
-        // // USBDevice.transferIn(1, 1048).then(result => {
-        // //     console.log(result);
-        // //     if ("OKAY" !== ab_to_str(result.data.buffer)) {
-        // //         throw new Error (`failed to send data on i: ${i}`, ab_to_str(result.data.buffer))
-        // //     }
-        // // })
-
-        // USBDevice.transferIn(1, 1048);
-        // flash_all();
-        // console.log("FLASH SUCCESS")
-    // }
-
-    
diff --git a/webusb/src/logic/notes.js b/webusb/src/logic/notes.js
deleted file mode 100644
index 15feac8d..00000000
--- a/webusb/src/logic/notes.js
+++ /dev/null
@@ -1,107 +0,0 @@
-<<<<<<< HEAD
-let buffer = new Uint8Array();
-
-let decompress_sz = 1024*64;
-
-const callback = (decompressed) => {
-    let temp = new Uint8Array(buffer.length + decompressed.length);
-    temp.set(buffer, 0);
-    temp.set(decompressed, buffer.length);
-    buffer = temp;
-}
-
-const decompress = async(data) => {
-
-    if (!stream.begin()) {
-        console.log("stream.begin() error");
-        return null;
-    }
-
-    let offset = 0;
-    while (offset < data.length) {
-        let slice = data.slice(offset, offset + decompress_sz);
-        await stream.transform(slice, callback);
-
-        // do something with buffer after one round of transform
-        doSomething(buffer);
-        buffer = new Uint8Array();
-
-        offset += decompress_sz;
-    }
-
-    if (!stream.end(callback)) {
-        console.log("stream.end() error");
-        return null;
-    }
-}
-
-/**
-hi ricky, sorry to bother you again, but I was wondering what you would do if you ended up with a buffer that is too big.
-
-what we are trying to do right now is save a buffer after one round of stream.transform, then process the buffer.
-
-the reason is because each stream.transform calls callback multiple times. then, we can't do any reading/writing to the usb within callback, because
-the stream.transform function currently doesn't wait on each callback to finish before executing the next callback (we must send output and read input
-in a certain order). So what we are trying right now is saving all the decompressed data from one call of stream.transform, then so all the reading/writing we need from that decompressed data.
-
-the problem right now is that the last transform results in an
-arraybuffer that is too large (700 MB), because the last part that is decompressed is a lot of zeroes, which are compressed compactly. 
-
-I'm wondering if you have suggestions on how to deal with this?
- */
-
-
-function sleep(ms) {
-    let p1 = new Promise(resolve => setTimeout(resolve, ms));
-    let p2 = p1.then(() => {
-        console.log('after first setTimeout')
-        return (
-            new Promise(resolve => setTimeout(resolve, ms))
-        )
-    });
-    return p2.then(()=> new Promise.resolve("hello")); // returns a promise
-  }
-  
-   
-  
-  // Usage:
-  console.log("Start");
-  
-  (async () => {
-    for (let i=0; i<3; i++) {
-        let res = await sleep(2000); // Sleep for 2 seconds
-        console.log(res);
-    }
-    console.log("End");
-  })();
-
-=======
-async function callback() {
-
-    await send_data();
-
-    callback();
-}
-
-function caller () {
-    stream.transform(chunk_offset, slice, callback);
-}
-
-///
-
-function transform (chunk, callback){
-    // fill up a src_bytes worth from chunk
-    decompress(src_bytes);
-}
-
-function decompress(src_bytes) {
-    // loop over src_bytes
-
-    while (condition){
-        let decompressed = zstd_decompress(src_bytes);
-        callback(decompressed)
-    }
-
-    src_bytes.clear();
-}
->>>>>>> 8ab6186ba1f75467c69e0196e4293e4c0bde5a9c
diff --git a/webusb/src/logic/reduced.js b/webusb/src/logic/reduced.js
deleted file mode 100644
index 0399e9d1..00000000
--- a/webusb/src/logic/reduced.js
+++ /dev/null
@@ -1,95 +0,0 @@
-/*
-
-GOAL: 
-
-process a chunk's worth of data and send it through USB, one chunk after another :
-chunk1
-chunk2
-chunk3...
-
-when a chunk's worth of data has been decompressed, 
-do 'process_chunk' on it
-before decompressing more
-
-
-PROBLEM: 
-
-making 'callback' an async function, like
-```
-const callback = async(decompressed) => { 
-    ...
-    await process_chunk(curr_chunk);
-}
-
-```
-still batches all the 'process_chunk' events until the end
-
-*/
-
-
-const process_chunk = async(chunk, i) => {
-    // call functions on chunk that do asynchronous stuff to chunk
-    // 'transferData' is an async function
-    await transferData(chunk)
-}
-
-const decompressFileToTransform = async(file) => {
-    let data = new Uint8Array(await file.arrayBuffer());
-
-
-    /* CALLBACK FUNCTION USED BY ZSTD-CODEC */
-
-    let curr_chunk = new Uint8Array(DATA_SZ);
-    let curr_chunk_offset = 0;
-
-    const callback = (decompressed) => { // 'decompressed' is an Uint8Array, usually 131072 bytes
-        while(curr_chunk_offset + decompressed.length >= DATA_SZ) { // 'DATA_SZ' is num of bytes in a chunk
-            curr_chunk.set(decompressed.slice(0, DATA_SZ - curr_chunk_offset), curr_chunk_offset);
-            
-            process_chunk(curr_chunk);
-
-            curr_chunk_offset = 0;
-            decompressed = decompressed.slice(DATA_SZ - curr_chunk_offset, decompressed.length);
-        }
-
-        curr_chunk.set(decompressed, curr_chunk_offset);
-        curr_chunk_offset += decompressed.length;
-    }
-
-
-    /* 
-        ZSTD-CODEC: https://github.com/yoshihitoh/zstd-codec
-
-        sends decompressed data to 'callback' function
-    */
-   
-    const stream = new binding.ZstdDecompressStreamBinding();
-
-    if (!stream.begin()) {
-        console.log("stream.begin() error");
-        return null;
-    }
-
-    console.log("start unzipping");
-
-    let i = 0;
-    const size = 1024*1024*2; // 2MB of data at a time
-    while (size*i < data.length) {
-        let end = Math.min(size*(i+1), data.length);
-        let slice = data.slice(size*i, end);
-
-        if (!stream.transform(slice, callback)) {
-            console.log(`stream.transform() error on slice ${size*i} to ${end}`);
-            return null;
-        }
-
-        i++;
-    }
-
-    if (!stream.end(callback)) {
-        console.log("stream.end() error");
-        return null;
-    }
-
-    console.log("finishing unzipping");
-}
\ No newline at end of file
diff --git a/webusb/src/logic/useDecompress3.js b/webusb/src/logic/useDecompress3.js
deleted file mode 100644
index 7c6b041d..00000000
--- a/webusb/src/logic/useDecompress3.js
+++ /dev/null
@@ -1,197 +0,0 @@
-
-import {useEffect, useState} from 'react';
-import {str_to_arr, ab_to_str} from '../helper/functions.js'
-import {CHUNK_SZ, BLK_SZ, CHUNK_TYPE_RAW, CHUNK_TYPE_DONT_CARE, build_sparse_header, build_chunk_header} from '../helper/sparse.js'
-
-const USBrequestParams = { filters: [{ vendorId: 8137, productId: 0x0152 }] };
-
-const PACKET_SZ = 0x10000;
-const DATA_SZ = CHUNK_SZ * BLK_SZ; // in bytes
-
-const useDecompress = (flashFile) => {
-    const [USBDevice, setUSBDevice] = useState();
-    const [flashProgress, setFlashProgress] = useState();
-    const [flashTotal, setFlashTotal] = useState();
-
-    useEffect (()=> {
-        if (USBDevice) {
-            USBDevice.open().then(()=>{
-                console.log(`Opened USB Device: ${USBDevice.productName}`);
-            }, (err)=> {
-                console.log(err)
-            })
-            .then(()=> {
-                if (flashFile)
-                    decompressFileToTransform();
-            })
-        }
-
-    }, [USBDevice])
-
-    const requestUSBDevice = () => { // first thing called with button
-        navigator.usb
-        .requestDevice(USBrequestParams)
-        .then((device) => {
-            setUSBDevice(device);
-        })
-        .catch((e) => {
-            console.error(`There is no device. ${e}`);
-        });
-    }
-
-    async function preBoot () {
-        await USBDevice.claimInterface(0);
-
-        await send_data(await str_to_arr("UCmd:setenv fastboot_dev mmc"), "OKAY");
-        await send_data(await str_to_arr("UCmd:setenv mmcdev ${emmc_dev}"), "OKAY");
-        await send_data(await str_to_arr("UCmd:mmc dev ${emmc_dev}"), "OKAY");
-
-        console.log("preboot complete")
-    }
-
-    const processChunk = async(data, curr_len, i) => {
-        console.log(data, curr_len, i);
-
-        // ignore, fill with zeroes
-        if (curr_len != data.length) {
-            let fill_len = (Math.ceil(curr_len/BLK_SZ)*BLK_SZ - curr_len);
-            // let fill = new Uint8Array(fill_len);
-            data.set(curr_len, new Uint8Array(fill_len));
-            data = data.slice(0, curr_len+fill_len);
-        }
-
-        let hex_len = (data.length + 52).toString(16); // 52 comes from headers
-        await send_data(await str_to_arr(`download:${hex_len}`), `DATA${hex_len}`);
-        await send_headers(data.length, i);
-
-        let offset=0;
-        while (offset < data.length) {
-            let packet_len = Math.min(PACKET_SZ, DATA_SZ - offset);
-            await USBDevice.transferOut(1, data.slice(offset, offset + packet_len));
-            console.log("transferout", data.slice(offset, offset + packet_len));
-            offset += packet_len;
-        }
-
-        let result = await USBDevice.transferIn(1, 1048);
-        if ("OKAY" !== await ab_to_str(result.data.buffer)) {
-            throw new Error ("failed to send data:", await ab_to_str(result.data.buffer))
-        }
-
-        await flash_all();
-        console.log("FLASH SUCCESS")
-    }
-
-    async function send_packet(raw_data) {
-        await USBDevice.transferOut(1, raw_data);
-        console.log("transferout", raw_data);
-    }
-
-    async function send_chunk_headers (chunk_len, i) {
-        let hex_len = (chunk_len + 52).toString(16); // 52 comes from headers
-        await send_data(await str_to_arr(`download:${hex_len}`), `DATA${hex_len}`);
-        await send_headers(chunk_len, i);
-    }
-
-    async function send_headers(raw_data_bytelength, i) {
-        let sparse = await build_sparse_header(raw_data_bytelength, i);
-        let dont_care = await build_chunk_header(CHUNK_TYPE_DONT_CARE, raw_data_bytelength, i);
-        let raw = await build_chunk_header(CHUNK_TYPE_RAW, raw_data_bytelength, i);
-
-        let headers = new Uint8Array(52);
-        headers.set(sparse, 0);
-        headers.set(dont_care, 28);
-        headers.set(raw, 40);
-
-        await USBDevice.transferOut(1, headers);
-    }
-
-    async function send_flash () {
-        let result = await USBDevice.transferIn(1, 1048);
-        if ("OKAY" !== await ab_to_str(result.data.buffer)) {
-            throw new Error ("failed to send data:", await ab_to_str(result.data.buffer))
-        }
-
-        await flash_all();
-    }
-
-    /*
-    * data: string or arraybuffer
-    * success_str: checks response of usb
-    * Throws error if USB input does not match success_str
-    */
-    async function send_data(data, success_str) {
-        await USBDevice.transferOut(1, data);
-        let result = await USBDevice.transferIn(1, 1048);
-
-        if (success_str !== await ab_to_str(result.data.buffer)) {
-            throw new Error ("failed to send data:",await ab_to_str(result.data.buffer))
-        }
-    }
-
-    async function flash_all () {
-        await send_data(await str_to_arr("flash:all"), "OKAY");
-        console.log("flash");
-    }
-
-    const decompressFileToTransform = async(e) => {
-        console.log(USBDevice);
-
-        if (!flashFile) return;
-
-        const file = flashFile;
-        let buff = await file.arrayBuffer()
-        let data = new Uint8Array(buff);
-        let totalBytes = 0;
-
-        console.log(data)
-
-        if (!window.binding) {
-            console.log("no binding");
-            return;
-        }
-
-        const stream = new binding.ZstdDecompressStreamBinding();
-
-        const callback = (decompressed) => {
-            console.log(decompressed);
-        }
-
-        if (!stream.begin()) {
-            console.log("stream.begin() error");
-            return null;
-        }
-
-        console.log("start unzipping");
-
-        let i = 0;
-        const size = 1024*1024*2;
-        while (i < 3) {
-            let end = Math.min(size*(i+1), data.length);
-            let slice = data.slice(size*i, end);
-
-            if (!stream.transform(slice, callback)) {
-                console.log(`stream.transform() error on slice ${size*i} to ${end}`);
-                return null;
-            }
-
-            i++;
-        }
-
-    }
-
-
-    return [{
-        requestUSBDevice,
-        USBDevice,
-        flashProgress,
-        flashTotal,
-        preBoot,
-        processChunk,
-        send_chunk_headers,
-        send_packet,
-        send_flash,
-        flash_all,
-    }]
-}
-
-export default useDecompress;
\ No newline at end of file
diff --git a/webusb/src/logic/useDecompress4.js b/webusb/src/logic/useDecompress4.js
deleted file mode 100644
index 1167df1a..00000000
--- a/webusb/src/logic/useDecompress4.js
+++ /dev/null
@@ -1,229 +0,0 @@
-
-import {useEffect, useState} from 'react';
-import {str_to_arr, ab_to_str} from '../helper/functions.js'
-import {CHUNK_SZ, BLK_SZ, CHUNK_TYPE_RAW, CHUNK_TYPE_DONT_CARE, build_sparse_header, build_chunk_header} from '../helper/sparse.js'
-
-const USBrequestParams = { filters: [{ vendorId: 8137, productId: 0x0152 }] };
-
-const PACKET_SZ = 0x10000;
-const DATA_SZ = CHUNK_SZ * BLK_SZ; // in bytes
-
-let cap = 2;
-
-const decompress_sz = 1024*64;
-let totalBytes = 0;
-
-let buffer = new Uint8Array();
-
-const useDecompress4 = (flashFile) => {
-    const [USBDevice, setUSBDevice] = useState();
-    const [flashProgress, setFlashProgress] = useState();
-    const [flashTotal, setFlashTotal] = useState();
-    const [stream, setStream] = useState();
-    const [decompress_i, setDecompress_i] = useState(0);
-
-    useEffect (()=> {
-        if (USBDevice) {
-            USBDevice.open().then(()=>{
-                console.log(`Opened USB Device: ${USBDevice.productName}`);
-            }, (err)=> {
-                console.log(err)
-            })
-            .then(()=> {
-                if (flashFile)
-                    decompressFileToTransform();
-            })
-        }
-
-    }, [USBDevice])
-
-    useEffect(()=> {
-        setTimeout(()=> { // takes a while for this to load?
-            const s = new binding.ZstdDecompressStreamBinding();
-            setStream(s);
-        }, 500)
-    }, [])
-
-    
-    const requestUSBDevice = () => { // first thing called with button
-        navigator.usb
-        .requestDevice(USBrequestParams)
-        .then((device) => {
-            setUSBDevice(device);
-        })
-        .catch((e) => {
-            console.error(`There is no device. ${e}`);
-        });
-    }   
-    async function send_data(data, success_str) {
-        await USBDevice.transferOut(1, data);
-        let result = await USBDevice.transferIn(1, 1048);
-
-        if (success_str !== ab_to_str(result.data.buffer)) {
-            console.log('err message', result.data.buffer);
-            throw new Error ("failed to send data:", ab_to_str(result.data.buffer))
-        }
-        else {
-            console.log("transfer in reply after sending", data);
-        }
-    }
-
-    async function preBoot () {
-        await USBDevice.claimInterface(0);
-
-        await send_data(str_to_arr("UCmd:setenv fastboot_dev mmc"), "OKAY");
-        await send_data(str_to_arr("UCmd:setenv mmcdev ${emmc_dev}"), "OKAY");
-        await send_data(str_to_arr("UCmd:mmc dev ${emmc_dev}"), "OKAY");
-
-        console.log("preboot complete")
-    }
-
-    /*
-    * data: string or arraybuffer
-    * success_str: checks response of usb
-    * Throws error if USB input does not match success_str
-    */
-    
-    /// new stuff
-
-    const appendBuffer = (new_buffer) => {
-        console.log("length", buffer.length + new_buffer.length);
-        let temp = new Uint8Array(buffer.length + new_buffer.length);
-        temp.set(buffer, 0);
-        temp.set(new_buffer, buffer.length);
-        // console.log("temp, buffer so far", temp);
-        buffer = temp;
-    }
-
-    const callback = (decompressed) => {
-        // console.log("callback")
-
-        // if (decompressed.length + buffer.length < DATA_SZ) {
-        //     appendBuffer(decompressed);
-        // }
-
-        // let padCount = DATA_SZ - buffer.length;
-        // appendBuffer(decompressed.slice(0, padCount));
-        // console.log(buffer); // do something
-
-        // setBuffer(decompressed.slice(padCount));
-        // while (true) {
-        //     console.log(buffer.slice(0, DATA_SZ));
-        //     let temp = buffer.slice(DATA_SZ);
-
-        //     if (temp.length<DATA_SZ) {
-        //         setBuffer(temp);
-        //         break;
-        //     }
-        // }
-
-        // appendBuffer(decompressed);
-        // let temp = new Uint8Array(buffer.length + decompressed.length);
-        // temp.set(buffer, 0);
-        // temp.set(decompressed, buffer.length);
-        // buffer = temp;
-
-        // console.log(buffer);
-        // totalBytes += decompressed.length;
-        // console.log(totalBytes);
-
-        totalBytes+= decompressed.length;
-    }
-
-
-    const decompressFileToTransform = async() => {
-        console.log("binding", stream);
-        await preBoot(); // problem was you didn't reset the board
-        console.log("after preboot");
-
-        if (!flashFile) return;
-
-        const file = flashFile;
-        let data = new Uint8Array(await file.arrayBuffer());
-
-        if (!window.binding) {
-            console.log("no binding");
-            return;
-        }
-
-        // let num_callbacks = 0;
-        // let num_chunks = 0;
-        // let curr_chunk = new Uint8Array(DATA_SZ);
-        // let curr_chunk_offset = 0;
-
-        
-
-        // const callback = (decompressed) => {
-        //     if (num_chunks==cap) return;
-        //     totalBytes += decompressed.length;
-        //     while(curr_chunk_offset + decompressed.length >= DATA_SZ) {
-        //         curr_chunk.set(decompressed.slice(0, DATA_SZ - curr_chunk_offset), curr_chunk_offset);
-
-        //         // process_chunk(curr_chunk, DATA_SZ, num_chunks);
-        //         process_chunk2(curr_chunk, num_chunks);
-                
-        //         curr_chunk_offset = 0;
-        //         decompressed = decompressed.slice(DATA_SZ - curr_chunk_offset, decompressed.length);
-        //         num_chunks++;
-        //     }
-        //     curr_chunk.set(decompressed, curr_chunk_offset);
-        //     curr_chunk_offset += decompressed.length;
-        //     num_callbacks++;
-        // }
-
-        // console.log("start unzipping");
-
-        if (!stream.begin()) {
-            console.log("stream.begin() error");
-            return null;
-        }
-
-        let offset = 0;
-        while (offset < data.length) {
-            let slice = data.slice(offset, offset + decompress_sz);
-            let res = await stream.transform(slice, callback);
-
-            if (!res) {console.log("stream transform fail"); return null;}
-
-            // console.log("buffer after transform", buffer);
-            // buffer = new Uint8Array();
-            console.log("bytes after transform", totalBytes);
-            totalBytes = 0;
-            offset += decompress_sz;
-        }
-
-        if (!stream.end(callback)) {
-            console.log("stream.end() error");
-            return null;
-        }
-
-        // let i = 0;
-        // const size = 1024*1024*2; // 2MB of data at a time
-        // // while (size*i < data.length) {
-        // while (size*i < data.length) {
-        //     let end = Math.min(size*(i+1), data.length);
-        //     let slice = data.slice(size*i, end);
-
-        //     console.log("loop running transform")
-        //     if (!stream.transform(slice, callback)) {
-        //         console.log(`stream.transform() error on slice ${size*i} to ${end}`);
-        //         return null;
-        //     }
-        //     // console.log(`transform on ${size*i} to ${end}`);
-
-        //     i++;
-        // }
-
-        // if (!stream.end(callback)) {
-        //     console.log("stream.end() error");
-        //     return null;
-        // }
-    }
-
-    return [{
-        requestUSBDevice,
-        decompressFileToTransform
-    }]
-}
-
-export default useDecompress4;
diff --git a/webusb/src/logic/useUSBFlash.js b/webusb/src/logic/useUSBFlash.js
index bc33cfe2..216133c2 100644
--- a/webusb/src/logic/useUSBFlash.js
+++ b/webusb/src/logic/useUSBFlash.js
@@ -29,6 +29,7 @@
 *
 */
 
+// takes in an already decompressed flash file
 import {useEffect, useState} from 'react';
 import {str_to_arr, ab_to_str} from '../helper/functions.js'
 import {CHUNK_SZ, BLK_SZ, PACKET_SZ, CHUNK_TYPE_RAW, CHUNK_TYPE_DONT_CARE, build_sparse_header, build_chunk_header} from '../helper/sparse.js'

From 33d942b611e529deae20e144e9a0134859514fad Mon Sep 17 00:00:00 2001
From: Sarah Wang <sarah.wang_1@nxp.com>
Date: Thu, 10 Aug 2023 11:32:51 -0500
Subject: [PATCH 12/15] deleted some lines

---
 webusb/src/App.js                  |  2 +-
 webusb/src/logic/flashMachine.js   | 87 ------------------------------
 webusb/src/logic/useDecompress2.js | 32 +++--------
 webusb/src/logic/useFlash.js       | 22 +++-----
 4 files changed, 16 insertions(+), 127 deletions(-)
 delete mode 100644 webusb/src/logic/flashMachine.js

diff --git a/webusb/src/App.js b/webusb/src/App.js
index 0b048ccd..0db5502c 100644
--- a/webusb/src/App.js
+++ b/webusb/src/App.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import Combined from "./components/Combined";
 import Decompress from "./components/Decompress";
 import usePopup from "./logic/usePopup";
diff --git a/webusb/src/logic/flashMachine.js b/webusb/src/logic/flashMachine.js
deleted file mode 100644
index 551fe7f3..00000000
--- a/webusb/src/logic/flashMachine.js
+++ /dev/null
@@ -1,87 +0,0 @@
-class ChunkProcessor 
-{
-    #chunk_size
-    #buffer
-    #on_chunk
-
-    /**
-     * This callback is displayed as part of the Requester class.
-     * @callback dataCallback
-     * @param {buffer} Uint8Array
-     */
-
-    /**
-     * @param {number} chunk_size 
-     * @param {dataCallback} on_chunk
-     */
-    constructor(chunk_size, on_chunk) 
-    {
-        this.#buffer = new Uint8Array();
-        this.#chunk_size = chunk_size;
-        this.#on_chunk = on_chunk;
-    }
-
-    /**
-     * @param {Uint8Array} new_buffer 
-     */
-    #append_buffer(new_buffer) {
-        const temp = new Uint8Array(this.#buffer.length + new_buffer.length);
-        temp.set(this.#buffer, 0);
-        temp.set(new_buffer, this.#buffer.length);
-        this.#buffer = temp;
-    }
-
-    /**
-     * Adds new data to the buffer, and consumes chunks
-     * @param {Uint8Array} new_buffer 
-     */
-    async push_data(new_buffer) {
-        if(this.#buffer.length + new_buffer.length < this.#chunk_size) {
-            this.#append_buffer(new_buffer);
-            return;
-        }
-
-        // process old data
-        const chunkPadCount = this.#chunk_size - this.#buffer.length;
-        this.#append_buffer(new_buffer.slice(0, chunkPadCount));
-        await this.#on_chunk(this.#buffer); //TODO:: is this await necessary?
-
-        // remove the data already processed
-        new_buffer = new_buffer.slice(chunkPadCount);
-        while(true) {
-            const curr_slice = new_buffer.slice(0, this.#chunk_size); // dont care about OOB, js handles it for us
-            if(curr_slice.length === this.#chunk_size) {
-                await this.#on_chunk(curr_slice); //TODO: same with this await?
-                new_buffer = new_buffer.slice(this.#chunk_size);
-            } else {
-                this.#buffer = curr_slice;
-                break;
-            }
-        }
-    }
-
-    /**
-     * flushes anything currently being buffered
-     * @param {dataCallback=} callback 
-     */
-    flush(callback) {
-        if(!callback) {
-            callback = this.#on_chunk;
-        }
-
-        callback(this.#buffer);
-        this.#buffer = new Uint8Array();
-    }
-
-    /**
-     * processes an entire array, including remaining data
-     * @param {Uint8Array} new_buffer 
-     * @param {dataCallback=} callback 
-     */
-    process_entire_arr(new_buffer, callback) {
-        this.push_data(new_buffer);
-        this.flush(callback);
-    }
-}
-
-export default ChunkProcessor
\ No newline at end of file
diff --git a/webusb/src/logic/useDecompress2.js b/webusb/src/logic/useDecompress2.js
index 77f5e19e..737b3cf0 100644
--- a/webusb/src/logic/useDecompress2.js
+++ b/webusb/src/logic/useDecompress2.js
@@ -1,20 +1,13 @@
 
 
-import {useEffect, useRef, useState} from 'react';
-import {str_to_arr, ab_to_str} from '../helper/functions.js'
-import {CHUNK_SZ, BLK_SZ, CHUNK_TYPE_RAW, CHUNK_TYPE_DONT_CARE, build_sparse_header, build_chunk_header} from '../helper/sparse.js'
+import { useEffect, useRef, useState } from 'react';
+import { CHUNK_SZ, BLK_SZ } from '../helper/sparse.js'
+import ChunkProcessor from './ChunkProcessor.js';
+import { preboot, process_chunk } from './useFlash.js'
 
 const USBrequestParams = { filters: [{ vendorId: 8137, productId: 0x0152 }] };
-
-const PACKET_SZ = 0x10000;
 const DATA_SZ = CHUNK_SZ * BLK_SZ; // in bytes
-
-const size = 1024*1024;
-
-const test_data_sz = 262144;
-
-import ChunkProcessor from './flashMachine.js';
-import {preboot, process_chunk} from './useFlash.js'
+const size = 1024*1024; // for decompressing
 
 const useDecompress2 = (flashFile) => {
     const chunk_processor = useRef();
@@ -24,7 +17,6 @@ const useDecompress2 = (flashFile) => {
     const i = useRef(0); // for indexing through flashfile
     const chunk_i = useRef(0); // for building chunk headers
 
-
     const [USBDevice, setUSBDevice] = useState();
     const [flashProgress, setFlashProgress] = useState();
     const [flashTotal, setFlashTotal] = useState();
@@ -42,14 +34,9 @@ const useDecompress2 = (flashFile) => {
     // things to test: do you have to await on 
     const processChunk = async(chunk) => {
         console.log('processing...');
-        // let res = await p2();
-        // console.log(res);
-        // res = await p3();
-        // console.log(res);
-        // await p3();
 
         await process_chunk(USBDevice, chunk, chunk_i.current);
-        chunk_i.current += 1; //TODO: CHANGE THIS FOR ME
+        chunk_i.current ++;
 
         console.log("COMPLETED ONE CHUNK");
         console.log(chunk);
@@ -81,8 +68,6 @@ const useDecompress2 = (flashFile) => {
     }, [USBDevice])
 
     const requestUSBDevice = () => { // first thing called with button
-        // change back
-        // setUSBDevice(1);
         navigator.usb
         .requestDevice(USBrequestParams)
         .then((device) => {
@@ -134,7 +119,6 @@ const useDecompress2 = (flashFile) => {
         console.log(decompressed);
         total.current += decompressed.length;
 
-        // await chunk_processor.current.push_data(decompressed);
         await chunk_processor.current.push_data(decompressed);
 
         // uncomment below this
@@ -161,8 +145,8 @@ const useDecompress2 = (flashFile) => {
             return;
         }
 
-        let chunk = data.current.slice(size*i.current, Math.min(size*(i.current+1), data.current.length)); //TODO: maybe don't need min thigs, handled automatically
-        i.current += 1;
+        let chunk = data.current.slice(size*i.current, size*(i.current+1));
+        i.current ++;
 
         if (!stream.current.load(chunk)) {
             console.log("stream.load() error");
diff --git a/webusb/src/logic/useFlash.js b/webusb/src/logic/useFlash.js
index e216fa48..d607b8ba 100644
--- a/webusb/src/logic/useFlash.js
+++ b/webusb/src/logic/useFlash.js
@@ -1,12 +1,10 @@
 // flash and other usb stuff
-import {useEffect, useState} from 'react';
 import {str_to_arr, ab_to_str} from '../helper/functions.js'
 import {CHUNK_SZ, BLK_SZ, CHUNK_TYPE_RAW, CHUNK_TYPE_DONT_CARE, build_sparse_header, build_chunk_header} from '../helper/sparse.js'
 
 const USBrequestParams = { filters: [{ vendorId: 8137, productId: 0x0152 }] };
 
 const PACKET_SZ = 0x10000;
-const DATA_SZ = CHUNK_SZ * BLK_SZ; // in bytes
 
 // HELPER //
 async function get_reply(USBDevice, success_str) {
@@ -22,13 +20,9 @@ async function send_output(USBDevice, data) {
     await USBDevice.transferOut(1, data);
 }
 
-async function send_data(USBDevice, data, success_str) { // TODO: use functions above to simplify
-    await USBDevice.transferOut(1, data);
-    let result = await USBDevice.transferIn(1, 1048);
-
-    if (success_str !== ab_to_str(result.data.buffer)) {
-        throw new Error ("failed to send data:", ab_to_str(result.data.buffer))
-    }
+async function send_data(USBDevice, data, success_str) {
+    send_output(USBDevice, data);
+    get_reply(USBDevice, success_str);
 }
 
 async function send_headers(USBDevice, raw_data_bytelength, i) {
@@ -58,12 +52,10 @@ export async function preboot (USBDevice) {
 }
 
 async function send_chunk_begin (USBDevice, chunk_len, i) {
-    // rounds chunk len up to nearest block:
-    let round_chunk_len = Math.ceil(chunk_len/BLK_SZ)*BLK_SZ; //TODO: redundant
-    let hex_len = (round_chunk_len + 52).toString(16);
+    let hex_len = (chunk_len + 52).toString(16);
 
     await send_data(USBDevice, str_to_arr(`download:${hex_len}`), `DATA${hex_len}`);
-    await send_headers(USBDevice, round_chunk_len, i);
+    await send_headers(USBDevice, chunk_len, i);
 }
 
 async function flash_all (USBDevice) {
@@ -74,8 +66,8 @@ async function flash_all (USBDevice) {
 export async function process_chunk (USBDevice, chunk, i) {
     console.log("process_chunk");
     console.log(USBDevice, chunk, i);
-    // pad chunk with zeros
-
+    
+    // pad chunk with zeros to the nearest block size
     let pad_count = Math.ceil(chunk.length/BLK_SZ)*BLK_SZ - chunk.length
 
     if (pad_count) {

From 9bd2e5417c019b7d745fcf7664eba69e498fbe91 Mon Sep 17 00:00:00 2001
From: Sarah Wang <sarah.wang_1@nxp.com>
Date: Thu, 10 Aug 2023 16:12:37 -0500
Subject: [PATCH 13/15] tyring to make it look better

---
 webusb/src/App.css                  |  4 ++
 webusb/src/App.js                   |  4 +-
 webusb/src/components/NewApp.css    | 16 ++++++
 webusb/src/components/NewApp.js     | 34 +++++++++++
 webusb/src/logic/ChunkProcessor.js  | 87 +++++++++++++++++++++++++++++
 webusb/src/logic/usePopupContent.js | 59 -------------------
 6 files changed, 144 insertions(+), 60 deletions(-)
 create mode 100644 webusb/src/components/NewApp.css
 create mode 100644 webusb/src/components/NewApp.js
 create mode 100644 webusb/src/logic/ChunkProcessor.js
 delete mode 100644 webusb/src/logic/usePopupContent.js

diff --git a/webusb/src/App.css b/webusb/src/App.css
index 06bda410..702d0e0d 100644
--- a/webusb/src/App.css
+++ b/webusb/src/App.css
@@ -25,6 +25,10 @@
     display: inline-block;
 }
 
+.h3 {
+    font-weight: 700;
+}
+
 .link-container{
     display: inline-block;
     width : 16rem;
diff --git a/webusb/src/App.js b/webusb/src/App.js
index 0db5502c..071c4c4d 100644
--- a/webusb/src/App.js
+++ b/webusb/src/App.js
@@ -3,6 +3,8 @@ import Combined from "./components/Combined";
 import Decompress from "./components/Decompress";
 import usePopup from "./logic/usePopup";
 
+import NewApp from "./components/NewApp";
+
 import './App.css'
 
 const App = () => {
@@ -50,7 +52,7 @@ const App = () => {
 
             <span>{error}</span>
         </div>
-
+        <NewApp />
     </div>
     );
 }
diff --git a/webusb/src/components/NewApp.css b/webusb/src/components/NewApp.css
new file mode 100644
index 00000000..23ab889e
--- /dev/null
+++ b/webusb/src/components/NewApp.css
@@ -0,0 +1,16 @@
+.new-app {
+    font-family: Arial,sans-serif;
+}
+
+.button {
+    background-color: white;
+    border: none;
+    color: black;
+    padding: 5px 10px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 14px;
+    border: thin black solid;
+    text-transform: uppercase;
+}
\ No newline at end of file
diff --git a/webusb/src/components/NewApp.js b/webusb/src/components/NewApp.js
new file mode 100644
index 00000000..d6894973
--- /dev/null
+++ b/webusb/src/components/NewApp.js
@@ -0,0 +1,34 @@
+import { useState } from 'react'
+import "./NewApp.css"
+
+const NewPopup = () => {
+    const [show, setShow] = useState(false);
+
+    return (
+        <div>
+            
+        </div>
+    )
+}
+
+const NewApp = () => {
+    return(
+        <div className="new-app">
+            <div className="u-flex u-column list-files-container">
+                <div className="u-flex file-option-container">
+                    <div className="file-name-container">
+                        <div className="h3">
+                                imx-image-core-imx8qxpc0mek-20230725120337.rootfs.wic
+                        </div>
+                    </div>
+                    <div className="file-action-container">
+                        <button class="button">Download</button>
+                        <button class="button">USB Download</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default NewApp
\ No newline at end of file
diff --git a/webusb/src/logic/ChunkProcessor.js b/webusb/src/logic/ChunkProcessor.js
new file mode 100644
index 00000000..8542482e
--- /dev/null
+++ b/webusb/src/logic/ChunkProcessor.js
@@ -0,0 +1,87 @@
+class ChunkProcessor 
+{
+    #chunk_size
+    #buffer
+    #on_chunk
+
+    /**
+     * This callback is displayed as part of the Requester class.
+     * @callback dataCallback
+     * @param {buffer} Uint8Array
+     */
+
+    /**
+     * @param {number} chunk_size 
+     * @param {dataCallback} on_chunk
+     */
+    constructor(chunk_size, on_chunk) 
+    {
+        this.#buffer = new Uint8Array();
+        this.#chunk_size = chunk_size;
+        this.#on_chunk = on_chunk;
+    }
+
+    /**
+     * @param {Uint8Array} new_buffer 
+     */
+    #append_buffer(new_buffer) {
+        const temp = new Uint8Array(this.#buffer.length + new_buffer.length);
+        temp.set(this.#buffer, 0);
+        temp.set(new_buffer, this.#buffer.length);
+        this.#buffer = temp;
+    }
+
+    /**
+     * Adds new data to the buffer, and consumes chunks
+     * @param {Uint8Array} new_buffer 
+     */
+    async push_data(new_buffer) {
+        if(this.#buffer.length + new_buffer.length < this.#chunk_size) {
+            this.#append_buffer(new_buffer);
+            return;
+        }
+
+        // process old data
+        const chunkPadCount = this.#chunk_size - this.#buffer.length;
+        this.#append_buffer(new_buffer.slice(0, chunkPadCount));
+        await this.#on_chunk(this.#buffer); // await is still necessary, even though js says it's not
+
+        // remove the data already processed
+        new_buffer = new_buffer.slice(chunkPadCount);
+        while(true) {
+            const curr_slice = new_buffer.slice(0, this.#chunk_size); // dont care about OOB, js handles it for us
+            if(curr_slice.length === this.#chunk_size) {
+                await this.#on_chunk(curr_slice); // await is still necessary, even though js says it's not
+                new_buffer = new_buffer.slice(this.#chunk_size);
+            } else {
+                this.#buffer = curr_slice;
+                break;
+            }
+        }
+    }
+
+    /**
+     * flushes anything currently being buffered
+     * @param {dataCallback=} callback 
+     */
+    flush(callback) {
+        if(!callback) {
+            callback = this.#on_chunk;
+        }
+
+        callback(this.#buffer);
+        this.#buffer = new Uint8Array();
+    }
+
+    /**
+     * processes an entire array, including remaining data
+     * @param {Uint8Array} new_buffer 
+     * @param {dataCallback=} callback 
+     */
+    process_entire_arr(new_buffer, callback) {
+        this.push_data(new_buffer);
+        this.flush(callback);
+    }
+}
+
+export default ChunkProcessor
\ No newline at end of file
diff --git a/webusb/src/logic/usePopupContent.js b/webusb/src/logic/usePopupContent.js
deleted file mode 100644
index 88a00d3d..00000000
--- a/webusb/src/logic/usePopupContent.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/*
-* Copyright 2023 NXP.
-*
-* Redistribution and use in source and binary forms, with or without modification,
-* are permitted provided that the following conditions are met:
-*
-* Redistributions of source code must retain the above copyright notice, this
-* list of conditions and the following disclaimer.
-*
-* Redistributions in binary form must reproduce the above copyright notice, this
-* list of conditions and the following disclaimer in the documentation and/or
-* other materials provided with the distribution.
-*
-* Neither the name of the NXP Semiconductor nor the names of its
-* contributors may be used to endorse or promote products derived from this
-* software without specific prior written permission.
-*
-* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
-* AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
-* IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
-* ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
-* LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
-* CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
-* SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
-* INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
-* CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
-* ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
-* POSSIBILITY OF SUCH DAMAGE.
-*
-*/
-
-import {useState} from 'react';
-
-const usePopupContent = ({bootFile, flashFile}) => {
-    const [error, setError] = useState();
-    const [show, setShow] = useState(false);
-
-    const showPopup = () => {
-        if (flashFile == null || bootFile == null) {
-            setError("Please choose flash files")
-        }
-        else {
-            setError("");
-            setShow(true);
-        }
-    }
-    const closePopup = () => {
-        setShow(false);
-    }
-
-    return [{
-        showPopup,
-        closePopup,
-        show,
-        error,
-    }]
-}
-
-export default usePopupContent
\ No newline at end of file

From 8f7ecce515112375faf0dd230b0127b541133de8 Mon Sep 17 00:00:00 2001
From: Sarah Wang <sarah.wang_1@nxp.com>
Date: Fri, 11 Aug 2023 15:54:33 -0500
Subject: [PATCH 14/15] more pretty demo

---
 webusb/src/App.css                   |   8 ++
 webusb/src/App.js                    |  38 ----------
 webusb/src/components/Combined.css   |   4 +
 webusb/src/components/Combined.js    |   2 +
 webusb/src/components/NewApp.css     |  58 ++++++++++++++-
 webusb/src/components/NewApp.js      | 105 +++++++++++++++++++++++++--
 webusb/src/components/ProgressBar.js |   4 +-
 webusb/src/logic/useDecompress2.js   |  18 ++++-
 8 files changed, 186 insertions(+), 51 deletions(-)

diff --git a/webusb/src/App.css b/webusb/src/App.css
index 702d0e0d..fc9d58ca 100644
--- a/webusb/src/App.css
+++ b/webusb/src/App.css
@@ -25,10 +25,18 @@
     display: inline-block;
 }
 
+.u-align-center {
+    align-content: center;
+}
+
 .h3 {
     font-weight: 700;
 }
 
+.h4 {
+    font-weight: 500;
+}
+
 .link-container{
     display: inline-block;
     width : 16rem;
diff --git a/webusb/src/App.js b/webusb/src/App.js
index 071c4c4d..a8c3d504 100644
--- a/webusb/src/App.js
+++ b/webusb/src/App.js
@@ -14,44 +14,6 @@ const App = () => {
 
     return (
     <div className="App">
-        <div className="u-flex u-column">
-            <div>
-                <Decompress />
-            </div>
-            <div className="u-row">
-                <span className="link-container">bootloader [optional]: </span>
-                <span className="file-name">{bootFile? bootFile.name:""}</span>
-                <label className="custom-file-upload">
-                    <input className="input" type="file" onChange={(e)=>setBootFile(e.target.files[0])}/>
-                    Choose File
-                </label>
-            </div>
-
-            <div className="u-row">
-                <span className="link-container">flash: </span>
-                <span className="file-name">{flashFile? flashFile.name:""}</span>
-                <label className="custom-file-upload">
-                    <input className="input" type="file" onChange={(e)=>setFlashFile(e.target.files[0])}/>
-                    Choose File
-                </label>
-            </div>
-
-            <div className="popup-button">
-                <button onClick = {showPopup}>USB_down</button>
-            </div>
-            
-            {/* for testing purpose, just let you input files without waiting */}
-            {/* <div className="popup-loc ">
-                <div className="popup-container" style={show?{}:{display:'none'}}>
-                    <Combined bootFile={bootFile} flashFile={flashFile}/>
-                    <button onClick={()=>closePopup()}>close</button>
-                </div>
-            </div> */}
-
-            <Combined bootFile={bootFile} flashFile={flashFile}/>
-
-            <span>{error}</span>
-        </div>
         <NewApp />
     </div>
     );
diff --git a/webusb/src/components/Combined.css b/webusb/src/components/Combined.css
index ec4dfa7b..7b73f087 100644
--- a/webusb/src/components/Combined.css
+++ b/webusb/src/components/Combined.css
@@ -13,6 +13,10 @@
     border-radius: 50%;
 }
 
+.popup-container {
+    width: 40rem; 
+}
+
 .Popup-list {
     margin:0;
     padding-left: 1rem;
diff --git a/webusb/src/components/Combined.js b/webusb/src/components/Combined.js
index 75214035..b555b6d9 100644
--- a/webusb/src/components/Combined.js
+++ b/webusb/src/components/Combined.js
@@ -27,6 +27,7 @@ const Combined = ({bootFile, flashFile}) => {
                         </div>
                         <div>
                             <span>2. </span>
+                            
                             <button className="Popup-button" onClick={requestHIDDevice}> Pair HIDdevice </button>
                             <span>{bootProgress? `${bootProgress} bytes out of ${bootTotal} downloaded`: ""}</span>
                             <div className="Popup-empty">
@@ -42,6 +43,7 @@ const Combined = ({bootFile, flashFile}) => {
                         </div>
                         <div>
                             <span>3. </span>
+                            
                             <button onClick={requestUSBDevice}>Pair USBDevice </button>
                             <div className="Popup-empty"> 
 +                                {USBDevice? `connected: ${USBDevice.productName}`: ""} 
diff --git a/webusb/src/components/NewApp.css b/webusb/src/components/NewApp.css
index 23ab889e..047b9bbe 100644
--- a/webusb/src/components/NewApp.css
+++ b/webusb/src/components/NewApp.css
@@ -4,13 +4,67 @@
 
 .button {
     background-color: white;
-    border: none;
     color: black;
     padding: 5px 10px;
     text-align: center;
     text-decoration: none;
     display: inline-block;
-    font-size: 14px;
+    font-size: 10px;
     border: thin black solid;
     text-transform: uppercase;
+    font-weight: 600;
+}
+
+.button-secondary {
+    background-color: darkorange;
+    color: white;
+    padding: 5px 10px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 10px;
+    border: thin darkorange solid;
+    text-transform: uppercase;
+    font-weight: 600;
+}
+
+.file-action-container{
+    width: 14rem;
+}
+
+.file-name-container {
+    align-items: center;
+    margin-right: 4rem;
+}
+
+.popup-container {
+    width: 40rem; 
+}
+
+.file-input-container {
+    background-color: white;
+    color: black;
+    padding: 5px 10px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 10px;
+    border: thin black solid;
+    text-transform: uppercase;
+    font-weight: 400; 
+}
+.file-input {
+    display: none;
+}
+
+.instruction-title {
+    margin-bottom: 1rem;
+}
+
+.instruction-elt {
+    margin-bottom: 0.5rem;
+}
+
+.instruction-container {
+    flex:1;
 }
\ No newline at end of file
diff --git a/webusb/src/components/NewApp.js b/webusb/src/components/NewApp.js
index d6894973..bd476260 100644
--- a/webusb/src/components/NewApp.js
+++ b/webusb/src/components/NewApp.js
@@ -1,32 +1,123 @@
-import { useState } from 'react'
-import "./NewApp.css"
+import { useState, useRef } from 'react';
+import ProgressBar from './ProgressBar';
+import useHIDBoot from '../logic/useHIDBoot';
+import useDecompress2 from '../logic/useDecompress2';
+import imgSrc from '../images/imx8qxp_mek_bootmode.png';
+import "./NewApp.css";
+import "./Combined.css";
 
 const NewPopup = () => {
-    const [show, setShow] = useState(false);
+    const [bootFile, setBootFile] = useState();
+    const [flashFile, setFlashFile] = useState();
+    const [{ requestHIDDevice, HIDdevice, bootProgress, bootTotal }] = useHIDBoot(bootFile);
+    const [{ requestUSBDevice, USBDevice, flashProgress, flashTotal}] = useDecompress2(flashFile);
 
     return (
-        <div>
+        <div className="popup-container">
+            <ul className="Popup-list">
+                <li>
+                    <div className="u-flex">
+                        <div className="checkbox-container">
+                        </div>
+                        <div>
+                            <div className="h4 instruction-title ">
+                                <span>1. Switch Boot Mode to "SERIAL"</span>
+                            </div>
+                            <div className="u-flex u-center">
+                                <div className="image-container">
+                                {imgSrc? <img className="boot-image" src={imgSrc} alt="boot mode switches"/>: ""}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </li>
+                <li>
+                    <div className="u-flex">
+                        <div className="checkbox-container">
+                            {bootProgress&&(bootProgress===bootTotal)?<p className="checkbox">&#x2714;</p>:""}
+                        </div>
+                        <div className="u-column instruction-container">
+                            <div className="h4 instruction-title">
+                                <span>2. [optional] Upload bootloader</span>
+                            </div>
+                            <div className="instruction-elt">
+                                <label className="file-input-container">
+                                    choose file
+                                    <input className="file-input" type="file" onChange={(e) => setBootFile(e.target.files[0])}/>
+                                </label>
+                                <span>{bootFile?(bootFile.name.length>10 ? `${bootFile.name.slice(0,10)}...`:bootFile.name):""}</span>
+                            </div>
+                            <div className="instruction-elt">
+                                <button className="button-secondary" onClick={requestHIDDevice}> Pair HIDdevice </button>
+                            </div>
+                            <div>
+                                {/* <span>{bootProgress? `${bootProgress} bytes out of ${bootTotal} downloaded`: ""}</span> */}
+                                <div className="Popup-empty">
+                                    {bootProgress&&(bootProgress===bootTotal)?
+                                    `connected: ${HIDdevice.productName}`
+                                    : (bootProgress? `${bootProgress} bytes out of ${bootTotal} downloaded`: "")}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </li>
+                <li >
+                    <div className="u-flex ">
+                        <div className="checkbox-container ">
+                            {USBDevice?<p className="checkbox">&#x2714;</p>:""}
+                        </div>
+                        <div className="u-column instruction-container">
+                            <div className="h4 instruction-title ">
+                                <span>3. Upload image file</span>
+                            </div>
+                            <div className="instruction-elt">
+                                <label className="file-input-container">
+                                    choose file
+                                    <input className="file-input" type="file" onChange={(e) => {setFlashFile(e.target.files[0])}}/>
+                                </label>
+                                <span>{flashFile?(flashFile.name.length>10 ? `${flashFile.name.slice(0,10)}...`:flashFile.name):""}</span>
+                            </div>
+                            <div className="instruction-elt">
+                                <button className="button-secondary" onClick={requestUSBDevice}>Pair USBDevice </button>
+                            </div>
+                            <div className="Popup-empty">
+                                {flashProgress&&(flashProgress===flashTotal)?`connected: ${USBDevice.productName}`: (flashProgress?`Pairing`:"")}
+                            </div>
+                            <ProgressBar
+                                soFar = {flashProgress}
+                                total = {flashTotal}
+                            />
+                        </div>
+                    </div>
+                    
+                </li>
+            </ul>
             
         </div>
     )
 }
 
 const NewApp = () => {
+    const [show, setShow] = useState(false);
+
     return(
         <div className="new-app">
             <div className="u-flex u-column list-files-container">
                 <div className="u-flex file-option-container">
-                    <div className="file-name-container">
+                    <div className="u-flex u-align-center file-name-container">
                         <div className="h3">
                                 imx-image-core-imx8qxpc0mek-20230725120337.rootfs.wic
                         </div>
                     </div>
-                    <div className="file-action-container">
+                    <div className="u-flex u-space-between file-action-container">
                         <button class="button">Download</button>
-                        <button class="button">USB Download</button>
+                        <button class="button-secondary" onClick={()=>{setShow(!show)}}>USB Download</button>
                     </div>
                 </div>
             </div>
+            <div style={show?{}:{display:'none'}}>
+                <NewPopup />
+            </div>           
         </div>
     )
 }
diff --git a/webusb/src/components/ProgressBar.js b/webusb/src/components/ProgressBar.js
index d2f7180b..c52e2f66 100644
--- a/webusb/src/components/ProgressBar.js
+++ b/webusb/src/components/ProgressBar.js
@@ -30,11 +30,11 @@ const ProgressBar = (props) => {
             >
                 <div style = {Childdiv}></div>
             </div>
-            {
+            {/* {
                 soFar&&total?
                 (soFar===total? "Done":
                 <span>{soFar} out of {total} bytes downloaded</span>):""
-            }
+            } */}
         </div>
     )
 }
diff --git a/webusb/src/logic/useDecompress2.js b/webusb/src/logic/useDecompress2.js
index 737b3cf0..4f631ae7 100644
--- a/webusb/src/logic/useDecompress2.js
+++ b/webusb/src/logic/useDecompress2.js
@@ -17,8 +17,11 @@ const useDecompress2 = (flashFile) => {
     const i = useRef(0); // for indexing through flashfile
     const chunk_i = useRef(0); // for building chunk headers
 
+    // const flashProgress = useRef();
+    // const flashTotal = useRef();
+
     const [USBDevice, setUSBDevice] = useState();
-    const [flashProgress, setFlashProgress] = useState();
+    const [flashProgress, setFlashProgress] = useState(0);
     const [flashTotal, setFlashTotal] = useState();
 
     useEffect(()=> {
@@ -26,6 +29,7 @@ const useDecompress2 = (flashFile) => {
         // change back
         if (!flashFile) return;
 
+        // sets data from flashFile
         (async() => {
             data.current = new Uint8Array(await flashFile.arrayBuffer());
         })()
@@ -119,6 +123,8 @@ const useDecompress2 = (flashFile) => {
         console.log(decompressed);
         total.current += decompressed.length;
 
+        
+
         await chunk_processor.current.push_data(decompressed);
 
         // uncomment below this
@@ -134,6 +140,8 @@ const useDecompress2 = (flashFile) => {
     // // need to load a chunk of data into zstd-read stream
     const doLoad = () => {
         // reached the end of processing data
+        setFlashProgress(Math.min(i.current*size, data.current.length));
+        
         if (size*i.current >= data.current.length) {
             console.log("at the end")
             console.log(total.current);
@@ -144,8 +152,8 @@ const useDecompress2 = (flashFile) => {
             chunk_processor.current.flush(processChunk);
             return;
         }
-
         let chunk = data.current.slice(size*i.current, size*(i.current+1));
+        
         i.current ++;
 
         if (!stream.current.load(chunk)) {
@@ -158,6 +166,9 @@ const useDecompress2 = (flashFile) => {
     const decompressFileToTransform = async(e) => {
         console.log("decompressFileToTransform", data.current);
 
+        setFlashTotal(data.current.length);
+        // flashTotal.current = data.current.length;
+
         await preboot(USBDevice);
 
         if (!window.binding) {
@@ -177,6 +188,9 @@ const useDecompress2 = (flashFile) => {
 
     return [{
         requestUSBDevice,
+        USBDevice,
+        flashProgress,
+        flashTotal,
     }]
 }
 

From 880ead2b5ccf9eb93d6949bf480d0551ac96a964 Mon Sep 17 00:00:00 2001
From: Sarah Wang <sarah.wang_1@nxp.com>
Date: Fri, 18 Aug 2023 15:06:55 -0500
Subject: [PATCH 15/15] test

---
 webusb/public/index.html         | 2 +-
 webusb/src/components/NewApp.css | 7 +++++++
 webusb/src/components/NewApp.js  | 8 ++++----
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/webusb/public/index.html b/webusb/public/index.html
index 2ded04a7..d83fa86b 100644
--- a/webusb/public/index.html
+++ b/webusb/public/index.html
@@ -29,7 +29,7 @@
   </head>
 
   <body>
-    <h1>Sample Applications</h1>
+    
     <div id="container"></div>
 
 
diff --git a/webusb/src/components/NewApp.css b/webusb/src/components/NewApp.css
index 047b9bbe..7264377b 100644
--- a/webusb/src/components/NewApp.css
+++ b/webusb/src/components/NewApp.css
@@ -1,5 +1,6 @@
 .new-app {
     font-family: Arial,sans-serif;
+    padding-left: 2rem;
 }
 
 .button {
@@ -13,6 +14,7 @@
     border: thin black solid;
     text-transform: uppercase;
     font-weight: 600;
+    cursor: pointer;
 }
 
 .button-secondary {
@@ -26,6 +28,7 @@
     border: thin darkorange solid;
     text-transform: uppercase;
     font-weight: 600;
+    cursor: pointer;
 }
 
 .file-action-container{
@@ -67,4 +70,8 @@
 
 .instruction-container {
     flex:1;
+}
+
+.popup {
+    margin-top: 2rem;
 }
\ No newline at end of file
diff --git a/webusb/src/components/NewApp.js b/webusb/src/components/NewApp.js
index bd476260..8e8476a4 100644
--- a/webusb/src/components/NewApp.js
+++ b/webusb/src/components/NewApp.js
@@ -45,13 +45,12 @@ const NewPopup = () => {
                                     choose file
                                     <input className="file-input" type="file" onChange={(e) => setBootFile(e.target.files[0])}/>
                                 </label>
-                                <span>{bootFile?(bootFile.name.length>10 ? `${bootFile.name.slice(0,10)}...`:bootFile.name):""}</span>
+                                <span>{bootFile?(bootFile.name.length>15 ? `${bootFile.name.slice(0,10)}...`:bootFile.name):""}</span>
                             </div>
                             <div className="instruction-elt">
                                 <button className="button-secondary" onClick={requestHIDDevice}> Pair HIDdevice </button>
                             </div>
                             <div>
-                                {/* <span>{bootProgress? `${bootProgress} bytes out of ${bootTotal} downloaded`: ""}</span> */}
                                 <div className="Popup-empty">
                                     {bootProgress&&(bootProgress===bootTotal)?
                                     `connected: ${HIDdevice.productName}`
@@ -75,13 +74,13 @@ const NewPopup = () => {
                                     choose file
                                     <input className="file-input" type="file" onChange={(e) => {setFlashFile(e.target.files[0])}}/>
                                 </label>
-                                <span>{flashFile?(flashFile.name.length>10 ? `${flashFile.name.slice(0,10)}...`:flashFile.name):""}</span>
+                                <span>{flashFile?(flashFile.name.length>15 ? `${flashFile.name.slice(0,10)}...`:flashFile.name):""}</span>
                             </div>
                             <div className="instruction-elt">
                                 <button className="button-secondary" onClick={requestUSBDevice}>Pair USBDevice </button>
                             </div>
                             <div className="Popup-empty">
-                                {flashProgress&&(flashProgress===flashTotal)?`connected: ${USBDevice.productName}`: (flashProgress?`Pairing`:"")}
+                                {flashProgress&&(flashProgress===flashTotal)?`Success: ${USBDevice.productName}`: (flashProgress?`Pairing`:"")}
                             </div>
                             <ProgressBar
                                 soFar = {flashProgress}
@@ -102,6 +101,7 @@ const NewApp = () => {
 
     return(
         <div className="new-app">
+            <h1>WebUUU</h1>
             <div className="u-flex u-column list-files-container">
                 <div className="u-flex file-option-container">
                     <div className="u-flex u-align-center file-name-container">