show progress for flashing

This commit is contained in:
liamcottle
2024-07-14 19:35:29 +12:00
parent 163a91ea48
commit e4ff432f31
2 changed files with 62 additions and 14 deletions

View File

@@ -18,23 +18,41 @@
</head> </head>
<body> <body>
<div id="app" class="space-y-1"> <div id="app" class="space-y-2">
<div> <div>
<button @click="enterDfuMode" class="border px-2 bg-gray-100 hover:bg-gray-200 rounded"> <div>1. Put device into DFU Mode</div>
<button @click="enterDfuMode" class="border border-gray-500 px-2 bg-gray-100 hover:bg-gray-200 rounded">
Enter DFU Mode Enter DFU Mode
</button> </button>
</div> </div>
<div> <div>
<input ref="file" type="file"/>
<button @click="flash" class="border px-2 bg-gray-100 hover:bg-gray-200 rounded"> <div>2. Select firmware.zip to flash</div>
Flash <div class="mb-1">
</button> <input ref="file" type="file"/>
</div>
<div v-if="!isFlashing">
<button @click="flash" :disabled="isFlashing" class="border border-gray-500 px-2 bg-gray-100 hover:bg-gray-200 rounded">
Flash Now
</button>
</div>
<div v-else>
<span v-if="progress > 0">Flashing: {{progress}}%</span>
<span v-else>Flashing: please wait...</span>
<div class="mt-1 w-[200px] overflow-hidden rounded-full bg-gray-200">
<div class="h-2 rounded-full bg-blue-600" :style="{ 'width': `${progress}%`}"></div>
</div>
</div>
</div> </div>
<div> <div>
<button @click="detect" class="border px-2 bg-gray-100 hover:bg-gray-200 rounded"> <div>3. After flashing, Detect RNode version</div>
<button @click="detect" class="border border-gray-500 px-2 bg-gray-100 hover:bg-gray-200 rounded">
Detect Detect
</button> </button>
</div> </div>
@@ -45,7 +63,8 @@
Vue.createApp({ Vue.createApp({
data() { data() {
return { return {
isFlashing: false,
progress: 0,
}; };
}, },
mounted() { mounted() {
@@ -94,8 +113,16 @@
} }
// flash file // flash file
this.isFlashing = true;
this.progress = 0;
const flasher = new Nrf52DfuFlasher(serialPort); const flasher = new Nrf52DfuFlasher(serialPort);
await flasher.flash(file); await flasher.flash(file, (percentage) => {
this.progress = percentage;
if(this.progress === 100){
this.isFlashing = false;
alert("Firmware has been flashed!");
}
});
}, },
async detect() { async detect() {

View File

@@ -86,9 +86,10 @@ class Nrf52DfuFlasher {
/** /**
* Flashes the provided firmware zip. * Flashes the provided firmware zip.
* @param firmwareZipBlob * @param firmwareZipBlob
* @param progressCallback
* @returns {Promise<void>} * @returns {Promise<void>}
*/ */
async flash(firmwareZipBlob) { async flash(firmwareZipBlob, progressCallback) {
// read zip file // read zip file
const blobReader = new window.zip.BlobReader(firmwareZipBlob); const blobReader = new window.zip.BlobReader(firmwareZipBlob);
@@ -122,7 +123,7 @@ class Nrf52DfuFlasher {
// flash application image // flash application image
if(manifest.application){ if(manifest.application){
await this.dfuSendImage(this.HEX_TYPE_APPLICATION, zipEntries, manifest.application); await this.dfuSendImage(this.HEX_TYPE_APPLICATION, zipEntries, manifest.application, progressCallback);
} }
} }
@@ -132,9 +133,10 @@ class Nrf52DfuFlasher {
* @param programMode * @param programMode
* @param zipEntries * @param zipEntries
* @param firmwareManifest * @param firmwareManifest
* @param progressCallback
* @returns {Promise<void>} * @returns {Promise<void>}
*/ */
async dfuSendImage(programMode, zipEntries, firmwareManifest) { async dfuSendImage(programMode, zipEntries, firmwareManifest, progressCallback) {
// open port // open port
await this.serialPort.open({ await this.serialPort.open({
@@ -174,7 +176,7 @@ class Nrf52DfuFlasher {
await this.sendInitPacket(init_packet); await this.sendInitPacket(init_packet);
console.log("Sending firmware file") console.log("Sending firmware file")
await this.sendFirmware(firmware); await this.sendFirmware(firmware, progressCallback);
// close port // close port
console.log("Closing Port"); console.log("Closing Port");
@@ -353,11 +355,13 @@ class Nrf52DfuFlasher {
/** /**
* Sends the firmware file to the device in multiple chunks. * Sends the firmware file to the device in multiple chunks.
* @param firmware * @param firmware
* @param progressCallback
* @returns {Promise<void>} * @returns {Promise<void>}
*/ */
async sendFirmware(firmware) { async sendFirmware(firmware, progressCallback) {
const packets = []; const packets = [];
var packetsSent = 0;
// chunk firmware into separate packets // chunk firmware into separate packets
for(let i = 0; i < firmware.length; i += this.DFU_PACKET_MAX_SIZE){ for(let i = 0; i < firmware.length; i += this.DFU_PACKET_MAX_SIZE){
@@ -367,6 +371,11 @@ class Nrf52DfuFlasher {
])); ]));
} }
// send initial progress
if(progressCallback){
progressCallback(0);
}
// send each packet one after the other // send each packet one after the other
for(var i = 0; i < packets.length; i++){ for(var i = 0; i < packets.length; i++){
@@ -376,6 +385,13 @@ class Nrf52DfuFlasher {
// wait a bit to allow device to write before sending next packet // wait a bit to allow device to write before sending next packet
await this.sleepMillis(this.FLASH_PAGE_WRITE_TIME * 1000); await this.sleepMillis(this.FLASH_PAGE_WRITE_TIME * 1000);
// update progress
packetsSent++;
if(progressCallback){
const progress = Math.floor((packetsSent / packets.length) * 100);
progressCallback(progress);
}
} }
// finished sending firmware, send DFU Stop Data packet // finished sending firmware, send DFU Stop Data packet
@@ -383,6 +399,11 @@ class Nrf52DfuFlasher {
...this.int32ToBytes(this.DFU_STOP_DATA_PACKET), ...this.int32ToBytes(this.DFU_STOP_DATA_PACKET),
])); ]));
// send final progress
if(progressCallback){
progressCallback(100);
}
} }
/** /**