Please enable JavaScript to view this site.

Waijung 2 User Guide

Project description

In this project, you will learn how to build a webpage and control LED(s) through that webpage, as shown below.

 

Project8_1

Learning objectives

In this tutorial you will learn:

1.How to configure ESP32 as a web server (Access Point - AP mode) for control application

2.Understand how to develop HTML, CSS, and JavaScript to control on-chip hardware peripherals

3.How to store web pages in ESP32’s internal memory (SPIFFS)

4.How to use Waijung 2 to deploy Simulink model to a web server

5.How to create a Stand-Alone web-based controller with ESP32

Required hardware

No.

Item

Picture

Quantity

1

ESP32 with USB cable

esp32

1

2

Protoboard (830 points)

breadboard

1

3

Jumper Wire Male-Male

jumper_wire

2

4

Yellow 5mm LED

yellow_led

1

5

Resistor 220 Ohms

resistor

1

6

USB Wi-Fi dongle (only necessary in WiFi AP mode)

wifi_dongle

1

 

Hardware setup

Project8_2

Hands-on

Software in the Loop (SIL) simulation

 

1. Import a Toggle Switch and a Slider from the Library Browser

Project8_3
Project8_4

 

2. Import two Constant blocks and one Display block

Project8_5
Project8_6

 

3. Import Product and Dashboard Scope blocks

Project8_7
Project8_8

 

4. Arrange everything according to the image below

Project8_9

 

5. Double-click the Slider and follow the steps below

Project8_10

Explanation

After connecting the Slider and the Input constant block, we can change the values on the Slider to see the changes in the Input block

 

6. Double-click the Toggle Switch and follow the steps below

Project8_11

Explanation

After connecting the Slider and the Input constant block, we can turn the Toggle Switch ON/OFF and see the Toggle Switch constant block alternate between ‘1’ and ‘0’

 

7. Double-click the Graph and follow the steps below

Project8_12

 

8. Set Stop Time to “inf” and enable “Simulation Pacing”

Project8_13
Project8_14

 

9. Save and run the model

Project8_15

 

10. Result

Project8_16

 

Logic:

LED = ON

 Toggle Switch = 1;

 LED brightness = Toggle Switch x Input;

 = 1 ≤ LED brightness ≤ 255

LED = OFF

 Toggle Switch = 0;

 LED brightness = Toggle Switch x Input = 0;

 LED brightness = 0

 

Since SIL is working correctly, we can continue building the SA application

 

Stand-Alone (SA)

To build the SA model in order to control a LED from a webpage, we need to:

a)Set up a web page using HTML, CSS (not compulsory), and JavaScript, so that it becomes a user interface

b)The HTML, CSS, and JS files need to be stored on the ESP32 using external storage (SPIFFS block) since we don’t have an internal storage SD card

c)To view and understand this webpage, a HTTP server needs to be set up (HTTP Server Setup block)

d)The HTTP server needs to be set up such that it receives information from the files used to create the webpage (HTTP GET Handler block)

e)Also, the HTTP server needs to be able to communicate the actions on the web page to the ESP32 in order to control the LED (HTTP POST Handler block)

 

1. Import Waijung 2 Target Setup block and two String Processing blocks from Library Browser

Project8_17
Project8_18

 

2. Import WIFI Setup block and Step block

Project8_19
Project8_20

 

3. Import Data Type Conversion block and SPIFFS Setup block

Project8_21

 

Project8_22

 

4. Configure Waijung 2 Target Setup block according to the following

Project8_23

 

Project8_24   Project8_25

 

5. Under “FreeRTOS”, change the default value of “Default xTaskCreate_stack depth” to 10240

Project8_26

Explanation

Stack depth refers to the space allocated for the task that is being created: the higher the stack depth is, the more memory storage required by ESP32

 

6. Double-click SPIFFS Setup block

Project8_27

 

7. Change the value of Partition Size to 2000 KB and tick “Include files/folders to SPIFFS”

Project8_28

Explanation

SPIFFS refers to the external storage for ESP32

 

Note

If you have an SD card (internal storage) for your ESP32, you will not need the SPIFFS block. You will use the “SD” related blocks from the Waijung blockset in that case.

In our case, we need SPIFFS as this is where we must store our HTML code, CSS file, and Javascript file that we used to create the webpage.

 

8. After the “Include files/folders to SPIFFS” option is ticked, browse for the folder where the files are stored.

Project8_29

Explanation

After the model is built using Waijung, the selected folder is automatically accessed in order to create the webpage with the defined IP address through which the hardware can be controlled.

 

9. You can download the source files needed for the webpage here and also at the end of the project. Please extract both files into the same folder as shown below.

Project8_31

 

10. Click Apply

 

11. Double-click the Step block

Project8_37

 

12. Set “Sample time” as “1” (this means that all values will be updated every 1 second, so that the webpage can be refreshed every 1 second)

Project8_38

 

13. Double-click the WiFi Setup block

Project8_39

 

14. For WIFI AP mode:

Project8_40

 

Explanation

Wi-Fi AP = Wi-Fi Access Point

Since ESP32 has Wi-Fi capabilities, we are making it an access point.

Other examples of access points: Wi-Fi router at our home, Hotspot from our mobile phone.

Once this access point is created, we can connect to it using our external USB Wi-Fi dongle.

 

14a. Double-click the second String Processing block

Project8_33

 

14b. Under “Format”, set the Wi-Fi SSID name and click Apply. You can choose to use either WiFi AP or WiFi STA mode.

Project8_34

 

14c. Double-click the second String Processing block

Project8_35

 

