ESP8266 - Zapisovanie textových reťazcov s HTML stránkou

Zápisník experimentátora

Hierarchy: ESP8266

Pri používaní ESP8266 ako webserver sa v príkladoch často stretnete so zápisom reťazcov, ktoré sú nesmierne prácne. Akákoľvek drobná zmena v HTML kóde stránky je strašne zložitá. C++11 nám umožňuje zapisovať textové reťazce pohodlnejšie. Ako na to, si vysvetlíme v tomto článku.

HTML

Takto vyzerá jednoduchý HTML kód stránky, ktorú chceme zobrazovať v prehliadači pomocou 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 reťazca

Obvykle sa v príkladoch stretnete s takýmto zápisom. Do premennej htmlPage je vložený reťazec, ktorý má každý riadok uzatvorený v dvojitých úvodzovkách. Okrem toho musíte ešte osobitne upraviť každý výskyt znaku " a upraviť ho na \", aby kompilátor nevypísal chybu. Je to pracné a neprehľadné. Akákoľvek zmena si vyžaduje obrovské úsilie, aby ste sa nepomýlili pri prepisovaní.

#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 reťazca

C++11 nám poskytuje pohodlnejší spôsob na zapisovanie textových reťazcov, ktoré obsahujú HTML, XML alebo JSON. Podrobnosti nájdete na stránke Wikipedia. Textový reťazec môžete zapísať v tvare R"delimiter(text)delimiter". V takejto podobe je obsah premennej dobre čitateľný a prípadné zmeny urobíte ľahko. Alebo ich napíšete priamo do textu, alebo si originálny text skopírujete a vložíte do reťazca.

#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 sa nachádza na serveri GitHub.


01.08.2018

Menu