AJAX + (+ JSON) + ESP8266 = automatyczna aktualizacja odczytów czujników (BME280) bez konieczności odświeżania strony

rziomber · Styczeń 15, 2019

AJAX umożliwia przekazywanie danych pomiędzy klientem a serwerem WWW bez konieczności przeładowania strony. Dodając do tego timer w JavaScript możemy uzyskać świeże dane na stronie generowanej przez ESP8266. Na początek stwórzmy w PHP najprostszą stronę WWW prezentującą aktualną godzinę pobieraną z serwera (nie "JavaScriptovy" czas z przeglądarki - w końcu docelowo chcemy pobierać dane z czujników podłączonych do "serwera WWW" postawionego na ESP8266):

<?
if ($_REQUEST["time"]) {
  echo date("G:i:s");
  exit;
}
?>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>AJAX test</title>
</head>
<body>
<span id="time"></span>

<script>
myTimer();
var myVar = setInterval(myTimer, 1000);

function myTimer() {
var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("time").innerHTML =
      this.responseText;
      }
  };
  xhttp.open("GET", "test.php?time=1", true);
  xhttp.send();
}
</script>

</body>
</html>

Timer co sekundę przywołuje funkcję myTimer();

var myVar = setInterval(myTimer, 1000);

a ta pobiera zawartość podstrony test.php?time=1 i wstawia ją do elementu o nazwie "time" (document.getElementById("time").innerHTML = this.responseText;).

Mamy tu tylko jeden przekazywany parametr. Co zrobić, by aktualizować kilka różnych wartości? Przywykłem do podstrony przekazującej parametry rozdzielone znakiem ; (odczyt1;odczyt2;odczyt3). Dzięki JavaScriptowej funkcji split możemy podzielić taki ciąg znaków na tablice, a potem przydzielić jej części do elementów SPAN o określonym ID.

<?
if ($_REQUEST["time"]) {
  echo date("d.m.y;G:i:s");
  exit;
}
?>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>AJAX test</title>
</head>
<body>
Date: <span id="date"></span><br>
Time: <span id="time"></span>

<script>
myTimer();
var myVar = setInterval(myTimer, 1000);

function myTimer() {
var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
		var str = this.responseText; 
		var values = str.split(";");
		      document.getElementById("date").innerHTML =
      values[0];
	        document.getElementById("time").innerHTML =
      values[1];
      }
  };
  xhttp.open("GET", "test.php?time=1", true);
  xhttp.send();
}
</script>

</body>
</html>

Działa! PHP po zainstalowania serwera np NGINX możemy uruchomić na Raspberry Pi. W połączeniu (komenda system()) z zewnętrznym skryptem Python lub programem w C korzystającym z WiringPi otrzymamy stronę z odczytami czujników hostowaną na Raspberry Pi!

Spróbujmy wreszcie zaprogramować mikrokontroler ESP8266. Podłączmy najpierw czujnik BME280.

/*
I2C
D4 - SCL
D3 - SDA
*/

#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <Wire.h>
#include <Adafruit_Sensor.h>
#include <Adafruit_BME280.h>

char* ssid = "Weather";
//const char *password = "";

ESP8266WebServer server(80);
Adafruit_BME280 bme;

void setup() {
Serial.begin(9600);
Wire.begin(D3, D4);
Wire.setClock(100000);
if (!bme.begin(0x76)) //changed from default I2C adress 0x77
{
Serial.println("Nie odnaleziono czujnika BMP085 / BMP180");
while (1) {
}
}
IPAddress apIP(192, 168, 1, 1);
WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0));
// WiFi.softAP(ssid, password);
WiFi.softAP(ssid);
server.on("/", handleRoot);
server.on("/sensors", handleSensors);
server.begin();
}

void loop() {
server.handleClient();
}

