ESP32 通过Web图形控件调节PWM占空比输出

ESP32 通过Web图形控件调节PWM占空比输出

---

• 🌼电脑Web控制页面
  
• 🌻手机浏览器Web也可以实现控制
  

✨以上控制前提是，esp32和电脑端以及手机端都在同一个网络环境下。

• 🛠esp32型号以及参数配置
  

• ⚡初次使用，在上传代码前，务必勾选全部擦除操作选项。否则可能出现上传完代码后，esp32出现无限重启的情况。
  

⛳SPIFFS上传插件安装

• 📌下载地址：https://github.com/me-no-dev/arduino-esp32fs-plugin/releases/
• 🎈放置文件夹位置：
  

目录文件架构：
C:\USERS\ADMINISTRATOR\DOCUMENTS\ARDUINO\TOOLS 
├─ESP32FS
│  └─tool
│          esp32fs.jar
│          
└─ESP8266LittleFS
    └─tool
            esp8266littlefs.jar

📝实现代码

/*
 * 
 * 注意：不要选择esp32C3不支持SPIFFS数据上传
 */
#ifdef ESP8266
#include <ESP8266WiFi.h>// esp8266自带库
#include <ESP8266WebServer.h>
#include "FS.h"
#elif  ESP32
#include <WiFi.h> // esp32自带库
#include "WebServer.h"//ESP32自带库
#include "SPIFFS.h"
#include "FFat.h"//FFAT.h中已经包含FS.h头文件
#endif

#define _SPIFFS //启用SPIFFS闪存文件系统

//填写自己的WIFI信息
const char *ssid = "MERCURY_D268G";
const char *password = "pba5ayzk";

#define LED_BUILTIN 2  //板载LED灯

WebServer esp32_server(80);

// setting PWM properties
const int freq = 5000;//设置频率
const int ledChannel = 0;//通道号，取值0 ~ 15
const int resolution = 8;//计数位数，取值0 ~ 20


void handleUserRequet();     // 处理用户浏览器的HTTP访问 
bool handleFileRead(String path);      //处理浏览器HTTP访问
String getContentType(String filename);// 获取文件类型
void handlePWM();

bool pinState;
File dataFile; 

void setup() {
  // put your setup code here, to run once:
  pinMode(LED_BUILTIN,OUTPUT);
  Serial.begin(115200);
  WiFi.begin(ssid,password);
  Serial.print("Connect to ");
  Serial.print(ssid);

    // configure LED PWM functionalitites
  ledcSetup(ledChannel, freq, resolution);
  
  // attach the channel to the GPIO to be controlled
  ledcAttachPin(LED_BUILTIN, ledChannel);//将 LEDC 通道绑定到指定 IO 口上以实现输出


  while(WiFi.status() != WL_CONNECTED)
  {
    Serial.print(".");
    delay(100);

  }
  Serial.println();
  Serial.print("WiFi connection successful");
  Serial.println();

  Serial.print("IP address:" );
  Serial.println(WiFi.localIP());

  //--------"启动网络服务功能"-------- 
  esp32_server.begin();                    
 

#ifdef _SPIFFS
if(SPIFFS.begin()){ // 启动SPIFFS
  Serial.println("SPIFFS Started.");
} else {
    Serial.println("SPIFFS Failed to Start.");
  }
#else
if(!FFat.begin(true)){ // 启动FATFS
     Serial.println("FATFS Started.");
  } else {
    Serial.println("FATFS Failed to Start.");
  }
#endif
  
  esp32_server.on("/setLED",handlePWM); // 处理PWM设置请求
  esp32_server.onNotFound(handleUserRequet);      // 告知系统如何处理用户请求

  Serial.println("HTTP server started");

}

void loop() {
  // put your main code here, to run repeatedly:

  esp32_server.handleClient();//处理http服务器访问
  
}
// 处理PWM设置请求并对引脚进行PWM设置
void handlePWM(){
  String pwmStr = esp32_server.arg("pwm"); // 获取用户请求中的PWM数值
  Serial.print("pwmStr = ");Serial.println(pwmStr);
  
  int pwmVal = pwmStr.toInt();              // 将用户请求中的PWM数值转换为整数
  pwmVal = map(pwmVal,0,100,0,1023); // 用户请求数值为0-100，转为0-1023
  Serial.print("pwmVal = ");Serial.println(pwmVal);
  
  // analogWrite(LED_BUILTIN, pwmVal);         // 实现PWM引脚设置
  ledcWrite(ledChannel, pwmVal);//指定通道输出一定占空比波形
  esp32_server.send(200, "text/plain");//向客户端发送200响应信息
}

