ESP32 WiFi config

About

A web-ble implementation of Bernd Giesecke's ESP32 WiFi configuration over BLE . Bernd's control app is Android only, while web-ble is being developed as a web standard, and is available currently (05/2020) on Chrome for OSX, Windows 10, and Android ( more details on implementation status can be found here ).

The repository for this app is hosted on github here. As implied by it's name, this web app was written using NuxtJS, a VueJS framework.

An older version of this app, based on KnockdownJS and JQuery can be found here.

The main reason for re-creating the app in a web framework was to enable easier implementation as part of larger web applications, such as, for eg., a web site which enables the connection of devices to database for downloading and uploading data measured by the device.
One further advantage is the creation of progressive web apps is assisted by the framework, though it is not presently implemented.

Description

This web app is intended for configuring WiFi credentials of headless IoT devices over Bluetooth LE.
Since the web-bluetooth specification is not finalized yet, only Google Chrome was validated to work on Mac OSX, Win 10, Android 9, and Ubuntu Linux (with some modifications).

To use or test this app you will need a ESP32 dev board which will run a matching application.

The app allows setting only of password protected Access Points, since it was built to complement an existing code base for the Arduino platform.
The ESP32 works only with 2.4 GHz WiFi, so APs set on other frequencies (5 GHz, soon 6 GHz) will not be displayed when used in conjunction with ESP32 based devices.

Usage

Press the "Connect" button at the top right corner. The app searches for Bluetooth-LE devices with a name that starts with "ESP32", and has a predefined service UUID. Select the desired device from the device selection menu, and press "Pair".
Once paired, the app requests the credentials stored in the device's memory.
Once the device responds, the app populates the SSID and password fields from the ESP32 device.
The app then requests for both a list of SSIDs seen by the device, as well as the connection status of the device - whether it is connected to the first defined AP, the second, or none of them.
If the device does not support either of the last two functions (which happens if the ESP32 is loaded with beegee1962's original app ), these features fail gracefully, and simply outputs a DOM exception to the console.
You can then edit the desired fields:

  • Enter SSID to "Primary defined SSID", or
    • Select SSID from dropdown, populated from a list as seen by the device.
  • Enter a password matching the SSID selected.
    • Pressing the Eye icon toggles show / hide of password field text.
    • Passwords recieved from the device cannot be edited, and thier actual text cannot be viewed.
      Pressing on a password field which content's been recieved from the device will cause the content to be erased.
  • Enable editing for the secondary password.
  • If editing of the secondary SSID and password is enabled, you can then edit the secondary SSID and password fields in the same fashion.
    • Note: If the editing of the secondary SSID credentials is enabled, these fields must not be empty. If editing of those fields is disabled and both are empty, the app will fill them with the Primary's credentials before sending the credentials to the device.
  • A status box is displayed above the form fields. In it, the current WiFi connection status of the ESP32 device to which the app is connected. (If supported by the device).
  • On the right side of the connection status box is a "Refresh" button. Pressing this button will ask the device for the configuration currently stored on it, and will therefore delete any changes you have made
  • Any changes will be deleted when disconnected from the device, and form fields will not be available for editing

After defining the crdentials, you can then press the "Configure device" button to send the new configuration to the ESP32.
Two more buttons are also provided: "Erase" - to erase the current configured SSIDs and associated passwords, and "Reset" - to reset the device when needed.
Once done with the configuration, click "Disconnect", and the stored SSIDs and credentials will be saved in the device's flash memory.
Notice: In order to configure WiFi credentials over BLE, an ESP32 device must be prepared with either of the following beforehand:

  • This app, which supports the SSID list and current connection status reporting.
or