Axel Dr. Schmidt asked 2 years ago
Hello,
I have a problem with HTML:
in the loop a loadcell delivers data every x milliseconds.
i = LoadCell.getData();
newDataReady = 0;
// save the last time you updated the DHT values
previousMillis = currentMillis;
// Read data
float newT = i;
// if read failed, don’t change t value
if (isnan(newT))
{
Serial.println(“Failed to read from sensor!”);
}
else
{
// negieren, da die Kraftrichtung auf Zug sein muss
loadT = newT*(-1.0);
if (loadT>limitT){Farbe_loadT=”red”;}
else if ((loadT*(-1.0))<limitT){Farbe_loadT=”red”;}
else {Farbe_loadT=”white”;}
in the HTML-part I want to show the data and the color, but only the data appear.
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: Montserrat;
display: inline-block;
margin: 0px auto;
text-align: center;
}
h2 { font-size: 3.0rem; }
p { font-size: 3.0rem; }
.units { font-size: 3.0rem; }
.dht-labels{
font-size: 1.5rem;
vertical-align:middle;
padding-bottom: 15px;
}
</style>
</head>
<body>
<h2>iVT Load cell</h2>
<p> Load: <span id=”loadT”>%loadT%</span> kg</p>
<p>Max. Load: <span style.color=”red” id=”maxT”>%maxT%</span> kg</p>
<p>Min. Load: <span id=”minT”>%minT%</span> kg</p>
<p>Load limit: <span id=”limitT”>%limitT%</span> kg</p>
<p>Load limit threshold</p>
<form action=”/get”>
Load Threshold <input type=”number” step=”1.0″ name=”threshold_input” value=”%THRESHOLD%” required><br><br>
<input type=”submit” value=”Submit”>
</form>
</body>
<script>
//__________________________________________________________________________________________
setInterval(function ( )
{
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function()
{
if (this.readyState == 4 && this.status == 200)
{
document.getElementById(“loadT”).innerHTML = this.responseText;
document.getElementById(“loadT”).style.color = Farbe_maxT;
document.getElementById(“maxT”).innerHTML = this.responseText;
document.getElementById(“maxT”).style.color=Farbe_maxT;
document.getElementById(“minT”).innerHTML = this.responseText;
document.getElementById(“minT”).style.color=Farbe_minT;
document.getElementById(“limitT”).innerHTML = this.responseText;
}
};
xhttp.open(“GET”, “/loadT”, true);
xhttp.send();
}, 100 ) ;
The color is defined as “String Farbe_loadT;”
Could anyone please tell me my error?
Sara Santos Staff answered 2 years ago
Hi.
To better understand what is going on, open your javascript console.
Alt+shift+j
And check which errors you get.
Where do you have your color defined?
It probably doesn’t recognize the color.
Regards,
Sara