nopnop2002 / esp-idf-pwm-slider

PWM Slider Bar Control using ESP-IDF

esp-idf-pwm-slider

Slider Bar Control using ESP-IDF.
ESP-IDF contains a lot of example code, but there is no example to create FORM on the WEB and input data from RANGE object.
This project reads value from the RANGE object on the WEB and controls LEDs and so on.
No library other than ESP-IDF is required to read the value from the WEB page.

I watched this video.

You can control these devices using your android or iphone.

• LED Control
  

• Servo Control
  

• RGB Control
  

• Digital potentiometer
  Components of the DS3502 is here.
  Components of the Three-Wire Digitally Controlled Potentiometer is here.

• Digital Anlog Converter
  Components of the PCF8591 is here.
  Components of the MCP4725 is here.

Software requirement

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.

WEB Page

You can change the web page.
The WEB page is stored in the html folder.

How to browse image data using built-in http server

Even if there are image files in SPIFFS, the esp-idf http server does not support this:

httpd_resp_sendstr_chunk(req, "<img src=\"/spiffs/picture.png\">");

You need to convert the image file to base64 string.

httpd_resp_sendstr_chunk(req, "<img src=\"data:image/png;base64,");
httpd_resp_sendstr_chunk(req, (char *)BASE64_ENCODE_STRING);
httpd_resp_sendstr_chunk(req, "\">");

Images in png format are stored in the image folder.
Images in base64 format are stored in the html folder.
I converted using the base64 command.

$ base64 image/ESP-LOGO.png > html/ESP-LOGO.txt

Reference

https://github.com/nopnop2002/esp-idf-web-form

esp-idf-pwm-slider's Issues

IMAGE