📊 Проект: веб-страница истории измерений из EEPROM на ESP8266

ESP8266 читает несколько последних значений температуры, сохранённых во внешней памяти AT24C256, и красиво показывает их списком на веб-странице — история видна, даже если плату только что перезагрузили.

Как это работает

Проект — это, по сути, минимальный веб-сервер на ESP8266: `WiFiServer` слушает порт 80, и при каждом подключении клиента (браузера) код читает из внешней EEPROM запись за записью и формирует из них HTML-страницу прямо в памяти, отправляя её построчно через `client.println()`. Это та же идея, что используется в полноценных веб-фреймворках, только написанная вручную — без библиотек маршрутизации, с одним единственным "маршрутом" на весь сервер.

Формат чтения данных (2 байта на запись, адрес = `index * 2`, температура хранится умноженной на 10) специально совпадает с проектом «Логгер температуры в EEPROM»: эта страница не создаёт данные сама, а работает исключительно как просмотрщик результатов того логгера — обе страницы читают/пишут один и тот же участок внешней памяти через общий протокол I2C.

Пошаговая сборка

Так как реализации данного модуля бывают разные, если у вас на плате нет тех контактов, что указаны ниже — сориентируйтесь по названиям контактов на своей плате.

AT24C256 (I2C): SDA → D2 (GPIO4), SCL → D1 (GPIO5), VCC → 3.3V (ESP8266 не толерантен к 5V на GPIO), GND → GND.
Подставьте реальные `ssid` и `password` вашей Wi-Fi сети вместо заглушек в коде.
После загрузки откройте Serial-монитор, чтобы увидеть выданный ESP8266 IP-адрес, и откройте его в браузере на той же Wi-Fi сети.
Убедитесь, что в ту же EEPROM уже что-то записал логгер температуры (см. соответствующий проект) — иначе страница покажет случайные стартовые значения из памяти.

Скетч

// ВНИМАНИЕ: рекомендую отладить код через монитор порта, я языковая
// модель, а не специализированный кодер, могу что-то упустить.

#include <ESP8266WiFi.h>
#include <Wire.h>

const char* ssid = "your_wifi_name";
const char* password = "your_wifi_password";
WiFiServer server(80);
const int EEPROM_ADDR = 0x50;
const int entryCount = 10;

int readEntry(int index) {
  int addr = index * 2;
  Wire.beginTransmission(EEPROM_ADDR);
  Wire.write(addr >> 8);
  Wire.write(addr & 0xFF);
  Wire.endTransmission();
  Wire.requestFrom(EEPROM_ADDR, 2);
  int value = Wire.read() << 8 | Wire.read();
  return value;
}

void setup() {
  Serial.begin(9600);
  Wire.begin(4, 5); // SDA, SCL
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
  }
  Serial.print("IP-адрес сервера: ");
  Serial.println(WiFi.localIP());
  server.begin();
}

void loop() {
  WiFiClient client = server.available();
  if (!client) return;
  client.readStringUntil('\r');
  client.flush();

  client.println("HTTP/1.1 200 OK");
  client.println("Content-Type: text/html; charset=utf-8");
  client.println();
  client.println("<html><body><h1>История измерений</h1><ul>");
  for (int i = 0; i < entryCount; i++) {
    client.print("<li>Запись ");
    client.print(i);
    client.print(": ");
    client.print(readEntry(i) / 10.0);
    client.println(" &deg;C</li>");
  }
  client.println("</ul></body></html>");
}

Формат данных в EEPROM (2 байта на запись, температура×10) совпадает с проектом «Логгер температуры в EEPROM» — эта страница отлично подходит как просмотрщик для его результатов.

Частые проблемы

Страница показывает странные "скачущие" числа — скорее всего в EEPROM ещё не записывал данные логгер температуры, и там лежат случайные стартовые байты.
Страница не открывается в браузере — проверьте через Serial-монитор, что ESP8266 успешно подключился к Wi-Fi и получил IP-адрес, и что устройство-клиент в той же локальной сети.
AT24C256 не отвечает — проверьте, что VCC памяти подключён к 3.3V, а не к 5V, которое может быть доступно на некоторых пинах платы ESP8266.
Страница открывается, но зависает при загрузке — убедитесь, что `entryCount` не превышает реально записанное количество записей, иначе чтение всё равно безопасно (вернёт случайные байты), но для корректности лучше ограничить его значением из логгера.

Как улучшить проект

Оформить страницу красивой простой таблицей вместо списка, с минимальными инлайн-стилями.
Добавить автообновление страницы через `<meta http-equiv="refresh">`, чтобы не обновлять вручную.
Показывать график температуры (простыми текстовыми "столбиками" из символов) вместо просто списка чисел.