Создаем виджеты для BUSY Bar без кодинга
BUSY Bar — это продвинутый фокус-таймер с функцией блокировки отвлекающих приложений и интеграцией в умный дом. В этом посте мы покажем как, используя HTTP API, можно создавать виджеты для BUSY Bar. Это смогут сделать не только разработчики, но и обычные пользователи.
Далее вы узнаете как:
Вывести изображения и текст на экран BUSY Bar.
Взаимодействовать с устройством прямо из браузера.
Создать виджеты без программирования.
Прежде чем начать создавать виджеты, давайте познакомимся с HTTP API и с тем, как его использовать.
Один API для всех типов подключения
HTTP API — это протокол для взаимодействия с BUSY Bar, доступный через все 3 поддерживаемые типа подключения:
USB Ethernet — при подключении BUSY Bar к ПК, он определяется как сетевой адаптер с виртуальной сетью.
Wi-Fi сеть — быстрое, беспроводное подключение. BUSY Bar можно разместить где угодно в зоне действия Wi-Fi.
Cloud-сервер — удаленное управление через интернет с шифрованием и авторизацией по ключу, используя API-токен, выпускаемый в личном кабинете BUSY.
Благодаря использованию одинакового HTTP API во всех трех типах подключения, можно переключаться между ними без переписывания кода.
Как работает HTTP API в BUSY Bar
Как следует из названия, HTTP API основан на протоколе HTTP, который используется для передачи данных в интернете, между браузером и web-сервером. Когда вы вводите URL сайта, ваш браузер отправляет HTTP запрос и сервер возвращает web-страницу в ответе.
Взаимодействие с 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 API прямо на устройстве
Все поддерживаемые HTTP-запросы, их параметры и форматы ответов описаны в документации HTTP API, которая хостится прямо на устройстве. При подключении по USB она доступна по адресу: http://10.0.4.20/docs.
Открыть документацию HTTP API также можно с главной страницы web-интерфейса 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!».
[Видео] При успешном выполнении запроса BUSY Bar выводит на экран строку "HELLO, WORLD!"
Как AI может помочь использовать HTTP API
В сети есть тонны гайдов, обсуждений и примеров кода для работы с HTTP. А еще со всеми этими знаниями умеют работать AI-ассистенты. Поэтому даже без навыков программирования вы можете создавать виджеты для BUSY Bar.
ℹ️ Для продвинутых пользователей мы также предлагаем готовые библиотеки для Python и JavaScript, реализующие наш HTTP API.
Для создания виджета с помощью AI-ассистента (ChatGPT, Gemini, Claude и других) нужно:
Объяснить ему, как выводить картинки и текст на экран (1 промпт).
Объяснить, что должен делать виджет (1-2 промпта).
Попросить устранить недостатки (0-10 промптов).
В результате вы получите скрипт, который запускается на ПК и по HTTP API отправляет UI виджета на подключенный по USB девайс.
Дальше мы покажем на реальных практических примерах, как можно сделать виджет, не прибегая к программированию. Мы будем использовать ChatGPT. Все сгенерированные AI-скрипты доступны по ссылкам на каждом шаге.
Шаг 0: Учим AI использовать экран BUSY Bar
При создании каждого виджета сначала нужно объяснить AI, как использовать HTTP API, а именно два запроса:
/api/assets/upload — для загрузки картинок в память BUSY Bar.
/api/display/draw — для вывода текста и ранее загруженных картинок.
Промпт к AI (сделан на основе документации HTTP API):
Результат: AI теперь умеет через USB выводить на экран изображения и тексты, а также использовать разные шрифты и цвета текста.
Делаем виджет часов
Для начала, просто для тренировки, сделаем очень простой виджет — часы с датой. Время и дата будут браться с ПК и обновляться на экране BUSY Bar раз в секунду. Время выведем крупным шрифтом — чаще всего увидеть его важнее, чем дату.
Шаг 1: Вывод времени и даты
🤖 Промпт к AI: Выведи на экран текущую дату (мелко) и время (крупно) по центру экрана. Формат даты — день.месяц.год. Время выведи с секундами.
Результат: AI написал скрипт на языке Python. Его нужно сохранить в файл с расширением .py и запустить командой python file.ру (Windows) или python3 file.ру (Linux/macOS).
Скрипт от AI: clock-1.py
Неплохо, но это статическая картинка. Давайте попросим AI заставить часы идти, а заодно исправим выравнивание по горизонтали и добавим цвета.
Шаг 2: Ход часов, цвета и выравнивание
🤖 Промпт к AI: Сделай, чтобы часы шли и не выключались. Текст сейчас не по центру, сдвинь его вправо на 3 пикселя. Выведи время светло-зеленым.
Скрипт от AI: clock-2.py
Результат:
[Видео] Виджет часов. Шаг 2: Готовый виджет
Мы получили готовый виджет всего за 3 промпта. Единственное замечание — AI выравнивает текст по центру с погрешностью, т.к. символы имеют разную ширину (например, цифр 1 и 5). В следующей версии HTTP API мы добавим выравнивание текста по горизонтали и вертикали, что полностью решит эту проблему.
Делаем погодный виджет
Скрипт, запущенный на ПК, будет получать погоду из открытых источников в интернете и выводить ее на экран BUSY Bar для нескольких городов. Для каждого города скрипт выведет иконку погоды, город и температуру.
Шаг 1: Вывод погоды
🤖 Промпт к AI: Сделай скрипт, выводящий поочередно погоду в 3 городах: Dubai, London, New York с паузой 3 секунды. Погоду бери из открытых источников без необходимости регистрации.
Скрипт от AI: weather-1.py
Результат:
[Видео] Погодный виджет. Шаг 1: Вывод погоды в 3 городах
Видно, что скрипт успешно получает погодные данные, но из-за быстрой прокрутки текста и частого переключения городов прочитать сейчас ничего невозможно. Исправим это.
Шаг 2: Улучшение интерфейса
🤖 Промпт к AI: Слева на экран выведи иконку погоды (16×16), пусть скрипт сам их нарисует. Справа выведи: город (мелко) и температуру (крупно).
Скрипт от AI: weather-2.py
Результат:
[Видео] Погодный виджет. Шаг 2: Новое расположение элементов на экране
Уже лучше, но есть еще пара недочетов, которые мы устраним следующими запросами к AI.
Шаг 3: Разбираемся со знаком градуса
🤖 Промпт к AI: Символ градуса не отображается. Девайс точно умеет выводить этот символ шрифтом big.
Скрипт от AI: weather-3.py
Результат:
[Видео] Погодный виджет. Шаг 3: Теперь символ градуса отображается корректно
Почти готово. Смущают только непонятные погодные иконки. Похоже, что это слабая сторона ChatGPT. Почему бы тогда не использовать погодные иконки из эмодзи?
Шаг 4: Делаем красивые иконки
Нужно подготовить иконки для основных погодных явлений (солнечно, облачно, дождь и т.д.). Сами иконки можно взять в открытых источниках — например, существует отличный шрифт Noto Color Emoji 16.0 от компании Google. Изображения всех символов доступны в репозитории на GitHub.
Нам понадобятся картинки:
Эти картинки нужно смасштабировать до 16×16 и сохранить в папке icons, которая должна быть расположена в папке со скриптом. После этого нужно попросить AI доработать скрипт.
🤖 Промпт к AI: Сделай вывод иконок из готовых файлов, которые я положил в папку icons: cloud.png, fog.png, partly.png, rain.png, snow.png, sun.png.
Скрипт от AI: weather-4.py
Результат:
[Видео] Погодный виджет. Шаг 4: Готовый виджет
🚀 Готово! В скрипте можно изменять список городов. Можно оставить только один город и тогда будет отображаться только его погода, обновляясь каждые 3 секунды.
Делаем пинг-монитор
Ping — это способ проверки доступности устройств в сети. Смысл в отправке специального запроса на IP-адрес проверяемого узла и измерении времени от отправки запроса до получения ответа.
Этот параметр важен в некоторых онлайн играх, где от скорости реакции игрового сервера и качества соединения может зависеть исход игры. Поэтому полезно иметь индикатор пинга, обновляющийся в реальном времени.
Шаг 1: Вывод графика пинг
🤖 Промпт к AI: Сделай скрипт, который выводит график пинга игрового сервера по IP. Обновление графика раз в секунду. В верхнем левом углу выведи пинг маленьким шрифтом.
Скрипт от AI: ping-monitor-1.py
AI сгенерировал скрипт, который принимает IP-адрес сервера в качестве параметра. Поэтому адрес нужно указать при запуске скрипта. Например, если адрес сервера — 8.8.8.8, то для мониторинга его доступности команда будет выглядеть так:
python3 ping-monitor-1.ру --server 8.8.8.8.
Результат:
[Видео] Пинг-монитор. Шаг 1: На экран выведен график и текущее значение пинга
Отлично, почти готово. Но непонятно, какие именно значения мы видим на графике. Но это и не так важно. Важнее, чтобы сразу можно было увидеть отклонения пинга от нормальных значений. Мы можем использовать разные цвета, чтобы обозначить хороший, средний и плохой пинг.
Шаг 2: Разукрашиваем график
🤖 Промпт к AI: Пусть на графике столбцы, соответствующие 0-20 мс, будут зелеными, 21-50 — желтыми, а больше 50 — красными. Высота шкалы — 100 мс.
Скрипт от AI: ping-monitor-2.py
Результат:
[Видео] Пинг-монитор. Шаг 2: График разукрашивается в соответствии со значением пинга
Супер! Осталась одна маленькая, косметическая, деталь — вывод логотипа игры в левой части экрана.
Шаг 3: Добавляем логотип игры
🤖 Промпт к AI: Давай еще слева от графика выведем логотип игры CS:GO.
AI просит, чтобы файл с логотипом игры назывался csgo.png и лежал в папке со скриптом. Нагуглим подходящую картинку, смасштабируем до 16×16 и сохраним.
Скрипт от AI: ping-monitor-3.py
Результат:
[Видео] Пинг-монитор. Шаг 3: Готовый виджет
🚀 Готово! Всего за несколько шагов, не прибегая к программированию, мы смогли создать наглядный виджет. Его можно использовать не только для мониторинга доступности игрового сервера, но и в целом для мониторинга доступности любых других серверов в LAN или интернете.
Скоро Kickstarter
В начале 2026 года мы запустим нашу Kickstarter-кампанию. Оформите предзаказ в нашем магазине чтобы получить доступ к специальной цене для первых заказов когда кампания начнется: https://busy.bar/shop
Instagram — продукт компании Meta Platforms Inc., признанной экстремистской организацией, деятельность которой запрещена на территории Российской Федерации.































