Develop web application for ESP32 to setup WiFi Station mode

This example shows how to design a web page to setup the WiFi configuration in station mode for ESP32 and another web page for showing some data using widgets.

Web Page Designing

Web page designing in Aimagin Connect is very user friendly and easy to use with dragging and dropping components and can be designed advanced web pages using it with a minimum knowledge on web designing. Developing most of the web pages for SMC on Aimagin Connect can be divided in to two sections.

  1. Designing the web page
  2. Creating the database table for data representation on web pages

Following documentation demonstrates developing each web page on Aimagin Connect step by step.

Developing WiFi Configuration page

Database table is used to save the WiFi configuration data to connect the ESP32 to the internet via wifi router to upload the data to a server. There are seven user input parameters(SSID, Password, Static or Dynamic selection, IP address, Subnet mask, Gateway and DNS) on this page. For each parameter, there should be a separate column in database table. Creating a new database table in Aimagin Connect is as follows.

Once login in to the Aimagin Connect server on the web go to Transnational database under Database in Tool Box as in the following figure.

Then go to create as in the following figure to create a new table.

Change the name of the table to wifi_config and click Add to add required columns to the table (Note: if the table cannot be named as wifi_config use another name.)

In column setting, add the required Column name and the suitable data type. In this scenario set the column name as SSID and the data type as TEXT. And then click OK to add that column to the table as in the following figure.

Likewise add the required remaining columns for the wifi_config table as follows and click Update to finalize the table.

For designing a web page go to Aimagin connect under Tool Box as in the following figure

Then click New and select New page on top menu to add a new page to the current project

Change the title of the page under property as in the figure. The title of the page will be displayed on the web browser tab.

The required components and widgets are in the Components section

First add a topic to the page. For that drag and drop a container on to the page. The container is under Grid in Components. Then drag and drop a Row on to the Container. If the Row component is dropped on the Container it will make a row inside the Container. Then drag and drop a Col component on the Row component to create a column inside the row. And after that drag and drop a Div component on the Col (column) component. Set the text align as center in Property panel of the Div component to align the text center. Then drop a Label component on the Div component. Click on the added label component and change the Content on Property panel to WiFi Configuration and change the other parameters as required as follows. The component tree will be as in the following figure.

Then add the required text fields, radio buttons and buttons to the WiFi config page. There are six text fields , two radio buttons and two buttons in this page. The six text fields are used to display and let the user to input SSID, Password, IP Address, Subnet Mask, Gateway and DNS. The two radio buttons are used to select the WiFi configuration in Static or Dynamic and the two buttons are used to submit and clear the form data. Before add those components, add a Container component and then add the other components as below. Change the labels and the IDs of the text fields and the radio buttons as in the figure below. The label for text fields can be changed in the Label parameter under the Parameter in text field property pane.

To add the options to the radio button, click on the radio button and go to edit in options under property panel.

Then add two custom options by clicking on Add custom options and name it as Dynamic and Static and save as follows.

Once the web designing is completed the connection between the database table and the web page components should be established. The main feature in this WiFi configuration page, Target Server page and the Analog input configuration page is once the page is loaded it will automatically show the saved data from the database table. For that a callback function should be implemented as follow.

First click on the page and click on the edit on init under event callback.

Add the callback function as below. Once the function is implemented click Save.

AmgCnt.SQLite.read.get({
    sql: "select * from wifi_config where ROWID = ?",
    params: ['1']
}, (res) => {
    setParameter('txtSSID', 'Content', res.row.SSID);
    setParameter('txtPassword', 'Content', res.row.Password);
    setParameter('rdiAccessPoint', 'Value', res.row.Access_P);
    setParameter('txtIP', 'Content', res.row.IP);
    setParameter('txtSubnet', 'Content', res.row.Subnet_m);
    setParameter('txtGateway', 'Content', res.row.Gateway);
    setParameter('txtDNS', 'Content', res.row.DNS);
    console.log(res);
});

