ESP32 Web flasher with config

You can try it out yourself on Github pages. The Wizard (Simple UI, explained step by step) & Advanced (More debugging and information)

Making an esp32 based product (or basically any embedded product) in the market comes with some challenges. One is to let end-user configure it to their wifi, their context another issue is that you want users to be able to update it when bugs need to be fixed or functionality is added.

When making a mass produced product (100.000 + ) of course your company should have the money and time to make a app for updates and configuration, allow for USB-drive updates as a backup and allow the device to be configured using third party apps (e.g. Google Home). But a lot of ESP32 startups are in this middle area, where they might produce from tens of products till thousands. Even when just 'prototyping' smaller numbers it is nice to give your client/customer a way to update it quickly, without having to install vs code, platformio, arduino or download and install packages; which might not even possible on their 'company protected' laptop.

The webserial protocol got some traction; this the esptools-js; the 'avrdude' (Arduino flasher) of Espressif microcontrollers to be ported to javascript.

The nice thing is that with this system you can have something like the code below:

const char ssid[100] = "|*S*|";
const char password[100] = "|*P*|";
const char mdnsName[100] = "|*M*|";

This leads to a big 'area' for the string terminated with \0 characters, this is great since this makes the length of the string also variable. The \0 termination is also a well known way to end strings, so most libraries will support it.

You just need to configure a JSON object to capture and replace these strings; the UI will than be populated with the correct variables; and the javascript will 'CTRL-F' and replace the variables in place add \0 until it covers the same space/bytes. Afterwards it replaces the checksum and SHA256 according to the firmware image format to match the new binary content.

'amoled-screencast': {
    name: 'Amoled T-Display Screencast',
    description: 'WebRTC streaming firmware with WiFi configuration',
    expectedBehavior: [
        'Device connects to WiFi network <b>|*S*|</b> with password <b>|*P*|</b>',
        'Access web interface at <a href="http://|*M*|.local" target="_blank">http://|*M*|.local</a>',
        'Stream display content via WebRTC',
        'Display shows connection status'
    ],
files: [
    { path: 'Amoled-T-Display/Screencast/Firmware/bootloader.bin', offset: 0x0000 },
    { path: 'Amoled-T-Display/Screencast/Firmware/partitions.bin', offset: 0x8000 },
    { path: 'Amoled-T-Display/Screencast/Firmware/boot_app0.bin', offset: 0xe000 },
    { path: 'Amoled-T-Display/Screencast/Firmware/firmware.bin', offset: 0x10000 }
],
variables: [
    { 
        firmware_name: '|*S*|', 
        readable_name: 'WiFi Name (SSID)', 
        default_value: 'ESP32-S3-T-Display', 
        max_length: 100 
    },
    { 
        firmware_name: '|*P*|', 
        readable_name: 'WiFi Password', 
        default_value: 'testtest', 
        max_length: 100 
    },
    { 
        firmware_name: '|*M*|', 
        readable_name: 'MDNS Hostname', 
        default_value: 'esp32-s3-t-display', 
        postfix: '.local', 
        max_length: 100 
    },
    { 
        firmware_name: 'WebRTC Stream', 
        readable_name: 'Display Name', 
        default_value: 'WebRTC Stream', 
        max_length: 13 
    }
    ]
}

Below how this is than shown in the UI; the values are stored in localstorage; so they should persist based on the 'firmware_name' in case you want to re-flash it later.