Понятия не имею, зачем я пишу эту статью. Я понимаю, что на это уйдёт много времени, но вряд ли кто-то реально будет это читать. Тем более что интересно писать я не умею. Хотя может кому-то это пригодится, но буду считать, что пишу это для себя. Эта статья представляет собой краткое обобщение того, что я делал в 2020-2021 году.

Началом этого года я считаю лето 2020, так как именно тогда я появился в сети под своим нынешним ник-неймом. Я лишь начинающий Software Engineer, и из этот год пытался максимально освоить актуальные нынче технологии. Сам год для меня прошёл под эгидой Mi Band 4, так что почти всё, сделанное мной за этот период, так или иначе связан с ним.

Почему? Не знаю. Мне просто было интересно, что можно сделать интересного с новой железкой. И, оказывается, мало чего… Браслет сильно ограничен в своём функционале, и играться можно было только с его программным оформлением. Чем я и занимался.

Создаём циферблаты для Mi Band 4: некоторые особенности

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

Что нельзя сделать

Начнём с этого. Циферблат представляет собой лишь файл настроек с кучей картинок. То есть это не программа, вы не можете реализовать что-то своё. Вы можете лишь менять настройки, оставленные китайцами. Поэтому:

  • Циферблат не может быть интерактивным. Прям совсем никак. Вы не можете добавить несколько страниц с данными, или кнопку быстрого запуска таймера, или что-то ещё. Циферблат содержит ровно одну страницу, и вы с этим ничего не сделаете.
  • У циферблата не может быть настроек. Да, стандартные циферблаты на Mi Band 5-6 можно немного настраивать, но для сторонних добавить настройки нельзя.
  • Вы не можете добавить то, что не предусмотрено китайцами. У Mi Band 4 на циферблата не может быть погоды, будильника, таймера, банковской карты, и прочего. Вывести на экран можно только то, что предусмотрели китайцы.

Про сборку в палитре

Собрать циферблат можно в двух различных форматах: как есть (raw) или в режиме палитры ( palette). В первом варианте вся графика добавляется как есть, без сжатия. А вот с палитрой интереснее.

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

Если вы в графическом редакторе добавите на прозрачный фон какой-нибудь текст шрифтом Arial например, то можете заметить, что края у данного текста будут полу-прозрачные. Это делается для сглаживания шрифта.

text_semi_transparent.png

Однако если вы такие картинки с текстом добавите в ваш циферблат и упакуете в режиме палитры, то заметите, что края текста стали рваными. Это происходит потому что прозрачность округляется до 0 или 1. То есть они могут быть или не прозрачными, или полностью прозрачными.

text_pasterized.png

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

text_bg_filled.png

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

text_bg_cropped.png

Название месяца текстом

Да, Mi Band 4 умеет выводить месяц только цифрой, однако это можно обойти. Для этого заранее подготовьте 12 картинок с названием месяца. Картинки должны иметь не прозрачный фон, и быть одинаковыми по размеру.

После чего скопируйте в отдельную папку картинку октября, переименуйте её в 0. То есть она будет первой. Далее используя ваш граф редактор создайте 9 картинок по следующему шаблону. Высота этих картинок должна совпадать с высотой ваших бирок месяца, а ширина должна быть ровно на 120px больше. После чего на каждую такую картинку добавьте ваши бирки месяцев как на шаблоне ниже. Между бирками оставьте фон прозрачным

date_example.png

После этого добавьте полученные картинки в ваш циферблат. В настройках даты для координаты X установите значение -120, именно минус 120. А для параметра Spacing установите значение, равное ширине исходных картинок, но с минусом. То есть для картинок по 40px установите -40. После чего проверьте корректность работы с помощью какой-нибудь программы пред-просмотра (WFPreview или Mi Bnad Preview). Далее вы можете выравнять месяц по горизонтали, “играя” от значения -120.

Анимация

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

Сама анимация представляет собой набор PNG-картинок, потому если вы хотите использовать GIF, воспользуйтесь каким-нибудь софтом, чтобы разложить его на кадры. В среднем в режиме палитры можно добавить около 10-15 кадров размером 120x120.

Однако как регулировать скорость анимации? А никак. Единственный метод, добавить каждый кадр по несколько раз. Увы, только так.

Смена фона по расписанию

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

Автоматический генератор циферблатов, он же BandStudio

Мой первый проект такого масштаба. Онлайн-конструктор, позволяющий посетителю за пару минут создать свой уникальный циферблат для Mi Band 4-5.

История создания

