前兩天看完AHT10 + APmode 那篇後,是不是對這篇抱有更大的期待與興趣了,因為STA可以使Esp32s有上網功能可以做更多的應用,這邊也就不多贅述,馬上進入主題。
圖片取自:使用者繪製
Esp32s GND -> St01(C) -
Esp32s Vcc(5V) -> St01(C) +
Esp32s 22 -> St01(C) SCL
Esp32s 21 -> St01(C) SDA
※切記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">°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);
}
}
}
連上後會顯示電信商提供給Esp32s的IP位置,在這同時如AHT10有讀取,就會在監控視窗上衣同顯示。
圖片取自:開發者拍攝
如有看見這網頁代表成功拉,這之後可以嘗試觸碰AHT10,看能否會更新網頁上的數值。
圖片取自:開發者拍攝
好了,這篇和之前的作品的STA都是跟AP顯示相同畫面,但是之後的實作章節會真正去運用STA,那就請各位敬請期待,那就明天講解程式碼見囉~