Hi everyone, I was trying to use an ESP32 to visualize data from some sensors trough wifi, I was able to recive and show the measurings, but when I tried to add a graphic via "chart.js" the page shows nothing in the readings, and in dev tools I'm getting this error in the DevTools, I leave the code and the capture of the code, I'm using an ESP32 and writing in Arduino IDE:
#include <WiFi.h>
#include <WebServer.h>
// WiFi
const char* ssid = "---";
const char* password = "---";
WebServer server(80);
// Pines
const int pinFase1 = 32;
const int pinFase2 = 34;
const int pinFase3 = 35;
const int pinNTC = 33;
const int ledWifi = 2;
// Calibración
const float factorCalibracion1 = 51.2;
const float factorCalibracion2 = 51.2;
const float factorCalibracion3 = 51.2;
// NTC
const float rAux = 10000.0;
const float beta = 3740.0;
const float temp0 = 298.0;
const float r0 = 22000.0;
const float offset = 1.54;
const float vcc = 3.315;
// LED parpadeo
unsigned long previousMillis = 0;
const long interval = 500;
bool ledState = false;
// ---------- PROTOTIPOS ----------
float get_corriente(int pin, float factorCalibracion);
float leer_temperatura();
const char* htmlPage = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Monitor ESP32</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f6f8;
text-align: center;
padding: 40px;
}
.card {
background-color: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
display: inline-block;
padding: 20px;
margin: 15px;
width: 250px;
}
.value {
font-size: 2em;
color: #007BFF;
}
.label {
color: #555;
}
canvas {
margin-top: 30px;
}
</style>
</head>
<body>
<h2>Monitor en Tiempo Real - ESP32</h2>
<div class="card">
<div class="label">Corriente Fase 1</div>
<div class="value" id="i1">--</div>
</div>
<div class="card">
<div class="label">Corriente Fase 2</div>
<div class="value" id="i2">--</div>
</div>
<div class="card">
<div class="label">Corriente Fase 3</div>
<div class="value" id="i3">--</div>
</div>
<div class="card">
<div class="label">Temperatura</div>
<div class="value" id="temp">--</div>
</div>
<h3>Corriente Fase 1 (A)</h3>
<canvas id="chartFase1" width="400" height="150"></canvas>
<h3>Temperatura (°C)</h3>
<canvas id="chartTemp" width="400" height="150"></canvas>
<script>
let fase1Data = [];
let tempData = [];
let labels = [];
const ctxFase1 = document.getElementById('chartFase1').getContext('2d');
const ctxTemp = document.getElementById('chartTemp').getContext('2d');
const chartFase1 = new Chart(ctxFase1, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'Corriente Fase 1',
data: fase1Data,
borderColor: 'blue',
fill: false
}]
},
options: {
animation: false,
scales: {
x: { display: false },
y: { beginAtZero: true }
}
}
});
const chartTemp = new Chart(ctxTemp, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'Temperatura',
data: tempData,
borderColor: 'red',
fill: false
}]
},
options: {
animation: false,
scales: {
x: { display: false },
y: { beginAtZero: true }
}
}
});
function actualizarDatos() {
fetch("/datos")
.then(response => response.json())
.then(data => {
console.log("Datos recibidos:", data);
const now = new Date().toLocaleTimeString();
document.getElementById("i1").innerText = data.Irms1 + " A";
document.getElementById("i2").innerText = data.Irms2 + " A";
document.getElementById("i3").innerText = data.Irms3 + " A";
document.getElementById("temp").innerText = data.temp + " °C";
if (labels.length > 50) {
labels.shift();
fase1Data.shift();
tempData.shift();
}
labels.push(now);
fase1Data.push(data.Irms1);
tempData.push(data.temp);
chartFase1.update();
chartTemp.update();
});
}
setInterval(actualizarDatos, 500);
window.onload = actualizarDatos;
</script>
</body>
</html>
)rawliteral";
// --------- SETUP ----------
void setup() {
Serial.begin(115200);
pinMode(ledWifi, OUTPUT);
WiFi.begin(ssid, password);
Serial.print("Conectando a WiFi...");
while (WiFi.status() != WL_CONNECTED) {
unsigned long currentMillis = millis();
if (currentMillis - previousMillis >= interval) {
previousMillis = currentMillis;
ledState = !ledState;
digitalWrite(ledWifi, ledState);
}
delay(10);
}
digitalWrite(ledWifi, HIGH);
Serial.println("");
Serial.print("Conectado a: ");
Serial.println(WiFi.localIP());
server.on("/", []() {
server.send(200, "text/html", htmlPage);
});
server.on("/datos", []() {
float Irms1 = get_corriente(pinFase1, factorCalibracion1);
float Irms2 = get_corriente(pinFase2, factorCalibracion2);
float Irms3 = get_corriente(pinFase3, factorCalibracion3);
float temperatura = leer_temperatura();
String json = "{";
json += "\"Irms1\":" + String(Irms1, 2) + ",";
json += "\"Irms2\":" + String(Irms2, 2) + ",";
json += "\"Irms3\":" + String(Irms3, 2) + ",";
json += "\"temp\":" + String(temperatura, 1);
json += "}";
server.send(200, "application/json", json);
});
server.begin();
}
// --------- LOOP ----------
void loop() {
server.handleClient();
if (WiFi.status() != WL_CONNECTED) {
unsigned long currentMillis = millis();
if (currentMillis - previousMillis >= interval) {
previousMillis = currentMillis;
ledState = !ledState;
digitalWrite(ledWifi, ledState);
}
} else {
digitalWrite(ledWifi, HIGH);
}
}
// -------- FUNCIONES --------
int voltaje_promedio(int pin, int n){
long suma = 0;
for (int i = 0; i < n; i++) {
suma += analogRead(pin);
}
return suma / n;
}
float senal_escalada(int pin, float factorCalibracion){
float voltaje = voltaje_promedio(pin, 10) * (vcc / 4095.0);
float senal = voltaje - offset;
return senal * factorCalibracion;
}
float get_corriente(int pin, float factorCalibracion){
float corriente = 0;
float sumatoria = 0;
long tiempo = millis();
int N = 0;
while (millis() - tiempo < 500) {
corriente = senal_escalada(pin, factorCalibracion);
sumatoria += sq(corriente);
N++;
delay(1);
}
float Irms = sqrt(sumatoria / N);
if (Irms < 0.5) Irms = 0.0;
return Irms;
}
float leer_temperatura() {
float vm = (vcc / 4095.0) * analogRead(pinNTC);
float rntc = rAux / ((vcc / vm) - 1.0);
float temperaturaK = beta / (log(rntc / r0) + (beta / temp0));
return temperaturaK - 273.15;
}