In this callback function, the web page acquires data of the first row from the wifi_config table using AmgCnt.SQLite.read.get function with the suitable SQL and each column data from the table will be shown in the each web page component with the setParameter function. In this setParameter function the first parameter should be the Name of the component, the second parameter will be the parameter that you are going to change; for the text fields the parameter is the Content. The third parameter is the value; in this case the particular column data from the database table.

In the WiFi configuration the user select Dynamic in radio buttons the IP Adderss, Subnet mask, Gateway and DNS text fields should be disabled. It should enable when the user select Static in wifi configuration. For that a callback function should be implemented when the selection of the radio button is changing. Click on the radios component and click on the edit in the change event under event callback.

The callback funtion should be as follow. It basically disable those text fields if the selection is Dynamic. Otherwise it will enable the text fields.

var v = getParameter('rdiAccessPoint', 'Value');
!setParameter('txtIP', 'Enable', v=="Static");
!setParameter('txtSubnet', 'Enable', v=="Static");
!setParameter('txtGateway', 'Enable', v=="Static");
!setParameter('txtDNS', 'Enable', v=="Static");

Next the callback function for the Update button. For this the data in each text fields and the radio buttons should be inserted to the wifi_config table. Click on the Update button component and go to Edit of the mouseclick event under Event callback as follow.

Add the following functions to the mouseclick event

AmgCnt.SQLite.read.get({
    sql: "select SSID from wifi_config ",
    params: []
}, (res) => {
    if (res.row == undefined) {
        AmgCnt.SQLite.create.run({
            sql: "insert into wifi_config (SSID, Password, Access_P, IP, Subnet_m, Gateway, DNS) values(?, ?, ?, ?, ?, ?, ?)",
            params: [getParameter('txtSSID', 'Content'),getParameter('txtPassword', 'Content'),getParameter('rdiAccessPoint', 'Value'),getParameter('txtIP', 'Content'),getParameter('txtSubnet', 'Content'),getParameter('txtGateway', 'Content'),getParameter('txtDNS', 'Content')]
        }, (res) => {
            alert("Data has been inserted");
        });

    } else {
        AmgCnt.SQLite.update.run({
            sql: "update wifi_config set SSID = ? ,Password = ?, Access_P = ?,IP = ?, Subnet_m = ? ,Gateway = ?, DNS = ? where ROWID = ?",
            params: [getParameter('txtSSID', 'Content'),getParameter('txtPassword', 'Content'),getParameter('rdiAccessPoint', 'Value'),getParameter('txtIP', 'Content'),getParameter('txtSubnet', 'Content'),getParameter('txtGateway', 'Content'),getParameter('txtDNS', 'Content'),'1']
        }, (res) => {
            alert("Data has been updated");
        });
    }

    console.log(res);
});

In this event, the data in all components is gathered and saved in the wifi_config table. First the client checks whether the data is already in the first row in the wifi_config table. If it is not, the data will be inserted to the first row. If the data is already in the first row, it will update the first row with the current data. AmgCnt.SQLite.create.run function is used to insert the data to the table and AmgCnt.SQLite.update.run function is used to update the data with the current data. getParameter function is used to get the user entered data form the web component (from the text field or from radio button).

The last callback function is used to clear the data of the web page using the clear button. For that click on the clear button and go to mouseclick event of that button and add the following function to clear the data on each component (in text fields and radio buttons).

setParameter('txtSSID', 'Content', '');
setParameter('txtPassword', 'Content', '');
setParameter('rdiAccessPoint', 'Value', '');
setParameter('txtIP', 'Content', '');
setParameter('txtSubnet', 'Content', '');
setParameter('txtGateway', 'Content', '');
setParameter('txtDNS', 'Content', '');

Once the web page designing is finished save the project using the save button and preview the designed web page using preview button as in the following figure.

The final web page looks as follow. Try with adding data to the web page and submit those data. Once you load the page again it will show the last submitted data that you entered.

Previous : Develop simple web application that retrieves values from database
Next : Modify Simulink generated C code