Skip to content

use uint8array instead of string for write flash command #226

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
brianignacio5 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

use uint8array instead of string for write flash command #226

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a54e9c3
use uint8array for write flash command
brianignacio5 Dec 10, 2025
e6a19b5
allow setting flash size freq and size from example
brianignacio5 Dec 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions examples/typescript/src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,27 @@ <h3> Program </h3>
</tbody>
</table>
<input class="btn btn-info btn-sm" type="button" id="addFile" value="Add File" />
<br><br>
<label for="flashMode" id="lblFlashMode">Flash Mode:</label>
<select name="flashMode" id="flashMode">
<option value="keep" selected>keep</option>
<option value="dio">dio</option>
<option value="qio">qio</option>
<option value="dout">dout</option>
<option value="qout">qout</option>
</select>
<br><br>
<label for="flashFreq" id="lblFlashFreq">Flash Frequency:</label>
<select name="flashFreq" id="flashFreq">
<option value="keep">keep</option>
</select>
<br><br>
<label for="flashSize" id="lblFlashSize">Flash Size:</label>
<select name="flashSize" id="flashSize">
<option value="detect">detect</option>
<option value="keep">keep</option>
</select>
<br><br>
<input class="btn btn-info btn-sm" type="button" id="programButton" value="Program" />
</div>
<output id="list"></output>
Expand Down
121 changes: 115 additions & 6 deletions examples/typescript/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,27 @@ const lblConsoleFor = document.getElementById("lblConsoleFor");
const lblConnTo = document.getElementById("lblConnTo");
const table = document.getElementById("fileTable") as HTMLTableElement;
const alertDiv = document.getElementById("alertDiv");
const flashMode = document.getElementById("flashMode") as HTMLSelectElement;
const flashFreq = document.getElementById("flashFreq") as HTMLSelectElement;
const flashSize = document.getElementById("flashSize") as HTMLSelectElement;
const lblFlashMode = document.getElementById("lblFlashMode");
const lblFlashFreq = document.getElementById("lblFlashFreq");
const lblFlashSize = document.getElementById("lblFlashSize");

const debugLogging = document.getElementById("debugLogging") as HTMLInputElement;

// This is a frontend example of Esptool-JS using local bundle file
// To optimize use a CDN hosted version like
// https://unpkg.com/[email protected]/bundle.js
import { ESPLoader, FlashOptions, LoaderOptions, Transport } from "../../../lib";
import {
ESPLoader,
FlashOptions,
FlashModeValues,
FlashFreqValues,
FlashSizeValues,
LoaderOptions,
Transport,
} from "../../../lib";
import { serial } from "web-serial-polyfill";

const serialLib = !navigator.serial && navigator.usb ? serial : navigator.serial;
Expand All @@ -50,6 +64,12 @@ eraseButton.style.display = "none";
consoleStopButton.style.display = "none";
resetButton.style.display = "none";
filesDiv.style.display = "none";
flashMode.style.display = "none";
flashFreq.style.display = "none";
flashSize.style.display = "none";
lblFlashMode.style.display = "none";
lblFlashFreq.style.display = "none";
lblFlashSize.style.display = "none";

/**
* The built in Event object.
Expand All @@ -69,10 +89,14 @@ function handleFileSelect(evt) {
const reader = new FileReader();

reader.onload = (ev: ProgressEvent<FileReader>) => {
evt.target.data = ev.target.result;
if (ev.target.result instanceof ArrayBuffer) {
evt.target.data = new Uint8Array(ev.target.result);
} else {
evt.target.data = ev.target.result;
}
};

reader.readAsBinaryString(file);
reader.readAsArrayBuffer(file);
}

const espLoaderTerminal = {
Expand All @@ -87,6 +111,66 @@ const espLoaderTerminal = {
},
};

/**
* Populate flash size and frequency dropdowns based on chip's supported values
*/
function populateFlashDropdowns() {
if (!esploader || !esploader.chip) {
return;
}

// Populate Flash Frequency dropdown
flashFreq.innerHTML = '<option value="keep">keep</option>';
const flashFreqKeys = Object.keys(esploader.chip.FLASH_FREQUENCY).sort((a, b) => {
const freqOrder = ["80m", "60m", "48m", "40m", "30m", "26m", "24m", "20m", "16m", "15m", "12m"];
const indexA = freqOrder.indexOf(a);
const indexB = freqOrder.indexOf(b);
if (indexA !== -1 && indexB !== -1) return indexA - indexB;
if (indexA !== -1) return -1;
if (indexB !== -1) return 1;
return a.localeCompare(b);
});
flashFreqKeys.forEach((freq) => {
const option = document.createElement("option");
option.value = freq;
option.textContent = freq;
flashFreq.appendChild(option);
});
flashFreq.options[0].selected = true;

// Populate Flash Size dropdown
flashSize.innerHTML = '<option value="detect">detect</option><option value="keep">keep</option>';
const flashSizeKeys = Object.keys(esploader.chip.FLASH_SIZES).sort((a, b) => {
const sizeOrder = [
"256KB",
"512KB",
"1MB",
"2MB",
"2MB-c1",
"4MB",
"4MB-c1",
"8MB",
"16MB",
"32MB",
"64MB",
"128MB",
];
const indexA = sizeOrder.indexOf(a);
const indexB = sizeOrder.indexOf(b);
if (indexA !== -1 && indexB !== -1) return indexA - indexB;
if (indexA !== -1) return -1;
if (indexB !== -1) return 1;
return a.localeCompare(b);
});
flashSizeKeys.forEach((size) => {
const option = document.createElement("option");
option.value = size;
option.textContent = size;
flashSize.appendChild(option);
});
flashSize.options[1].selected = true;
}

