Управляем светодиодами с WEB странички на языке программирования С++ и microPython.
Страница на этапе разработке.
В данном уроке мы с Вами добавим к нашему существующему коду с первого урока новый функционал: две кнопки, по нажатию которой у нас будет включаться светодиод, а по нажатию второй кнопки светодиод будет выключаться.
Для начала в VS мы напишем код, где разместим наши кнопки и пропишем JS код, а уже после перенесем наш код в микроконтроллер.
И так, преступим:
#ifdef ESP8266
#include <ESP8266WebServer.h> // include ESP8266 library
ESP8266WebServer server(80);
int LEDGpin = D7;// define LED pins
int LEDRpin = D8;
#elif ESP32
#include <WebServer.h> // include ESP32 library
WebServer server (80);
int LEDGpin = 26;// define LED pins
int LEDRpin = 25;
#else // Arduino IDE error message
#error «ESP8266 or ESP32 microcontroller only»
#endif
char ssidAP[] = «myesp8266»; // WLAN SSID and password
char passwordAP[] = «12345678»;
IPAddress local_ip(192,168,2,1);// pre-defined IP address values
IPAddress gateway(192,168,2,1);
IPAddress subnet(255,255,255,0);
int LEDR = LOW; // default LED states
int LEDG = LOW;
int counter = 0;
void handleRoot() {
server.send(200, «text/html», startHTML());
}
void LEDGfunct(){
LEDG = !LEDG; // send HTML code to client
digitalWrite(LEDGpin, LEDG);
counter++;
String str = «ON»;
if(LEDG == LOW) str = «Off»;
server.send(200, «text/plain», str);
}
void LEDRfunct() {
LEDR = !LEDR;
digitalWrite(LEDRpin, LEDR);
counter++;
String str = «ON»;
if(LEDR == LOW) str = «OFF»;
server.send(200, «text/plain», str);
}
void zeroFunct(){
counter = 0;
String str = String(counter);
server.send(200, «text/plain», str);
}
void countFunct() {
String str = String(counter);
server.send(200, «text/plain», str);
}
void setup(){
Serial.begin(115200);
WiFi.mode(WIFI_AP); // Wi-Fi AP mode
delay(1000); // setup AP mode
WiFi.softAP(ssidAP, passwordAP);// initialise Wi-Fi with
WiFi.softAPConfig(local_ip, gateway , subnet);
IPAddress apip = WiFi.softAPIP();
Serial.print(«Soft-AP IP address = «);
Serial.println(WiFi.softAPIP());
Serial.println(«»);
// predefined IP address
server.begin(); // initialise server
server.on(«/», handleRoot);
server.on(«/LEDGurl», LEDGfunct);
server.on(«/LEDRurl», LEDRfunct);
server.on(«/zeroUrl», zeroFunct);
server.on(«/countUrl», countFunct);
pinMode(LEDGpin, OUTPUT);
pinMode(LEDRpin, OUTPUT);
}
void loop(){
server.handleClient();// manage HTTP requests
}
String startHTML(){
String out = R»=====(
<!DOCTYPE html><html><head>
<title>Local network</title>
<style>
body {margin-top:50px; font-family:Arial}
body {font-size:20px; text-align:center}
.btn {display:block; width:280px; margin:auto; padding:30px}
.btn {font-size:30px; color:black; text-decoration:none}
.on {background-color:SkyBlue}
.off {background-color:LightSteelBlue}
.zero {background-color:Thistle}
td {font-size:30px; margin-top:50px; margin-bottom:5px}
p {font-size:30px; margin-top:50px; margin-bottom:5px}
</style>
</head>
<body>
<h1>ESP8266 local area network</h1>
<table style=’width:100%’>
<tr>
<td>Green LED is <span id=’LEDG’>OFF</span> now</td>
<td>Red LED is <span id=’LEDR’>OFF</span> now</td>
</tr></table> <table style=’width:100%’><tr>
<td><button class = ‘btn off’ id=’Green LED’ onclick = ‘sendData(id)’>Press to turn Green LED ON </button>
</td> <td><button class = ‘btn off’ id=’Red LED’ onclick = ‘sendData(id)’>Press to turn Red LED ON </button></td>
</tr>
</table>
<p>Counter is <span id=’counter’>0</span> now</p>
<button class = ‘btn zero’ id = ‘zero’ onclick = ‘sendData(id)’> Press to zero counter </button>
<script>
function sendData(butn){
var URL, variab, text;
if(butn == ‘Red LED’){
URL = ‘LEDRurl’;
variab = ‘LEDR’;
}else if(butn == ‘Green LED’) {
URL = ‘LEDGurl’;
variab = ‘LEDG’;
}else if(butn == ‘zero’){
URL = ‘zeroUrl’;
variab = ‘counter’;
}
if(butn == ‘Red LED’ || butn == ‘Green LED’){
// change button class and text
var state = document.getElementById(butn).className;
state = (state == ‘btn on’ ? ‘btn off’ : ‘btn on’);
text = (state == ‘btn on’ ? butn + ‘ OFF’ : butn + ‘ ON’);
document.getElementById(butn).className = state;
document.getElementById(butn).innerHTML = ‘Press to turn ‘+ text;
}
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(butn){
if (this.readyState == 4 && this.status == 200){
document.getElementById(variab).innerHTML = this.responseText;
}
};
xhr.open(‘GET’, URL, true);
xhr.send();
}
setInterval(reload, 1000);
function reload(){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200)
document.getElementById(‘counter’).innerHTML = this.responseText;
};
xhr.open(‘GET’, ‘countUrl’, true);
xhr.send();
}
</script>
</body>
</html>
)=====»;
return out;
}
