Hello!

Yes, you can do that and that logic should be added to the Javascript section.

You currently have the following:

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 ) ;

You can you change it to:

setInterval(function ( ) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      if(this.responseText>=70){
        document.getElementById("temperature").style.color = "red";
      }
      else if(this.responseText>60 && this.responseText<70){
        document.getElementById("temperature").style.color = "green";
      }
      else if(this.responseText<=60){
        document.getElementById("temperature").style.color = "blue";
      }
      document.getElementById("temperature").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/temperature", true);
  xhttp.send();
}, 10000 ) ;

I haven’t tested it, but it should work. Please let me know if it works for you.

Regards,
Sara

Thank you for the quick response…I’m testing it now.
I’m an engineer by trade, but new to the ESP32.  Your tutorials have been extremely helpful.
Keep those great tutorials coming…..
 
Dave
 

Good morning Sara,
That didn’t work….

I’m attaching my entire code so you can see what I’m doing…..

I’ll keep playing with what you sent ….it could be my HTML and CSS that is causing the problem.
Thanks I really appreciate the support…
Dave

#include <Arduino.h>
/*********
Rui Santos
Complete project details at https://RandomNerdTutorials.com
*********/
// Import required libraries
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include <AsyncTCP.h>
#include <OneWire.h>
#include <DallasTemperature.h>
// Data wire is connected to GPIO 4
#define ONE_WIRE_BUS 4
// Replace with your network credentials
const char* ssid = “*******”;
const char* password = “********”;
// Create AsyncWebServer object on port 80
AsyncWebServer server(80);
// Setup a oneWire instance to communicate with any OneWire devices
OneWire oneWire(ONE_WIRE_BUS);
// Pass our oneWire reference to Dallas Temperature sensor
DallasTemperature sensors(&oneWire);
// Variables to store temperature values
String temperatureF = “”;
String temperatureF1 = “”;
String temperatureF2 = “”;
String output2State = “off”;
// var T1;

// Assign output variables to GPIO pins
const int output5 = 5;
const int output16 = 16;
const int output17 = 17;
// Timer variables
unsigned long lastTime = 0;
unsigned long timerDelay = 1000;

String readDSTemperatureF() {
// Call sensors.requestTemperatures() to issue a global temperature and Requests to all devices on the bus
sensors.requestTemperatures();
float tempF = sensors.getTempFByIndex(0);
if(int(tempF) == -196){
Serial.println(“Failed to read from DS18B20 sensor”);
return “–“;
} else {
Serial.print(“Temperature 0 Fahrenheit: “);
Serial.println(tempF);
}
if (tempF > 80){ Serial.println(“T0 IS OVER 80”);
pinMode(output5, OUTPUT);
// Set outputs to LOW
digitalWrite(output5, HIGH);
}
if (tempF < 80){
pinMode(output5, OUTPUT);
// Set outputs to LOW
digitalWrite(output5, LOW);
}
// }
return String(tempF);
}
String readDSTemperatureF1() {
// Call sensors.requestTemperatures() to issue a global temperature and Requests to all devices on the bus
sensors.requestTemperatures();
float tempF1 = sensors.getTempFByIndex(1);
if(int(tempF1) == -196){
Serial.println(“Failed to read from DS18B20 sensor”);
return “–“;
} else {
Serial.print(“Temperature 1 Fahrenheit: “);
Serial.println(tempF1);
}
if (tempF1 > 80){ Serial.println(“T1 IS OVER 80”);
pinMode(output16, OUTPUT);
// Set outputs to LOW
digitalWrite(output16, HIGH);
}
if (tempF1 < 80){
pinMode(output16, OUTPUT);
// Set outputs to LOW
digitalWrite(output16, LOW);
}
return String(tempF1);
}
String readDSTemperatureF2() {
// Call sensors.requestTemperatures() to issue a global temperature and Requests to all devices on the bus
sensors.requestTemperatures();
float tempF2 = sensors.getTempFByIndex(2);
if(int(tempF2) == -196){
Serial.println(“Failed to read from DS18B20 sensor”);
return “–“;
} else {
Serial.print(“Temperature 2 Fahrenheit: “);
Serial.println(tempF2);
}
if (tempF2 > 80){ Serial.println(“T2 IS OVER 80″);
pinMode(output17, OUTPUT);
// Set outputs to LOW
digitalWrite(output17, HIGH);
}
if (tempF2 < 80){
pinMode(output17, OUTPUT);
// Set outputs to LOW
digitalWrite(output17, LOW);
}
return String(tempF2);
}
const char index_html[] PROGMEM = R”rawliteral(
<!DOCTYPE HTML>
<html>
<head>
<title>READING TEMPERATURES</title>
<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&#8221; integrity=”sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr” crossorigin=”anonymous”>
</head>
<style>
.dot {
height: 50px;
width: 50px;
border-radius: 25px;
background-color: BLUE;
vertical-align:middle;
display: inline-block;
text-align: center;
}
.dot2 {
height: 75px;
width: 75px;
background-color: BLUE;
vertical-align:middle;
display: inline-block;
font-size: 1rem;
text-align: center;
}
.button1 {
background-color: #f44336;
color: #f44336;
font-size: 3rem;
}
.button2 {
background-color: BLUE;
color: BLUE;
font-size: 3rem;
}
html {
font-family: Arial;
display: inline-block;
margin: 0px auto;
text-align: left;
padding-left: 50px;
}
h2 { font-size: 3.0rem; }
p { font-size: 3.0rem; }
.units { font-size: 1.2rem; }
.ds-labels{
font-size: 1.5rem;
vertical-align:middle;
color:#FF0000;
padding-bottom: 15px;
}
.ds-labels1{
font-size: 1.5rem;
vertical-align:middle;
color:#059e8a;
padding-bottom: 15px;
}
.ds-labels2{
font-size: 1.5rem;
vertical-align:middle;
color:white;
padding-bottom: 15px;
}
.ds-labels3{
font-size: 1.5rem;
vertical-align:middle;
color:#663399;
padding-bottom: 15px;
}
#temperaturef {
font-size: 2rem;
color: #059e8a;
padding: 10px;
text-align: center;
}
#temperaturef1 {
font-size: 2rem;
color: #FF0000;
text-align: center;
}
#temperaturef2 {
font-size: 2rem;
color: #663399;
text-align: center;
}
</style>
<body>
<h2>READING TEMPERATURES</h2>
<p>

