html график для веб-сервера от esp8266 без подключения к Wi-Fi - PullRequest
Новая
       18

html график для веб-сервера от esp8266 без подключения к Wi-Fi

0 голосов
/ 28 января 2020

Я настроил esp8266 в режиме точки доступа, чтобы я мог получить с него доступ к веб-серверу. Я хочу видеть график на этой странице. Можно ли использовать диаграмму. js или аналогичную в коде html без подключения к Wi-Fi?

Это моя строка html, которую я отправляю на сервер: 

const PROGMEM char* s = R"foo(
<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8" />
    <title>Chart.js demo</title>
    <script src="./node_modules/chart.js/dist/Chart.min.js"></script>
</head>

<body>
    <h1>Chart.js Sample</h1>
    <div class="chart-container" style="width: 600px; height: 400px">
        <canvas id="countries"></canvas>
    </div>

    <script>
        var pieData = {
            datasets: [{
                data: [20, 40, 10, 30],
                backgroundColor: ["#878BB6", "#4ACAB4", "#FF8153", "#FFEA88"]
            }]
        };

        // Get the context of the canvas element we want to select
        var countries = document.getElementById("countries").getContext("2d");
        new Chart(countries, {
            type: 'pie',
            data: pieData
        });
    </script>
</body>

</html>
)foo";

1 Ответ

0 голосов
/ 28 января 2020

Использование файловой системы SPIFFS

Вы можете использовать SPI fla sh на ESP8266 в качестве файловой системы для хранения файлов HTML и Javascript. Для этого используется компонент SPIFFS (https://arduino-esp8266.readthedocs.io/en/latest/filesystem.html#spiffs -and-littlefs ).

Файл Chart. js относительно большой - прибл. 180 кБ даже при минимизации - поэтому это возможно только при использовании платы ESP8266 с объемом памяти не менее 4 МБ sh.

Вы не указываете, какую платформу ESP8266 вы используете, но мой вариант NodeMCU имеет 4 МБ Fla sh. Я выделяю часть этого - обычно 1 МБ - для файловой системы.

Подготовка к использованию файловой системы SPIFFS с Arduino состоит из трех этапов:

  • Сначала загрузите загрузку SPIFFS инструмент из https://github.com/esp8266/arduino-esp8266fs-plugin (go на страницу «Релизы»)
    • следуйте инструкциям, чтобы установить его вместе с установкой Arduino
  • Создайте подпапку data в папке Sketch с файлами HTML и CSS
    • / data -
      • / index. html
      • /Chart.min.js
  • Загрузить содержимое файловой системы, используя IDE Arduino
    • Tools -> ESP8266 Sketch Data Upload

Как только вы это сделаете, вы сможете более или менее использовать файловую систему следующим образом ... 

  #include "FS.h"

  // snip

  if (!SPIFFS.begin()) {
    Serial.println("Failed to mount filesystem!\n");
  }

  File file = SPIFFS.open("/index.html", "r");

  file.close();

Особенно актуально для вашего приложения является включением перегруженного метода streamFile() в класс ESP8266WebServer, который принимает объект File в качестве аргумента. Предполагая, что в вашем коде есть 

static ESP8266WebServer server(80);

, вы можете использовать этот метод следующим образом ... 

static void handleRoot() {
  File file = SPIFFS.open("/index.html", "r");
  if (!file) {
    server.send(500, "text/plain", "Problem with filesystem!\n");
    return;
  }
  server.streamFile(file, "text/html");
  file.close();
}

Как вы, вероятно, уже знаете, функция handleRoot() предназначена для обратный вызов сервера - который должен быть установлен с использованием server.on("/", handleRoot);.

Сопоставить URI в HTTP-запросе с путями файловой системы

Теперь для наиболее полезной части ...

Вы можете используйте метод server.onNotFound(); для отправки произвольных файлов в веб-клиент. Прежде всего создайте соответствующий обратный вызов: 

static void handleNotFound() {
  String path = server.uri(); // Important!
  if (!SPIFFS.exists(path)) {
    server.send(404, "text/plain", "Path " + path + " not found. Please double-check the URL");
    return;
  }
  String contentType = "text/plain";
  if (path.endsWith(".css")) {
    contentType = "text/css";
  }
  else if (path.endsWith(".html")) {
    contentType = "text/html";
  }
  else if (path.endsWith(".js")) {
    contentType = "application/javascript";
  }
  File file = SPIFFS.open(path, "r");
  server.streamFile(file, contentType);
  file.close();
}

Затем установите его в свою функцию setup(): 

server.onNotFound(handleNotFound);

HTML и CSS файлы

Если затем вы обновите index.html - изменив 

<script src="./node_modules/chart.js/dist/Chart.min.js"></script>

на просто 

<script src="Chart.min.js"></script>

и загрузите содержимое папки data, используя метод, описанный выше, ваше приложение должно работать как и ожидалось.

Снимок экрана веб-страницы, обслуживаемой моим собственным ESP8266, показан ниже.

Chart JS demo running on ESP8266 web server

...