14d. Under “Format”, set the Wi-Fi password and click Apply

Project8_36

 

14e. Click Apply after IP address and Subnet mask IP section appear

Project8_41

Explanation

Default settings of both ‘IP address’ and ‘Subnet mask IP’ can be used. You can also set your own.

The IP address set will be used to access the webpage that you have created to control the LED.

 

 

15. For WiFi STA mode:

Set it up by using the SSID and password that your computer uses to connect to the internet through the 2 string processing blocks shown above.

Note: All ESP32 boards only support 2.4GHz bandwidth (except the recently released ESP32-C5 which also supports 5GHz), so make sure the WiFi you connect your ESP32 board to in WiFi STA mode lies in the 2.4GHz frequency range

 

For the IP address, Gateway, and Subnet mask, please search for "command prompt" or "cmd" and type "ipconfig" to find the configurations and input them into the target setup.

 

Note: For the IP address, choose any number between 0 to 255 for the last 3 digits, except the IPv4 address listed in command prompt (since that is the IP address assigned to your computer).

 

project1_STA_mode_1    

project1_STA_mode_2

project2_STA_mode_1

 

16. Connect everything as shown below

Project8_42

 

17. Drag the mouse in an empty area of the model

Project8_43

18. Select “Enabled Subsystem”

Project8_44

 

19. Double-click to enter the subsystem

Project8_45

20. Delete the following

Project8_46

 

21. Import HTTP Server Setup and HTTP GET Handler blocks

Project8_47

 

Project8_48

 

22. Import HTTP POST Handler and String Processing blocks

Project8_49
Project8_50

 

23. Import Product and DAC blocks

Project8_51
Project8_52

 

24. Double-click HTTP GET Handler block and select “2” under “Number of requests”

Project8_53

 

25. Enter the information as shown

Project8_54

 

Explanation

In this project, two files are used to create the webpage (HTML and JS). This block is used to extract the information from those files, so a request is sent to both of them.

 

26. Double-click the String Processing block

Project8_55

 

27. Enter the following under “Format”

Project8_56

 

28. Double-click the HTTP POST Handler block

Project8_57

 

29. Configure the block as shown below

Project8_58

 

30. Double-click another String Processing block

Project8_59

31. Under “Function” select “sscanf”

Project8_60

 

32. Enter the following under “Format”

Project8_61

 

33. Double-click another String Processing block

Project8_62

 

34. Enter the following

Project8_63

 

35. Double-click the “Product” block

Project8_64

 

36. Under “Signal Attributes” and “Output data type”, select “int32”

Project8_65

 

37. Click Apply

Project8_66

 

38. Connect according to the following

Project8_67

 

Explanation

i.Once the HTTP Server is set up, the ‘HTTP Get Handler’ block extracts the information from the HTML, CSS, and JS files used to create the webpage

ii.If the LED status is turned ‘ON’ through the web page (set as a ‘true’ response - refer to Step 31), a ‘post request’ is sent to activate the response of the LED through the ‘HTTP Post Handler’ block.

Project8_68

                                   

iii.Then, if the brightness is increased/decreased on the web page, it is converted to an Analog Output through the ‘DAC’ block, and the LED responds by becoming brighter or dimmer.

 

39. We are still in the subsystem; go back to the model’s default page

Project8_70

 

40. Connect accordingly

Project8_71

41. Save the file in the correct directory

Project8_72

 

42. Go to “APPS”

Project8_73

 

43. Click “Embedded Coder”

Project8_74

 

44. Click “Build” to compile the model

Project8_75

 

45. Build process completed successfully

Project8_76

Note: For users who have chosen WiFi STA mode, please skip to Step 47. Step 46 is only for users who have chosen WiFi AP mode.

 

46. Connect to the Wi-Fi set earlier for the WIFI Setup block

Project8_77

Note: You can access this Wi-Fi access point on your computer or your mobile phone on any operating system. Once the webpage is set up, it is easy to access from several devices in order to control the hardware.

 

47. Go to the webpage IP address that you set up.

For WiFi AP mode, we have used the default address of 192.168.20.21

For WiFi STA mode, we have used the address of 192.168.0.247

 

48. You will enter a web page looking like this

Project8_79

 

49. You can control the LED accordingly

Project8_80

Explanation

It can be seen that when the button is pressed to turn ON the LED, the LED does not light up as the brightness is equal to 0. As we increase the brightness and the voltage drop across the LED becomes enough, the LED will light up.

 

Explanation of HTML source code

Project8_81

 

i.A button is created on the webpage - when it is pressed, “postData ()” function is called

ii.To output values of the brightness slider

iii.When values on the slider are changed, “updateSliderPWM(this)” function is called

 

Javascript source code (1)

Project8_82

 

The “postData()” function is called whenever the LED ON/OFF button is pressed. If the LED is turned ON, a “response is true” request is sent to the SA model we built. Then, the model and web page communicate to send the information to the hardware in “json” format to implement the changes made on the web page.

 

Javascript source code (2)

Project8_83

The “updateSliderPWM(this)” function is called whenever values on the brightness slider are changed. It then sends the information back to the hardware in “json” format.

 

This is the end of this tutorial. To apply your learning, you can test yourself with an exercise.

 

Exercise

Add another LED. Use the same ON/OFF switch to control both LEDs, but the brightness of both LEDs should be controlled by different sliders. Conduct SIL and SA.

Project8_84
Project8_85

Project files: SIL file | SA file | Source files: HTML/JS

Solution to exercise: SIL file | SA file | Source files: HTML/JS

Copyright 2024 Aimagin Co.,Ltd. Rev.1664