Создаем виджеты для BUSY Bar без кодинга

BUSY Bar — девайс для концентрации и современный Pomodoro-таймер с блокировкой отвлекающих приложений и интеграцией в умный дом. Предыдущий пост: Зацените BUSY Bar — устройство для продуктивности.

В этом посте мы покажем, как с помощью HTTP API создавать виджеты для BUSY Bar. Это смогут сделать не только разработчики, но и обычные пользователи.

Далее вы узнаете как:

Прежде чем начать создавать виджеты, давайте познакомимся с HTTP API и с тем, как его использовать.

HTTP API — это протокол для взаимодействия с BUSY Bar, доступный через все 3 поддерживаемые типа подключения:

Благодаря использованию одинакового HTTP API во всех трех типах подключения, можно переключаться между ними без переписывания кода.

Как следует из названия, 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.

Все поддерживаемые HTTP-запросы, их параметры и форматы ответов описаны в документации HTTP API, которая хостится прямо на устройстве. При подключении по USB она доступна по адресу: http://10.0.4.20/docs.

Открыть документацию HTTP API также можно с главной страницы web-интерфейса BUSY Bar, который доступен по адресу http://10.0.4.20.

HTTP-запросы можно тестировать прямо на странице с документацией, выполнив следующее:

После нажатия Execute браузер отправляет HTTP API-запрос в BUSY Bar, который возвращает ответ, указывающий либо на успешное выполнение (OK), либо на ошибку (Bad Request), если с запросом что-то не так. В случае успеха BUSY Bar выводит на экран «HELLO, WORLD!».

В сети есть тонны гайдов, обсуждений и примеров кода для работы с HTTP. А еще со всеми этими знаниями умеют работать AI-ассистенты. Поэтому даже без навыков программирования вы можете создавать виджеты для BUSY Bar.

Для создания виджета с помощью AI-ассистента (ChatGPT, Gemini, Claude и других) нужно:

В результате вы получите скрипт, который запускается на ПК и по HTTP API отправляет UI виджета на подключенный по USB девайс.

Дальше мы покажем на реальных практических примерах, как можно сделать виджет, не прибегая к программированию. Мы будем использовать ChatGPT. Все сгенерированные AI-скрипты доступны по ссылкам на каждом шаге.

При создании каждого виджета сначала нужно объяснить AI, как использовать HTTP API, а именно два запроса:

Промпт к AI (сделан на основе документации HTTP API):

Результат: AI теперь умеет через USB выводить на экран изображения и тексты, а также использовать разные шрифты и цвета текста.

Для начала, просто для тренировки, сделаем очень простой виджет — часы с датой. Время и дата будут браться с ПК и обновляться на экране BUSY Bar раз в секунду. Время выведем крупным шрифтом — чаще всего увидеть его важнее, чем дату.

🤖 Промпт к AI: Выведи на экран текущую дату (мелко) и время (крупно) по центру экрана. Формат даты — день.месяц.год. Время выведи с секундами.

Результат: AI написал скрипт на языке Python. Его нужно сохранить в файл с расширением .py и запустить командой python file.ру (Windows) или python3 file.ру (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

Результат:

Почти готово. Смущают только непонятные погодные иконки. Похоже, что это слабая сторона ChatGPT. Почему бы тогда не использовать погодные иконки из эмодзи?

Нужно подготовить иконки для основных погодных явлений (солнечно, облачно, дождь и т.д.). Сами иконки можно взять в открытых источниках — например, существует отличный шрифт 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

Результат:

🚀 Готово! В скрипте можно изменять список городов. Можно оставить только один город и тогда будет отображаться только его погода, обновляясь каждые 3 секунды.

Ping — это способ проверки доступности устройств в сети. Смысл в отправке специального запроса на IP-адрес проверяемого узла и измерении времени от отправки запроса до получения ответа.

Этот параметр важен в некоторых онлайн играх, где от скорости реакции игрового сервера и качества соединения может зависеть исход игры. Поэтому полезно иметь индикатор пинга, обновляющийся в реальном времени.

🤖 Промпт к AI: Сделай скрипт, который выводит график пинга игрового сервера по IP. Обновление графика раз в секунду. В верхнем левом углу выведи пинг маленьким шрифтом.

Скрипт от AI: ping-monitor-1.py

AI сгенерировал скрипт, который принимает IP-адрес сервера в качестве параметра. Поэтому адрес нужно указать при запуске скрипта. Например, если адрес сервера — 8.8.8.8, то для мониторинга его доступности команда будет выглядеть так:

python3 ping-monitor-1.ру --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 или интернете.

В начале 2026 года мы запустим нашу Kickstarter-кампанию. Оформите предзаказ в нашем магазине чтобы получить доступ к специальной цене для первых заказов когда кампания начнется: https://busy.bar/shop

Подпишитесь на наши X, Instagram и Reddit, чтобы следить за обновлениями BUSY Bar.