通过网页控制ESP8266服务端的板载LED-CFANZ编程社区

一、esp开发板引脚的开关控制

两个按钮的HTML代码如下：

   <form action="LED-Control"><input type="submit" value="LED控制">
   </form>
   <br>
   <form action="index.html"><input type="submit" value="返回首页">
   </form>

可实现当点击 led控制按钮时，浏览器向esp8266发送“/LED-Control"的请求；

esp收到请求后，通过下面的代码执行handleLEDControl()函数，开关led；

void setup(){
 pinMode(LED_BUILTIN, OUTPUT);      // 初始化NodeMCU控制板载LED引脚为OUTPUT
 esp8266_server.on("/LED-Control", handleLEDControl); // 告知系统如何处理/LED-Control请求     
 esp8266_server.begin();                   // 启动网站服务  
}

// 改变led的状态
void handleLEDControl(){
   bool ledStatus = digitalRead(LED_BUILTIN);     // 此变量用于储存LED状态     
   ledStatus == HIGH ? digitalWrite(LED_BUILTIN, LOW) : digitalWrite(LED_BUILTIN, HIGH);  // 点亮或者熄灭LED        
   esp8266_server.send(303);  
}

二、esp开发板模拟量引脚控制:

中间的输入框和按钮的html代码如下：

	<form action="/LED-Control">
		<input type="text" name="ledPwm">
		</br>
		<input type="submit" value="OK">
	</form>

void handleLEDControl(){
  /从浏览器发送的信息中获取PWM控制数值（字符串格式）
  String ledPwm = esp8266_server.arg("ledPwm"); 
  /将字符串格式的PWM控制数值转换为整数
  int ledPwmVal = ledPwm.toInt();
  /实施引脚PWM设置
  analogWrite(LED_BUILTIN, ledPwmVal);
  /建立基本网页信息显示当前数值以及返回链接
  String httpBody = "Led PWM: " + ledPwm + "<p><a href=\"/LED.html\"><-LED Page</a></p>";           
  esp8266_server.send(200, "text/html", httpBody);
}

三、利用JavaScriptesp实现开发板模拟量引脚的图形界面控制:

后端程序基本一样，主要是前端不同；

// 处理PWM设置请求并对引脚进行PWM设置
void handlePWM(){
  String pwmStr = esp8266_server.arg("pwm"); // 获取用户请求中的PWM数值
  int pwmVal = pwmStr.toInt();              // 将用户请求中的PWM数值转换为整数
  pwmVal = 255 - map(pwmVal,0,100,0,255); // 用户请求数值为0-100，转为0-1023
  
  analogWrite(LED_BUILTIN, pwmVal);         // 实现PWM引脚设置
  esp8266_server.send(200, "text/plain");//向客户端发送200响应信息
}