📡 نمایش زنده‌ی سنسور در صفحه‌ی وب (ESP32)

مقدار پتانسیومتر هر نیم ثانیه در صفحه‌ی وب به‌روز می‌شود (JSON و fetch).

سطح: چالشی ⭐⭐⭐ · مود: آردوینو (سه‌بعدی + کد)

قطعات لازم

• برد ESP32
• پتانسیومتر

کد کامل پروژه

// ESP32: a page that shows a potentiometer live (12-bit ADC, 0..4095).
#include <WiFi.h>
#include <WebServer.h>

WebServer server(80);
const int POT = 34;   // GPIO34 is input-only, perfect for a sensor

void setup() {
  Serial.begin(115200);
  WiFi.begin("MyHome", "12345678");
  while (WiFi.status() != WL_CONNECTED) delay(200);

  server.on("/", []() {
    String html = "<!doctype html><html><body style='font-family:sans-serif;text-align:center'>";
    html += "<h2>Potentiometer</h2><div style='font-size:48px' id='v'>-</div>";
    html += "<div style='height:16px;background:#e5e7eb;border-radius:8px'><div id='bar' style='height:16px;background:#0ea5e9;border-radius:8px;width:0'></div></div>";
    html += "<script>setInterval(function(){fetch('/value').then(r=>r.json()).then(d=>{";
    html += "document.getElementById('v').innerText=d.volts.toFixed(2)+' V';";
    html += "document.getElementById('bar').style.width=(d.raw/40.95)+'%'})},500)</script></body></html>";
    server.send(200, "text/html", html);
  });

  server.on("/value", []() {
    int raw = analogRead(POT);
    float volts = raw * 3.3 / 4095.0;
    String json = "{\"raw\":" + String(raw) + ",\"volts\":" + String(volts, 3) + "}";
    server.send(200, "application/json", json);
  });

  server.begin();
  Serial.printf("Ready at %s\n", WiFi.localIP().toString().c_str());
}

void loop() {
  server.handleClient();
}

چطور اجرایش کنم؟

1. شبیه‌ساز تینکرکد فارسی را باز کن و «مود آردوینو» را انتخاب کن.
2. از پنل «نمونه‌ها»، «نمایش زنده‌ی سنسور در صفحه‌ی وب (ESP32)» را بارگذاری کن — مدار و کد با هم می‌آیند.
3. دکمه‌ی اجرا ▶ را بزن و خروجی Serial و رفتار قطعات را تماشا کن.
4. حالا کد را تغییر بده — عددها، پین‌ها، ترتیب — و دوباره اجرا کن!