nxp-imx · sarahfwang · Jul 21, 2023 · Jul 20, 2023 · Jul 20, 2023 · Aug 7, 2023
diff --git a/.gitignore b/.gitignore
@@ -14,4 +14,5 @@ CMakeCache.txt
 *.clst
 *.snap
 node_modules
-build
+build
+*-lock.json
diff --git a/d.txt b/d.txt
@@ -0,0 +1,14 @@
+On branch nxp
+Your branch is ahead of 'nxp/master' by 2 commits.
+  (use "git push" to publish your local commits)
+
+Changes not staged for commit:
+  (use "git add <file>..." to update what will be committed)
+  (use "git restore <file>..." to discard changes in working directory)
+	modified:   webusb/package.json
+
+Untracked files:
+  (use "git add <file>..." to include in what will be committed)
+	d.txt
+
+no changes added to commit (use "git add" and/or "git commit -a")
diff --git a/webusb/index.js b/webusb/index.js
@@ -0,0 +1,2 @@
+window.ZstdCodec = require('zstd-codec').ZstdCodec;
+require("zstd-codec/lib/module.js").run((binding) => {console.log("running", binding); window.binding = binding} )
diff --git a/webusb/notes.txt b/webusb/notes.txt
@@ -0,0 +1,5 @@
+errors you keep running into: 
+
+must init git submodule for zstd
+must start the emsdk thing to use emcc in terminal
+updating node version to do serve -s build
diff --git a/webusb/package.json b/webusb/package.json
@@ -3,26 +3,24 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "-": "^0.0.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "fs": "^0.0.1-security",
+    "g": "^2.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "^5.0.1",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "zstd-codec": "^0.1.4"
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build": "react-scripts build; browserify index.js -o build/bundle.js -t babelify --presets es2015; ",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -35,5 +33,8 @@
       "last 1 safari version"
     ]
   },
-  "proxy": "http://localhost:5000"
+  "devDependencies": {
+    "@babel/core": "^7.22.9",
+    "babelify": "^10.0.0"
+  }
 }
diff --git a/webusb/public/index.html b/webusb/public/index.html
@@ -25,8 +25,14 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>React App</title>
+    <script src="bundle.js"></script>
   </head>
+
   <body>
+
+    <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.css b/webusb/src/App.css
@@ -25,6 +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
@@ -1,7 +1,10 @@
-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";
 
+import NewApp from "./components/NewApp";
+
 import './App.css'
 
 const App = () => {
@@ -11,38 +14,7 @@ const App = () => {
 
     return (
     <div className="App">
-        <div className="u-flex u-column">
-            <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>
-
-            <div className="popup-loc ">
-                <div className="popup-container" style={show?{}:{display:'none'}}>
-                    <Combined bootFile={bootFile} flashFile={flashFile}/>
-                    <button onClick={()=>closePopup()}>close</button>
-                </div>
-            </div>
-            <span>{error}</span>
-        </div>
-
+        <NewApp />
     </div>
     );
 }

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

diff --git a/webusb/src/components/Decompress.js b/webusb/src/components/Decompress.js
@@ -0,0 +1,25 @@
+import { useEffect, useState } from "react"
+import useDecompress2 from '../logic/useDecompress2'
+
+const Decompress = () => {
+    const [flashFile, setFlashFile] = useState();
+    const [{
+        requestUSBDevice
+    }] = useDecompress2(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/components/NewApp.css b/webusb/src/components/NewApp.css
@@ -0,0 +1,77 @@
+.new-app {
+    font-family: Arial,sans-serif;
+    padding-left: 2rem;
+}
+
+.button {
+    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: 600;
+    cursor: pointer;
+}
+
+.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;
+    cursor: pointer;
+}
+
+.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;
+}
+
+.popup {
+    margin-top: 2rem;
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -14,4 +14,5 @@ CMakeCache.txt @@
     *.clst
     *.snap
     node_modules
-    build
+    build
+    *-lock.json
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		window.ZstdCodec = require('zstd-codec').ZstdCodec;
		require("zstd-codec/lib/module.js").run((binding) => {console.log("running", binding); window.binding = binding} )