ESP8266 - Zapisování textových řetězců s HTML stránkou

Zápisník experimentátora

Hierarchy: ESP8266

Při používání ESP8266 jako webserver se v příkladech často setkáte se zápisem řetězců, které jsou nesmírně pracné. Jakákoliv drobná změna v HTML kódu stránky je strašně složitá. C++11 nám umožňuje zapisovat textové řetězce pohodlněji. Jak na to, si vysvětlíme v tomto článku.

HTML

Takto vypadá jednoduchý HTML kód stránky, kterou chceme zobrazovat v prohlížeči pomocí ESP8266.

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>Hello ESP8266</title>
<style>
p { text-indent: 30px; margin: 0px; }
</style>
</head>
<body>
<h1>HELLO</h1>
<p>Hello from ESP8266.</p>
</body>
</html>

Pracný zápis textového řetězce

Obvykle se v příkladech setkáte s takovým zápisem. Do proměnné htmlPage je vložen řetězec, který má každý řádek uzavřený v dvojitých uvozovkách. Kromě toho musíte ještě zvlášť upravit každý výskyt znaku " a upravit ho na \", aby kompilátor nevypsal chybu. Je to pracné a nepřehledné. Jakákoliv změna vyžaduje obrovské úsilí, abyste nespletli při přepisování.

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

ESP8266WebServer server(80);

const char htmlPage[] PROGMEM = "<html>"
"<head>"
"<meta http-equiv=\"content-type\" content=\"text/html;charset=UTF-8\">"
"<title>Hello ESP8266</title>"
"<style>"
"p { text-indent: 30px; margin: 0px; }"
"</style>"
"</head>"
"<body>"
"    <h1>HELLO</h1>"
"    <p>Hello from ESP8266.</p>"
"</body>"
"</html>";

void handleRoot() {
  server.send(200, "text/html", htmlPage);
}

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());

  server.on("/", handleRoot);

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

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

Pohodlný zápis textového řetězce

C ++ 11 nám poskytuje pohodlnější způsob na zapisování textových řetězců, které obsahují HTML, XML nebo JSON. Podrobnosti najdete na stránce Wikipedia. Textový řetězec můžete zapsat ve tvaru R"delimiter(text)delimiter". V takové podobě je obsah proměnné dobře čitelný a případné změny uděláte snadno. Nebo je napíšete přímo do textu, nebo si originální text zkopírujete a vložíte do řetězce.

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

ESP8266WebServer server(80);

const char htmlPage[] PROGMEM = R"=====(
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>Hello ESP8266</title>
<style>
p { text-indent: 30px; margin: 0px; }
</style>
</head>
<body>
    <h1>HELLO</h1>
    <p>Hello from ESP8266.</p>
</body>
</html>
)=====";

void handleRoot() {
  server.send(200, "text/html", htmlPage);
}

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());

  server.on("/", handleRoot);

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

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

Zdrojový kód

Zdrojový kód se nachází na serveru GitHub.


01.08.2018

Menu