Vidjetlar roʻyxati

Barcha vidjetlar, barcha oʻlchamlar

Toʻliq vidjetlar toʻplami — sketchga qoʻyiladigan kod, jonli render va S/M/L katak oʻlchamlari. Gadjet UI'sini bir necha daqiqada tuzing.

Uch oʻlcham

Har bir karta katakka uch oʻlchamdan birida joylashadi; har turda mantiqiy default bor, .size() bilan oʻzgartiriladi. Katta vidjetlar (chart, gauge) — L da.

SKichik · ¼

Bitta qiymat yoki boshqaruv — metric, badge, toggle, LED. Mobilda 4 tadan.

dash.metric("Temp", &t)

MOʻrta · ½

Biroz kenglik kerak — slider, progress, select, text.

dash.slider("PWM", &v, 0, 255)

LKatta · toʻliq

Toʻliq kenglik, balandroq — chart, gauge, xarita, log, jadval.

dash.chart("Temp", &t).size(RSIZE_L)

Qoʻllab-quvvatlanadigan platalar

Bitta kod — har qanday ESP'da. Oʻrnatilgan soxta sensorlar bilan butun UI'ni plata kelishidan oldin tuzasiz.

ESP32 Xtensa · dual-core

ESP32-S3 dual-core · USB · PSRAM

ESP32-C3 RISC-V · single-core

ESP32-C6 RISC-V · Wi-Fi 6 · Zigbee

ESP8266 single-core · verified

Jonli galereya

jonli render — barcha vidjetlar qurilma UI'sida

Bitta dashboard — toʻrt til

Kutubxona oʻz chromeini oʻzi tarjima qiladi; dash.translate() esa siz yozgan matnlarni — vidjet sarlavhalari, sahifa nomlari, select variantlari. Tilni tanlang — sarlavhalar ham almashadi (arabcha RTLga oʻtadi):

9:41

RisalDash

Overview

System

CPU

42%

RAM

61%

Temperature

24.4°C

Mode

Auto

Heater

http://192.168.4.1/?lang=en

// Your strings, localized at render time. English is the source.
struct Row { const char *en, *ru, *uz, *ar; };
static const Row DICT[] = {
  {"Temperature", "Температура", "Harorat", "الحرارة"},
  {"System",      "Система",     "Tizim",   "النظام"},
  /* …one row per author string… */
};

const char *tr(const char *s, const char *lang) {
  int col = lang[0]=='r'?1 : (lang[0]=='u'&&lang[1]=='z')?2
          : lang[0]=='a'?3 : 0;
  if (col == 0) return s;              // English → as written
  for (auto &r : DICT)
    if (!strcmp(r.en, s)) return col==1?r.ru:col==2?r.uz:r.ar;
  return s;                            // unmapped → leave it
}

void setup() {
  dash.translate(tr);                  // register once — that's it
  dash.gauge("Temperature", &t, 0, 50, "C");
}

Bitta hook barcha muallif matnlari uchun: vidjet sarlavhalari, sahifa/guruh/tab nomlari, tugma yozuvlari va select variantlari. dash.translate() chaqirilmaguncha xarajatsiz.

LCD panelida xuddi shu gʻoya bitta halol cheklov bilan: standart shrift faqat lotin, shuning uchun ekran en / uz ni tabiiy koʻrsatadi va ru / ar uchun inglizchaga qaytadi — bu veb-dashboard esa toʻrttasini toʻliq beradi.

Barcha vidjetlar + kod

Kerakli vidjetning bitta qatorini nusxalang. Chip default katak oʻlchamini koʻrsatadi (S/M/L).

Koʻrsatish

📊 Metric / Value S

dash.metric("CPU", &cpu, "%")

Katta raqam + panel. Asosiy qiymat koʻrsatkichi.

in ESPUI

🎯 Gauge L

dash.gauge("Voltage", &v, 0, 14, "V")

