Статус-бар, виджеты, списки, плитки и графики.

Эта страница повторяет компоненты и готовые UI-паттерны из PipKit API: status bar, widgets, list/tile menu и graph subsystem.

12. Статус-бар

12.1. Включение

ui.configStatusBar()
    .height(18)
    .pos(Top)
    .style(Blur);
  • Стили: Solid (непрозрачная), Blur (поверх контента).

12.2. Наполнение

ui.setStatusBarText().left("PipGUI").center("12:34").right("Wi-Fi");
ui.setStatusBarBattery(87, Numeric);
ui.setStatusBarIcon().side(Left).icon(warning);

13. Виджеты

13.1. Scroll dots

ui.drawScrollDots()
    .pos(center, 220)
    .count(5)
    .activeIndex(2);

13.2. Кнопки

ui.updateButton()
    .label("Save")
    .pos(center, 180)
    .size(120, 40)
    .down(isDown);

13.3. Toggle switch

ui.updateToggleSwitch()
    .pos(center, 140)
    .size(78, 36)
    .value(wifiEnabled)
    .pressed(btn.wasPressed())
    .changed(changed);

13.4. Slider

ui.updateSlider()
    .pos(center, 114)
    .size(186, 24)
    .bind(value);

13.5. Прогресс

ui.drawProgress()
    .pos(20, 220)
    .size(180, 16)
    .value(65);

13.6. Круговой прогресс

ui.drawCircleProgress()
    .pos(center, 140)
    .radius(34)
    .value(72);

13.7. Drum roll

ui.drawDrumRoll()
    .pos(20, 60)
    .size(200, 40)
    .options(16, "Low", "Medium", "High")
    .selected(1);

14. Списки и плитки

14.1. Списочное меню

ui.updateList()
    .items(
        listItem("Settings", "Device configuration", ScreenSettings),
        listItem("About", "Firmware info", ScreenAbout)
    )
    .mode(Cards);

14.2. Плиточное меню

ui.updateTile()
    .items(
        tileItem("Main", "Главный экран", ScreenHome),
        tileItem("Settings", "Настройки", ScreenSettings)
    )
    .columns(2)
    .tileSize(100, 70);

15. Графики

15.1. Фон и сетка

ui.drawGraphGrid()
    .pos(10, 50)
    .size(220, 120)
    .direction(LeftToRight);

15.2. Линия графика

ui.drawGraphLine()
    .line(0)
    .value(sensorValue)
    .range(0, 100);

15.3. Пакетная отрисовка

int16_t samples[] = {10, 15, 12, 18, 20, 17};

ui.drawGraphSamples()
    .line(0)
    .samples(samples, 6)
    .range(0, 100);