Сама идея подобного сайта пришла довольно спонтанно. Как-то вечером сидел я вечером и изучал запросы в теме по Mi Band 4 на форуме 4PDA. Если вкратце, в одной из тем на форуме люди оставляют заявки на создание и модификацию циферблатов, и большая часть таких заказов сводилась к банальным вещам: поменять картинку на фоне, изменить цвета, что-то убрать или добавить. И тогда ко мне пришла простая мысль, а что если автоматизировать это?

old_bs.png

Ранняя главная страница сайта

За пару вечеров кое-как был собран первый прототип онлайн-редактора. У него даже интерфейса толком не было, но основа была: выбираешь единственный шаблон, загружаешь и обрезаешь картинку, выбираешь цвета, и ждёшь завершения. Просто как дважды два. Саму идею я показал знакомому по переписке, известному на форуме под ником iewua. Идея ему показалась неплохой, да и мне было интересно что-нибудь подобное реализовать, так что проект был начат. Спустя где-то месяц сайт стал похож на то, что мы имеем сейчас. Десяток шаблонов, простой интерфейс настройки, кнопка сборки. Чуть позже добавил возможность создавать анимированные циферблаты. И в таком виде это чудо было показано миру. А также iewua нарисовал логотип сайта, за что ему огромное спасибо.

old_bs2.png

Старый редактор, тут прям совсем пусто

Да, запуск едва ли можно назвать удачным. Изначально сайт планировалось монетизировать рекламой, а публикацию циферблатов, созданных там, я вообще пытался запретить. Последнему было довольно простое объяснение: вполне могли появится шакалы, которые ничего не делали бы сами, а лишь заваливали бы форумы однотипными циферблатами из конструктора. И такие попытки были!

pidor.png

Пример такого шакала. Раньше находил профиль человека, который больше 10 таких шаблонов залил. Ни грамма ручной работы, лишь скармливание гифок серверу. Не знаю как вы, но я считаю это свинством….

Но это всё не устраивало ребят с форума, так что пришлось от этого отказаться, из-за чего сайт до сих про работает в минус. Но всё-равно огромное спасибо всем, кто хоть как-то поддерживает сайт материально, иначе бы я точно его закрыл =)

bs_ads.png

Просьба отключить адблок, на которую все взъелись. Хотя самой рекламы на сайте тогда не было. И нет до сих пор…

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

Как это работает

Вся загруженная посетителем сайта графика обрабатывается на стороне клиента. Фоновая картинка обрезается и сжимается, а GIF-анимация раскладывается на кадры, и они также обрезаются и сжимаются. После чего готовые картинки отправляются на сервер. Сервер же берёт шаблон, и превращает его в готовый циферблат.

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

Шаблон для BandStudio представляет собой также набор картинок и два файла настроек. Первый - для циферблата, второй - для сборщика. Сами картинки представляют собой чёрно-белые маски. Во время сборки программа заменяет белые пиксели на выбранный пользователем цвет, а чёрные - на цвет фона.

Фоновая же картинка создаётся простым наложением отдельных слоёв на загруженную пользователем картинку. Нужно это для того, чтобы добавить различные не предусмотренные браслетом элементы, вроде точек часов\даты, полос разделения и т. п.

slice_bg_example.png

Пример слоёного фона

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

Главная проблема этой программы является то, что написана она под Windows. А сервер у меня под Linux, это банально проще и выгоднее. Потому для сборки приходится использовать wine. Если вкратце, wine - прослойка для запуска win32 приложений в ljnux\macos. Само собой, работает она медленно. Очень медленно. Однако альтернативы нет, так что приходится терпеть.

Эволюция сайта

Первая версия сайта представляет собой то, что принято называть legacy-кодом. Написана она была по-быстрому, без надежды на то, что этим будут пользоваться. Да и обновление сайта практически не предполагалось, я вообще не предполагал что оно будет кому-то нужно, думал что просто опять “пишу в стол”. Но аудитория у сайта всё-таки появилась, так что нужно было решать накопившиеся проблемы.

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

Изначально для генерации этих слоёв просто собирался циферблат без некоторых элементов. Например, только с часами, или только с датой. Само собой, это был очень медленный процесс. На сборку одного шаблона уходило до десяти минут. Потому для создания этих слоёв была создана отдельная программа, названная в дальнейшем Mi Band Preview 4 Linux, нынче названная просто Mi Band Preview. Да, это приложение появилось именно как часть проекта BandStudio, и только ради него продолжает дорабатываться. Ну а так как backend сайта был написан на Python3, генератор превьюшек был написан на нём же.

После того, как счётчик на сайте показал тысячу созданных циферблатов, было принято решение добавить что-нибудь новое. И, блин, это было сложно. Первая публичная версия сайта была написана на чистом JavaScript с использованием моего самопального framework-а под название MDFWjs. Само собой, решение это было ужасным. Код сайта был настолько ужасным, что я принял решение изучить что-нибудь новое, и переписать его с нуля.

