Wokwi - Online ESP32, STM32, Arduino Simulator

// Blynk credentials
#define BLYNK_TEMPLATE_ID "TMPL37zKTQnZA"
#define BLYNK_TEMPLATE_NAME "Research Project"
#define BLYNK_AUTH_TOKEN "Y7mtXzcJiy4dG-fRq06oG8636YTEpnuU"

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

// Wi-Fi credentials for STA mode (to connect to your router)
const char* wifiSSID = "Wokwi-GUEST";
const char* wifiPassword = "";

// Access Point credentials for the local server
const char* apSSID = "ESP32_Access_Point";
const char* apPassword = "123456789";

// Pin definitions
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

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

// Function to read potentiometer value
int getPotValue() {
  int potValue = analogRead(potPin);
  int potPercent = map(potValue, 0, 4095, 0, 100); // Convert to percentage (0–100%)
  return potPercent;
}

// Function to read ultrasonic sensor value
float getUltrasonicValue() {
  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
  return constrain(distance, 0, 100);    // Clamp to 0–100 cm
}

// Function to serve the main 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 ultrasonicValue = data.ultrasonic;\
            document.getElementById('potGauge').style.setProperty('--value', potValue);\
            document.getElementById('potGaugeValue').innerHTML = potValue + '%';\
            document.getElementById('ultrasonicGauge').style.setProperty('--value', ultrasonicValue);\
            document.getElementById('ultrasonicGaugeValue').innerHTML = ultrasonicValue + ' 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</h3>\
        <div id='ultrasonicGauge' class='gauge' style='--value: 0;'>\
          <div id='ultrasonicGaugeValue' class='gauge-value'>0 cm</div>\
        </div>\
      </div>\
    </div>\
  </body>\
  </html>";
  server.send(200, "text/html", html);
}

// Function to serve sensor data as JSON
void handleSensorData() {
  int potValue = getPotValue();
  float ultrasonicValue = getUltrasonicValue();

  String jsonData = "{\"potentiometer\": " + String(potValue) + ", \"ultrasonic\": " + String(ultrasonicValue) + "}";
  server.send(200, "application/json", jsonData);
}

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

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

  // Set up Wi-Fi as a station and connect to the router
  WiFi.begin(wifiSSID, wifiPassword);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi...");
  }
  Serial.println("Connected to WiFi");

  // Set up Blynk
  Blynk.begin(BLYNK_AUTH_TOKEN, wifiSSID, wifiPassword);

  // Set up Wi-Fi as an Access Point
  WiFi.softAP(apSSID, apPassword);
  Serial.print("Access Point started. IP address: ");
  Serial.println(WiFi.softAPIP());

  // Configure local web server routes
  server.on("/", handleRoot);
  server.on("/sensorData", handleSensorData);

  // Start the local web server
  server.begin();
}

void loop() {
  // Handle Blynk communication
  Blynk.run();

  // Handle local server requests
  server.handleClient();

  // Read and upload sensor values to Blynk
  int potValue = getPotValue();
  float ultrasonicValue = getUltrasonicValue();
  Blynk.virtualWrite(V0, potValue);       // Send potentiometer value to Blynk (V0)
  Blynk.virtualWrite(V1, ultrasonicValue); // Send ultrasonic value to Blynk (V1)
}