Az előző részben megvizsgáltuk, hogy egy DS18B20 hőmérsékletmérőt hogyan tudunk illeszteni egy mikrokontrollerhez (Huzzah ESP8266), valamint azt, hogy az általa mért értékeket hogyan tudjuk beolvasni az IDE program soros monitorjával. Ez remek lehetőség ellenőrzésre, vagy szervizelésre, de a gyakorlatban sokkal jobb lenne, ha a mért értékeket valamilyen mobil eszközön, például egy okostelefonon tudnánk megjeleníteni. Ezt úgy tudjuk a legegyszerűbben megtenni, ha kontrollerünkre egy egyszerű webszerve alkalmazást telepítünk. Erre a célra az ESPAsyncWebserver alkalmazást fogjuk használni, ami egy un. aszinkron web szervert hoz létre.

Az ESPAsyncWebServer telepítése

A könyvtár telepítését nem tudjuk egyszerűen az IDE programból megtenni, a szükséges fájlokat le kell töltenünk, majd az Arduino IDE megfelelő mappájába kell másolnunk. A művelet az alábbi lépésekből áll:

  1. Kattints ide az ESPAsyncWebServer library letöltéséhez
  2. A letöltött fájlt csomagold ki, az eredmény egy ESPAsyncWebServer-master nevű mappa lesz
  3. Nevezd át a mappát ESPAsyncWebServer-re
  4. Másold a mappát az Arduino IDE program Libraries mappájába

Az ESPAsync TCP telepítése

  1. Kattints ide az ESPAsyncTCPlibrary letöltéséhez
  2. A letöltött fájlt csomagold ki, az eredmény egy ESPAsyncTCP-master nevű mappa lesz
  3. Nevezd át a mappát ESPAsyncTCP-ra
  4. Másold a mappát az Arduino IDE program Libraries mappájába
  5. Indítsd újra az Arduino IDE programot

Példaprogram

A cikk végén található program bemásolásával azonnal ki is próbálhatjuk a kontroller működését. Az indítás előtt természetesen meg kell adnunk az alkalmazott wifi hálózat adatait:

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

A program működése:

– szükséges könyvtárak importálása:

#ifdef ESP32
  #include <WiFi.h>
  #include <ESPAsyncWebServer.h>
#else
  #include <Arduino.h>
  #include <ESP8266WiFi.h>
  #include <Hash.h>
  #include <ESPAsyncTCP.h>
  #include <ESPAsyncWebServer.h>
#endif
#include <OneWire.h>
#include <DallasTemperature.h>

– A DS18B20 szenzor inicializálása

#define ONE_WIRE_BUS 2

	// one-wire kommunikáció 
OneWireoneWire(ONE_WIRE_BUS);

// Dallas szenzor hozzáadása 
DallasTemperaturesensors(&oneWire);

– Az aszinkron webszerver létrehozása a 80-as porton

// AsyncWebServer létrehozása a 80-as porton
AsyncWebServerserver(80);

– Hőmérséklet beolvasása, konvertálása celsius illetve fahrenheit értékre

StringreadDSTemperatureC() {
  // hőmérséklet szenzor meghívása, és értékkiolvasás celsius-ban, hibakezelés
sensors.requestTemperatures(); 
float tempC = sensors.getTempCByIndex(0);

if(tempC == -127.00) {
Serial.println("Failed to read from DS18B20 sensor");
return "--";
}else {
Serial.print("Temperature Celsius: ");
Serial.println(tempC); 
  }
return String(tempC);
}

String readDSTemperatureF() {
  // hőmérséklet szenzor meghívása, és értékkiolvasás fahrenheit-ben, hibakezelés
sensors.requestTemperatures(); 
floattempF = sensors.getTempFByIndex(0);

if(int(tempF) == -196){
Serial.println("Failed to read from DS18B20 sensor");
return "--";
}else {
Serial.print("Temperature Fahrenheit: ");
Serial.println(tempF);
  }
return String(tempF);
}

– hibakezelés:

if(tempC == -127.00) {
Serial.println("Failed to read from DS18B20 sensor");
return "--";

Amennyiben a kiolvasás hibás, a visszaadott érték -127 lesz, ebben az esetben a soros monitoron hibaüzenetet kapunk.

– adatkezelés:

Az adatkiolvasás string típusú adatot szolgáltat, ezt a feldolgozás előtt a float típusbólkonvertálni kell.

returnString(tempC);

– A weblap felépítése

A következő lépés a weboldal felépítése. A weboldal elkészítéséhez szükséges HTML és CSS az index_html változóban kerül mentésre.

A HTML kódban a TEMPERATUREC és a TEMPERATUREF változókat használjuk a „%” jelek között. Ez a hőmérsékleti értékek ún. helyőrzője (spaceholder).

Ez azt jelenti, hogy ez a% TEMPERATUREC% szöveg olyan, mint egy változó, amelyet a kód az érzékelő tényleges hőmérsékleti értékével helyettesít. A HTML szöveg helyőrzőinek „%” jelek között kell lenniük. Ezt a „behelyettesítést” a processor() függvény hajtja végre.

Stringprocessor(const String& var){
	//Serial.println(var);
	if(var == "TEMPERATUREC"){
	return readDSTemperatureC();
	}
	elseif(var == "TEMPERATUREF"){
	return readDSTemperatureF();
	}
	return String();
}

– Csatlakozás a helyi hálózathoz, az ESP8266 ip címének kiírása

// csatlakozás a Wi-Fi hálózathoz
WiFi.begin(ssid, password);
Serial.println("Connecting to WiFi");
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
  }
Serial.println();

  // ESP Local IP Address kiírása
Serial.println(WiFi.localIP());

Végül adjuk hozzá a következő sorokat a kódhoz a webszerver kezeléséhez:

server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
	request->send_P(200, "text/html", index_html, processor);
	});
server.on("/temperaturec", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/plain", readDSTemperatureC().c_str());
  });
server.on("/temperaturef", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/plain", readDSTemperatureF().c_str());
  });

Indítsuk el a szervert

server.begin()

Tekintettel arra, hogy un. aszinkron webszervert alkalmaztunk, a program loop() része üresen maradhat:

void loop(){

}

A wifi hálózat adatainak beállítása, és a program elindítása után mobileszközünk webbrózerében adjuk meg a kapott ip címet! Ha minden rendben működik, belépünk a kontroller weboldalára, és az alábbihoz hasonló képet kapunk:

MálnaSuli hőmérő webszerver

A forráskód letölthető:

A cikkben használt Adafruit Huzzah Feather board megvásárolható a MálnaPC Webshopjában!