<span class=”ds-labels1″>Turquoise Sensor</span>
<span id=”temperaturef”>%TEMPERATUREF% </span>
<span class=”units”>&deg;F</span>
<span class=”dot”></span>
</p>
<p>
<span class=”ds-labels”>Red Sensor</span>
<span id=”temperaturef1″>%TEMPERATUREF1%</span>
<span class=”units”>&deg;F</span>
<span class=”dot”></span>
</p>
<p>

<span class=”ds-labels3″>Purple Sensor</span>
<span id=”temperaturef2″>%TEMPERATUREF2%</span>
<span class=”units”>&deg;F</span>
<span class=”dot”></span>
</p>
</body>
<script>
setInterval(function ( ) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
if(this.responseText>=80){
document.getElementById(“temperaturef”).style.color = “red”;
}
else if(this.responseText>70 && this.responseText<70){
document.getElementById(“temperaturef”).style.color = “green”;
}
else if(this.responseText<=70){
document.getElementById(“temperaturef”).style.color = “blue”;
}
document.getElementById(“temperaturef”).innerHTML = this.responseText;
}
};
xhttp.open(“GET”, “/temperature”, true);
xhttp.send();
}, 1000 ) ;
setInterval(function ( ) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById(“temperaturef1”).innerHTML = this.responseText;
}
};
xhttp.open(“GET”, “/temperaturef1”, true);
xhttp.send();
}, 1000) ;
setInterval(function ( ) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById(“temperaturef2”).innerHTML = this.responseText;
}
};
xhttp.open(“GET”, “/temperaturef2″, true);
xhttp.send();
}, 1000) ;
</script>
</html>)rawliteral”;
// Replaces placeholder with DS18B20 values
String processor(const String& var){
//Serial.println(var);
if(var == “TEMPERATUREF”){
return readDSTemperatureF();
}
else if(var == “TEMPERATUREF1”){
return readDSTemperatureF1();
}
else if(var == “TEMPERATUREF2”){
return readDSTemperatureF2();
}
return String();
}
void setup(){
// Serial port for debugging purposes
Serial.begin(115200);
Serial.println();
pinMode(output5, OUTPUT);
pinMode(output16, OUTPUT);
pinMode(output17, OUTPUT);
// Set outputs to LOW
digitalWrite(output5, LOW);
digitalWrite(output16, LOW);
digitalWrite(output17, LOW);
// Start up the DS18B20 library
sensors.begin();
//temperatureF = readDSTemperatureF();
//temperatureF1 = readDSTemperatureF1();
//temperatureF2 = readDSTemperatureF2();
// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
// Serial.print(“.”);
Serial.println(“Connecting to WiFi”);
}
// Serial.println();

// Print ESP 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(“/temperaturef”, HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, “text/plain”, temperatureF.c_str());
});
server.on(“/temperaturef1”, HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, “text/plain”, temperatureF1.c_str());
});
server.on(“/temperaturef2”, HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, “text/plain”, temperatureF2.c_str());
});
// Start server
server.begin();
}

void loop(){
if ((millis() – lastTime) > timerDelay) {
temperatureF = readDSTemperatureF();
temperatureF1 = readDSTemperatureF1();
temperatureF2 = readDSTemperatureF2();
lastTime = millis();
}
}

I removed some formatting and it works…..

Now I need to apply it to the dot (virtual LED)

Ok. Great!
Then, then let us know if you need further help.
Regards.