Wokwi - Online ESP32, STM32, Arduino Simulator

#include <WiFi.h>
#include <WebServer.h>

// Define pin connections
const int potPin = 34;            // Potentiometer connected to GPIO34
const int trigPin = 26;           // Ultrasonic sensor TRIG connected to GPIO26
const int echoPin = 27;           // Ultrasonic sensor ECHO connected to GPIO27

// WiFi credentials for the Access Point
const char* ssid = "ESP32_Access_Point";
const char* password = "123456789";

// Create a web server object on port 80
WebServer server(80);

// Function to read potentiometer and ultrasonic sensor values
String getSensorValues() {
  int potValue = analogRead(potPin);

  // Convert potentiometer value to percentage (0–100%)
  int potPercent = map(potValue, 0, 4095, 0, 100);

  // Measure distance using ultrasonic sensor
  digitalWrite(trigPin, LOW);
  delayMicroseconds(2);
  digitalWrite(trigPin, HIGH);
  delayMicroseconds(10);
  digitalWrite(trigPin, LOW);

  long duration = pulseIn(echoPin, HIGH);
  float distance = duration * 0.034 / 2; // Convert to centimeters

  // Clamp the distance to 0–100 cm
  distance = constrain(distance, 0, 100);

  // Return a JSON string with the values
  String sensorData = "{\"potentiometer\": " + String(potPercent) + 
                      ", \"distance\": " + String(distance) + "}";
  return sensorData;
}

// Handler for the root webpage
void handleRoot() {
  String html = "<html>\
  <head>\
    <title>ESP32 Sensor Dashboard</title>\
    <style>\
      body { font-family: Arial, sans-serif; text-align: center; }\
      .gauge-container { display: flex; justify-content: center; margin: 20px 0; }\
      .gauge {\
        width: 150px;\
        height: 150px;\
        background: conic-gradient(#4caf50 calc(var(--value) * 1%), #ddd 0%);\
        border-radius: 50%;\
        position: relative;\
        margin: 0 20px;\
      }\
      .gauge:before {\
        content: '';\
        position: absolute;\
        width: 110px;\
        height: 110px;\
        background: #fff;\
        border-radius: 50%;\
        top: 20px;\
        left: 20px;\
        display: block;\
      }\
      .gauge-value {\
        position: absolute;\
        top: 50%;\
        left: 50%;\
        transform: translate(-50%, -50%);\
        font-size: 20px;\
        font-weight: bold;\
      }\
    </style>\
    <script>\
      function updateValues() {\
        var xhr = new XMLHttpRequest();\
        xhr.open('GET', '/sensorData', true);\
        xhr.onreadystatechange = function() {\
          if (xhr.readyState == 4 && xhr.status == 200) {\
            var data = JSON.parse(xhr.responseText);\
            var potValue = data.potentiometer;\
            var distValue = data.distance;\
            document.getElementById('potGauge').style.setProperty('--value', potValue);\
            document.getElementById('potGaugeValue').innerHTML = potValue + '%';\
            document.getElementById('distGauge').style.setProperty('--value', distValue);\
            document.getElementById('distGaugeValue').innerHTML = distValue + ' cm';\
          }\
        };\
        xhr.send();\
      }\
      setInterval(updateValues, 1000); // Update every second\
    </script>\
  </head>\
  <body>\
    <h1>ESP32 Sensor Dashboard</h1>\
    <div class='gauge-container'>\
      <div>\
        <h3>Potentiometer</h3>\
        <div id='potGauge' class='gauge' style='--value: 0;'>\
          <div id='potGaugeValue' class='gauge-value'>0%</div>\
        </div>\
      </div>\
      <div>\
        <h3>Ultrasonic Sensor</h3>\
        <div id='distGauge' class='gauge' style='--value: 0;'>\
          <div id='distGaugeValue' class='gauge-value'>0 cm</div>\
        </div>\
      </div>\
    </div>\
  </body>\
  </html>";
  
  server.send(200, "text/html", html);
}

// Handler for the sensor data
void handleSensorData() {
  String sensorData = getSensorValues();
  server.send(200, "application/json", sensorData);
}

void setup() {
  // Initialize serial communication
  Serial.begin(115200);

  // Initialize WiFi in AP mode
  WiFi.softAP(ssid, password);

  // Set ultrasonic sensor pins
  pinMode(trigPin, OUTPUT);
  pinMode(echoPin, INPUT);

  // Set up web server routes
  server.on("/", handleRoot);           // Serve the main webpage
  server.on("/sensorData", handleSensorData); // Serve sensor data in JSON format

  // Start the web server
  server.begin();
  Serial.println("Server started.");
}

void loop() {
  // Handle incoming client requests
  server.handleClient();
}