void handleRoot() {
String content = "<html> <head><title>Weather</title></head><body>";
content += "<DIV style=\"display:table; font-size: large;\"><DIV style=\"border-style: solid;\">BME280:<BR>Temperature: <span id=\"tempBME\"></span>C<br>Humidity: <span id=\"humBME\"></span>%<br>Pressure: <span id=\"presBME\"></span>Pa<br></DIV>";
content += "<script>myTimer();var myVar = setInterval(myTimer, 1000);function myTimer() {var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { var str = this.responseText; var values = str.split(\";\"); document.getElementById(\"tempBME\").innerHTML = values[0]; document.getElementById(\"humBME\").innerHTML = values[1]; document.getElementById(\"presBME\").innerHTML = values[2];} }; xhttp.open(\"GET\", \"sensors\", true); xhttp.send();}</script>";
content += "</body></html>";
server.send(200, "text/html", content);
}

void handleSensors() {
String content = String(bme.readTemperature()) + ";" + String(bme.readHumidity()) + ";" + String((int)bme.readPressure()) + ";";
server.send(200, "text/html", content);
}

Rozdzielanie danych przecinkiem czy średnikiem nie jest sposobem "zbyt profesjonalnym". Przy dużej ilości zmiennych łatwo też o pomyłkę. Dlatego lepiej wtedy stosować bardziej odpowiednie formaty danych: JSON czy XML. Ze względu na "bliskość" JSON z JavaScript skupię się tylko na nim. Gotowa biblioteka ArduinoJson wygeneruje dane za nas. Więcej informacji znajdziemy w rozdziale Serialize with ArduinoJson dokumentacji technicznej.

/*
  I2C
  D4 - SCL
  D3 - SDA
*/

#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <Wire.h>
#include <Adafruit_Sensor.h>
#include <Adafruit_BME280.h>
#include <ArduinoJson.h> //https://github.com/bblanchon/ArduinoJson

char* ssid = "Weather";
//const char *password = "";

ESP8266WebServer server(80);
Adafruit_BME280 bme;

void setup() {
  Serial.begin(9600);
  Wire.begin(D3, D4);
  Wire.setClock(100000);
  if (!bme.begin(0x76)) //changed from default I2C adress 0x77
  {
    Serial.println("Nie odnaleziono czujnika BMP085 / BMP180");
    while (1) {
    }
  }
  IPAddress apIP(192, 168, 1, 1);
  WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0));
  // WiFi.softAP(ssid, password);
  WiFi.softAP(ssid);
  server.on("/", handleRoot);
  server.on("/sensors", handleSensors);
  server.begin();
}

void loop() {
  server.handleClient();
}

void handleRoot() {
  String content = "<html> <head><title>Weather</title></head><body>";
  content += "<DIV style=\"display:table; font-size: large;\"><DIV style=\"border-style: solid;\">BME280:<BR>Temperature: <span id=\"tempBME\"></span>C<br>Humidity: <span id=\"humBME\"></span>%<br>Pressure: <span id=\"presBME\"></span>Pa<br></DIV>";
  content += "<script>myTimer();var myVar = setInterval(myTimer, 1000);function myTimer() {var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { var str = this.responseText; var values = JSON.parse(str); document.getElementById(\"tempBME\").innerHTML = values.temp; document.getElementById(\"humBME\").innerHTML = values.hum; document.getElementById(\"presBME\").innerHTML = values.press;} }; xhttp.open(\"GET\", \"sensors\", true); xhttp.send();}</script>";
  content += "</body></html>";
  server.send(200, "text/html", content);
}

void handleSensors() {
  String content;
  StaticJsonBuffer<400> jsonBuffer;
  JsonObject& root = jsonBuffer.createObject();
  root["temp"] = bme.readTemperature();
  root["hum"] = bme.readHumidity();
  root["press"] = (int)bme.readPressure();

  root.printTo(content);
  server.send(200, "text/html", content);
}

Strona prezentować się będzie tak samo jak poprzednio. Zyskamy za to wygodny i czytelny sposób dopisywania nowych danych

root["temp"] = bme.readTemperature();

oraz ich odczytywania w kodzie źródłowym strony:

