Please enable JavaScript to view this site.

Navigation: ESP32 target > Tutorials > MBD & IoT Tutorials for ESP32

Project 9: Display ADC readings and voltage drop of LDR on a webpage

Scroll Prev Top Next More

Project description

In this project, you will learn how to display ADC readings and voltage drop of a LDR sensor on a graph and gauge, as shown below.

Project9_1

Learning objectives

In this tutorial you will learn:

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

2.Understand how to develop HTML, CSS, and JavaScript to display embedded system status on a webpage

3.How a change in surrounding brightness causes a change in resistance and voltage drop of a LDR sensor.

4.How to make the ESP32 a Stand-Alone data acquisition device

Required hardware

No.

Item

Picture

Quantity

1

ESP32 DevKitC (16MB Flash, 8 MB RAM) with  USB cable

esp32

1

2

Protoboard (830 points)

breadboard

1

3

Jumper Wire Male-Male

jumper_wire

2

4

LDR sensor

Project_LDR

1

5

Resistor 2k Ohms

resistor

1

6

USB Wi-Fi dongle

wifi_dongle

1

 

Hardware setup

 

Project9_2

Hands-On

Stand-Alone (SA)

 

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_30
Project8_31

 

10. Click Apply

Project8_32

 

11. Double-click the String Processing block

Project8_33

 

12. Under “Format”, set the Wi-Fi SSID name and click Apply

Project8_34

 

13. Double-click the second String Processing block

Project8_35

 

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

Project8_36

 

15. Double-click the Step block

Project8_37

 

16. 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

 

17. Double-click the WiFi Setup block

Project8_39

 

18. Select 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.

 

19. 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.

 

20. Connect everything as shown below

Project8_42

 

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

Project8_43

 

22. Select “Enabled Subsystem”

Project8_44

 

23. Double-click to enter the subsystem

Project8_45

 

24. Delete the following

Project8_46

 

25. Import HTTP Server Setup and HTTP GET Handler blocks

Project8_47

 

26. Import ADC block

Project9_3

 

27. Import String Processing block

Project9_4

 

28. Import HTTP GET Handler block

Project9_5

 

29. Double-click ADC block

Project9_6

 

30. Configure as shown

Project9_7

 

31. Double-click String Processing block

Project9_8

 

32. Enter the following under “Format”

Project9_9

 

33. Double-click HTTP GET Handler block

Project9_10

 

34. Enter the information as shown

Project9_11

Explanation

In this project, five files are used to create the webpage (1 HTML and 3 JS). This block is used to extract the information from those files, so a request is sent to both of them. However, we need to send five requests because we want to extract information from a specific “json” section within the script.js file at every time step as well.

 

35. Enter the information as shown and click Apply

Project9_12

 

Project9_13

 

36. Connect everything as shown

Project9_14

 

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

Project9_15

 

38. Connect accordingly

Project9_16

 

39. Save the file in the correct directory

Project9_17

 

40. Go to “APPS”

Project9_18

 

41. Click “Embedded Coder”

Project9_19

 

42. Click “Build” to compile the model

Project9_20

 

43. Build process completed successfully

Project9_21

 

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

Project9_22

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.

 

45. Go to the webpage IP address that you set up. We have used the default address of 192.168.20.21

Project9_23

 

46. You will enter a web page looking like this

Project9_24

47. You can test and see the working of the system. Click to view video

 

Explanation

When the light falling on the LDR changes, its resistance changes. Due to this, the voltage drop across it changes as well. Hence, there is a change in the ADC value as shown.

 

Explanation of HTML source code

Project9_26

 

1.Heading name

2.Building a gauge

3.Building a graph

4.ADC value

 

Explanation of script.js file

Project9_27

 

1.Create a graph

2.Set range for the gauge

3.Build gauge

4.Function getData() is called every 1000 milliseconds = 1 second

 

Explanation of getData() subsection file

Project9_28

 

This function is called every time a “/get” tag is used. Under this function, the graph is extended as time goes on. The values are also updated according to the LDR input.

 

This is the end of this tutorial. To apply your learning, you can test yourself with a practice problem.

 

 

Exercise

Add another graph to show the voltage drop across the circuit. Conduct SA.

 

Project9_29
Project9_30

 

Reference: Analog to Digital Converter (ADC) - ESP32

 

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

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

Copyright 2022 Aimagin Co.,Ltd. Rev.605