Peter Lörne asked 9 months ago
How to change the color of a value in a placeholder example in ESP32 DHT11/DHT22 Web Server – Temperature and Humidity using Arduino IDE
where the temperature value becomes red below 15 degrees.
Regars
Peter Lörne
Sara Santos Staff answered 9 months ago
Hi.
You can use something like this
// Replaces placeholder with DHT values
String processor(const String& var){
//Serial.println(var);
if(var == "TEMPERATURE"){
float temperature = readDHTTemperature().toFloat();
if (temperature < 15) {
return "<span style='color: red;'>" + String(temperature) + "</span>";
} else {
return String(temperature);
}
}
else if(var == "HUMIDITY"){
return readDHTHumidity();
}
return String();
}
It checks the temperature value and if it is lower than 15, it adds the style for the red color. Otherwise, it simply returns the temperature.
if (temperature < 15) {
return "<span style='color: red;'>" + String(temperature) + "</span>";
} else {
return String(temperature);
}
I didn’t test it, but I think this will work.
Regards,
Sara
Peter Lörne answered 9 months ago
Sorry Sara.
I get this error when I compile the program
readDHTTemperature’ was not declared in this scope.
I suspected it was readDHTTemperature so I changed to dht.readTemperature but then get DHT::readTemperature(0)’, which is of non-class type ‘float.
First error line your code "float temperature = readDHTTemperature().toFloat();" The second line of the error after I changed it to "float temperature = dht.readTemperature().toFloat();"
Regards Peter
Sara Santos Staff answered 9 months ago
Is this the project that you’re following: https://randomnerdtutorials.com/esp32-dht11-dht22-temperature-humidity-web-server-arduino-ide/?
Peter Lörne answered 9 months ago
Yes, it is the right project. It is a perfect project for my need.
I can run the original code without any problems. I replace the original code with your from row
// Replaces placeholder with DHT values” to the line where “void setup “starts. If you want to see the full code, I’ll fix it tonight when I get home.
I am 74 years old and have this as a hobby so I am very happy for your projekts and all your support!!
/Peter
Sara Santos Staff answered 9 months ago
Yes.
It would be better to see your complete code.
Regards,
Sara
Peter Lörne answered 9 months ago
Hi Sara!
Her is the code.
I use the projekt for ESP8266 not for ESP32
ESP8266 DHT11/DHT22 Temperature and Humidity Web Server with Arduino IDE
/*********
Rui Santos
Complete project details at https://randomnerdtutorials.com/esp8266-dht11dht22-temperature-and-humidity-web-server-with-arduino-ide/
2024-03-03
New code from Sandra to display red number under 15 deg.
line 113 to 134
*/
// Import required libraries
#include <Arduino.h>
#include <ESP8266WiFi.h>
#include <Hash.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <Adafruit_Sensor.h>
#include <DHT.h>
// Replace with your network credentials
const char* ssid = “Peter-2G”;
const char* password = “Retep1515”;
//**** TP-Link router****
//const char* ssid = “TP-Link_AEC2”;
//const char* password = ” 21725075″;
#define DHTPIN 5 // Digital pin connected to the DHT sensor
// Uncomment the type of sensor in use:
//#define DHTTYPE DHT11 // DHT 11
#define DHTTYPE DHT22 // DHT 22 (AM2302)
//#define DHTTYPE DHT21 // DHT 21 (AM2301)
DHT dht(DHTPIN, DHTTYPE);
// 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 DHT was updated
// Updates DHT 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″>
<link rel=”stylesheet” href=”https://use.fontawesome.com/releases/v5.7.2/css/all.css” integrity=”sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr” crossorigin=”anonymous”>
<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; }
.dht-labels{
font-size: 1.5rem;
vertical-align:middle;
padding-bottom: 15px;
}
</style>
</head>
<body>
<h2>ESP8266 DHT Server</h2>
<p>
<i class=”fas fa-thermometer-half” style=”color:#059e8a;”></i>
<span class=”dht-labels”>Temperature</span>
<span id=”temperature”>%TEMPERATURE%</span>
<sup class=”units”>°C</sup>
</p>
<p>
<i class=”fas fa-tint” style=”color:#00add6;”></i>
<span class=”dht-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”;
// **************** This is new code***************
// Replaces placeholder with DHT values
String processor(const String& var){
//Serial.println(var);
if(var == “TEMPERATURE”){
float temperature = readDHTTemperature().toFloat();
if (temperature < 15) {
return “<span style=’color: red;’>” + String(temperature) + “</span>”;
} else {
return String(temperature);
}
}
else if(var == “HUMIDITY”){
return readDHTHumidity();
}
return String();
}
if (temperature < 15) {
return “<span style=’color: red;’>” + String(temperature) + “</span>”;
} else {
return String(temperature);
}
//*************** End of the new code ***********
void setup(){
// Serial port for debugging purposes
Serial.begin(115200);
dht.begin();
// Connect to Wi-Fi
WiFi.begin(ssid, password);
Serial.println(“Connecting to WiFi”);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println(“.”);
}
// Print ESP8266 Local IP Address
Serial.println(WiFi.localIP());
// 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 DHT values
previousMillis = currentMillis;
// Read temperature as Celsius (the default)
float newT = dht.readTemperature();
// Read temperature as Fahrenheit (isFahrenheit = true)
//float newT = dht.readTemperature(true);
// if temperature read failed, don’t change t value
if (isnan(newT)) {
Serial.println(“Failed to read from DHT sensor!”);
}
else {
t = newT;
Serial.println(t);
}
// Read Humidity
float newH = dht.readHumidity();
// if humidity read failed, don’t change h value
if (isnan(newH)) {
Serial.println(“Failed to read from DHT sensor!”);
}
else {
h = newH;
Serial.println(h);
}
}
}
I hope this helps!
Regard
Peter
Sara Santos Staff answered 9 months ago
I thought you were using an ESP32.
For the ESP8266, use the processor function like this
String processor(const String& var){
//Serial.println(var);
if(var == "TEMPERATURE"){
if (t < 15) {
return "<span style='color: red;'>" + String(t) + "</span>";
} else {
return String(t);
}
}
else if(var == "HUMIDITY"){
return String(h);
}
return String();
}
Also, replace this line
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
with this(the fontawesome link to load the icons has changed)
<script src="https://kit.fontawesome.com/0294e3a09e.js" crossorigin="anonymous"></script>
Regards,
Sara