Основы работы с HTML, начинаем писать первую WEB страничку на микроконтроллере ESP8266 с помощью программного обеспечения Arduino Ide.

В данном уроке мы с Вами выведем данные на нашу Web страничку. Выводим будем данные с АЦП, которое имитирует работу датчика. Вывод данных мы будем делать используя JS, так как сам HTML не умеет делать обновление данных.
Сперва напишем код в среде программировании Arduino IDE, а после его разберем:

#include <ESP8266WiFi.h>

#include <WiFiClient.h>

#include <ESP8266WebServer.h>

const char *ssid = «myesp8266»;

const char *password = «12345678»;

ESP8266WebServer server(80);

void handleRoot(){

server.send(200,»text/html», startHTML());

}

void sensor_data(){

int a = analogRead(A0);

int temp= a/5;

String sensor_value = String(temp);

server.send(200, «text/plane», sensor_value);

}

void setup(void){

Serial.begin(115200);

delay(500);

Serial.println(«»);

WiFi.softAP(ssid, password);

IPAddress apip = WiFi.softAPIP();

Serial.print(«Soft-AP IP address = «);

Serial.println(WiFi.softAPIP());

Serial.println(«»);

server.on(«/», handleRoot);

server.on(«/adcread», sensor_data);

server.begin();

}

void loop(void){

server.handleClient();

}

String startHTML(){

String out = R»=====(

<!DOCTYPE html>

<html>

setInterval(function(){

getData();

}, 2000);

function getData() {

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

document.getElementById(«adc_val»).innerHTML = this.responseText;

}

};

xhttp.open(«GET», «adcread», true);

xhttp.send();

}

</script>

<div>

<h1>AJAX BASED ESP8266 WEBSERVER</h1>

</div>

<br>

<div>

<h2>

Temp(C): <span id=»adc_val»>0</span>

</h2>

</div>

</center>

</body>

</html>

)=====»;

return out;

}

Выполнив дынный код, Вы должны увидеть на экране браузера следующее:

Теперь пропишем точно такой же код, но на языке microPython:

import socket
import machine

adc = machine.ADC(0)

def web_page():
a=adc.read()
value = str(a)
html = «»»<!DOCTYPE html>
<html>
<head>
<meta http-equiv=»refresh» content=»4″>

</head>
<body style=»background-color: #f9e79f «>
<center>
<div>
<h1>AJAX BASED ESP8266 WEBSERVER</h1>
</div>
<br>
<div>
<h2>Temp(C): «»»+value+»»»</span></h2>
</div>
</center>
</body>
</html>»»»
return html

s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
s.bind((»,80))
s.listen(5)

while True:
conn, addr = s.accept()
print(‘Got a connection from %s’ % str(addr))
request = conn.recv(1024)
print (‘Content = %s’ % str(request))
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()

СОДЕРЖАНИЕ

Содержание

Занимательная электроника

Разработки и схемы

Микроконтроллеры

HTML, CSS, JAVA, PHP

Многозадачные системы

microPython

Обучение и развитие