wifi lighting program

RUIII_012

于 2023-04-06 10:58:55 发布

阅读量50

点赞数

文章标签： mcu

本文链接：https://blog.csdn.net/Linlalll/article/details/129984668

版权

以下代码用于构建一个基于ESP8266的点灯系统的网页端，可以通过网页控制ESP8266控制灯的颜色和亮度。
它使用了ESP8266WiFi库来连接WiFi网络，并在该网络上使用DNSServer和ESP8266WebServer库创建一个可以响应HTTP请求的Web服务器。
在Web页面中，有几个按钮可以分别控制点灯系统的绿灯、红灯、蓝灯和关闭功能，还有一个滑动条用于调节灯的亮度。通过向HandleVal路径发送HTTP GET请求，可以将所选的颜色和亮度值发送到ESP8266。

#include <ESP8266WiFi.h>
#include <DNSServer.h>
#include <ESP8266WebServer.h>
#include <fstream>
#include <string>

const byte DNS_PORT = 53;
IPAddress apIP(192, 168, 4, 1);
DNSServer dnsServer;
ESP8266WebServer webServer(80); 

String index_html(String WiFiAddr){
  return  String("")+"<html> <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" /"+
"<head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">"+
"<script type=\"text/javascript\">"+
"var xmlHttpReq;"+
 "var funcEnabled = true; " +
"function createXmlHttpRequest(){"+
"if(window.XMLHttpRequest){"+
"xmlHttpReq = new XMLHttpRequest();"+
"}else{"+
"xmlHttpReq = new ActiveXObject(\"Microsoft.XMLHTTP\");"+
"}"+
"}"+
"function checkCmd(cmd,val){"+
"createXmlHttpRequest();"+
"xmlHttpReq.onreadystatechange=handle;"+
"var url=\"HandleVal?ssid=\"+cmd+\"&password=\"+val;"+
"xmlHttpReq.open(\"get\",url,true); xmlHttpReq.send(null);"+
"}"+
         "function toggleFunc(){" +
         "var offBtn = document.getElementById(\"off2\"); " +
         "if (funcEnabled == false){" +
         "funcEnabled = true; " +
         "offBtn.style.backgroundColor = \"gray\"; " +
         "offBtn.style.color = \"black\"; " +
         "offBtn.value = \"关灯\"; " +
         "}else{" +
         "funcEnabled = false; " +
         "offBtn.style.backgroundColor = \"yellow\"; " +
         "offBtn.style.color = \"black\"; " +
         "offBtn.value = \"开灯\"; " +
         "checkCmd(document.getElementById('color').value, document.getElementById('slider').value); " +
         "}" +
         "}" +
        "function servo1(pos) {"+
        "var servo1P = document.getElementById(\"servo1Pos\");"+
        "servo1P.innerHTML=\"<font color=red>\"+pos+\"</font>\";"+
        "var servo=\"r\";"
        "checkCmd(servo,pos);"+
        "}"+
          "function updateSliderValue(){" +
         "var sliderValue = document.getElementById(\"slider\").value; " +
         "document.getElementById(\"slider-value\").innerHTML = sliderValue; " +
         "if(funcEnabled == true) " +
         "checkCmd(document.getElementById('color').value, sliderValue); " +
         "}" +
        "function handle(){"+
        "if(xmlHttpReq.readyState==4){"+
        "if(xmlHttpReq.status==200){"+
        "var res = xmlHttpReq.responseText;"+
        "var result = document.getElementById(\"result\"); "+
        "result.innerHTML = \"<font color=red>\"+res+\"</font>\";"+
        "}}}"+
        "</script>"+
        "</head>"+
        "<body>" + 
          "<h1 style=\"font-size: 55px; margin-top: 50px;\">点灯系统</h1>" +
        "<p></p>" +
        "<form action=\"\" method=\"\" name=\"\">" +
            "<input id=\"green\" type=\"button\" style=\"background-color: green; color: white; margin-top: 30px; font-size: 36px; padding: 10px 20px; border-radius: 10px;\" value=\"绿灯\" οnclick=\"checkCmd('g',1024)\">" +
            "<input id=\"red\" type=\"button\" style=\"background-color: red; color: white; margin-top: 30px; font-size: 36px; padding: 10px 20px; border-radius: 10px;\" value=\"红灯\" οnclick=\"checkCmd('r',1024)\">" +
            "<input id=\"blue\" type=\"button\" style=\"background-color: blue; color: white; margin-top: 30px; font-size: 36px; padding: 10px 20px; border-radius: 10px;\" value=\"蓝灯\" οnclick=\"checkCmd('b',1024)\">" +
            "<input id=\"off\" type=\"button\" style=\"background-color: gray; color: white; margin-top: 30px; font-size: 36px; padding: 10px 20px; border-radius: 10px;\" value=\"关灯\" οnclick=\"checkCmd('c',0)\">" +
            "<br>" +
            "<br>" +
            "<hr>" +
        "   <label for=\"color\" style=\"font-size: 24px; margin-right: 10px;\">颜色:</label>"+
        "  <select id=\"color\" name=\"color\">"+
        "    <option value=\"r\">红色</option>"+
        "    <option value=\"b\">蓝色</option>"+
        "    <option value=\"g\">绿色</option>"+
        "  </select>"+
        "  <input type=\"range\" style=\"width: 400px; margin-top: 30px;\" id=\"slider\" min=\"0\" max=\"500\" οninput=\"updateSliderValue()\">"+
        "  <br>"+
        "  当前亮度：<div id=\"slider-value\"></div>"+
        "  <input id=\"off2\" type=\"button\" style=\"margin-top: 30px; font-size: 36px; padding: 10px 20px; border-radius: 10px; "+
        "  background-color: gray; color: black;\" value=\"关灯\" οnclick=\"toggleFunc()\">"+
        "    </form>"+
    "</div>"+
  "</body>"+
"</html>";
}

void handleRoot() {
  webServer.send(200, "text/html", index_html("192.168.4.1")); //！！！注意返回网页需要用"text/html" ！！！
  Serial.println("用户访问了主页");
}

#define LAMP_PIN 16   // D8
#define LAMP_PIN1 14  //R--D5
#define LAMP_PIN2 12  //G--D6
#define LAMP_PIN3 13  //B--D7
void controlLamp(bool lampVal) {//点灯函数,GPIO16  -----D0
  pinMode(LAMP_PIN, OUTPUT);//设置为输出模式
  Serial.printf("Turn lamp %s\n", lampVal ? "On" : "Off");
if(lampVal){
    for (int i = 0; i < 1024; i++) {//电平升高，从暗到明 
      analogWrite(LAMP_PIN, i); 
      delay(2);
    }   
  }else{
     digitalWrite(LAMP_PIN, false);//控制IO端口
  } 
}

// 函数说明：对客户端请求返回值处理
void HandleVal()
{
    String wifis = webServer.arg("ssid"); //从JavaScript发送的数据中找ssid的值
    String wifip = webServer.arg("password"); //从JavaScript发送的数据中找password的值
    Serial.println(wifis);
    Serial.println(wifip);  //在这里处理接收到的数据
    if(wifis.equals("pwm")){     
      int i=wifip.toInt();//在此把wifip转化成INT型数值,以备后续使用
       Serial.println(i);    
       analogWrite(LAMP_PIN, i); 
    }

     if(wifis.equals("r")){     
      int i=wifip.toInt();//在此把wifip转化成INT型数值,以备后续使用
       Serial.println(wifis+" "+i);  
       analogWrite(LAMP_PIN3, 0); 
       analogWrite(LAMP_PIN2, 0);   
       analogWrite(LAMP_PIN1, i); 
     }else  if(wifis.equals("g")){     
      int i=wifip.toInt();//在此把wifip转化成INT型数值,以备后续使用
       Serial.println(wifis+" "+i);    
       analogWrite(LAMP_PIN3, 0); 
       analogWrite(LAMP_PIN1, 0);   
       analogWrite(LAMP_PIN2, i);     
     }else if(wifis.equals("b")){     
      int i=wifip.toInt();//在此把wifip转化成INT型数值,以备后续使用
       Serial.println(wifis+" "+i);    
       analogWrite(LAMP_PIN2, 0); 
       analogWrite(LAMP_PIN1, 0); 

       analogWrite(LAMP_PIN3, i); 
     }
     else if(wifis.equals("c")){     
      int i=wifip.toInt();//在此把wifip转化成INT型数值,以备后续使用
       analogWrite(LAMP_PIN2, 0); 
       analogWrite(LAMP_PIN1, 0); 
       analogWrite(LAMP_PIN3, 0); 
     }
   
    
    if(wifip.equals("on")){
         Serial.println("开灯");
         controlLamp(true);
      }else if(wifip.equals("off")){
         Serial.println("关灯");
          controlLamp(false);
      }else if(wifip.equals("data")){
         Serial.println("getdata");
          //在这里直接返回数据给客户端
      }
    String  cmd="ssid="+wifis+" password="+wifip+" is OK";  
    webServer.send(200, "text/plain", cmd);//在这里返回数据给客户端
}

void setup() {
  Serial.begin(115200);
  WiFi.mode(WIFI_AP);
  WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0));
  WiFi.softAP("DNSServer example");
  pinMode(LAMP_PIN1, OUTPUT);//设置为输出模式
  pinMode(LAMP_PIN2, OUTPUT);//设置为输出模式
  pinMode(LAMP_PIN3, OUTPUT);//设置为输出模式
  //initialize
  digitalWrite(LAMP_PIN1, LOW);
  digitalWrite(LAMP_PIN2, LOW);
  digitalWrite(LAMP_PIN3, LOW);
  // modify TTL associated  with the domain name (in seconds)
  // default is 60 seconds
  dnsServer.setTTL(300);
  dnsServer.setErrorReplyCode(DNSReplyCode::ServerFailure);
  // start DNS server for a specific domain name
  dnsServer.start(DNS_PORT, "www.daodanjishui.com", apIP);
  // simple HTTP server to see that DNS server is working
  webServer.on("/HandleVal", HTTP_GET, HandleVal);//接收配网提交的参数
  webServer.on("/", HTTP_GET,handleRoot);//显示主页
  webServer.onNotFound([]() {
    String message = "Hello daodanjishui!\n\n";
    message += "URI: ";
    message += webServer.uri();
    webServer.send(200, "text/plain", message);
  });
  webServer.begin();
   Serial.println("webServer is ok");   
}
void loop() {
  dnsServer.processNextRequest();
  webServer.handleClient();   
}

RUIII_012

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
wifi lighting program

在Web页面中，有几个按钮可以分别控制点灯系统的绿灯、红灯、蓝灯和关闭功能，还有一个滑动条用于调节灯的亮度。通过向HandleVal路径发送HTTP GET请求，可以将所选的颜色和亮度值发送到ESP8266。它使用了ESP8266WiFi库来连接WiFi网络，并在该网络上使用DNSServer和ESP8266WebServer库创建一个可以响应HTTP请求的Web服务器。以下代码用于构建一个基于ESP8266的点灯系统的网页端，可以通过网页控制ESP8266控制灯的颜色和亮度。
复制链接

扫一扫