Zonali doiraviy koʻrsatkich. (ESPUI'da yoʻq)

RisalDash only

📈 Chart / Sparkline L

dash.chart("Temp", &t, "°C").history(60)

Vaqt qatori grafigi. (ESPUI'da yoʻq)

RisalDash only

🏷️ Status badge S

dash.badge("State", &st)

Rangli holat: ok/warn/bad, onlayn/oflayn. (ESPUI'da yoʻq)

RisalDash only

🔖 Label S

dash.label("Status", &statusStr)

Matnli holat qatori (HTML boʻlishi mumkin).

in ESPUI

💡 LED indicator S

dash.led("Link", &linkUp)

Yoniq/oʻchiq indikator nuqtasi. (ESPUI'da yoʻq)

RisalDash only

🤖 Robot face S

dash.face("Mood", &mood)

Animatsion robot koʻzlari: 10 emotsiya + pirpirash, oʻzgaruvchi yoki AI agentga javob beradi. (ESPUI'da yoʻq)

RisalDash only

🧊 3D orientation cube S

dash.cube("Orientation", &pitch, &roll, &yaw)

IMU burchaklari bilan aylanadigan 3D kub (MPU6050/9250) — yoʻnalish bir qarashda. (ESPUI'da yoʻq)

RisalDash only

🌡️ Heatmap / thermal L

dash.heatmap("Thermal", 32, 24)

Issiqlik xaritasi (canvas, jet colormap) — MLX90640 32x24 yoki istalgan 2D maydon. (ESPUI'da yoʻq)

RisalDash only

📶 Progress bar M

dash.progress("Upload", &pct)

Amal jarayoni, 0-100%. (ESPUI'da yoʻq)

RisalDash only

🗂️ Key-Value table L

dash.table("System").row("uptime",&up)

Kalit-qiymat juftlari: tizim maʼlumoti. (ESPUI'da yoʻq)

RisalDash only

📜 Log / Console L

dash.log("Events", 5).print("...")

Aylantiriladigan hodisalar jurnali. (ESPUI'da yoʻq)

RisalDash only

🖼️ Image L

dash.image("Cam", "/snapshot.jpg")

URL orqali rasm / kamera surati.

in ESPUI

🤖 AI hint L

dash.ai("Light turns off at 23:00")

AI agentdan maslahat kartasi. (RisalDash xususiyati)

RisalDash only

🗺️ Mini-map / GPS L

dash.map("Track", &lat, &lon)

Jonli xarita (Leaflet, qorongʻi tema) marker va iz bilan. GPS trekerlar, marshrutlar. (ESPUI'da yoʻq)

RisalDash only

Boshqaruv

🔘 Toggle / Switcher S

dash.toggle("Pump", &pump, [](bool v){...})

Rele, nasos yoki chiroqni yoqish/oʻchirish. Asosiy avtomatlashtirish boshqaruvi.

in ESPUI

🔲 Button M

dash.button("Restart", [](){ ESP.restart(); })

Bir martalik amal: qayta ishga tushirish, kalibrlash, hisoblagichni nolga tushirish.

in ESPUI

🎚️ Slider M

dash.slider("Brightness", &pwm, 0, 255)

Silliq qiymat: yorqinlik, tezlik, chegara.

in ESPUI

🔢 Number S

dash.number("Setpoint", &target, 0, 100)

Min/maks va qadam bilan aniq raqamli kiritish.

in ESPUI

⌨️ Text Input M

dash.text("SSID", &ssid)

Satr: tarmoq nomi, MQTT mavzusi, qurilma yorligʻi.

in ESPUI

📝 Text Area M

dash.textarea("Notes", &notes)

Koʻp qatorli matn: eslatmalar, JSON, kichik konfiguratsiya. (ESPUI'da yoʻq)

RisalDash only

🔑 Password M

dash.password("WiFi pass", &pass)

Parol/tokenlar uchun yashirin kiritish. (ESPUI'da yoʻq)

RisalDash only

📋 Select / Dropdown M

dash.select("Mode", &mode, {"Auto","Manual","Off"})

Bir nechta variantdan birini tanlash — rejim.

in ESPUI

🔘 Radio group M

dash.radio("Fan", &lvl, {"Low","Mid","High"})

Tugmalar bilan oʻzaro istisno tanlov. (ESPUI'da yoʻq)

RisalDash only

🎨 Color picker S

dash.color("LED color", &rgb)

RGB lentalar/yoritish uchun rang tanlagich. (ESPUI'da yoʻq)

RisalDash only

🕐 Time / Date M

dash.time("Alarm", &alarmTime)

Vaqt/sana oʻrnatish: budilnik, jadval.

in ESPUI

🎮 D-Pad M

dash.pad("Drive", [](int dir){...})

D-pad boshqaruvi: robot, kamera, mashina.

in ESPUI

🕹️ Joystick M

dash.joystick("Move", [](int x,int y){...})

Analog 2D X/Y kirish. (Pad kengaytmasi)

RisalDash only

➕ Stepper +/- M

dash.stepper("Count", &n, 1)

-/+ tugmalari bilan oshirish/kamaytirish. (ESPUI'da yoʻq)

RisalDash only

📤 File / OTA upload M

dash.ota("Firmware")

Brauzerdan fayl/proshivka yuklash. (ESPUI'da yoʻq)

RisalDash only

⌨️ Terminal / console M

dash.terminal("Shell", handleCmd)

Konsol: chiqish + WebSocket orqali buyruq kiritish. Dashboarddan tuzatish/boshqaruv. (ESPUI'da yoʻq)

RisalDash only

📻 Radio station browser M

dash.radioBrowser("Stations", &listText, [](const String& v){ playFirst(v); })

Tahrirlanadigan internet-radio stansiyalar roʻyxati — tortib tartiblash, nom/URL'ni joyida tahrirlash, qoʻshish/oʻchirish. Qiymat — har qatorda «Name | URL | Meta»; ES8311 kodek pleyeri bilan ishlaydi. (ESPUI'da yoʻq)

RisalDash only

Tartib

🧩 Group / Panel

dash.group("Power")

Vidjetlarni vizual guruhlaydigan boʻlim.

in ESPUI

📑 Tab

dash.tab("Sensors")

Katta dashboardni boʻlish uchun tab.

in ESPUI

➖ Separator

dash.separator("Settings")

Bloklar orasida sarlavhali ajratgich.

in ESPUI

↔️ Span / Width

widget.span(2)

Kartani N ustunga choʻzish. (ESPUI'da yoʻq)

RisalDash only