Web Application Builder For ESP8266 and ESP32

I already have released a free project which was an arduino base source code for esp8266 and the esp32 WiFi modules.

Now, I've upgraded that project with a nice Web UI and made an UI builder. Also I've added a "chain network" feature which I've explained how it works in the following.

The ESP WebApp project is a base source code which also has the chain network feature and a WebApp builder file which lets you customize your own WebApp style and menus.

The project is available in the following links:

ESP32 WebApp Builder + Chain Network Feature (Arduino Source Code) – Rev 1.4

ESP8266 WebApp Builder + Chain Network Feature (Arduino Source Code) – Rev 1.4

The test “LED project” binary files:

ESP32 WebApp Example Test Chain Network Feature Program (Free binary)

ESP8266 WebApp Example Test Chain Network Feature Program (Free binary)

ESP WebApp Chain Network

The “Chain Network” is a local network which the devices one by one are connected to the each other

In the chain network, the first device is the master of network. The master determines the timing of the “userGlobal()” function. The starter (either the master or the last joined module) is directly connected to the WebApp. It sends the command to the next device, and the next device sends it to the next one till the last device. The last device response will be sent to the first device and finally the WebApp via the middle devices.

The WebApp Data

In the Arduino source code, there are 8 “unsigned int” variables (uiAppData[0]… uiAppData[8]) which are shared between the module, the WebApp and all of the modules in the chain network.

These variables may change after any transactions, so they are not suitable for storing the user program data.

When the main menu or sub menu opens in the web application for the first time, the WebApp asks for the uiAppData. The starter fills its own data into the uiAppData, then sends it to the next device, until the last device and then the response (uiAppData) will be sent to the WebApp.

Then a user script in the WebApp can be executed according to the uiAppData values.

After the first initialization, the WebApp can either send the data intervally or when a change in the app elements occurs.

So the web application sends its data to the starter device as “uiAppData”.

The starter makes its own changes in the uiAppData and sends it to the next device until the last device.

The last device sends the uiAppData back to the WebApp via the other devices.

Also the script will be executed in the WebApp after receiving the uiAppData array.

The Web Application

The web application is placed in the root page address which is 192.168.4.1 by default and can be set to 192.168.5.1 or you can use the router’s DHCP IP. The WebApp is divided to 3 menus. The menus can be selected by click on the menu button.

After selecting the menu, the WebApp asks for the initial WebApp Data (uiAppData) and then runs the WebApp script.

• The “Main menu”, “Sub menu”, logo, link, titles and the colors can be customized in the WebApp builder.
• Also you can add your customized settings to the Settings menu.

The ESP WebApp Settings menu

The web application’s settings menu has been divided to 5 parts:

• Modem ConfigurationIn this section you can set the SSID and password of the modem’s access point.
• Device Hotspot ConfigurationIn this section you can set your module’s hotspot SSID and password.
• User-Defined SettingsYou can define these settings in the WebApp Builder.
• Local Network ConfigurationIn this section you can set the “Master” device and also set the userGlobal() function execution delay.The linked WiCard IP is the IP of linked device to the module’s access point.If you don’t turn on the “Join Required” switch, the module will be set as Master.
• Local Network MapIn this section, the attached devices in the chain network will be shown.For the master, it starts with master’s SSID, then the second ESP device, until the last one, but for the last device, the sort is vice versa.If you are going to send the command to only just a specific device, type its SSID in the Target text box.

ESP WebApp Builder

In the ESPWebAppBuilder.html, you can customize the WebApp’s template colors, the font colors, the logo, the page icon, the main menu and sub menu title, the page title, the menu external link title, the settings, main menu and sub menu elements and the main menu and sub menu script.

The ESP WebApp Builder can directly generate the webapp.h or generate the WebApp code.

You can run the ESP WebApp builder with a standard web browser (no need to the internet connection).