Wokwi - Online ESP32, STM32, Arduino Simulator

#include <WiFi.h>
#include <WebServer.h>
// Dirección IP: 192.168.121.48
// Configuración de la red WiFi
const char* ssid = "Galaxy A13 04B4";
const char* password = "12345678";

// Configuración del servidor web
WebServer server(80);

// Definir los pines del joystick
#define PIN_X 39 // Pin para el eje X
#define PIN_Y 36 // Pin para el eje Y

// Definir los umbrales para las direcciones
#define UMBRAL_CENTRO_MIN 1700
#define UMBRAL_CENTRO_MAX 2100
#define UMBRAL_ARRIBA 100
#define UMBRAL_ABAJO 3900
#define UMBRAL_IZQUIERDA 100
#define UMBRAL_DERECHA 3900

void setup() {
  // Inicializar el monitor serial
  Serial.begin(9600);

  // Conectar a la red WiFi
  Serial.print("Conectando a ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);

  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.print(".");
  }

  Serial.println("");
  Serial.println("Conectado a la red WiFi");
  Serial.print("Direccion IP: ");
  Serial.println(WiFi.localIP());

  // Configurar el servidor web
  server.on("/", handleRoot);
  server.on("/joystick", handleJoystick);
  server.begin();
  Serial.println("Servidor HTTP iniciado");
}

void loop() {
  // Manejar las solicitudes del servidor web
  server.handleClient();
}

void handleRoot() {
  // Generar la respuesta HTML con JavaScript para actualizar los valores
  String html = "<html><body><h1 style='font-size:24px;'>Medicion del Joystick</h1>";
  html += "<p>Direccion: <span id='direccion'>Centro</span></p>";
  html += "<p>Coordenada X: <span id='coordX'>0</span></p>";
  html += "<p>Coordenada Y: <span id='coordY'>0</span></p>";
  html += "<script>";
  html += "setInterval(function() {";
  html += "  fetch('/joystick').then(response => response.json()).then(data => {";
  html += "    document.getElementById('direccion').innerText = data.direccion;";
  html += "    document.getElementById('coordX').innerText = data.coordX;";
  html += "    document.getElementById('coordY').innerText = data.coordY;";
  html += "  });";
  html += "}, 1000);"; // Actualizar cada segundo
  html += "</script>";
  html += "</body></html>";

  // Enviar la respuesta al cliente
  server.send(200, "text/html", html);
}

void handleJoystick() {
  // Leer los valores analógicos del joystick
  int valorX = analogRead(PIN_X);
  int valorY = analogRead(PIN_Y);

  // Determinar la dirección del joystick
  String direccion = "Centro";

  if (valorX > UMBRAL_CENTRO_MIN && valorX < UMBRAL_CENTRO_MAX) {
    if (valorY < UMBRAL_ARRIBA) {
      direccion = "Arriba";
    } else if (valorY > UMBRAL_ABAJO) {
      direccion = "Abajo";
    }
  } else if (valorY > UMBRAL_CENTRO_MIN && valorY < UMBRAL_CENTRO_MAX) {
    if (valorX < UMBRAL_IZQUIERDA) {
      direccion = "Izquierda";
    } else if (valorX > UMBRAL_DERECHA) {
      direccion = "Derecha";
    }
  }

  // Crear un objeto JSON con los valores
  String json = "{\"direccion\":\"" + direccion + "\", \"coordX\":\"" + String(valorX) + "\", \"coordY\":\"" + String(valorY) + "\"}";

  // Enviar el objeto JSON como respuesta
  server.send(200, "application/json", json);
}