Так я начал изучать React. React - framework для JavaScript, позволяющий в крайне простом и приятном виде описывать различные блоки страницы. Также для React существует большое количество готовых наборов виджетов, которые заметно упростили разработку. Потому сайт был переписан на react и material-ui. Переход на React и сборка через node-js наконец сделали код куда более читаемым, а так как сайт компилировался, теперь можно было в полной мере использовать ООП, ну или настолько, насколько я его тогда знал =).

Это всё позволило существенно упростить код, а также заметно уменьшить время загрузки. Ну а чтобы это обновление не казалось таким пустым, вместе с переписанные редактором я добавил ряд новых фишек, вроде добавления QR-кодов на циферблат. Это обновление я гордо назвал BandStudio 2.0.

Это было самое крупное обновление с момента создания сайта и по сей день. В дальнейшем конечно тоже много чего произошло. Для начала была добавлена поддержка Mi Band 5. Отличий в формате циферблатов от Mi Band 4 было не так много, так что проблем с этим обновлением особо не было.

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

Главные проблемы сайта на текущий момент.

Главной и при этом неисправимой проблемой является упаковщик циферблатов. Эта программа написана для Windows, потому, как я уже писал выше, для её работы в Linux нужно использовать wine. Из-за этого контейнер с сайтом весит очень много, на данный момент это 2.5 GB.

Также к проблемам сайта можно отнести тот самый React. Основная проблема в том, что стандартный React-сайт работает только если включен JavaScript, да и на прогрузку страницы нужно сравнительно много времени. Из-за этого поисковые системы не видят содержимое сайта, и плохо индексируют его. Хотя первую строчку в Яндекс-е по тематическим запросам я занял =)

Решением проблемы является переезд на React-static, который позволяет экспортировать React-приложение в практически статичный HTML/CSS/JS сайт. Позже займусь этим.

Что будет дальше

Проблема в том, что я потерял интерес к этой теме. Если раньше мне было интересно копаться с Mi Band-ами, то теперь мне просто хочется заняться чем-то другим. Тем более из-за ряда остоятельств у меня совсем мало свободного времени, так что активно разрабатывать его уже не получается.

Сайт продолжит своё вяло текущее существование. Я продолжу его поддерживать и обновлять, но на крупные изменения рассчитывать не следует. Буду добавлять новые шаблоны, возможно поддержку новых устройств, но не более.

Сейчас занимаюсь реализацией поддержки Mi Band 6, постараюсь за лето сделать. Возможно закончу мобильное приложение, оно уже давно в разработке. Но основное время я буду заниматься чем-нибудь другим.

Не связанные с Mi Band разработки

Одной строкой, чем я ещё занимался:

  • Простой плагин для программы ULauncher, позволяющий подключать\отключать беспроводные устройства, вроде наушников. Скачать
  • Написал фонарик для Galaxy A10, позволяет менять яркость вспышки на неоф. прошивке. Исходник.
  • Сделал русский перевод для Pulse Music
  • Сделал этот сайт, а недавно переписал его на тот же React
  • Пара мелких фриланс-заказов, совсем мелких =)

Выводы

Этот год был действительно продуктивным. Я получил первый опыт в создании и поддержании сервиса, которым реально кто-то пользуется. За этот год я пересел с самописаных велосипедов на стандартный React, освоил python, docker, typescript, и кучу прикладных библиотек. Освоил работу с графикой, прокачал навык работы в GIMP, и много чего ещё.

BandStudio стал самым сложным проектом из всех, что я делал раньше. Горы кода, графики, куча времени на разработку и тестирование, куча изученных технологий. И он кому-то нужен, до сих пор не верю. Я даже на тысячу посетителей не расчитывал, думал что проект умрёт за месяц. Но он жив. Да, опытные разработчики скажут, что 1500 посещений в месяц это ерунда, но для меня это рекорд.

Огромное спасибо всем, кто пользуется разработанным мной софтом. Очень приятно осознавать, что всё делается не зря. Огромное спасибо вам за вашу материальную поддержку, за ваши отзывы, идеи и предложения. А так же большое спасибо всем ребятам с 4PDA, которые помогали в данном проекте. А именно Pokka (разработчик WFTool), iewua (автор лого и некоторых идей), AndyER03 (тестирование), а так же всем авторам шаблонов для сайта: iewua, AndyER03, jdPhobos, toaxel, Diamonð, soft_program, Игорь Худяков.

А я продложу учиться и разрабатывать =)