Создаем виджеты для 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-запросы можно тестировать прямо на странице с документацией, выполнив следующее:

1. Выберите запрос, например: /api/display/draw (вывод текста и картинок на экран).

2. Нажмите Try it out.

3. Скорректируйте параметры запроса.

4. Нажмите кнопку Execute, чтобы отправить запрос на BUSY Bar.

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

Как AI может помочь использовать HTTP API

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

ℹ️ Для продвинутых пользователей мы также предлагаем готовые библиотеки для Python и jаvascript, реализующие наш 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):

У меня есть девайс с цветным 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 шрифта: small (высота 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 раз в секунду. Время выведем крупным шрифтом — чаще всего увидеть его важнее, чем дату.

Шаг 1: Вывод времени и даты

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

Результат: AI написал скрипт на языке Python. Его нужно сохранить в файл с расширением .py и запустить командой python file.py (Windows) или python3 file.py (Linux/macOS).

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

Неплохо, но это статическая картинка. Давайте попросим AI заставить часы идти, а заодно исправим выравнивание по горизонтали и добавим цвета.

Шаг 2: Ход часов, цвета и выравнивание

? Промпт к AI: Сделай, чтобы часы шли и не выключались. Текст сейчас не по центру, сдвинь его вправо на 3 пикселя. Выведи время светло-зеленым.

Скрипт от AI: clock-2.py

Результат:

Мы получили готовый виджет всего за 3 промпта. Единственное замечание — AI выравнивает текст по центру с погрешностью, т.к. символы имеют разную ширину (например, цифр 1 и 5). В следующей версии HTTP API мы добавим выравнивание текста по горизонтали и вертикали, что полностью решит эту проблему.

Делаем погодный виджет

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

Шаг 1: Вывод погоды

? Промпт к AI: Сделай скрипт, выводящий поочередно погоду в 3 городах: Dubai, London, New York с паузой 3 секунды. Погоду бери из открытых источников без необходимости регистрации.

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

Результат:

Видно, что скрипт успешно получает погодные данные, но из-за быстрой прокрутки текста и частого переключения городов прочитать сейчас ничего невозможно. Исправим это.

Шаг 2: Улучшение интерфейса

? Промпт к AI: Слева на экран выведи иконку погоды (16×16), пусть скрипт сам их нарисует. Справа выведи: город (мелко) и температуру (крупно).

Скрипт от AI: weather-2.py

Результат:

Уже лучше, но есть еще пара недочетов, которые мы устраним следующими запросами к AI.

Шаг 3: Разбираемся со знаком градуса

? Промпт к AI: Символ градуса не отображается. Девайс точно умеет выводить этот символ шрифтом big.

Скрипт от AI: weather-3.py

Результат:

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

Шаг 4: Делаем красивые иконки

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

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

Шаг 1: Вывод графика пинг

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

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

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

Результат:

Отлично, почти готово. Но непонятно, какие именно значения мы видим на графике. Но это и не так важно. Важнее, чтобы сразу можно было увидеть отклонения пинга от нормальных значений. Мы можем использовать разные цвета, чтобы обозначить хороший, средний и плохой пинг.

Шаг 2: Разукрашиваем график

? Промпт к AI: Пусть на графике столбцы, соответствующие 0-20 мс, будут зелеными, 21-50 — желтыми, а больше 50 — красными. Высота шкалы — 100 мс.

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

Результат:

Супер! Осталась одна маленькая, косметическая, деталь — вывод логотипа игры в левой части экрана.

Шаг 3: Добавляем логотип игры

? Промпт к AI: Давай еще слева от графика выведем логотип игры CS:GO.

AI просит, чтобы файл с логотипом игры назывался csgo.png и лежал в папке со скриптом. Нагуглим подходящую картинку, смасштабируем до 16×16 и сохраним.

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

Результат:

? Готово! Всего за несколько шагов, не прибегая к программированию, мы смогли создать наглядный виджет. Его можно использовать не только для мониторинга доступности игрового сервера, но и в целом для мониторинга доступности любых других серверов в LAN или интернете.

Скоро Kickstarter

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

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

Instagram — продукт компании Meta Platforms Inc., признанной экстремистской организацией, деятельность которой запрещена на территории Российской Федерации.