• Skip to main content
  • Skip to primary sidebar

RNTLab.com

The Ultimate Shortcut to Learn Electronics and Programming with Open Source Hardware and Software

  • Courses
  • Forum
    • Forum
    • Ask Question
  • Shop
  • Account
  • Blog
  • Login

changing the color of an an object based on a sensed load

Q&A Forum › Category: ESP8266 › changing the color of an an object based on a sensed load
0 Vote Up Vote Down
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&#8221; 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?

Question Tags: data change color html
1 Answers
0 Vote Up Vote Down
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

Primary Sidebar

Login to Ask or Answer Questions

This Forum is private and it’s only available for members enrolled in our Courses.

Login »

Latest Course Updates

  • [eBook Updated] Learn LVGL: Build GUIs for ESP32 Projects – Version 1.5 July 7, 2025
  • [eBook Updated] Learn Raspberry Pi Pico/Pico W with MicroPython eBook – Version 1.2 May 26, 2025

You must be logged in to view this content.

Contact Support - Refunds - Privacy - Terms - MakerAdvisor.com - Member Login

Copyright © 2013-2025 · RandomNerdTutorials.com · All Rights Reserved

Insert/edit link

Enter the destination URL

Or link to existing content

    No search term specified. Showing recent items. Search or use up and down arrow keys to select an item.