With this Chain Network Arduino Base Source Code and the WebApp Builder, design a web UI for your ESP8266 and NodeMcu WiFi modules projects.
Price:
Other projects from this group
This project has 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 “Chain Network” is a local network which the devices one by one are connected to the each other.
There are the following files in this project:
And the following blank user files for your WebApp:
Webapp.h – This file contains the WebApp’s source code and can be generated by the WebAppBuilder file.
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 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 web application’s settings menu has been divided to 5 parts:
In the ESP8266WebAppBuilder.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 WebApp Builder can directly generate the webapp.h or generate the WebApp code.
You can run the WebApp builder with a standard web browser (no need to the internet connection).
By click on the "Note" icon, the manual and descriptions of each part will be appeared.
There’s an example program and WebApp in the “example” folder.
This example program has been tested with a DOIT-ESP32Devkit V1 (as the network master) module and an ESP8266Mod (which is linked to the ESP32) module.
In the main menu, you can turn on or off the on-chip blue LEDs.
In the sub menu you can turn on or off both LEDs at the same time.
Also you can set the LED default value at the start up in the settings menu.
In the example program, uiAppData[0] has been allocated to the ESP8266 and uiAppData[1] has been allocated to the ESP32.
The following function, the module sets its own value and in case of it is the network starte, sets ESP32 value to 2, otherwise it won’t touch the ESP32 data, because it already has been set.
So if the ESP32 is connected to the network, it will change its own value to 0 or 1.
The globalCmdEnable(); function will share the uiAppData to all of the devices.
void userMainInit()
{
%26nbsp; //Add your initial script for the main menu here
%26nbsp; if(digitalRead(ON_CHIP_LED_PIN) == HIGH)
%26nbsp;%26nbsp;%26nbsp; uiAppData[0] = 0;
%26nbsp; else
%26nbsp;%26nbsp;%26nbsp; uiAppData[0] = 1;
%26nbsp; if(networkStarterCheck()) //check if 32 is connected or not
%26nbsp;%26nbsp;%26nbsp; uiAppData[1] = 2; //32 is disconnected!
%26nbsp; // --------------------------------
%26nbsp; //receives the response from all of the connected devices
%26nbsp; globalCmdEnable();
}
The following function will be called intervally (500mS). It will turn the LED on or off according to the uiAppData.
If uiAppData[0] was 2, it means this device is not the network starter and it is an initial request, so it will filled with the current LED value.
void userMain()
{
%26nbsp; //Add your interval script for the main menu here
%26nbsp; if(uiAppData[0] == 2) // led current mode
%26nbsp; {
%26nbsp;%26nbsp;%26nbsp; if(digitalRead(ON_CHIP_LED_PIN) == HIGH)
%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp; uiAppData[0] = 0;
%26nbsp;%26nbsp;%26nbsp; else
%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp; uiAppData[0] = 1;
%26nbsp; }
%26nbsp; else if(uiAppData[0])
%26nbsp;%26nbsp;%26nbsp; digitalWrite(ON_CHIP_LED_PIN, LOW);
%26nbsp; else
%26nbsp;%26nbsp;%26nbsp; digitalWrite(ON_CHIP_LED_PIN, HIGH);
%26nbsp; // --------------------------------
%26nbsp; //sends to all of the connected devices in network
%26nbsp; globalCmdEnable();
}
The following function returns the current LED value (only the starter).
void userSubInit()
{
%26nbsp; //Add your initial script for the sub menu here
%26nbsp; if(digitalRead(ON_CHIP_LED_PIN) == HIGH)
%26nbsp;%26nbsp;%26nbsp; uiAppData[0] = 0;
%26nbsp; else
%26nbsp;%26nbsp;%26nbsp; uiAppData[0] = 1;
%26nbsp; uiSameTimeCmdVal = uiAppData[0];
%26nbsp; // --------------------------------
%26nbsp; //globalCmdEnable(); //the first value is not global
}
The following function will be called after an element change occurs. It triggers the global function commands.
void userSub()
{
%26nbsp; //Add your interval script for the sub menu here
%26nbsp; bSameTimeCmd = true; //enables userGlobal() condition
%26nbsp; uiSameTimeCmdVal = uiAppData[0];
%26nbsp; // --------------------------------
%26nbsp; // devices in the network and enable userGlobal()
%26nbsp; globalCmdEnable();
}
And then the following function will be called after the master’s “CMD Delay” time:
void userGlobal()
{
%26nbsp; // Write your global script here.
%26nbsp; if(bSameTimeCmd)
%26nbsp; {
%26nbsp;%26nbsp;%26nbsp; bSameTimeCmd = false;
%26nbsp;%26nbsp;%26nbsp; if(uiSameTimeCmdVal)
%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp; digitalWrite(ON_CHIP_LED_PIN, LOW);
%26nbsp;%26nbsp;%26nbsp; else
%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp; digitalWrite(ON_CHIP_LED_PIN, HIGH);
%26nbsp; }
%26nbsp; // --------------------------------
}
1.4
- Bugs fixed
- User functions added
- WebApp builder added
1.3
- Appearance and UI changed
- Chain network added
- Secure-link bug fixed
1.2
-Internal pages secure link
-server script
1.1
-Showing the MAC and IP address in the config page
1.0
-Set module hotspot and modem’s SSID and password
-Automatically connection to the modem
-config page
-Hidden hotspot button
-Disable hotspot button