Віртуальні панелі оператора
Як створити зручний інтерфейс для керування скриптами та периферією?
Одна з ключових переваг oCBot — ви самі створюєте інтерфейс, який вам зручний. Не потрібно звикати до того, як "намалював" виробник. Ви будуєте панель оператора так, як зручно саме вам.
Ця стаття — про те, як створюються віртуальні панелі оператора та як вони роблять керування процесами інтуїтивно зрозумілим.
Про що ця стаття#
Це — практичний посібник зі створення кастомних інтерфейсів для керування автоматизацією.
ТУТ НЕ БУДЕ#
- ❌ Написання HTML/CSS/JavaScript. Панелі створюються через веб-інтерфейс без коду.
- ❌ Прив'язки до конкретних процесів. Ви самі обираєте, що виводити на екран.
ТУТ БУДЕ#
- ✅ Пояснення, що таке віртуальна панель оператора.
- ✅ Які елементи керування доступні.
- ✅ Як створити панель для вашого конкретного процесу.
Ключова думка цього тексту: Віртуальна панель оператора — це ваш пульт керування. Ви вирішуєте, які показники бачити, які кнопки натискати та як усе виглядає. Панель працює на будь-якому пристрої з браузером.
Що таке віртуальна панель оператора?#
Віртуальна панель оператора — це веб-сторінка, яку ви створюєте самі для керування своїми процесами. Вона складається з елементів, які ви розміщуєте так, як вам зручно.
Де вона працює:
- На будь-якому комп'ютері з браузером.
- На планшеті чи смартфоні (адаптивний дизайн).
- Локально в мережі (без інтернету).
Що ви бачите на панелі:
- Поточні показники з давачів (температура, рівень, об'єм).
- Стан виконавчих механізмів (ввімкнено/вимкнено).
- Кнопки для запуску/зупинки/паузи.
- Повзунки для регулювання потужності.
- Графіки змін параметрів у реальному часі.
Доступні елементи керування#
1. Індикатори (виведення даних)#
Показують поточні значення параметрів.
| Елемент | Опис | Приклад |
|---|---|---|
| Цифровий індикатор | Відображає числове значення | "25.3°C" |
| Стрілковий індикатор | Відображає значення на шкалі | Тиск, рівень |
| Кольоровий індикатор | Змінює колір залежно від значення | Зелений (норма) → Червоний (аварія) |
| Графік | Показує зміну параметра в часі | Температура за останню годину |
| Світлодіод | Відображає стан (вкл/викл) | Робота нагрівача |
2. Кнопки та перемикачі (введення команд)#
Дозволяють керувати процесами.
| Елемент | Опис | Приклад |
|---|---|---|
| Кнопка | Виконує дію при натисканні | "Старт", "Стоп", "Пауза" |
| Перемикач (Toggle) | Вмикає/вимикає режим | "Автоматичний/Ручний" |
| Кнопка з підтвердженням | Вимагає підтвердження перед виконанням | "Запустити сценарій" |
| Меню вибору | Дозволяє обрати варіант зі списку | "Режим: Денний/Нічний" |
3. Регулятори (плавне керування)#
Дозволяють змінювати параметри в діапазоні.
| Елемент | Опис | Приклад |
|---|---|---|
| Повзунок (Slider) | Плавне регулювання значення | Потужність нагріву (0-100%) |
| Циферблат (Dial) | Регулювання обертанням | Швидкість мішалки |
| Поле введення числа | Точне введення значення | "Задати температуру: 72°C" |
4. Комбіновані елементи#
Об'єднують кілька функцій.
| Елемент | Опис | Приклад |
|---|---|---|
| Панель стану | Група індикаторів для одного вузла | Стан усіх давачів дистилятора |
| Група кнопок | Кілька кнопок для керування етапами | "Розігрів", "Стабілізація", "Відбір" |
| Вкладки (Tabs) | Різні панелі для різних процесів | Вкладка "Дистиляція", вкладка "Теплиця" |
Як створити панель оператора?#
Крок 1: Визначте, що ви хочете бачити та керувати#
Відповіть на запитання:
- Які показники для вас найважливіші?
- Які дії ви виконуєте найчастіше?
- Що має бути на головному екрані?
Приклад (дистиляція):
Я хочу бачити температуру куба, температуру в колоні, поточну потужність ТЕНу та стан клапана відбору. Також мені потрібні кнопки "Старт", "Пауза" та "Перехід на наступний крок".
Крок 2: Оберіть елементи для панелі#
На основі ваших потреб оберіть елементи:
| Ваша потреба | Елемент |
|---|---|
| Бачити температуру | Цифровий індикатор + графік |
| Бачити стан клапана | Світлодіод (відкрито/закрито) |
| Керувати потужністю | Повзунок (0-100%) |
| Запускати сценарій | Кнопка "Старт" |
Крок 3: Розмістіть елементи на панелі#
Перейдіть у веб-інтерфейс → розділ "Панелі оператора":
- Натисніть "Створити панель".
- Дайте назву панелі (наприклад, "Управління дистиляцією").
- Додавайте елементи з бібліотеки.
- Для кожного елемента вкажіть: тип, розмір, джерело даних (який давач або скрипт).
- Перетягуйте елементи, щоб розмістити їх у зручному порядку.
- Збережіть панель.
Крок 4: Використовуйте панель#
Відкрийте панель у браузері:
- На комп'ютері — введіть IP-адресу контролера в адресний рядок.
- На телефоні/планшеті — відкрийте той самий URL.
Панель оновлюється в реальному часі через WebSocket. Ви бачите зміни миттєво.
Приклади панелей для різних процесів#
Приклад 1: Панель для дистиляції#
┌─────────────────────────────────────────────────────┐
│ УПРАВЛІННЯ ДИСТИЛЯЦІЄЮ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ Температура куба: 85.3°C ████████████░░░░░ │ │
│ │ Температура колони: 78.2°C ██████████░░░░░░░░ │ │
│ │ Потужність ТЕНу: 55% ██████░░░░░░░░░░░ │ │
│ │ Стан клапана: ВІДКРИТО 🟢 │ │
│ │ Поточний крок: Відбір тіла (3/5) │ │
│ └─────────────────────────────────────────────────┘ │
│ [▶ Старт] [⏸ Пауза] [⏭ Наступний крок] [⏹ Стоп] │
│ ┌─────────────────────────────────────────────────┐ │
│ │ Графік температури за останні 10 хвилин: │ │
│ │ ██████████████████████████████████████████████ │ │
│ └─────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────┘
Приклад 2: Панель для теплиці#
┌─────────────────────────────────────────────────────┐
│ УПРАВЛІННЯ ТЕПЛИЦЕЮ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ Температура: 25.3°C ████████████░░░░░ │ │
│ │ Вологість: 65% ████████████░░░░░░░ │ │
│ │ Полив: ВИМКНЕНО ⚪ │ │
│ │ Вентиляція: ВВІМКНЕНО 🟢 │ │
│ │ Освітлення: ВВІМКНЕНО 🟢 │ │
│ │ Режим: ДЕННИЙ 🌞 │ │
│ └─────────────────────────────────────────────────┘ │
│ [Полив вручну] [Вентиляція] [Освітлення] │
│ [🌙 Нічний режим] [☀️ Денний режим] │
└─────────────────────────────────────────────────────┘
Приклад 3: Панель для пивоваріння#
┌─────────────────────────────────────────────────────┐
│ УПРАВЛІННЯ ЗАТИРАННЯМ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ Температура затору: 63.0°C ████████████░░░ │ │
│ │ Цільова: 63°C │ │
│ │ Поточна пауза: МАЛЬТОЗНА (2/4) │ │
│ │ Час паузи: 12:30 / 60:00 │ │
│ │ Мішалка: ВВІМКНЕНО 🟢 │ │
│ └─────────────────────────────────────────────────┘ │
│ [▶ Старт] [⏸ Пауза] [⏹ Стоп] │
│ [Перемішати вручну] │
│ ┌─────────────────────────────────────────────────┐ │
│ │ Проба на йод: 🔴 НЕ ГОТОВО │ │
│ └─────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────┘
Напівавтоматичний режим з панелями#
Віртуальні панелі ідеально підходять для напівавтоматичного керування:
Сценарій: Контрольована дистиляція#
- Ви запускаєте автоматичний сценарій кнопкою "Старт" на панелі.
- Сценарій виконує всі етапи: розігрів, стабілізація, відбір голів, відбір тіла.
- Ви бачите всі показники в реальному часі.
- Якщо потрібно втрутитися — натискаєте "Пауза", змінюєте параметри (наприклад, зменшуєте потужність повзунком), потім "Продовжити".
- На критичному етапі (перехід від голів до тіла) сценарій чекає, поки ви натиснете "Підтвердити перехід".
Чому це зручно?#
- Ви не прив'язані до комп'ютера — панель працює на будь-якому пристрої (планшет біля апарату, телефон у кишені).
- Ви бачите повну картину — усі показники на одному екрані.
- Ви керуєте процесом інтуїтивно — без зайвих кліків і навігації.
- Ви маєте повний контроль — автоматика робить рутинну роботу, ви — приймаєте важливі рішення.
Часті запитання (FAQ)#
Чи потрібно знати програмування для створення панелі?
Ні. Усі панелі створюються через веб-інтерфейс методом "перетягнути та розмістити".
Чи можна створити кілька панелей для різних процесів?
Так. Ви можете створити окрему панель для дистиляції, окрему для теплиці, окрему для безпеки тощо.
Чи можна налаштувати доступ до панелі для інших користувачів?
Так, ви можете надати доступ до панелі іншим пристроям у локальній мережі або через інтернет (з налаштуванням безпеки).
Чи оновлюються дані на панелі в реальному часі?
Так. Панель використовує WebSocket для миттєвого оновлення всіх показників.
Чи можна використовувати панель на смартфоні?
Так. Інтерфейс адаптивний і працює на будь-якому пристрої з браузером.
Що далі? (Навігація по базі знань)#
Тепер, коли ви знаєте про базові скрипти та панелі оператора, ви можете перейти до складних сценаріїв:
- Складні сценарії та логіка автоматизації — як об'єднувати скрипти в багатокрокові процеси.
Запрошення до діалогу: Яку панель ви хочете створити для свого процесу? Напишіть нам — ми допоможемо з дизайном та налаштуванням.