[Day21] Esp32用STA mode + AHT10

1.前言

前两天看完AHT10 + APmode 那篇後,是不是对这篇抱有更大的期待与兴趣了,因为STA可以使Esp32s有上网功能可以做更多的应用,这边也就不多赘述,马上进入主题。

2.接线图

图片取自:使用者绘制

Esp32s GND -> St01(C) -
Esp32s Vcc(5V) -> St01(C) +
Esp32s 22 -> St01(C) SCL
Esp32s 21 -> St01(C) SDA

3.程序码

※切记ssid及password内的数值需更改成自己的手机基地台或WiFi分享器的名称和密码。

#include <WiFi.h>
#include <ESPAsyncWebServer.h>

#include <AHT10.h>
#include <Wire.h>
uint8_t readStatus = 0;
AHT10 myAHT10(AHT10_ADDRESS_0X38);

const char* ssid     = "xxxx";
const char* password = "xxxxxxxx";

// current temperature & humidity, updated in loop()
float t = 0.0;
float h = 0.0;

// Create AsyncWebServer object on port 80
AsyncWebServer server(80);

// Generally, you should use "unsigned long" for variables that hold time
// The value will quickly become too large for an int to store
unsigned long previousMillis = 0;    // will store last time myAHT10 was updated

// Updates myAHT10 readings every 10 seconds
const long interval = 10000;  

const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    html {
     font-family: Arial;
     display: inline-block;
     margin: 0px auto;
     text-align: center;
    }
    h2 { font-size: 3.0rem; }
    p { font-size: 3.0rem; }
    .units { font-size: 1.2rem; }
    .myAHT10-labels{
      font-size: 1.5rem;
      vertical-align:middle;
      padding-bottom: 15px;
    }
  </style>
</head>
<body>
  <h2>ESP32 AHT10 Server</h2>
  <p>
    <span class="myAHT10-labels">Temperature</span> 
    <span id="temperature">%TEMPERATURE%</span>
    <sup class="units">&deg;C</sup>
  </p>
  <p>
    <span class="myAHT10-labels">Humidity</span>
    <span id="humidity">%HUMIDITY%</span>
    <sup class="units">%</sup>
  </p>
</body>
<script>
setInterval(function ( ) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("temperature").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/temperature", true);
  xhttp.send();
}, 10000 ) ;

setInterval(function ( ) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("humidity").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/humidity", true);
  xhttp.send();
}, 10000 ) ;
</script>
</html>)rawliteral";

// Replaces placeholder with myAHT10 values
String processor(const String& var){
  //Serial.println(var);
  if(var == "TEMPERATURE"){
    return String(t);
  }
  else if(var == "HUMIDITY"){
    return String(h);
  }
  return String();
}

void setup(){
  // Serial port for debugging purposes
  Serial.begin(115200);
  myAHT10.begin();

  Serial.print("Connecting to ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  // Print local IP address and start web server
  Serial.println("");
  Serial.println("WiFi connected.");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());
  server.begin();

   // Route for root / web page
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/html", index_html, processor);
  });
  server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/plain", String(t).c_str());
  });
  server.on("/humidity", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/plain", String(h).c_str());
  });

  // Start server
  server.begin();
}
 
void loop(){  
  unsigned long currentMillis = millis();
  if (currentMillis - previousMillis >= interval) {
    // save the last time you updated the myAHT10 values
    previousMillis = currentMillis;
    // Read temperature as Celsius (the default)
    float newT = myAHT10.readTemperature();
    // Read temperature as Fahrenheit (isFahrenheit = true)
    //float newT = myAHT10.readTemperature(true);
    // if temperature read failed, don't change t value
    if (isnan(newT)) {
      Serial.println("Failed to read from myAHT10 sensor!");
    }
    else {
      t = newT;
      Serial.println(t);
    }
    // Read Humidity
    float newH = myAHT10.readHumidity();
    // if humidity read failed, don't change h value 
    if (isnan(newH)) {
      Serial.println("Failed to read from myAHT10 sensor!");
    }
    else {
      h = newH;
      Serial.println(h);
    }
  }
}

4.操作画面

连上後会显示电信商提供给Esp32s的IP位置,在这同时如AHT10有读取,就会在监控视窗上衣同显示。

图片取自:开发者拍摄

如有看见这网页代表成功拉,这之後可以尝试触碰AHT10,看能否会更新网页上的数值。

图片取自:开发者拍摄

欢迎交流

好了,这篇和之前的作品的STA都是跟AP显示相同画面,但是之後的实作章节会真正去运用STA,那就请各位敬请期待,那就明天讲解程序码见罗~


<<:  学习Python纪录Day7 - for回圈、while回圈

>>:  Day 20 | Livewire 实作 Todo List(二): 完成/删除待办事项

ASP.NET MVC 从入门到放弃(Day14)- Html Css 结构介绍

接下来讲讲 html + CSS + javascript + bootstrap基本介绍细节部分 ...

# 将影片转换成图片 - Day 11

将影片转换成图片 - Day 11 今天要完成的工作是将搜集到的影片或是照片转换成 YOLOV3 可...

Day 02-是在 Hello?什麽都要 Hello 一下之 Hello Terraform

软功就是什麽都要 Hello 一下之 Hello terraform 这张就会开始动手做了,还没设定...

【D19】尝试料理#2:取得所有指数清单

前言 发现无法轻易取得股票资讯,但换个念头,这应该是市场上所有的资料吧,剩下就是要进行筛检。不过今天...

写在前面-不要停止思考和学习

第一天的文章偏向一个前言或是导读的概念。 今年再次挑战iThone的铁人赛,带着比前两年更大的压力,...