Wokwi - Online ESP32, STM32, Arduino Simulator

#include <LiquidCrystal_I2C.h>

#ifdef ESP32
  #include <WiFi.h>
  #include <ESPAsyncWebServer.h>
#else
  #include <Arduino.h>
  #include <ESP8266WiFi.h>
  #include <Hash.h>
  #include <ESPAsyncTCP.h>
  #include <ESPAsyncWebServer.h>
  #include <FS.h>
#endif
#include <Wire.h>

// Informasi jaringan WiFi
const char* ssid = "Wokwi-GUEST";
const char* password = "";

// Konfigurasi pin
const int trigPin = 16;
const int echoPin = 17;
const int ledPin = 4;

long duration;
float distance;
bool ledStatus = false;

// Inisialisasi LCD
LiquidCrystal_I2C lcd(0x27, 16, 2);

// Objek server
AsyncWebServer server(80);

// Semaphore untuk penguncian
SemaphoreHandle_t xSemaphore;

// Fungsi untuk mengukur jarak
float getDistance() {
  digitalWrite(trigPin, LOW);
  delayMicroseconds(2);
  digitalWrite(trigPin, HIGH);
  delayMicroseconds(10);
  digitalWrite(trigPin, LOW);

  duration = pulseIn(echoPin, HIGH);
  distance = (duration * 0.034) / 2; // Hitung jarak dalam cm
  return distance;
}

// Fungsi untuk mendapatkan status LED dalam teks
String getLEDStatus() {
  return ledStatus ? "ON" : "OFF";
}

// Fungsi untuk menangani koneksi WiFi dengan penguncian
void connectToWiFi() {
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("\nWiFi Connected");
  Serial.println(WiFi.localIP());
}

// Callback untuk WiFi event
void WiFiEvent(WiFiEvent_t event) {
  switch (event) {
    case IP_EVENT_STA_GOT_IP:
      Serial.println("WiFi Connected!");
      Serial.println(WiFi.localIP());
      break;
    case WIFI_EVENT_STA_DISCONNECTED:
      Serial.println("WiFi Disconnected. Reconnecting...");
      WiFi.begin(ssid, password);
      break;
    default:
      break;
  }
}

// Halaman HTML dengan Bootstrap responsif
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
  <title>ESP32 Ultrasonic Sensor</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light">
  <div class="container py-5">
    <h1 class="text-center mb-4">ESP32 Ultrasonic Sensor</h1>
    <div class="card shadow-sm">
      <div class="card-body">
        <h3>Distance: <span id="distance">0</span> cm</h3>
        <h3>LED Status: <span id="led-status" class="badge bg-secondary">OFF</span></h3>
        <form class="mt-4" id="inputForm">
          <div class="mb-3">
            <label for="name" class="form-label">Name</label>
            <input type="text" class="form-control" id="name" placeholder="Enter your name">
          </div>
          <div class="mb-3">
            <label for="gender" class="form-label">Gender</label>
            <select class="form-select" id="gender">
              <option value="Male">Male</option>
              <option value="Female">Female</option>
            </select>
          </div>
          <button type="button" class="btn btn-primary" onclick="submitForm()">Submit</button>
        </form>
      </div>
    </div>
  </div>
  <script>
    setInterval(() => {
      fetch("/data")
        .then(response => response.json())
        .then(data => {
          document.getElementById("distance").textContent = data.distance;
          const ledStatusElement = document.getElementById("led-status");
          ledStatusElement.textContent = data.ledStatus;
          ledStatusElement.className = `badge bg-${data.ledStatus === 'ON' ? 'success' : 'secondary'}`;
        });
    }, 1000);

    const submitForm = () => {
      const name = document.getElementById("name").value;
      const gender = document.getElementById("gender").value;
      fetch(`/submit?name=${name}&gender=${gender}`);
    };
  </script>
</body>
</html>
)rawliteral";

void setup() {
  Serial.begin(115200);

  // Inisialisasi pin
  pinMode(trigPin, OUTPUT);
  pinMode(echoPin, INPUT);
  pinMode(ledPin, OUTPUT);

  // Inisialisasi LCD
  lcd.init();
  lcd.backlight();

  // Koneksi WiFi
  WiFi.onEvent(WiFiEvent);
  connectToWiFi();

  // Rute web server
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
    request->send_P(200, "text/html", index_html);
  });

  server.on("/data", HTTP_GET, [](AsyncWebServerRequest *request) {
    float dist = getDistance();
    if (dist < 50) { // Jarak tertentu untuk menyalakan LED
      digitalWrite(ledPin, HIGH);
      ledStatus = true;
    } else {
      digitalWrite(ledPin, LOW);
      ledStatus = false;
    }
    String json = String("{\"distance\":") + String(dist, 2) + ",\"ledStatus\":\"" + getLEDStatus() + "\"}";
    request->send(200, "application/json", json);
  });

  server.on("/submit", HTTP_GET, [](AsyncWebServerRequest *request) {
    String name = request->getParam("name")->value();
    String gender = request->getParam("gender")->value();
    lcd.clear();
    lcd.setCursor(0, 0);
    lcd.print(name);
    lcd.setCursor(0, 1);
    lcd.print(gender);
    request->send(200, "text/plain", "Data received");
  });

  server.begin();
}

void loop() {
  // Tidak ada logika tambahan yang diperlukan dalam loop
}