Arduino_dial_and_buttons - Wokwi ESP32, STM32, Arduino Simulator

#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include <AsyncTCP.h>
#include <ArduinoJson.h>

const char* ssid = "Wokwi-GUEST";
const char* password = "";

AsyncWebServer server(80);
AsyncWebSocket ws("/ws");

int current_value = 0;

// HTML + JS page
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ESP32 Dial</title>
  <style>
    body { font-family: sans-serif; text-align: center; margin: 30px; }
    #dial { width: 300px; height: 300px; margin: auto; border: 1px solid #aaa; border-radius: 50%; }
  </style>
</head>
<body>
  <h1>ESP32 Dial</h1>
  <div id="dial"></div>
  <input id="value" type="number" value="0" min="0" max="4095">
  <script>
    let ws = new WebSocket(`ws://${location.host}/ws`);
    ws.onopen = () => console.log("WS connected");
    ws.onmessage = (event) => {
      let data = JSON.parse(event.data);
      document.getElementById("value").value = data.value;
    };
    document.getElementById("value").addEventListener("change", (e) => {
      ws.send(JSON.stringify({ value: parseInt(e.target.value) }));
    });
  </script>
</body>
</html>
)rawliteral";

// WebSocket event handler
void onWsEvent(AsyncWebSocket *server, AsyncWebSocketClient *client,
               AwsEventType type, void *arg, uint8_t *data, size_t len) {
  if (type == WS_EVT_CONNECT) {
    Serial.println("WS client connected");
    String msg = "{\"value\":" + String(current_value) + "}";
    client->text(msg);
  } else if (type == WS_EVT_DISCONNECT) {
    Serial.println("WS client disconnected");
  } else if (type == WS_EVT_DATA) {
    AwsFrameInfo *info = (AwsFrameInfo*)arg;
    if (info->final && info->index == 0 && info->len == len && info->opcode == WS_TEXT) {
      data[len] = 0;
      String msg = (char*)data;
      Serial.printf("WS message: %s\n", msg.c_str());
      DynamicJsonDocument doc(128);
      DeserializationError err = deserializeJson(doc, msg);
      if (!err && doc.containsKey("value")) {
        current_value = constrain(doc["value"].as<int>(), 0, 4095);
        Serial.printf("DAC_VALUE = %d\n", current_value);
        String out = "{\"value\":" + String(current_value) + "}";
        ws.textAll(out);
      }
    }
  }
}

void setup() {
  Serial.begin(115200);
  WiFi.begin(ssid, password);
  Serial.print("Connecting to WiFi");
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println();
  Serial.print("WiFi connected, IP: ");
  Serial.println(WiFi.localIP());

  ws.onEvent(onWsEvent);
  server.addHandler(&ws);

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

  server.begin();
}

void loop() {
  // Nothing needed here, AsyncWebServer runs in background
}