document.getElementById(\"tempBME\").innerHTML = values.temp;

Nie przejmujemy się już numeracją elementów długiej tablicy.

Sytuację możemy też odwrócić tworząc stronę WWW, której formularz sterować będzie pracą naszego fizycznego urządzenia. Oczywiście nadal niekonieczne będzie przeładowanie strony, by wysłać dane.

#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>

char* ssid = "Weather";
//const char *password = "";
int ledValue = 0;

ESP8266WebServer server(80);

void setup() {
  Serial.begin(9600);
  IPAddress apIP(192, 168, 1, 1);
  WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0));
  // WiFi.softAP(ssid, password);
  WiFi.softAP(ssid);
  server.on("/", handleRoot);
  server.begin();
  pinMode(D1, OUTPUT);
  analogWriteRange(100); //http://esp8266.github.io/Arduino/versions/2.0.0/doc/reference.html
  analogWriteFreq(500);
}

void loop() {
  server.handleClient();
  analogWrite(D1, ledValue);
}

void handleRoot() {
  if (server.hasArg("ledVal") && server.arg("ledVal").toInt() >= 0 && server.arg("ledVal").toInt() <= 100) {
    ledValue = server.arg("ledVal").toInt();
    Serial.print("ledVal ");
    Serial.println(ledValue);
    server.send(200, "text/html", "");
    return;
  }

  //https://www.w3schools.com/howto/howto_js_rangeslider.asp
  //https://stackoverflow.com/questions/9713058/send-post-data-using-xmlhttprequest

  String content = "<!DOCTYPE html>"
                   "<html>"
                   "<head>"
                   "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">"
                   "<title>Luminosity setter</title>"
                   "<style>"
                   ".slidecontainer {"
                   "width: 1024px;"
                   "margin: 0 auto;"
                   "text-align: center;"
                   "}"
                   ".slider {"
                   "    -webkit-appearance: none;"
                   "    width: 100%;"
                   "    height: 25px;"
                   "    background: #d3d3d3;"
                   "    outline: none;"
                   "    opacity: 0.7;"
                   "    -webkit-transition: .2s;"
                   "    transition: opacity .2s;"
                   //                 "    margin-left: 20px;"
                   //                  "    margin-right: 20px;"
                   "}"
                   ".slider:hover {"
                   "    opacity: 1;"
                   "}"
                   ".slider::-webkit-slider-thumb {"
                   "    -webkit-appearance: none;"
                   "    appearance: none;"
                   "    width: 25px;"
                   "    height: 25px;"
                   "    background: #4CAF50;"
                   "    cursor: pointer;"
                   "}"
                   ".slider::-moz-range-thumb {"
                   "    width: 25px;"
                   "    height: 25px;"
                   "    background: #4CAF50;"
                   "    cursor: pointer;"
                   "}"
                   "</style>"
                   "</head>"
                   "<body>"
                   "<div class=\"slidecontainer\">"
                   "  <input type=\"range\" min=\"0\" max=\"100\" value=\"" + String(ledValue) + "\" class=\"slider\" id=\"myRange\">"
                   "  <p>Value: <span id=\"demo\"></span>%</p>"
                   "</div>"
                   "<script>"
                   "document.getElementById(\"demo\").innerHTML = document.getElementById(\"myRange\").value;"
                   "document.getElementById(\"myRange\").oninput = function() {"
                   "  document.getElementById(\"demo\").innerHTML = this.value;"
                   "var data = new FormData();"
                   "data.append('ledVal', this.value);"
                   "var xhr = new XMLHttpRequest();"
                   "xhr.open('POST', '/', true);"
                   "xhr.onload = function () {"
                   "    console.log(this.responseText);"
                   "};"
                   "xhr.send(data);"
                   "}"
                   "</script>"
                   "</body>"
                   "</html>";
  server.send(200, "text/html", content);
}

W tym przypadku przesunięcie suwaka na stronie sterującej wywoła natychmiastową zmianę jasności diody LED podłączonej odpowiednim rezystorem do pinu D1.

Treker · Styczeń 17, 2019

@rziomber, właśnie zaakceptowałem Twój opis, możesz go teraz zgłosić do akcji rabatowej umieszczając link w temacie zbiorczym. Dziękuję za przedstawienie ciekawego projektu, zachęcam do prezentowania kolejnych DIY oraz aktywności na naszym forum 🙂

