style를 이용하여, 화면을 디자인 해봅니다.
(온도센서_AM2320_ESP8266_B에서 계속합니다.)
CSS를 ~ 에 CSS를 작성합니다.
body { background-color:white; } h2 { font-size: 40px; text-align: center; } p { font-size: 40px; color:red; text-align: center; line-height: 50px; } |
<body>~ </body> code
<body> <h2>Thermometer</h2> <p> <span id="temperature">%TEMPERATURE%</span> <span>[Celcius]</span> </p> </body> |
전체 소스
| #include <Arduino.h> #include <ESP8266WiFi.h> #include <Hash.h> #include <ESPAsyncTCP.h> #include <ESPAsyncWebServer.h> #include <Adafruit_Sensor.h> #include <Adafruit_AM2320.h> Adafruit_AM2320 am2320 = Adafruit_AM2320(); const char* ssid = "IOT999"; const char* password = "kbs48752"; float t = 0.0; float h = 0.0; AsyncWebServer server(80); unsigned long previousMillis = 0; const long interval = 10000; const char index_html[] PROGMEM = R"rawliteral( <!DOCTYPE HTML> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { background-color:white; } h2 { font-size: 40px; text-align: center; } p { font-size: 40px; color:red; text-align: center; line-height: 50px; } </style> </head> <body> <h2>Thermometer</h2> <p> <span id="temperature">%TEMPERATURE%</span> <span>[Celcius]</span> </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 ) ; </script> </html>)rawliteral"; String processor(const String& var){ if(var == "TEMPERATURE"){ return String(t); } return String(); } void setup() { Serial.begin(115200); while (!Serial) { delay(10); } Serial.println("Adafruit AM2320 Basic Test"); am2320.begin(); WiFi.begin(ssid, password); Serial.println("Connecting to WiFi"); while (WiFi.status() != WL_CONNECTED) { delay(1000); Serial.println("."); } Serial.println(WiFi.localIP()); // 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()); }); // Start server server.begin(); } void loop() { unsigned long currentMillis = millis(); if (currentMillis - previousMillis >= interval) { // save the last time you updated the AM20320values previousMillis = currentMillis; // Read temperature as Celsius (the default) float newT = am2320.readTemperature(); if (isnan(newT)) { Serial.println("Failed to read from AM2320 sensor!"); } else { //t = newT; //orror=-2; //temperature_offset=-2 t = newT-2; Serial.println(t); } } delay(2000); } |
'IOT(Arduino+Inventor)' 카테고리의 다른 글
| 온도센서_AM2320_ECP8266_LED_E (0) | 2023.03.07 |
|---|---|
| 온도센서_AM2320_ESP8266_Inventor_D (0) | 2023.03.06 |
| 온도센서_AM2320_ESP8266_B (0) | 2023.03.06 |
| 온도센서 _AM2320_ESP8266 _A (0) | 2023.03.06 |
| WebServer Esp8266 (0) | 2022.11.06 |
