Arduino Slovakia - ESP8266 - HTTP server a senzor teploty DS18B20

Hierarchy: ESP8266

V předchozích článcích jsme se naučili vytvořit HTTP server pomocí mikrokontroléru ESP8266. Doposud jsme zobrazovali statické stránky. Postupně jsme se naučili zobrazit stránky, které byly ve zdrojovém kódu programu, nebo byly uloženy v souborovém systému SPIFFS. Dnes se posuneme o kus dál. Statickou stránku nahradíme dynamickou stránkou, která bude zobrazovat teplotu. Teplotu budeme měřit pomocí integrovaného obvodu DS18B20.

V ESP8266 je nahrán program, který zobrazuje jedinou stránku. Na stránce je zobrazena aktuální teplota v místnosti. HTML kód stránky je vytvořen pomocí knihovny Bootstrap, která zebezpečuje responzívny design. Stránka zobrazuje dva stavy:

Měřenou teplotu v místnosti.
Nebo chybové hlášení v případě, že se nepodařilo najít senzor teploty DS18B20.

Program funguje tak, že si ze souborového systému SPIFFS stáhne šablonu HTML stránky a v ní nahradí proměnnou skutečnou teplotou. Potom výslednou stránku odešle do prohlížeče. Toto je jeden možný způsob, jak se dá vytvořit výsledná stránka v prohlížeči. Pokud potřebujete měřenou teplotu zobrazit v prohlížeči jen občas a netrápí vás, zda nepřenáší při každé obnově stránky příliš mnoho informací, které se nikdy nemění, pak je tento způsob na to vhodný. V pokračování tohoto seriálu si ukážeme, že se to dá udělat i jinak a ukážeme si, jak se dá oddělit grafika od přenášených dat.

Seznam součástek

Budeme potřebovat tyto součástky:

ESP8266 {linkESP8266}
Breadboard {linkBreadboard}
DS18B20 {linkDS18B20}
Rezistor 4k7 {linkR}

Součástky jsou zapojeny podle tohoto schématu. Na pinu D6 musí být zapojen pull-up rezistor. Senzor teploty je zapojen normálně na GND a 3,3 V. Pokud máte originální senzory teploty, můžete jej zapojit i v parazitické napájení.

Příklad

Tento příklad bude fungovat pouze tehdy, pokud si zdrojový kód stáhnete z GitHub a obsah adresáře data přenesete do SPIFFS pomocí příkazu Tools/ESP8266 Sketch Data Upload.

HTML

Šablona HTML stránky se nachází v souboru index.html. Je to jednoduchý kód pro responzívny design pomocí knihovny Bootstrap. Důležitá je pouze proměnná {TEMPERATURE}, která je ve výsledné stránce nahrazena měřenou teplotou.

<html>

<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <link rel="icon" type="image/png" href="favicon.png">
    <title>HTTP Server ESP8266 - DS18B20</title>
</head>

<body>
    <div class="container">
        <h1>ESP8266 HTTP Server</h1>
        <p>Temperature: <b>{TEMPERATURE}</b></p>

        <p>Copyright (C) 2019 <a href="https://www.arduinoslovakia.eu">Arduino Slovakia</a>.</p>
    </div>
</body>

</html>

C++

Takto vypadá zdrojový kód programu. Základem programu je HTTP server, který naslouchá na portu 80. Teplota je měřena pomocí čidla teploty DS18B20. Použité knihovny lze rozdělit na dvě skupiny.

ESP8266WiFi, ESP8266WebServer, FS - Tyto knihovny jsou nainstalovány spolu s ESP8266.
OneWire, DallasTemperature - Tyto knihovny slouží k měření teploty. Obě se dají instalovat pomocí správce knihoven. Hypertexty na zdrojové kódy jednotlivých knihoven naleznete ve zdrojovém kódu programu, který si stáhnete z GitHub.

Protože výsledkem programu je jediná stránka, v programu ji vytváří funkce handleRoot. Tato stránka je ale ve skutečnosti složena ze dvou částí. Jednou je samotný vygenerovaný HTML kód. Druhou je malá ikona, která se zobrazuje na záložce v prohlížeči. Ikona je malý PNG soubor favicon.png, na který je odkaz ve zdrojovém kódu HTML stránky. Prohlížeč si tento obrázek vyžádá a protože při něm nemusíme dělat žádné úpravy, můžeme ho staticky poskytnout přímo ze SPIFFS.

Funkce handleRoot nejprve ověří, zda máme v SPIFFS uložený soubor index.html. Pak si obsah souboru uloží do proměnné body. Následuje měření teploty, které může mít dva výsledky.

Pokud jsme špatně zapojili senzor teploty, program ho nedokáže najít a tehdy vygeneruje chybové hlášení.
Pokud senzor teploty existuje, vygeneruje se textový řetězec s teplotou.

Výsledek se nahradí v šabloně HTML stránky namísto řetězce {TEMPERATURE}. Aby výsledek dobře vypadal, je použito formátování pomocí Bootstrap CSS stylů alert-danger a alert-info.

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <FS.h>
#include "arduino_secret.h"
#include <OneWire.h>
#include <DallasTemperature.h>

#define ONE_WIRE_BUS D6

OneWire oneWire(ONE_WIRE_BUS);
DallasTemperature sensors(&oneWire);

ESP8266WebServer server(80);

void handleRoot() {
  Serial.println("GET /");
  File f = SPIFFS.open("/index.html", "r");
  if (!f) {
    Serial.println("File '/index.html' open failed.");
    server.send(500, "text/plain", "500: File '/index.html' open failed.");
  }
  else {
    String body = f.readString();
    if (sensors.getDS18Count() == 0) {
      body.replace("{TEMPERATURE}", "<div class=\"alert alert-danger\">ERROR</div>");
    }
    else {
      sensors.requestTemperatures();
      double temp = sensors.getTempCByIndex(0);
      Serial.println(temp);
      String tempt = "<div class=\"alert alert-info\">" + String(temp) + " °C</div>";
      body.replace("{TEMPERATURE}", tempt);
    }
    server.send(200, "text/html", body);
    f.close();

  }
}

void setup(void) {
  Serial.begin(115200);
  WiFi.begin(ssid, password);
  Serial.println("");

  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());

  sensors.begin();
  SPIFFS.begin();

  server.serveStatic("/favicon.png", SPIFFS, "/favicon.png");
  server.on("/", handleRoot);

  server.onNotFound([]() {
    server.send(404, "text/plain", "404: Not Found");
  });

  server.begin();
  Serial.println("HTTP server started");
}

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