// 处理用户浏览器的HTTP访问
void handleUserRequet() {         
     
  // 获取用户请求网址信息
  String webAddress = esp32_server.uri();
  
  // 通过handleFileRead函数处处理用户访问
  bool fileReadOK = handleFileRead(webAddress);

  // 如果在SPIFFS无法找到用户访问的资源，则回复404 (Not Found)
  if (!fileReadOK){                                                 
    esp32_server.send(404, "text/plain", "404 Not Found"); 
  }
}

bool handleFileRead(String path) {            //处理浏览器HTTP访问

  if (path.endsWith("/")) {                   // 如果访问地址以"/"为结尾
    path = "/index.html";                     // 则将访问地址修改为/index.html便于SPIFFS访问
  } 
  
  String contentType = getContentType(path);  // 获取文件类型
  
#ifdef _SPIFFS
  if (SPIFFS.exists(path)) {                     // 如果访问的文件可以在SPIFFS中找到
    File file = SPIFFS.open(path, "r");          // 则尝试打开该文件
#else  
    if (FFat.exists(path)) {                     // 如果访问的文件可以在FFat中找到
    File file = FFat.open(path, "r");          // 则尝试打开该文件
#endif   
    esp32_server.streamFile(file, contentType);// 并且将该文件返回给浏览器
    file.close();                                // 并且关闭文件
    return true;                                 // 返回true
  }
  return false;                                  // 如果文件未找到，则返回false
}

// 获取文件类型
String getContentType(String filename){
  if(filename.endsWith(".htm")) return "text/html";
  else if(filename.endsWith(".html")) return "text/html";
  else if(filename.endsWith(".css")) return "text/css";
  else if(filename.endsWith(".js")) return "application/javascript";
  else if(filename.endsWith(".png")) return "image/png";
  else if(filename.endsWith(".gif")) return "image/gif";
  else if(filename.endsWith(".jpg")) return "image/jpeg";
  else if(filename.endsWith(".ico")) return "image/x-icon";
  else if(filename.endsWith(".xml")) return "text/xml";
  else if(filename.endsWith(".pdf")) return "application/x-pdf";
  else if(filename.endsWith(".zip")) return "application/x-zip";
  else if(filename.endsWith(".gz")) return "application/x-gzip";
  return "text/plain";
}

• 🔰上传完代码还需要上传SPIFFS闪存文件
  

• 📋编译信息

使用 2.0.0  版本的库 WebServer 在文件夹： C:\Users\Administrator\AppData\Local\Arduino15\packages\esp32\hardware\esp32\2.0.5\libraries\WebServer 
使用 2.0.0  版本的库 WiFi 在文件夹： C:\Users\Administrator\AppData\Local\Arduino15\packages\esp32\hardware\esp32\2.0.5\libraries\WiFi 
使用 2.0.0  版本的库 SPIFFS 在文件夹： C:\Users\Administrator\AppData\Local\Arduino15\packages\esp32\hardware\esp32\2.0.5\libraries\SPIFFS 
使用 2.0.0  版本的库 FS 在文件夹： C:\Users\Administrator\AppData\Local\Arduino15\packages\esp32\hardware\esp32\2.0.5\libraries\FS 
使用 2.0.0  版本的库 FFat 在文件夹： C:\Users\Administrator\AppData\Local\Arduino15\packages\esp32\hardware\esp32\2.0.5\libraries\FFat 
"C:\\Users\\Administrator\\AppData\\Local\\Arduino15\\packages\\esp32\\tools\\xtensa-esp32-elf-gcc\\gcc8_4_0-esp-2021r2-patch3/bin/xtensa-esp32-elf-size" -A "d:\\arduino\\MyHexDir/WebControl.ino.elf"
项目使用了 756245 字节，占用了 (57%) 程序存储空间。最大为 1310720 字节。
全局变量使用了38056字节，(11%)的动态内存，余留289624字节局部变量。最大为327680字节。

• 上传完成代码和上传文件，打开串口监视器，查看IP信息：
  

📚程序源码

链接：https://pan.baidu.com/s/1HVU53hgEOFvWgu1lIjns2A 
提取码：7192