Напиши web интерфейс с графиком изменения температуры, для ESP8266 и датчиком

11 мая, 2023
0 комментариев

Пользователь задал следующий вопрос:

Напиши web интерфейс с графиком изменения температуры, для ESP8266 и датчиком температуры BME280

Этот ответ написан нейросетью.

Внимание! Ответы искусственного интеллекта могут быть неточными. Не полагайтесь на них в медицине, юриспруденции, финансах и вопросах безопасности. При принятии важных решений всегда консультируйтесь с профильными специалистами.
Администрация сайта не несет ответственности за любой автоматически созданный контент. Если вы обнаружили ошибки, пожалуйста, сообщите об этом через кнопку "репорт" внизу ответа и мы примем соответствующие меры. Спасибо за вашу помощь в улучшении качества нашего сервиса.

текстовая нейросеть отвечает:

Для начала, необходимо установить и настроить необходимые инструменты и библиотеки. Для данного проекта используем следующее:
- Arduino IDE для написания кода и загрузки его на ESP8266,
- библиотеки Adafruit_BME280.h и ESP8266WiFi.h для работы с датчиком температуры и подключения к Wi-Fi сети.

Для работы с графиком используем библиотеку Chart.js, которая позволяет создавать профессиональные диаграммы и графики на страницах HTML.

1) Первый шаг - настройка подключения к Wi-Fi сети:

#include <ESP8266WiFi.h>
const char* ssid = "ssid"; // название Wi-Fi сети
const char* password = "password"; // пароль для доступа к Wi-Fi сети
WiFiServer server(80); // указываем номер порта
void setup() {
  pinMode(LED_BUILTIN, OUTPUT); // настройка светодиода
  Serial.begin(9600); // настройка Serial порта
  delay(10);
  digitalWrite(LED_BUILTIN, LOW);
  Serial.println();
  Serial.print("Connecting to ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi connected");
  server.begin();
  Serial.println("Server started");
  Serial.println(WiFi.localIP());
}


2) Далее, инициализируем датчик температуры BME280:

#include <Adafruit_Sensor.h>
#include <Adafruit_BME280.h>
#define SEALEVELPRESSURE_HPA (1013.25)
Adafruit_BME280 bme;
void setup() {
  digitalWrite(LED_BUILTIN, LOW);
  Serial.begin(9600);
  if (!bme.begin(0x76)) {
    Serial.println("Could not find a valid BME280 sensor, check wiring!");
    while (1);
  }
}


3) Теперь необходимо написать функцию, которая будет опрашивать датчик и возвращать значение температуры в градусах Цельсия:

float getTemperature() {
  float temperature = bme.readTemperature();
  return temperature;
}


4) Создаем HTML страницу с интерфейсом, включая в нее график, который будет отображать изменение температуры во времени:

<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script>
var labels = [];
var data = [];
var chart;
function addData(label, value) {
  if (labels.length >= 10) {
    labels.shift();
    data.shift();
  }
  labels.push(label);
  data.push(value);
  chart.update();
}
function connect() {
  var ws = new WebSocket("ws://" + location.hostname + ":81/");
  ws.onmessage = function(evt) {
    var msg = JSON.parse(evt.data);
    addData(msg.t, msg.v);
  };
  ws.onopen = function(evt) {
    ws.send("get");
  };
}
function initChart() {
  var ctx = document.getElementById("chart").getContext('2d');
  chart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: labels,
      datasets: [{
        label: "Temperature",
        data: data,
        borderColor: "#3e95cd",
        fill: false
      }]
    },
    options: {
      responsive: true,
      title: {
        display: true,
        text: 'Temperature Graph'
      },
      scales: {
        xAxes: [{
          display: true
        }],
        yAxes: [{
          display: true,
          ticks: {
            beginAtZero:true,
            steps: 10,
            stepValue: 1,
            max: 40
          }
        }]
      }
    }
  });
}
document.addEventListener("DOMContentLoaded", function(event) {
  initChart();
  connect();
});
</script>
</head>
<body>
<canvas id="chart" width="400" height="200"></canvas>
</body>
</html>


5) Наконец, написываем функцию, которая отправляет данные на HTML страницу по запросу с помощью WebSocket:

#include <WebSocketsServer.h>
WebSocketsServer webSocket = WebSocketsServer(81);
void webSocketEvent(uint8_t num, WStype_t type, uint8_t * payload, size_t length) {
  switch(type) {
    case WStype_TEXT:
      if (strcmp((const char *) payload, "get") == 0) {
        char response[64];
        sprintf(response, "{"t":%d,"v":%.2f}", millis(), getTemperature());
        webSocket.sendTXT(num, response);
      }
      break;
  }
}
void setup() {
  digitalWrite(LED_BUILTIN, LOW);
  Serial.begin(9600);
  if (!bme.begin(0x76)) {
    Serial.println("Could not find a valid BME280 sensor, check wiring!");
    while (1);
  }
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  webSocket.begin();
  webSocket.onEvent(webSocketEvent);
}
void loop() {
  webSocket.loop();
  delay(100);
}


После загрузки данного кода на ESP8266 и подключения к Wi-Fi сети, можно открыть HTML страницу с интерфейсом, в котором будет отображаться график изменения температуры во времени, обновляясь в реальном времени. Кроме того, можно с помощью WebSocket отправлять запрос на получение текущего значения температуры со встроенного датчика BME280.

Напиши web интерфейс с графиком изменения температуры, для ESP8266 и датчиком

Задайте любой вопрос нейросети!

но вы должны быть авторизованы, чтобы ей пользоваться

Напиши web интерфейс с графиком изменения температуры, для ESP8266 и датчиком

Задайте любой вопрос нейросети!

но вы должны быть авторизованы, чтобы ей пользоваться

Обратная связь с администрацией проекта

Форма репорта неправомерного контента.

Хотите задать любой вопрос нейросети?