connectButton.onclick = async () => {
try {
if (device === null) {
Expand All @@ -105,8 +189,12 @@ connectButton.onclick = async () => {
traceButton.style.display = "initial";
chip = await esploader.main();

// Populate flash dropdowns based on chip's supported values
populateFlashDropdowns();

// Temporarily broken
// await esploader.flashId();
// eslint-disable-next-line no-console
console.log("Settings done for :" + chip);
lblBaudrate.style.display = "none";
lblConnTo.innerHTML = "Connected to device: " + chip;
Expand All @@ -116,8 +204,15 @@ connectButton.onclick = async () => {
disconnectButton.style.display = "initial";
eraseButton.style.display = "initial";
filesDiv.style.display = "initial";
flashMode.style.display = "initial";
flashFreq.style.display = "initial";
flashSize.style.display = "initial";
lblFlashMode.style.display = "initial";
lblFlashFreq.style.display = "initial";
lblFlashSize.style.display = "initial";
consoleDiv.style.display = "none";
} catch (e) {
// eslint-disable-next-line no-console
console.error(e);
term.writeln(`Error: ${e.message}`);
}
Expand All @@ -142,6 +237,7 @@ eraseButton.onclick = async () => {
try {
await esploader.eraseFlash();
} catch (e) {
// eslint-disable-next-line no-console
console.error(e);
term.writeln(`Error: ${e.message}`);
} finally {
Expand Down Expand Up @@ -231,6 +327,12 @@ disconnectButton.onclick = async () => {
eraseButton.style.display = "none";
lblConnTo.style.display = "none";
filesDiv.style.display = "none";
flashMode.style.display = "none";
flashFreq.style.display = "none";
flashSize.style.display = "none";
lblFlashMode.style.display = "none";
lblFlashFreq.style.display = "none";
lblFlashSize.style.display = "none";
alertDiv.style.display = "none";
consoleDiv.style.display = "initial";
cleanUp();
Expand Down Expand Up @@ -420,7 +522,7 @@ programButton.onclick = async () => {
const offSetObj = row.cells[0].childNodes[0] as HTMLInputElement;
const offset = parseInt(offSetObj.value);

const fileObj = row.cells[1].childNodes[0] as ChildNode & { data: string };
const fileObj = row.cells[1].childNodes[0] as ChildNode & { data: Uint8Array };
const progressBar = row.cells[2].childNodes[0];

progressBar.textContent = "0";
Expand All @@ -437,14 +539,21 @@ programButton.onclick = async () => {
fileArray: fileArray,
eraseAll: false,
compress: true,
flashMode: flashMode.value as FlashModeValues,
flashFreq: flashFreq.value as FlashFreqValues,
flashSize: flashSize.value as FlashSizeValues,
reportProgress: (fileIndex, written, total) => {
progressBars[fileIndex].value = (written / total) * 100;
},
calculateMD5Hash: (image) => CryptoJS.MD5(CryptoJS.enc.Latin1.parse(image)),
} as FlashOptions;
calculateMD5Hash: (image: Uint8Array) => {
const latin1String = Array.from(image, (byte) => String.fromCharCode(byte)).join("");
return CryptoJS.MD5(CryptoJS.enc.Latin1.parse(latin1String)).toString();
},
};
await esploader.writeFlash(flashOptions);
await esploader.after();
} catch (e) {
// eslint-disable-next-line no-console
console.error(e);
term.writeln(`Error: ${e.message}`);
} finally {
Expand Down
Loading
Loading