Przy okazji proszę inne osoby planujące opis projektów tego typu o wcześniejsze zgłaszanie się w celu wstępnej weryfikacji projektu (procedura jest opisana w ogłoszeniu).

rziomber · Czerwiec 27, 2019

Biblioteka ArduinoJson uaktualniła się do wersji 6 i powyższe porady związane z nią są już nieaktualne. Rozwiązanie znajdziemy w rozdziale Summary na stronie Migrating from version 5 to 6 | ArduinoJson 6.

rozrabiaka · Wrzesień 9, 2019

Cześć, po dodaniu w tagu <HEAD> tego fragmentu: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

Pojawiają się błędy w JS. Nie jestem w stanie stwierdzić co i jak, bo jestem poniżej amatora w JS, HTML itp. Więc może ktoś bardziej oblatany w temacie będzie w stanie znaleźć rozwiązanie?

Pozdrawiam.

Produkcja i montaż PCB - wybierz sprawdzone PCBWay!
   • Darmowe płytki dla studentów i projektów non-profit
   • Tylko 5$ za 10 prototypów PCB w 24 godziny
   • Usługa projektowania PCB na zlecenie
   • Montaż PCB od 30$ + bezpłatna dostawa i szablony
   • Darmowe narzędzie do podglądu plików Gerber
Zobacz również » Film z fabryki PCBWay

Treker · Wrzesień 9, 2019

10 minut temu, rozrabiaka napisał:

Pojawiają się błędy w JS.

Wklej w takim razie błędy, które otrzymujesz. Na pewno łatwiej będzie wtedy pomóc 🙂

rozrabiaka · Wrzesień 9, 2019

Przed chwilą, Treker napisał:

Wklej w takim razie błędy, które otrzymujesz. Na pewno łatwiej będzie wtedy pomóc 🙂

Proponuję sprawdzić na przykładzie autora artykułu, dokładnie to samo się dzieje.

rziomber · Wrzesień 9, 2019

Niepoprawne osadzenie HTML w kodzie C++? Brakuje znaku ucieczki przed " ?

Może raw string literals pomogą?

Edytowano Wrzesień 9, 2019 przez rziomber

rziomber · Listopad 8, 2020

Nieco bardziej zautomatyzowany sposób prezentacji odczytu z czujników, który możemy wykorzystać w przykładzie z JSON.

<!DOCTYPE html>
<html>
<body>

<div id="sensor-values">
Temperatura: <span id="temperature"></span><br>
Wilgotność: <span id="humidity"></span><br>
Ciśnienie: <span id="pressure"></span><br>
</div>

<script>
var values = new Array();
values['temperature'] = 23.4;
values['humidity'] = 50.4;
values['pressure'] = 1000;

var childSpans = document.getElementById('sensor-values').getElementsByTagName('span');

for(i=0; i < childSpans.length; i++)
{
  if (typeof values[childSpans[i].id] !== 'undefined' && values[childSpans[i].id] !== null) {
  childSpans[i].textContent = values[childSpans[i].id];
  }
}
</script>

</body>
</html>

Zamiast ręcznie tworzyć tablicę values z wartościami jak w tym przykładzie, oczywiście sensowniej przeparsować JSON odczytywany cyklicznie dzięki AJAX z ESP8266. Zobacz var values = JSON.parse(str); z kodu w pierwszym poście.

Dzięki temu zaoszczędzimy sobie konieczności ręcznego przypisywania każdego odczytu.

