Web server esp32 doubts

Projects General Guidance
1

Hello I have two important doubts in base a web server with an ESP-32,first how can i adjust my code to show information on my HTML page, I have a project in that 3 sensors have to show data in real time in in my HTML program, and how can i submit my html code in my esp32, because is very long and i dont know if will have problems at the moment to perform the compilation.

#include <LiquidCrystal.h>
#include <Wire.h>
#include <MPU6050_tockn.h>

// ========== CONFIGURACIÓN LCD ==========
const int rs = 4, en = 5, d4 = 18, d5 = 19, d6 = 21, d7 = 22;
LiquidCrystal lcd(rs, en, d4, d5, d6, d7);

// ========== CONFIGURACIÓN ACS712-30A ==========
const float SENSIBILIDAD = 0.066; // 66mV/A para 30A
const int PIN_SENSOR_CORRIENTE = 34;
float offsetCorriente = 0;
const int MUESTRAS_CALIBRACION = 1000;

// ========== CONFIGURACIÓN MPU6050 ==========
#define SDA_MPU 13
#define SCL_MPU 14
MPU6050 mpu6050(Wire);
float anguloX, anguloY;

// ========== CONFIGURACIÓN SENSOR VELOCIDAD ==========
const int PIN_SENSOR_RPM = 26;
volatile int contadorPulsos = 0;
const int PULSOS_POR_VUELTA = 20;
const float DIAMETRO_RUEDA = 0.1; // Diámetro en metros (¡AJUSTAR!)
float velocidadKmh = 0;
unsigned long ultimoTiempoVelocidad = 0;
unsigned long ultimoTiempoLCD = 0;

void setup() {
  Serial.begin(115200);
  
  // Inicializar LCD
  lcd.begin(16, 2);
  lcd.print("Iniciando...");
  
  // Calibrar ACS712
  calibrarSensorCorriente();
  
  // Inicializar MPU6050
  Wire.begin(SDA_MPU, SCL_MPU);
  mpu6050.begin();
  mpu6050.calcGyroOffsets(true);
  
  // Configurar interrupción para sensor de velocidad
  pinMode(PIN_SENSOR_RPM, INPUT_PULLUP);
  attachInterrupt(digitalPinToInterrupt(PIN_SENSOR_RPM), contarPulsos, FALLING);
  
  lcd.clear();
}

void loop() {
  // ========== LECTURA DE CORRIENTE ==========
  float corriente = leerCorrienteFiltrada(300); // 300 muestras
  
  // ========== LECTURA MPU6050 ==========
  mpu6050.update();
  anguloX = mpu6050.getAngleX();
  anguloY = mpu6050.getAngleY();
  
  // ========== CÁLCULO VELOCIDAD ==========
  if (millis() - ultimoTiempoVelocidad >= 1000) {
    float rpm = (contadorPulsos * 60.0) / PULSOS_POR_VUELTA;
    velocidadKmh = (rpm * PI * DIAMETRO_RUEDA * 3.6) / 60.0; // Conversión a km/h
    contadorPulsos = 0;
    ultimoTiempoVelocidad = millis();
  }
  
  // ========== ACTUALIZAR LCD CADA 250ms ==========
  if (millis() - ultimoTiempoLCD >= 250) {
    ultimoTiempoLCD = millis();
    actualizarLCD(corriente, anguloX, anguloY, velocidadKmh);
  }
}

// ========== FUNCIONES ACS712 ==========
void calibrarSensorCorriente() {
  float suma = 0;
  for(int i = 0; i < MUESTRAS_CALIBRACION; i++) {
    float voltaje = analogRead(PIN_SENSOR_CORRIENTE) * (3.3 / 4095.0);
    suma += (voltaje - 1.65) / SENSIBILIDAD; // 1.65V = 3.3V/2
    delay(1);
  }
  offsetCorriente = suma / MUESTRAS_CALIBRACION;
  Serial.print("Offset corriente: ");
  Serial.println(offsetCorriente, 5);
}

float leerCorrienteFiltrada(int n_muestras) {
  float suma = 0;
  for(int i = 0; i < n_muestras; i++) {
    float voltaje = analogRead(PIN_SENSOR_CORRIENTE) * (3.3 / 4095.0);
    float corriente = (voltaje - 1.65) / SENSIBILIDAD - offsetCorriente;
    
    // Filtro para eliminar ruido
    if(abs(corriente) > 0.3) { // Umbral de 0.3A para el modelo de 30A
      suma += corriente;
    }
    delayMicroseconds(200);
  }
  return suma / n_muestras;
}

// ========== FUNCIÓN INTERRUPCIÓN VELOCIDAD ==========
void contarPulsos() {
  contadorPulsos++;
}

// ========== FUNCIÓN ACTUALIZAR LCD ==========
void actualizarLCD(float corriente, float angX, float angY, float velocidad) {
  lcd.clear();
  
  // Fila 1: Corriente y Ángulo X
  lcd.setCursor(0, 0);
  lcd.print("I:");
  if(abs(corriente) < 0.3) {
    lcd.print("0.0");
  } else {
    lcd.print(corriente, 1);
  }
  lcd.print("A");
  
  lcd.setCursor(8, 0);
  lcd.print("X:");
  lcd.print(angX, 0);
  lcd.print((char)223); // Símbolo grados
    
  // Fila 2: Velocidad y Ángulo Y
  lcd.setCursor(0, 1);
  lcd.print("V:");
  lcd.print(velocidad, 1);
  lcd.print("km/h");
  
  lcd.setCursor(10, 1);
  lcd.print("Y:");
  lcd.print(angY, 0);
  lcd.print((char)223);
}

interfaz.txt (38,8 KB) I submited the html if you want more details

2

I suggest you take a look at the ESP32 web server tutorials at https://randomnerdtutorials.com/

3

Especially this one