I have a resistance read from the Arduino esp32 that i display on the HTML page.
I want to also use that number to help calculate and build a rectangle (see html code "Var pot_value = potreading;"" on the page that grows. The rectangle works when i place a real number like "Var pot_value =42" in the rectangle = location but not using "potreading".
The number from the Arduino shows in the html page displaying "potreading" but it wont work together. I may be wrong but i am guessing it does not see the "potreading" reading as a number but no matter what i try i cant get it to work. Please if anyone has any idea? I am just learning HTML and i have spent days trying to figure this out.
Arduino code
<#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include "index.h" // Include the index.h file
#define RELAY_PIN 26 // ESP32 pin GPIO26 connected to Relay to start engine
//#define potPin 34 // ESP32 pin GPIO34 to monitor resistance sensor
int relay_state = LOW;
int potValue = 0;
int oil_levelvalue = 0;
int oil_tempvalue = 0;
int coolant_levelvalue = 0;
int coolant_tempvalue = 0;
int battery_levelvalue = 0;
const char* ssid = "test"; // CHANGE IT
const char* password = "12345678"; // CHANGE IT
const int potPin = 34;
const int oil_level = 36;
const int oil_temp = 39;
const int coolant_level = 35;
const int coolant_temp = 32;
const int battery_level = 33;
AsyncWebServer server(80);
//float getreadings() {
// YOUR SENSOR IMPLEMENTATION HERE
// return potValue;
//}
String getHTML() {
String html = webpage; // Use the HTML content from the index.h file
html.replace("%RELAY_STATE%", relay_state ? "ON" : "OFF"); // update the relay state
return html;
}
void setup() {
Serial.begin(115200);
WiFi.softAP(ssid, password);
//relay pin for engine start stop
pinMode(RELAY_PIN, OUTPUT);
digitalWrite(RELAY_PIN, relay_state);
IPAddress IP = WiFi.softAPIP();
//Serial.print("AP IP address: ");
//Serial.println(IP);
// Serve the HTML page from the file
server.on("/", HTTP_GET, [](AsyncWebServerRequest* request) {
//Serial.println("ESP32 Web Server: New request received:"); // for debugging
//Serial.println("GET /"); // for debugging
request->send(200, "text/html", webpage);
});
// Define a route to get the potreading data
server.on("/potreading", HTTP_GET, [](AsyncWebServerRequest* request) {
//Serial.println("ESP32 Web Server: New request received:"); // for debugging
//Serial.println("GET /potreading"); // for debugging
float potreading = potValue;
// Format the potreading with two decimal places
String potreadingStr = String(potreading);
request->send(200, "text/plain", potreadingStr);
});
// Route to control the relay to start engine
server.on("/relay1/on", HTTP_GET, [](AsyncWebServerRequest *request) {
// Serial.println("ESP32 Web Server: New request received:");
// Serial.println("GET /relay1/on");
relay_state = HIGH;
digitalWrite(RELAY_PIN, relay_state);
request->send(200, "text/html", getHTML());
});
server.on("/relay1/off", HTTP_GET, [](AsyncWebServerRequest *request) {
//Serial.println("ESP32 Web Server: New request received:");
//Serial.println("GET /relay1/off");
relay_state = LOW;
digitalWrite(RELAY_PIN, relay_state);
request->send(200, "text/html", getHTML());
});
// Start the server
server.begin();
}
void loop() {
potValue = analogRead(potPin);
oil_levelvalue = analogRead(oil_level);
oil_tempvalue = analogRead(oil_temp);
coolant_levelvalue = analogRead(coolant_level);
coolant_tempvalue = analogRead(coolant_temp);
battery_levelvalue = analogRead(battery_level);
updateDisplay();
delay(10000);
}
void updateDisplay(){
Serial.print("oil_level: ");
Serial.println(oil_levelvalue);
Serial.print("oil_temp: ");
Serial.println(oil_tempvalue);
Serial.print("coolant_level: ");
Serial.println(coolant_levelvalue);
Serial.print("coolant_temp: ");
Serial.println(coolant_tempvalue);
Serial.print("battery_level: ");
Serial.println(battery_levelvalue);
Serial.print("potvalue: ");
Serial.println(potValue);
}
HTML page
#ifndef WEBPAGE_H
#define WEBPAGE_H
const char* webpage = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
#rectangle {
height: 50px;
background-color: rgb(0, 0, 0);
transition: width 2s;
}
</style>
</head>
<body>
<h1>test</h1>
<p>Potvalue: <span style="color: red;"><span id="potreading">Loading...</span> ℃</span></p>
<div id="rectangle" style="width: 50px;"></div>80
<script>
Var pot_value = potreading; // Change this value to adjust the width of the rectangle
var rectangle = document.getElementById("rectangle");
rectangle.style.width = pot_value * 10 + "px";
rectangle.style.backgroundColor = "rgb(" + pot_value * 25 + ", " + pot_value * 10 + ", " + pot_value * 5 + ")";
</script>
</body>
</html>
<script>
function fetchpotreading() {
fetch("/potreading")
.then(response => response.text())
.then(data => {
document.getElementById("potreading").textContent = +data;
return number;
});
}
fetchpotreading();
setInterval(fetchpotreading, 4000); // Update every 4 seconds
</script>
<link rel='icon' href='data:,'>
</head>
<p>Eninge State: <span style='color: red;'>%RELAY_STATE%</span></p>
<a href='/relay1/on'>Turn ON Engine</a>
<br><br>
<a href='/relay1/off'>Turn OFF Engine</a>
</body>
</html>
)=====";
#endif
