esp-idf-web-chart

This is a demonstration of real-time data visualization using a web browser.
The purpose of this project is to demonstrate how to use components that enable real-time data visualization.
Although it use as data to display ADC converted values, it can also be applied to data from sensors such as thermometers and hygrometers.

The ESP32 has two ADCs: ADC1 and ADC2.
You can use these to convert analog values to digital values.
The analog values change dynamically and are suitable for this demonstration. This project uses ADC1.

I used this component.
This component can communicate directly with the browser.

Software requirements

ESP-IDF V4.4/V5.x.
ESP-IDF V5.0 is required when using ESP32-C2. ESP-IDF V5.1 is required when using ESP32-C6.

Installation for ESP-IDF V4.4

git clone -b v4.4 https://github.com/nopnop2002/esp-idf-web-chart
cd esp-idf-web-chart/RadialGauge/
git clone https://github.com/Molorius/esp32-websocket components/websocket
idf.py set-target {esp32/esp32s2/esp32s3/esp32c3}
idf.py menuconfig
idf.py flash monitor

Installation for ESP-IDF V5.x

git clone https://github.com/nopnop2002/esp-idf-web-chart
cd esp-idf-web-chart/RadialGauge/
git clone https://github.com/Molorius/esp32-websocket components/websocket
idf.py set-target {esp32/esp32s2/esp32s3/esp32c2/esp32c3/esp32c6}
idf.py menuconfig
idf.py flash monitor

Configuration

WiFi Setting

Set the information of your access point.

You can connect using the mDNS hostname instead of the IP address.

ADC Setting

Set the information of gpio for analog input.

It is possible to monitor 3 channels at the same time.

Analog input gpio for ESP32 is GPIO32 ~ GPIO39. 12Bits width.
Analog input gpio for ESP32S2 is GPIO01 ~ GPIO10. 13Bits width.
Analog input gpio for ESP32S3 is GPIO01 ~ GPIO10. 12Bits width.
Analog input gpio for ESP32C2 is GPIO00 ~ GPIO04. 12Bits width.
Analog input gpio for ESP32C3 is GPIO00 ~ GPIO04. 12Bits width.
Analog input gpio for ESP32C6 is GPIO00 ~ GPIO06. 12Bits width.

ADC Attenuation

This project uses ADC_ATTEN_DB_12(12dB) for attenuation.
12dB attenuation (ADC_ATTEN_DB_12) gives full-scale voltage 3.9V.
But the range that can be measured accurately is as follows:

• Measurable input voltage range for ESP32 is 150 mV ~ 2450 mV.
• Measurable input voltage range for ESP32S2 is 0 mV ~ 2500 mV.
• Measurable input voltage range for ESP32S3 is 0 mV ~ 3100 mV.
• Measurable input voltage range for ESP32C3 is 0 mV ~ 2500 mV.
• Measurable input voltage range for ESP32C2 is 0 mV ~ 2800 mV.

Analog source

Connect ESP32 and Analog source using wire cable.
I used a variable resistor for testing.

                                          +---------------------------+
                                          |      variable resistor    |
ESP32 3.3V   -----------------------------+ Ra of variable resistor   |
                                          |                           |
                                          |                           |
ESP32 GPIO32 -------------------------+---+ Vout of variable resistor |
                                      |   |                           |
                  R1      R2      R3  |   |                           |
ESP32 GND    ----^^^--+--^^^--+--^^^--+   |                           |
                      |       |           |                           |
                      |       |           |                           |
ESP32 GPIO33 ---------+       |           |                           |
                              |           |                           |
                              |           |                           |
ESP32 GPIO34 -----------------+           |                           |
                                          |                           |
                                          |                           |
ESP32 GND    -----------------------------+ Rb of variable resistor   |
                                          |                           |
                                          +---------------------------+

Launch a web browser

Enter the following in the address bar of your web browser.

http:://{IP of ESP32}/
or
http://esp32-server.local/

Using mDNS hostname

You can connect using the mDNS hostname instead of the IP address.

• esp-idf V4.4
  If you set CONFIG_MDNS_STRICT_MODE = y in sdkconfig.defaults, the firmware will be built with MDNS_STRICT_MODE.
  If MDNS_STRICT_MODE is not set, mDNS name resolution will not be possible after long-term operation.
• esp-idf V4.4.1
  mDNS component has been updated.
  If you set CONFIG_MDNS_STRICT_MODE = y in sdkconfig.defaults, the firmware will be built with MDNS_STRICT_MODE.
  Even if MDNS_STRICT_MODE is set, mDNS name resolution will not be possible after long-term operation.
• esp-idf V5.0 or later
  mDNS component has been updated.
  Long-term operation is possible without setting MDNS_STRICT_MODE.
  The following lines in sdkconfig.defaults should be removed before menuconfig.
  CONFIG_MDNS_STRICT_MODE=y

WEB Pages

WEB pages are stored in the html folder.
You can change it as you like.