show progress for flashing
This commit is contained in:
41
index.html
41
index.html
@@ -18,23 +18,41 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="app" class="space-y-1">
|
||||
<div id="app" class="space-y-2">
|
||||
|
||||
<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
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
<div>2. Select firmware.zip to flash</div>
|
||||
<div class="mb-1">
|
||||
<input ref="file" type="file"/>
|
||||
<button @click="flash" class="border px-2 bg-gray-100 hover:bg-gray-200 rounded">
|
||||
Flash
|
||||
</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>
|
||||
<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
|
||||
</button>
|
||||
</div>
|
||||
@@ -45,7 +63,8 @@
|
||||
Vue.createApp({
|
||||
data() {
|
||||
return {
|
||||
|
||||
isFlashing: false,
|
||||
progress: 0,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
@@ -94,8 +113,16 @@
|
||||
}
|
||||
|
||||
// flash file
|
||||
this.isFlashing = true;
|
||||
this.progress = 0;
|
||||
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() {
|
||||
|
||||
@@ -86,9 +86,10 @@ class Nrf52DfuFlasher {
|
||||
/**
|
||||
* Flashes the provided firmware zip.
|
||||
* @param firmwareZipBlob
|
||||
* @param progressCallback
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async flash(firmwareZipBlob) {
|
||||
async flash(firmwareZipBlob, progressCallback) {
|
||||
|
||||
// read zip file
|
||||
const blobReader = new window.zip.BlobReader(firmwareZipBlob);
|
||||
@@ -122,7 +123,7 @@ class Nrf52DfuFlasher {
|
||||
|
||||
// flash application image
|
||||
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 zipEntries
|
||||
* @param firmwareManifest
|
||||
* @param progressCallback
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async dfuSendImage(programMode, zipEntries, firmwareManifest) {
|
||||
async dfuSendImage(programMode, zipEntries, firmwareManifest, progressCallback) {
|
||||
|
||||
// open port
|
||||
await this.serialPort.open({
|
||||
@@ -174,7 +176,7 @@ class Nrf52DfuFlasher {
|
||||
await this.sendInitPacket(init_packet);
|
||||
|
||||
console.log("Sending firmware file")
|
||||
await this.sendFirmware(firmware);
|
||||
await this.sendFirmware(firmware, progressCallback);
|
||||
|
||||
// close port
|
||||
console.log("Closing Port");
|
||||
@@ -353,11 +355,13 @@ class Nrf52DfuFlasher {
|
||||
/**
|
||||
* Sends the firmware file to the device in multiple chunks.
|
||||
* @param firmware
|
||||
* @param progressCallback
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async sendFirmware(firmware) {
|
||||
async sendFirmware(firmware, progressCallback) {
|
||||
|
||||
const packets = [];
|
||||
var packetsSent = 0;
|
||||
|
||||
// chunk firmware into separate packets
|
||||
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
|
||||
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
|
||||
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
|
||||
@@ -383,6 +399,11 @@ class Nrf52DfuFlasher {
|
||||
...this.int32ToBytes(this.DFU_STOP_DATA_PACKET),
|
||||
]));
|
||||
|
||||
// send final progress
|
||||
if(progressCallback){
|
||||
progressCallback(100);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user