ESP32 OTA Updates over BLE from a React Web Application

Pages
Contributors: Englandsaurus
Favorited Favorite 2

Using the OTA Updater

Alright, now that we've gone through how everything works, usage should be fairly simple. The first thing to do is upload the sketch in the ArduinoSketch folder to your ESP32 (don't forget to select the proper partition settings, as discussed in the Arduino Sketch Section). This sketch should be configured as hardware version v1.2 (the actual version number here is arbitrary, just to show functionality) and software version v0.1.0. Now go ahead and open a Serial Terminal at 115200 BPS to confirm this and also to eventually watch the ESP reboot with its new firmware.

Now that the ESP32 has its firmware, we can go ahead and boot up the WebApp on a local server by navigating to the folder it's been downloaded to (inside the repository under WebApp) and running npm start.

Starting Webpage

Starting Webpage

From here, go ahead and click on the Connect to Bluetooth button, which will bring up available devices with the proper UUID and allow you to connect. Obviously, go ahead and connect to the device.

Connection Screen

Connection Screen

Wait a few seconds while the App connects and checks the version number on the device. If the software isn't current, a pop-up should show up like the one below, asking if the user wants to update to the newest compatible software.

WebApp Prompt for User Update

Prompt User for Update

Clicking yes will begin the update process. A percentage will appear showing how far along the update is. This process can take quite some time. Upon completion, the ESP32 will reboot.

New Firmware Loading to ESP32

Loading New Firmware to ESP32

When the ESP32 reboots, it'll become disconnected from Bluetooth. The WebApp currently doesn't handle this gracefully and freezes, so restart it however you see fit and connect again to your ESP32 to see the new version pop up! You can also check this in a Serial Monitor

Now, you can feel free to add all sorts of things to your ESP32 sketch or your WebApp! Be sure to always verify that you can not only flash a compiled binary, but also flash to an ESP32 running that compiled binary. Also, make sure to keep good track of binaries and be doubly sure that a compiled binary has the proper hardware and software version number coded in or you may end up with issues down the road.

With some careful housekeeping, a relatively easy end user experience is possible!