ESP8266 - HTTP server s více stránkami

Zápisník experimentátora

Hierarchy: ESP8266

V tomto článku navážeme na články, ve kterých jsme se naučili vytvořit jednoduchou stránku a dát jí hezký responzívní design. Nyní se pokusíme vytvořit HTTP server, který obsahuje více stránek. Mezi jednotlivými stránkami se bude dát přepínat pomocí hypertextu. Stránky budeme stále ukládat ve zdrojovém kódu programu a kvůli větší přehlednosti si to vše rozdělíme na více souborů.

Na obrázku je výsledek. Responzívní design, který používá hypertexty ve tvaru tlačítek. Při navrhování stránek je v dnešní době třeba počítat i s uživateli, kteří se na stránku dívají na mobilním telefonu. Aby bylo na první pohled jasné, na které stránce se uživatel nachází, je použit kaskádový styl disabled. Ten zajišťuje, že je tlačítko v odstínu šedé a nereaguje na pohyb myšky.

Použité součástky

Toto je jednoduchý projekt, proto nám bude stačit některá deska s mikrokontrolérem ESP8266, kterou lze přímo připojit do USB. Abyste se vyhnuli případnému zkratu, můžete desku zastrčit do breadboardu.

  • ESP8266 {linkESP8266}
  • Breadboard {linkBreadBoard}

Příklad

Toto je zdrojový kód pro ESP8266. Je velmi podobný jako předchozí příklady. Zdrojový kód jsem rozdělil do čtyř souborů, proto se nám nemíchá logika programu s grafikou. Každá stránka ná vlastní soubor se zdrojovým kódem. Každou stránku zpracuje samostatná funkce. Všechny funkce jsou naprosto stejné, liší se pouze proměnnou, která obsahuje zdrojový kód konkrétní stránky.

Stránky se nacházejí na URL adresách:

  • /
  • page2
  • page3

Pokud si tento program nahrajete do ESP8266 a zobrazíte si první stránku, na další stránky se dostanete pomocí hypertextu.

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

#include "page1.h"
#include "page2.h"
#include "page3.h"

ESP8266WebServer server(80);

void handleRoot() {
  Serial.println("GET /");
  server.send(200, "text/html", htmlPage1);
}

void handlePage2() {
  Serial.println("GET /page2");
  server.send(200, "text/html", htmlPage2);
}

void handlePage3() {
  Serial.println("GET /page3");
  server.send(200, "text/html", htmlPage3);
}

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.on("/page2", handlePage2);
  server.on("/page3", handlePage3);

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

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

page1.h

const char htmlPage1[] PROGMEM = R"=====(
<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>
    <title>Hello from HTTP Server ESP8266 - Page1</title>
</head>

<body>
    <div class="container">
        <h1>ESP8266 HTTP Server</h1>
        <p>Hello from ESP8266 HTTP Server. This is Page1.</p>
        <p>
            <a class="btn btn-primary disabled" href="/" role="button">Page1</a>
            <a class="btn btn-primary" href="/page2" role="button">Page2</a>
            <a class="btn btn-primary" href="/page3" role="button">Page3</a>
        </p>

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

</html>
)=====";

page2.h

const char htmlPage2[] PROGMEM = R"=====(
<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>
    <title>Hello from HTTP Server ESP8266 - Page2</title>
</head>

<body>
    <div class="container">
        <h1>ESP8266 HTTP Server</h1>
        <p>Hello from ESP8266 HTTP Server. This is Page2.</p>
        <p>
            <a class="btn btn-primary" href="/" role="button">Page1</a>
            <a class="btn btn-primary disabled" href="/page2" role="button">Page2</a>
            <a class="btn btn-primary" href="/page3" role="button">Page3</a>
        </p>

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

</html>
)=====";

page3.h

const char htmlPage3[] PROGMEM = R"=====(
<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>
    <title>Hello from HTTP Server ESP8266 - Page3</title>
</head>

<body>
    <div class="container">
        <h1>ESP8266 HTTP Server</h1>
        <p>Hello from ESP8266 HTTP Server. This is Page3.</p>
        <p>
            <a class="btn btn-primary" href="/" role="button">Page1</a>
            <a class="btn btn-primary" href="/page2" role="button">Page2</a>
            <a class="btn btn-primary disabled" href="/page3" role="button">Page3</a>
        </p>

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

</html>
)=====";

Zdrojový kód

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


21.05.2019


Menu