ESP8266 - HTTP server a responzivní dizajn

Zápisník experimentátora

Hierarchy: ESP8266

V předchozím článku jsme si vytvořili HTTP server s jednou stránkou. Stránky se formátují pomocí HTML značek. Pomocí těchto značek si navrhnete základní strukturu stránky, která bude vypadat amatérský. Amatérský působí i stránky, které jsou obvykle navrhované v podobných tutoriálu. Pokud chcete, aby HTML stránka, kterou poskytuje vaše ESP8266, pěkně vypadala, musíte ji graficky upravit. Ale dnešní doba přinesla problém v množství zařízení, které mohou HTML stránku zobrazovat. Stránka se může zobrazit na počítači, ale také na mobilu, přičemž každé zařízení má jiné rozlišení obrazovky. Abyste dokázali zobrazit svou stránku na každém zařízení v čitelné podobě, musíte stránky graficky formátovat tak, aby to bylo možné.

Na formátování se obvykle používají kaskádové styly, ale ani použití kaskádových stylů vám nezaručí, že bude stránka na každém zařízení zobrazena dobře. Třeba používat takové kaskádové styly, které jsou na různé rozlišení na jednotlivých zařízeních navrženy. To znamená, že si nebudete kaskádové styly navrhovat sami, ale použijete připravené sady kaskádových stylů, které tento problém vyřešili za vás.

Jednou z možností je například Bootstrap. Bootstrap si můžete stáhnout ze stránky https://getbootstrap.com/. Ale vhodnější je HTML stránku nakódovat tak, aby si kaskádové styly stáhla z CDN serveru. Ušetříte tak přenosovou kapacitu na vašem ESP8266 a protože z CDN si kaskádové styly stahuje mnoho stránek, je vysoce pravděpodobné, že už tyto styly budete mít stažené v cache ve vašem prohlížeči a stránka se načte rychleji.

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}

Bootstrap příklad

Vytvořil jsem vzorovou stránku, na níž jsem použil výběr z kaskádových stylů. Použil jsem verzi 3.4.1.

<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</title>
</head>

<body>
    <div class="container">
        <h1>ESP8266 HTTP Server</h1>
        <p>Hello from ESP8266 HTTP Server. Selection of <b>Bootstrap</b> CSS styles.</p>
        <h2>H2</h2>
        <h3>H3</h3>
        <h4>H4</h4>
        <h1>Buttons</h1>
        <p>
            <button type="button" class="btn btn-default">Default</button>
            <button type="button" class="btn btn-primary">Primary</button>
            <button type="button" class="btn btn-success">Success</button>
            <button type="button" class="btn btn-info">Info</button>
            <button type="button" class="btn btn-warning">Warning</button>
            <button type="button" class="btn btn-danger">Danger</button>
            <button type="button" class="btn btn-link">Link</button>
        </p>

        <h1>Alerts</h1>
        <div class="alert alert-success" role="alert">
            <strong>Well done!</strong> You successfully read this important alert message.
        </div>
        <div class="alert alert-info" role="alert">
            <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
        </div>
        <div class="alert alert-warning" role="alert">
            <strong>Warning!</strong> Best check yo self, you're not looking too good.
        </div>
        <div class="alert alert-danger" role="alert">
            <strong>Oh snap!</strong> Change a few things up and try submitting again.
        </div>

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

</html>

ESP8266

A ještě použití této stránky ve zdrojovém kódu pro ESP8266.

#include <ESP8266WiFi.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">
    <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</title>
</head>

<body>
    <div class="container">
        <h1>ESP8266 HTTP Server</h1>
        <p>Hello from ESP8266 HTTP Server. Selection of <b>Bootstrap</b> CSS styles.</p>
        <h2>H2</h2>
        <h3>H3</h3>
        <h4>H4</h4>
        <h1>Buttons</h1>
        <p>
            <button type="button" class="btn btn-default">Default</button>
            <button type="button" class="btn btn-primary">Primary</button>
            <button type="button" class="btn btn-success">Success</button>
            <button type="button" class="btn btn-info">Info</button>
            <button type="button" class="btn btn-warning">Warning</button>
            <button type="button" class="btn btn-danger">Danger</button>
            <button type="button" class="btn btn-link">Link</button>
        </p>

        <h1>Alerts</h1>
        <div class="alert alert-success" role="alert">
            <strong>Well done!</strong> You successfully read this important alert message.
        </div>
        <div class="alert alert-info" role="alert">
            <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
        </div>
        <div class="alert alert-warning" role="alert">
            <strong>Warning!</strong> Best check yo self, you're not looking too good.
        </div>
        <div class="alert alert-danger" role="alert">
            <strong>Oh snap!</strong> Change a few things up and try submitting again.
        </div>

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

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

void handleRoot() {
  Serial.println("GET /");
  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.


21.05.2019


Menu