19.11.2025
2 хв
501
BUSY Bar — це сучасний пристрій для фокус-роботи, який підтримує створення простих і корисних віджетів без програмування. Через зручне HTTP-API користувач може додавати власні елементи інтерфейсу, оновлювати інформацію в реальному часі та інтегрувати BUSY Bar у робочі процеси або розумний дім. Пристрій підходить як новачкам, так і технічним ентузіастам, адже налаштування виконується легко, а можливості кастомізації майже безмежні.
BUSY Bar – девайс для концентрації та сучасний Pomodoro-таймер з блокуванням відволікаючих додатків та інтеграцією в розумний будинок. У цьому пості ми покажемо, як за допомогою HTTP API створювати віджети для BUSY Bar. Це зможуть зробити не лише розробники, а й звичайні користувачі.
Далі ви дізнаєтесь як:
Вивести зображення та текст на екран BUSY Bar.
Взаємодіяти з пристроєм безпосередньо з браузера.
Створити віджети без програмування.
Перш ніж почати створювати віджети, познайомимося з HTTP API і з тим, як його використовувати.
HTTP API – це протокол для взаємодії з BUSY Bar, доступний через всі 3 підтримувані типи підключення:
USB Ethernet — при підключенні BUSY Bar до ПК він визначається як мережевий адаптер з віртуальною мережею.
Wi-Fi мережа – швидке, бездротове підключення. BUSY Bar можна розмістити будь-де в зоні дії Wi-Fi.
Cloud-сервер — віддалене керування через інтернет із шифруванням та авторизацією за ключом, використовуючи API-токен, що випускається в особистому кабінеті BUSY.
Завдяки використанню однакового HTTP API у всіх трьох типах підключення можна перемикатися між ними без переписування коду.
Як випливає з назви, HTTP API базується на протоколі HTTP, який використовується для передачі даних в інтернеті між браузером і web-сервером. Коли ви вводите URL-адресу сайту, ваш браузер відправляє HTTP запит і сервер повертає веб-сторінку у відповіді.
Взаємодія з BUSY Bar влаштована схожим чином. BUSY Bar виконує роль сервера HTTP і чекає запити, а ПЗ на ПК виконує роль клієнта HTTP . Цим програмним забезпеченням може бути будь-яка програма, яка підтримує відправлення HTTP-запитів, наприклад, система розумного будинку, додаток або скрипт.
Завдяки широкій підтримці HTTP у мовах програмування, звертатися до BUSY Bar можна за допомогою кількох рядків коду. А деякі прості запити, такі як запит загальної інформації про BUSY Bar, можуть бути надіслані прямо з браузера – просто відкриттям http://10.0.4.20/api/status/system.
У разі використання USB-підключення IP-адреса BUSY Bar’а завжди буде 10.0.4.20 — вона навіть вказана на задній кришці пристрою. При підключенні через Wi-Fi IP-адреса призначається роутером. У наведених нижче прикладах ми будемо використовувати USB-підключення.
Усі підтримувані HTTP-запити, їх параметри та формати відповідей описані в документації HTTP API, яка хоститься прямо на пристрої. При підключенні через USB вона доступна за адресою: http://10.0.4.20/docs.
Відкрити документацію HTTP API також можна з головної сторінки веб-інтерфейсу BUSY Bar, який доступний за адресою http://10.0.4.20.
HTTP-запити можна тестувати прямо на сторінці з документацією, виконавши таке:
Виберіть запит, наприклад:
/api/display/draw(виведення тексту та зображення на екран).
Натисніть Try it out .
Налаштуйте параметри запиту.
Натисніть кнопку Execute , щоб надіслати запит на BUSY Bar.
Після натискання Execute браузер відправляє HTTP API-запит у BUSY Bar, який повертає відповідь, що вказує або успішне виконання ( OK ), або помилку ( Bad Request ), якщо із запитом щось негаразд. У разі успіху BUSY Bar виводить на екран “HELLO, WORLD!” .
У мережі є тонни гайдів, обговорень та прикладів коду для роботи з HTTP. А ще з усіма цими знаннями вміють працювати AI-помічники. Тому навіть без навичок програмування ви можете створювати віджети BUSY Bar. Для просунутих користувачів також є готові бібліотеки для Python та JavaScript , що реалізують наш HTTP API.
Для створення віджету за допомогою AI-асистента (ChatGPT, Gemini, Claude та інших) потрібно:
Пояснити йому, як виводити картинки та текст на екран (1 промпт).
Пояснити, що має робити віджет (1-2 промпти).
Попросити усунути недоліки (0-10 промптів).
В результаті ви отримаєте скрипт, який запускається на ПК і по HTTP API відправляє UI віджету на підключений USB девайс.
Далі ми покажемо на реальних практичних прикладах, як можна зробити віджет, не вдаючись до програмування. Ми будемо використовувати ChatGPT. Всі згенеровані AI-скрипти доступні за посиланнями на кожному кроці.
При створенні кожного віджету спочатку потрібно пояснити AI, як використовувати HTTP API, а саме два запити:
/api/assets/upload— щоб завантажити зображення в пам’ять BUSY Bar.
/api/display/draw— для виведення тексту та раніше завантажених картинок.
Промпт до AI (зроблений на основі документації HTTP API):
У мене є девайс із кольоровим LED екраном 72x16 та HTTP API. IP адреса девайсу – 10.0.4.20. HTTP API підтримує 2 POST запиту: /api/assets/upload - для завантаження картинки на пам'ять девайса (картинка передається в двійковому вигляді). Запитує 2 параметри: app_id (текстовий id програми) і file (ім'я файлу). /api/display/draw - для виведення тексту та раніше завантажених картинок. Є 3 шрифти: мало (висота 5), medium (висота 7), big (висота 10). width задає ширину поля виведення тексту (текст прокручуватиметься зі швидкістю scroll_rate, якщо не міститься). Приклад запиту:
{
"app_id": "my_app",
"elements": [
{
"id": "0",
"timeout": 6,
"type": "text",
"text": "Hello, World!",
"x": 1,
"y": 3,
"font": "big",
"color": "#AAFF00FF",
"width": 72,
"scroll_rate": 60,
},
{
"id": "1",
"timeout": 6,
"type": "image",
"path": "data.png",
"x": 0,
"y": 0,
}
]
}
Результат: AI тепер вміє через USB виводити на екран зображення та тексти, а також використовувати різні шрифти та кольори тексту.
Для початку, просто для тренування, зробимо дуже простий віджет годинник з датою. Час і дата братимуться з ПК та оновлюватимуться на екрані BUSY Bar раз на секунду. Час виведемо великим шрифтом – найчастіше побачити його важливіше, ніж дату.
Промпт до AI: Виведи на екран поточну дату (дрібно) та час (велико) по центру екрану. Формат дати – день. місяць. рік. Час виведи з секундами.
Результат: AI написав скрипт мовою Python. Його потрібно зберегти у файл з розширенням .py та запустити командою python file.py (Windows) або python3 file.py (Linux/macOS).
Скрипт від AI: clock-1.py
Непогано, але це статична картинка. Давайте попросимо AI змусити годинник йти, а заразом виправимо вирівнювання по горизонталі і додамо кольори.
🤖 Промпт до AI: Зроби, щоб годинник йшов і не вимикався. Текст зараз не по центру, зруш його праворуч на 3 пікселі. Виведи час світло-зеленим.
Скрипт від AI: clock-2.py
Результат:
Ми отримали готовий віджет лише за 3 промпти. Єдине зауваження – AI вирівнює текст центром з похибкою, т.к. символи мають різну ширину (наприклад, цифр 1 та 5). У наступній версії HTTP API ми додамо вирівнювання тексту по горизонталі та вертикалі, що повністю вирішить цю проблему.
Скрипт, запущений на ПК, отримуватиме погоду з відкритих джерел в інтернеті та виводитиме її на екран BUSY Bar для кількох міст. Для кожного міста скрипт виведе іконку погоди, місто та температуру.
🤖 Промпт до AI: Зроби скрипт, що по черзі виводить погоду в 3 містах: Dubai, London, New York з паузою 3 секунди. Погоду бери із відкритих джерел без необхідності реєстрації.
Скрипт від AI: weather-1.py
Результат:
Видно, що скрипт успішно отримує погодні дані, але через швидке прокручування тексту та частого перемикання міст прочитати зараз нічого неможливо. Виправимо це.
🤖 Промпт до AI: Зліва на екран виведи погодну іконку (16×16), нехай скрипт сам їх намалює. Праворуч виведи: місто (дрібно) та температуру (велико).
Скрипт від AI: weather-2.py
Результат:
Вже краще, але є ще кілька недоліків, які ми усунемо наступними запитами до AI.
🤖 Промпт до AI: Символ градуса не відображається. Девайс точно вміє виводити цей символ big шрифтом.
Скрипт від AI: weather-3.py
Результат:
Потрібно підготувати іконки для основних погодних явищ (сонячно, хмарно, дощ тощо). Самі іконки можна взяти у відкритих джерелах, наприклад, існує відмінний шрифт Noto Color Emoji 16.0 від компанії Google. Зображення всіх символів доступні в репозиторії GitHub .
Нам знадобляться картинки:
☀️
sun.png(сонячно) – символ u2600
☁️
cloud.png(хмарно) — символ u2601
🌫️
fog.png(туман) – символ u1f32b
⛅
partly.png(хмарно) — символ u1324
🌧️
rain.png(дощ) – символ u1327
🌨️
snow.png(сніг) – символ u1328
Ці зображення потрібно змасштабувати до 16×16 і зберегти в папці icons , яка має бути розташована в папці зі скриптом. Після цього потрібно попросити AI доопрацювати скрипт.
🤖 Промпт до AI: Зроби виведення іконок з готових файлів, які я поклав у папку icons :
cloud.png,fog.png,partly.png,rain.png,snow.png,sun.png.
Скрипт від AI: weather-4.py
Результат:
Готово! У скрипті можна змінювати список міст. Можна залишити лише одне місто і тоді буде відображатися лише його погода, оновлюючись кожні 3 секунди.
Ping – це спосіб перевірки доступності пристроїв у мережі. Сенс у надсиланні спеціального запиту на IP-адресу вузла, що перевіряється, і вимірі часу від відправки запиту до отримання відповіді.
Цей параметр важливий у деяких онлайн іграх, де від швидкості реакції ігрового сервера та якості з’єднання може залежати результат гри. Тому корисно мати індикатор пінгу, що оновлюється в реальному часі.
🤖 Промпт до AI: Зроби скрипт, який виводить графік пінгу ігрового сервера по IP. Оновлення графіка раз на секунду. У верхньому лівому кутку виведи пінг маленьким шрифтом.
Скрипт від AI: ping-monitor-1.py
AI згенерував скрипт, який приймає IP-адресу сервера як параметр. Тому адресу потрібно вказати під час запуску скрипта. Наприклад, якщо адреса сервера — 8.8.8.8, то моніторингу його доступності команда виглядатиме так: python3 ping-monitor-1.py –server 8.8.8.8
Результат:
Чудово, майже готове. Але незрозуміло, які саме значення ми бачимо на графіку. Але це не так важливо. Важливіше, щоб одразу можна було побачити відхилення пінгу від нормальних значень. Ми можемо використовувати різні кольори, щоб визначити хороший, середній і поганий пінг.
🤖 Промпт до AI: Нехай на графіку стовпці, що відповідають 0-20 мс, будуть зеленими, 21-50 – жовтими, а більше 50 – червоними. Висота шкали – 100 мс.
Скрипт від AI: ping-monitor-2.py
Результат:
🤖 Промпт до AI: Давай ще ліворуч від графіка виведемо логотип гри CS: GO.
AI просить, щоб файл із логотипом гри називався csgo.png та лежав у папці зі скриптом. Нагуглимо потрібну картинку, змасштабуємо до 16×16 і збережемо.
Скрипт від AI: ping-monitor-3.py
Результат:
Готово! За кілька кроків, не вдаючись до програмування, ми змогли створити наочний віджет. Його можна використовувати не лише для моніторингу доступності ігрового сервера, але й загалом для моніторингу доступності будь-яких інших серверів у LAN чи інтернеті.
BUSY Bar демонструє, наскільки простим може бути створення власних віджетів, якщо поєднати відкритий HTTP API та можливості сучасних AI-асистентів. Навіть без програмування користувач може швидко навчитися виводити текст, графіку, іконки погоди чи графіки пінгу — достатньо кількох зрозумілих промптів. Єдина логіка роботи однакова для всіх типів підключення, а документація доступна прямо на пристрої, що робить процес ще зручнішим. У результаті BUSY Bar стає не просто Pomodoro-таймером, а гнучким інструментом для створення персоналізованих мікроінтерфейсів під будь-які задачі.
