ESP8266:通过网页文本控制PWM引脚来控制灯的亮度

划句顾

点击视频--点赞球球了

资源包： data.zip (3.74 KB, 下载次数: 13)

2021-9-4 14:28 上传

点击文件名下载附件

代码如下：
这部分和上一个代码有很多一样的地方。

1. /***
   
2. *author:LaoGu
   
3. *time  :2021/9/4
   
4. *purpose:使用ESP8266-NodeMCU建立一个有多个页面的网站。通过LED页面
   
5. 的文本输入可以控制板上LED的亮度。
   
6. **/
   
7. #include<ESP8266WiFi.h>
   
8. #include<ESP8266WiFiMulti.h>
   
9. #include<ESP8266WebServer.h>
   
10. #include<FS.h>
    
11. 
    
12. ESP8266WiFiMulti wifiMulti;
    
13. 
    
14. ESP8266WebServer esp8266_server(80);
    
15. 
    
16. void setup() {
    
17.   Serial.begin(9600);
    
18.   Serial.println("");
    
19. 
    
20.   pinMode(LED_BUILTIN,OUTPUT);
    
21. 
    
22.   wifiMulti.addAP("小G的wife","gyl5201314");
    
23.   wifiMulti.addAP("nanjishit","guyiling5201314");
    
24. 
    
25.   Serial.println("Connecting...");
    
26.   
    
27.   int i = 0;
    
28.   while(wifiMulti.run()!=WL_CONNECTED){
    
29.     delay(1000);
    
30.     Serial.print(i++); Serial.print(" ");
    
31.     }
    
32. 
    
33.    Serial.println("\n");
    
34.    Serial.print("Connected to ");
    
35.    Serial.println(WiFi.SSID());
    
36.    Serial.print("IP address: ");
    
37.    Serial.println(WiFi.localIP());
    
38. 
    
39.    if(SPIFFS.begin()){
    
40.     Serial.println("SPIFFS Started.");
    
41.     }else{
    
42.       Serial.println("SPIFFS Failed to start.");
    
43.       }
    
44. 
    
45.     //初始化网络服务器
    
46.     esp8266_server.on("/LED-Control",handleLEDControl);
    
47.     esp8266_server.onNotFound(handleUserRequest);
    
48. 
    
49.     esp8266_server.begin();
    
50.     Serial.println("HTTP server started.");
    
51. }
    
52. 
    
53. void loop() {
    
54.   esp8266_server.handleClient();  //处理网络请求
    
55. }
    

复制代码

                               
登录/注册后可看大图

不一样在这里

1. void handleLEDControl(){
   
2.   //从浏览器发送的信息中获取PWM控制数值（字符串格式）
   
3.   String ledPwm = esp8266_server.arg("ledPwm");   //通过arg()函数，我们可以获取客户端向ESP8266物联网服务器发送的指定参数的数值。
   
4. 
   
5.   //将字符串格式的PWM控制数值转换为整数
   
6.   int ledPwmVal = ledPwm.toInt();
   
7. 
   
8.   //实施引脚PWM设置
   
9.   analogWrite(LED_BUILTIN,ledPwmVal);
   
10. 
    
11.   //建立基本网页信息显示当前数值以及返回链接
    
12.   String httpBody = "LED PWM:" + ledPwm + "<p><a href = "/LED.html"><-LED Page</a></p>";
    
13.   esp8266_server.send(200,"text/html",httpBody);
    
14.   }
    

复制代码

                               
登录/注册后可看大图

处理用户浏览器的HTTP的访问

1. 
   
2. void handleUserRequest(){
   
3. 
   
4.   //获取用户请求资源
   
5.   String reqResource = esp8266_server.uri();
   
6.   Serial.print("reqResource: ");
   
7.   Serial.println(reqResource);
   
8. 
   
9.   //通过handleFileRead函数处理用户请求资源
   
10.   bool fileReadOK = handleFileRead(reqResource);
    
11. 
    
12.   //如果在SPIFFS无法找到用户访问的资源，则回复404
    
13.   if(!fileReadOK){
    
14.     esp8266_server.send(404,"text/plain","404: NOT FOUND");
    
15.     }
    
16.   }

复制代码

                               
登录/注册后可看大图

下面两个代码也是不怎么改变，和之前一样。

1. bool handleFileRead(String resource){
   
2.   if(resource.endsWith("/")){
   
3.     resource = "/index.html";
   
4.     }
   
5. 
   
6.    String contentType = getContentType(resource);
   
7. 
   
8.    if(SPIFFS.exists(resource)){
   
9.     File file =  SPIFFS.open(resource,"r");
   
10.     esp8266_server.streamFile(file,contentType);
    
11.     file.close();
    
12.     return true;
    
13.     }
    
14.     return false;
    
15.   }

复制代码

                               
登录/注册后可看大图

1. // 获取文件类型
   
2. String getContentType(String filename){
   
3.   if(filename.endsWith(".htm")) return "text/html";
   
4.   else if(filename.endsWith(".html")) return "text/html";
   
5.   else if(filename.endsWith(".css")) return "text/css";
   
6.   else if(filename.endsWith(".js")) return "application/javascript";
   
7.   else if(filename.endsWith(".png")) return "image/png";
   
8.   else if(filename.endsWith(".gif")) return "image/gif";
   
9.   else if(filename.endsWith(".jpg")) return "image/jpeg";
   
10.   else if(filename.endsWith(".ico")) return "image/x-icon";
    
11.   else if(filename.endsWith(".xml")) return "text/xml";
    
12.   else if(filename.endsWith(".pdf")) return "application/x-pdf";
    
13.   else if(filename.endsWith(".zip")) return "application/x-zip";
    
14.   else if(filename.endsWith(".gz")) return "application/x-gzip";
    
15.   return "text/plain";
    
16. }

复制代码

                               
登录/注册后可看大图

串口：

                               
登录/注册后可看大图

效果：
演示图片.zip (1.22 MB, 下载次数: 7)

2021-9-4 14:39 上传

点击文件名下载附件

划句顾

评论有几率拿到币，能不能帮我的视频去B站点个赞捏。

Max472

真好，完全不懂

划句顾

50%的中奖几率

showwokao

点赞 支持一下

Angelina_Jolie

Mike_python小

FishC--Student

拿币

FishC--Student

没有，再来！！！

老甲鱼真黄

666666666666

myqf123

某一天

表示看不懂

niuniuniu666

点赞表示支持

1molHF

hornwong

划句顾

帮我的视频点点赞吧，去B站看看giao

万恶的亚撒西

参观大佬

三刀流.索隆

1320178551

学习

sunyt

眼