document.getElementById(\"tempBME\").innerHTML = values.temp;
document.getElementById(\"humBME\").innerHTML = values.hum;
document.getElementById(\"presBME\").innerHTML = values.press;

Gotowy kod dla ESP8266 przy okazji z dołączonym Captive Portal może wyglądać tak:

#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <Wire.h>
#include <Adafruit_Sensor.h>
#include <Adafruit_BME280.h>
#include <ArduinoJson.h> //https://github.com/bblanchon/ArduinoJson
#include <DNSServer.h>

char* ssid = "Weather";
//const char *password = "";

ESP8266WebServer server(80);
DNSServer dnsServer;
Adafruit_BME280 bme;

void setup() {
  Serial.begin(9600);
  Wire.begin(D3, D4);
  Wire.setClock(100000);
  if (!bme.begin(0x76)) //changed from default I2C adress 0x77
  {
    Serial.println("Nie odnaleziono czujnika BMP085 / BMP180");
    while (1) {
    }
  }
  IPAddress apIP(192, 168, 1, 1);
  WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0));
  // WiFi.softAP(ssid, password);
  WiFi.softAP(ssid);
  dnsServer.start(53/*DNS_PORT*/, "*", apIP);
  server.on("/", handleRoot);
  server.on("/sensors", handleSensors);
  server.begin();
}

void loop() {
  server.handleClient();
  dnsServer.processNextRequest();
}

void handleRoot() {
  String content = R"rawliteral(<!DOCTYPE html><html><head>
<meta charset="UTF-8">
<title>Weather</title></head><body>
<DIV style="display:table; font-size: large;" id="sensor-values">
<DIV style="border-style: solid;">BME280:<BR>
Temperature: <span id="tempBME"></span>°C<br>
Humidity: <span id="humBME"></span>%<br>
Pressure: <span id="pressBME"></span>Pa<br></DIV></DIV>
<script>myTimer();
var myVar = setInterval(myTimer, 1000);
function myTimer() {
var xhttp = new XMLHttpRequest(); 
xhttp.onreadystatechange = function() { 
  if (this.readyState == 4 && this.status == 200) { 
    var str = this.responseText; 
    var values = JSON.parse(str); 

    var childSpans = document.getElementById("sensor-values").getElementsByTagName("span");
    for(i=0; i < childSpans.length; i++){
      if (typeof values[childSpans[i].id] !== 'undefined' && values[childSpans[i].id] !== null) {
        childSpans[i].textContent = values[childSpans[i].id];
        }
    }
  }
}; 
    xhttp.open("GET", "/sensors", true); 
    xhttp.send();}</script>
</body></html>)rawliteral";
  server.send(200, "text/html", content);
}

void handleSensors() {
  String content;
  DynamicJsonDocument root(400);
  root["tempBME"] = String(bme.readTemperature(), 1);
  root["humBME"] = String(bme.readHumidity(), 1);
  root["pressBME"] = (int)bme.readPressure();
  serializeJson(root, content);
  server.send(200, "text/html", content);
}

Edytowano Listopad 9, 2020 przez rziomber

ethanak · Listopad 8, 2020

16 minut temu, rziomber napisał:
document.getElementById(\"presBME\").innerHTML = values.press;

Hm... już 20 lat minęło od początku tysiąclecia i przeglądarki wiedzą co to textContent...

kisoft · Listopad 21, 2020

Witam

@rziomber...Wgrałem ten ostatni kod, ale nie działa.. Uzupełniłem brakujące dane typu nazwa sieci, niestety nie działa. Dobrze by było umieścić działający kod...Zwłaszcza że to ciekawe rozwiązanie...

rziomber · Listopad 21, 2020

Przed chwilą wgrałem kod zamieszczony w poście z 8 listopada. Działa bez problemu.

Możesz mieć BME280 pod innym adresem I2C. Zwróć uwagę na linijkę

if (!bme.begin(0x76)) //changed from default I2C adress 0x77

W którym momencie pojawia się kłopot?

40 minut temu, kisoft napisał:

Uzupełniłem brakujące dane typu nazwa sieci,

W moim przykładzie sam ESP tworzy sieć WiFi, nie łączy się z już istniejącą. Oczywiście moża to zmienić podmieniając linijkę kodu.

Edytowano Listopad 21, 2020 przez rziomber

kisoft · Listopad 21, 2020

OK dzięki działa...

 Wire.begin(D3, D4);

to było problemem u mnie, zmieniłem na (D1, D2)...

AJAX + (+ JSON) + ESP8266 = automatyczna aktualizacja odczytów czujników (BME280) bez konieczności odświeżania strony

Pomocna odpowiedź

Link do komentarza

Share on other sites

Treker (Damian Szymański)

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Polecacz 101

Treker (Damian Szymański)

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Dołącz do dyskusji, napisz odpowiedź!

Najnowsze posty w innych tematach