Создаем кнопку и реакцию на данную кнопку на WEB страничке с помощью HTML .
В данном уроке мы добавим пару строчек текста, что бы уже можно было управлять с WEB странички нашим светодиодом. У нас будет кнопка ON и OFF с помощью которой мы и будем управлять нашим светодиодом.
Программный код будет написан на С++ и microPython. В обоих случаях мы будем включать/выключать светодиод который будет подключен к ножке 2. Для нашей платы (ESP8266) это вывод D4.
***********
схема
********
Программный код на языке microPython:
from machine import Pin
led = Pin(2, Pin.OUT)
def web_page():
html = """<html><head><meta name="viewport" content="width=device-width, initial - scale=1"> </head>
<body>
<CENTER>
<h1>Hello, Word</h1>
<a href=\"?led=on\"><button>ON</button></a> 
<a href=\"?led=off\"><button>OFF</button></a> 
</CENTER>
</body>
<html>"""
return html
s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
s.bind(('',80))
s.listen(5)
while True:
try:
if gc.mem_free()<102000:
gc.collect()
conn, addr = s.accept()
print('Got a connection from %s' % str(addr))
request = conn.recv(1024)
conn.settimeout(None)
request = str(request)
print ('Content = %s' % str(request))
led_on = request.find('/?led=on')
led_off = request.find('/?led=off')
if led_on == 6:
print ('LED_ON')
led.value(0)
if led_off == 6:
print('LED_OFF')
led.value(1) response = web_page()
conn.send('HTTP/1.1 200 Ok\n')
conn.send('Content-Type: text/html\n')
conn.send('Connection: close\n\n') conn.sendall(response) conn.close()
except OSError as e:
conn.close()
print('Connection closed')
И так, что же мы сделали:
********
Программный код для С++:
#include <ESP8266WiFi.h>
char ssid[] = "Tanya";
char pass[] = "0671943446";
// Работаем через 80 порт
#define LISTEN_PORT 80
//Создаем сервер
WiFiServer server(LISTEN_PORT);
// Переменная для хранения HTTP запросов
String header;
void setup() {
pinMode(2, OUTPUT);
digitalWrite(2, LOW);
Serial.begin(115200);
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, pass);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
// Выводим полученные значения IP
Serial.println("");
Serial.println("WiFi connected.");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
server.begin();
}
void loop() {
// ПРОВЕРКА ПОДКЛЮЧЕНИЯ КЛИЕНТА
WiFiClient client = server.available();
if (!client) {
return;
}
// ЖДЁМ КЛИЕНТА
Serial.println("new client");
while(!client.available()){
delay(1);
}
// читаем строку ссылки
String reg = client.readStringUntil('\r');
Serial.println(reg);
client.flush();
if (reg.indexOf("/?led=on") >= 0)// нажали 5-включить
{
Serial.println("GPIO 2 on");
digitalWrite(2, LOW);
}
else if (reg.indexOf("/?led=off") >= 0) // нажали 5-выключить
{
Serial.println("GPIO 2 off");
digitalWrite(2, 1);
}
// ПОДГОТОВКА HTML-страницы
String s = "<!DOCTYPE HTML>\r\n<meta http-equiv='content-type' content='text/html; charset=UTF-8'>\r\n";
s += "<html>";
s += " <HEAD>";
s += " <title>My first web page</title>";
s += " <BODY>";
s += " <CENTER>";
s += " <H3>Hello World </H3><br>";
s += " <a href=\"?led=on\"><button>ON</button></a> ";
s += " <a href=\"?led=off\"><button>OFF</button></a> ";
s += " </CENTER>";
s += " </BODY>";
s += "/<html>";
// ОТПРАВКА СТРАНИЦЫ КЛИЕНТУ
client.print(s);
// Очищаем переменную заголовка
delay(1000);
Serial.println("Client disonnected");
}
И так, что же мы сделали:
