Инструкция Mi Band 4 | Инструкция по созданию циферблата на Mi Band 4

AndyER03

Забаненный
Сообщения
92
Реакции
242
Баллы
43
Ваше "умное" устройство
Mi Band 4
Инструкция по созданию циферблата для Mi Band 4

Вступление
Создание циферблата для MB4 заключается в следующем:
  • правильное создание фона циферблата (файл "0000.png")
    • Правильное размещение слоя картинки для фона
    • Правильное размещение слоя с точками между цифрами часов (на глаз)
    • Правильное размещение слоя с точкой для даты
  • правильная настройка конфигурационного файла (файл "***.json")
    • Правильное указание местоположения элементов циферблата по осям X и Y
    • Правильное указание индексов (номеров файлов в папке с исходниками)
Подсказка:
При каждом компилировании в папке с исходниками будет создаваться превью циферблата в двух форматах: "***.gif" и "***.png" и сразу можно будет посмотреть, как будет выглядеть циферблат.

Хочу заметить: в исходниках циферблата 3 варианта написания дней неделей (китайский, китайский упрощённый, мультиязычный) (21 файл идут друг за другом). И ради экономии размера самого файла циферблата, некоторые люди заменяют картинки с надписями дней неделей на китайском на картинки размером 1x1 пикс. А компилятор для создания превью берет первую пачку дней неделей (китайскую). Поэтому на превью может не быть дней неделей.
Решение: отсчитать с какого файла начинаются дни недели (можно узнать из файла "***.json"

При следующем компилировании необходимо будет удалить (не обязательно):
  • Файл с логом "***.log"
  • Файл циферблата "***.bin"
  • Файлы эскизов "***.gif" и "***.png"
Используемая мною система:
  • Версия Windows: Windows 7 SP1 Home Basic (Домашняя базовая)
  • Версия Photoshop: Photoshop CC 2018

ИНСТРУКЦИЯ
Подготовка к созданию циферблата

  1. Скачиваем файл MB4_WatchFace_Template.zip
  2. Распаковываем в удобное место. Например на рабочий стол.
  3. Открываем папку MB4_WatchFace_Template
    Шаг 3.png
    В папке MB4_WatchFace_Template находятся:
    • Папка AmazfitBipTools_Mi4_1.0.3 - папка с компилятором/декомпилятором
    • Папка Template - папка с заготовочными файлами для циферблата
    • Файл MB4_Basic_WatchFace_Template_by_AndyER03.psd - файл с заготовкой для фона циферблата
  4. Откроем папку Template

    В папке Template находятся:
    • Файлы изображений элементов интерфейса
    • Картинки цифр
    • Картинки заряда батареи
    • Картинка Bluetooth
    • Файл Template.json - файл конфигурации (В нём описано размещение элементов интерфейса на экране по осям X и Y.
  5. Откроем файл Template.json
    Код:
    {
    "Background": {
    "Image": {
    "X": 0,
    "Y": 0,
    "ImageIndex": 0
    }
    },
    "Time": {
    "Hours": {
    "Tens": {
    "X": 5,
    "Y": 25,
    "ImageIndex": 1,
    "ImagesCount": 10
    },
    "Ones": {
    "X": 31,
    "Y": 25,
    "ImageIndex": 1,
    "ImagesCount": 10
    }
    },
    "Minutes": {
    "Tens": {
    "X": 65,
    "Y": 25,
    "ImageIndex": 1,
    "ImagesCount": 10
    },
    "Ones": {
    "X": 91,
    "Y": 25,
    "ImageIndex": 1,
    "ImagesCount": 10
    }
    }
    },
    "Activity": {
    "Steps": {
    "Step": {
    "TopLeftX": 20,
    "TopLeftY": 190,
    "BottomRightX": 100,
    "BottomRightY": 190,
    "Alignment": "Center",
    "Spacing": 0,
    "ImageIndex": 11,
    "ImagesCount": 10
    }
    },
    "Distance": {
    "Number": {
    "TopLeftX": 20,
    "TopLeftY": 205,
    "BottomRightX": 100,
    "BottomRightY": 205,
    "Alignment": "Center",
    "Spacing": 1,
    "ImageIndex": 11,
    "ImagesCount": 10
    },
    "SuffixImageIndex": 79,
    "DecimalPointImageIndex": 78
    }
    },
    "Date": {
    "MonthAndDay": {
    "Separate": {
    "Month": {
    "TopLeftX": 34,
    "TopLeftY": 218,
    "BottomRightX": 110,
    "BottomRightY": 218,
    "Alignment": "TopCenter",
    "Spacing": 0,
    "ImageIndex": 21,
    "ImagesCount": 10
    },
    "Day": {
    "TopLeftX": 5,
    "TopLeftY": 218,
    "BottomRightX": 90,
    "BottomRightY": 218,
    "Alignment": "TopCenter",
    "Spacing": 0,
    "ImageIndex": 80,
    "ImagesCount": 10
    }
    },
    "TwoDigitsMonth": true,
    "TwoDigitsDay": true
    },
    "WeekDay": {
    "X": 0,
    "Y": 60,
    "ImageIndex": 31,
    "ImagesCount": 21
    },
    "DayAmPm": {
    "TopLeftX": 120,
    "TopLeftY": 240,
    "ImageIndexAMCN": 52,
    "ImageIndexPMCN": 53,
    "ImageIndexAMEN": 54,
    "ImageIndexPMEN": 55
    }
    },
    "Status": {
    "Alarm": {
    "Coordinates": {
    "X": 4,
    "Y": 5,
    "X2": 17,
    "Y2": 2,
    "X3": 1
    },
    "ImageIndexOn": 56
    },
    "Lock": {
    "Coordinates": {
    "X": 21,
    "Y": 5,
    "X2": 17,
    "Y2": 2,
    "X3": 1
    },
    "ImageIndexOn": 57
    },
    "Bluetooth": {
    "Coordinates": {
    "X": 38,
    "Y": 5,
    "X2": 12,
    "Y2": 2,
    "X3": 1
    },
    "ImageIndexOff": 58
    },
    "Battery": {
    "Text": {
    "TopLeftX": 0,
    "TopLeftY": 0,
    "BottomRightX": 0,
    "BottomRightY": 0,
    "Alignment": 0,
    "Spacing": 0,
    "ImageIndex": 0,
    "ImagesCount": 0
    },
    "Text2": {
    "TopLeftX": 64,
    "TopLeftY": 5,
    "BottomRightX": 84,
    "BottomRightY": 16,
    "Alignment": "TopRight",
    "Spacing": 0,
    "ImageIndex": 59,
    "ImagesCount": 10
    },
    "Icon": {
    "X": 98,
    "Y": 5,
    "ImageIndex": 69,
    "ImagesCount": 9
    }
    }
    }
    }
    Блок "Background" отвечает за фоновый рисунок
    Блок "Time" отвечает за время
    Блок "Activity" отвечает за:
    • Шаги
    • Дистанцию
  6. Блок "Date" отвечает за:
    • Число
    • Месяц
    • День недели
    • Индикатор AM и PM (До полудня / После полудня)
  7. Блок "Status" отвечает за индикаторы
    • Будильник
    • Блокировку экрана
    • Bluetooth
    • Батарея
  8. Не закрывая файл, вернёмся на один уровень вверх и откроем файл MB4_Basic_WatchFace_Template_by_AndyER03.psd
    Шаг 6.png
    В файле MB4_Basic_WatchFace_Template_by_AndyER03.psd находится папка "Циферблат".
    Шаг 6_1.png
    В папке "Циферблат" находятся:
    • Папки со временем (Работать нужно с двоеточиями. Цифры и минуты в файле Photoshop'а в принципе не нужны)
    • Папка со днями недели
    • Папка с разделителями для даты
    • Изображение процентов
    • Черный фон
    • Папка с информацией о файле

Создание циферблата
  1. Для начала сделаем фон для циферблата
    Берём любую картинку/фотографию и вставляем в окно Photoshop'а. Для примера я возьму картинку с Человеком Пауком.
    SpiderMan.jpg
  2. Подгоняем картинку под размер циферблата (120х240 пкс)
    Шаг 8.png
  3. Растрируем слой и немного затемняем картинку, чтобы было хорошо видно время, дату и остальные элементы циферблата.
    Шаг 9.png Шаг 9_1.png
    Выглядеть будет так: до / после
    Шаг 9_2.png Шаг 9_3.png
  4. Теперь решим, где будет размещаться дата:
    • Сверху
    • Почти снизу
    • Снизу
    • Слева
    • Справа
  5. Начнем с работы в Photoshop
  6. Заходим в папку "Циферблат" --> "Дата" --> "Точки" и оставляем галочку только напротив того варианта, который мы хотим оставить. Остальные - снимаем.
  7. К примеру поставим дату снизу слева. Значит оставляем только нужную галочку.
    Шаг 12.png Шаг 12_1.png
  8. Теперь создадим пустой слой над слоем с Человеком Пауком и кистью примерно 250 размера черного цвета немного подкрашиваем угол, где находится дата, пока белая точка не станет хорошо видна. Также можно немного подкрасить верхний край картинки, чтобы не было видно, что она закончилась и было красиво.
    Шаг 13.png Шаг 13_1.png
  9. Будем редактировать блоки "Activity" и подблок "MonthAndDay" в блоке "Date".
    (Напоминаю: Activity - шаги и пройденный путь, Date - дата)
    Код:
    "Activity": {
    "Steps": {
    "Step": {
    "TopLeftX": 20,
    "TopLeftY": 190,
    "BottomRightX": 100,
    "BottomRightY": 190,
    "Alignment": "Center",
    "Spacing": 0,
    "ImageIndex": 11,
    "ImagesCount": 10
    }
    },
    "Distance": {
    "Number": {
    "TopLeftX": 20,
    "TopLeftY": 205,
    "BottomRightX": 100,
    "BottomRightY": 205,
    "Alignment": "Center",
    "Spacing": 1,
    "ImageIndex": 11,
    "ImagesCount": 10
    },
    "SuffixImageIndex": 79,
    "DecimalPointImageIndex": 78
    }
    },
    Код:
    "MonthAndDay": {
    "Separate": {
    "Month": {
    "TopLeftX": 34,
    "TopLeftY": 218,
    "BottomRightX": 110,
    "BottomRightY": 218,
    "Alignment": "TopCenter",
    "Spacing": 0,
    "ImageIndex": 21,
    "ImagesCount": 10
    },
    "Day": {
    "TopLeftX": 5,
    "TopLeftY": 218,
    "BottomRightX": 90,
    "BottomRightY": 218,
    "Alignment": "TopCenter",
    "Spacing": 0,
    "ImageIndex": 80,
    "ImagesCount": 10
    }
    },
    "TwoDigitsMonth": true,
    "TwoDigitsDay": true
    },
    "TopLeftX" - размещение элемента по оси X (координата левого верхнего угла)
    "TopLeftY" - размещение элемента по оси Y (координата левого верхнего угла)
    "BottomRightX" - размещение элемента по оси X (координата правого нижнего угла)
    "BottomRightY" - размещение элемента по оси Y (координата правого нижнего угла)
    "Alignment" - выравнивание элемента по краям/центру
    "Spacing" - интервал между значениями в блоке. Например, между цифрами в Шагах, Дистанции
    "ImageIndex" - номер картинки элемента с которой начинается блок
    "ImagesCount" - количество картинок для блока. Картинки в блоке должны идти подряд.

    В разметке, что указана в коде:
    • Дата находится снизу слева
    • Активность находится справа ближе к цетру
Подробнее можно ознокомиться в Инструкция - Инструкция по распаковке, редактированию и сборке файлов циферблатов для Amazfit Bip
  1. При такой разметке картинка будет следующей:
    Шаг 14.png
    Если нужно переместить элементы в другое место или непонятно, как работает разметка, то можете поэксперементировать со значениями "TopLeftX" и "TopLeftY"
  2. Сохраняем картинку из Photoshop в папку "Template" и называем его "0000.png"
  3. Сохраняем файл "Template.json"
  4. Можно закрыть Photoshop и редактор файла "Template.json".
  5. Переименовываем файл "Template.json" например в "SpiderMan.json" (В моей ситуации, так как мой циферблат сделан в стиле Человека Паука).

Компиляция циферблата
  • Заходим в папку AmazfitBipTools_Mi4_1.0.3.
  • Размещаем окна с папкой Template и с папкой AmazfitBipTools_Mi4_1.0.3 рядом.
  • Переносим файл "SpiderMan.json" на пакетный файл WatchFace.exe в папке AmazfitBipTools_Mi4_1.0.3 и дожидаемся окончания компиляции.
 

Вложения

Последнее редактирование:

gasonger0

Новичок
Сообщения
1
Реакции
0
Баллы
1
Ваше "умное" устройство
Mi Band 4
Как сделать гифку на обоях?
 

Psineur

Главный модератор
Команда форума
Сообщения
1,905
Реакции
4,039
Баллы
678
Ваше "умное" устройство
Amazfit Bip
Как сделать гифку на обоях?
Нарисовать? )

Анимацию на циферблате вот так
Раздел Other
Прочее. Содержит в себе подраздел Animation (анимация), для которого задаётся подраздел AnimationImage и параметры Speed, RepeatCount, x2.
Подраздел AnimationImage содержит параметры X (координата X), Y (координата Y), ImageIndex (первый кадр), ImagesCount (количество кадров), X3 (ХЗ что это, обычно равен 100)
Параметр RepeatCount определяет сколько раз будет воспроизведена анимация после включения экрана или перехода к главному экрану. По завершению всех циклов анимации, все кадры анимации перестанут отображаться.
Код:
  "Other": {
    "Animation": {
      "AnimationImage": {
        "X": 0,
        "Y": 20,
        "ImageIndex": 30,
        "ImagesCount": 10,
        "X3": 0
      },
      "Speed": 0,
      "RepeatCount": 1000,
      "x2": 200
    }
  },
 

Пользователи, просматривающие эту тему

Сейчас на форуме нет ни одного пользователя.
Сверху Снизу