ESP8266/ESP32气象仪网页版 - MKT-porter

// 加载必要的程序库
#include <ESP8266WiFi.h>
#include <Wire.h>
#include <Adafruit_BME280.h>
#include <Adafruit_Sensor.h>

#define SEALEVELPRESSURE_HPA (1013.25)

Adafruit_BME280 bme; // I2C

// 填入你的WiFi ssid 和密码
const char* ssid     = "你的 WiFi SSID";
const char* password = "你的 WiFi 密码";

// 这里默认端口设置为：80
WiFiServer server(80);

// 用于存储HTTP请求的变量
String header;

void setup() {
  Serial.begin(115200);
  bool status;

  // 默认设置
  // (您还可以传入Wire库对象，例如＆Wire2)
  //status = bme.begin();  
  if (!bme.begin(0x76)) {
    Serial.println("Could not find a valid BME280 sensor, check wiring!");
    while (1);
  }

  // 使用SSID和密码连接到Wi-Fi网络
  Serial.print("Connecting to ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  // 输出显示本地IP地址和启动web服务器
  Serial.println("");
  Serial.println("WiFi connected.");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());
  server.begin();
}

void loop(){
  WiFiClient client = server.available();   // 监听即将到来的客户端

  if (client) {                             //如果有一个客户端连接
    Serial.println("New Client.");          // 将从串口输出一个信息
    String currentLine = "";                // 制作一个字符串以容纳来自客户端的传入数据
    while (client.connected()) {            // 当客户端连接时循环
      if (client.available()) {             // 如果有要从客户端读取的字节，
        char c = client.read();             // 读一个字节，然后
        Serial.write(c);                    // 将其输出到串口
        header += c;
        if (c == '\n') {                    // 如果字节是换行符
          // 如果当前行为空白，则将连续获得两个换行符。
          // 客户端HTTP请求的结尾，因此发送响应：
          if (currentLine.length() == 0) {
            // HTTP标头始终以响应代码开头（例如HTTP / 1.1 200 OK）
            // 和内容类型，以便客户端知道即将发生的事情，然后空一行：
            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println("Connection: close");
            client.println();

            // 显示HTML WEB网页
            client.println("<!DOCTYPE html><html>");
            client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
            client.println("<link rel=\"icon\" href=\"data:,\">");
            // 使用CSS风格化表格
            client.println("<style>body { text-align: center; font-family: \"Trebuchet MS\", Arial;}");
            client.println("table { border-collapse: collapse; width:35%; margin-left:auto; margin-right:auto; }");
            client.println("th { padding: 12px; background-color: #0043af; color: white; }");
            client.println("tr { border: 1px solid #ddd; padding: 12px; }");
            client.println("tr:hover { background-color: #bcbcbc; }");
            client.println("td { border: none; padding: 12px; }");
            client.println(".sensor { color:white; font-weight: bold; background-color: #bcbcbc; padding: 1px; }");

            // Web 页面标题
            client.println("</style></head><body><h1>ESP8266 + BME280</h1>");
            client.println("<table><tr><th>MEASUREMENT</th><th>VALUE</th></tr>");
            client.println("<tr><td>Temp. Celsius</td><td><span class=\"sensor\">");
            client.println(bme.readTemperature());
            client.println(" *C</span></td></tr>");  
            client.println("<tr><td>Temp. Fahrenheit</td><td><span class=\"sensor\">");
            client.println(1.8 * bme.readTemperature() + 32);
            client.println(" *F</span></td></tr>");       
            client.println("<tr><td>Pressure</td><td><span class=\"sensor\">");
            client.println(bme.readPressure() / 100.0F);
            client.println(" hPa</span></td></tr>");
            client.println("<tr><td>Approx. Altitude</td><td><span class=\"sensor\">");
            client.println(bme.readAltitude(SEALEVELPRESSURE_HPA));
            client.println(" m</span></td></tr>"); 
            client.println("<tr><td>Humidity</td><td><span class=\"sensor\">");
            client.println(bme.readHumidity());
            client.println(" %</span></td></tr>"); 
            client.println("</body></html>");

            // HTTP响应以另一个空行结尾
            client.println();
            // 跳出while循环
            break;
          } else { // 如果你有换行符，请清除currentLine
            currentLine = "";
          }
        } else if (c != '\r') {  // 如果除了回车符还有其他东西
          currentLine += c;      // 将其添加到currentLine的末尾
        }
      }
    }
    // 清除标题变量
    header = "";
    // 结束链接
    client.stop();
    Serial.println("Client disconnected.");
    Serial.println("");
  }
}
posted on 2023-03-31 17:56 MKT-porter 阅读(75) 评论(0) 收藏举报
刷新页面返回顶部