show progress for flashing
This commit is contained in:
45
index.html
45
index.html
@@ -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() {
|
||||||
|
|||||||
@@ -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);
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
Reference in New Issue
Block a user