Инструкция по распаковке, редактированию и сборке файлов циферблатов для Amazfit Bip

Kutager · 14.04.18

1. Нам понадобятся:
1.1. Приложение AmazfitBipTools. Найти можно в разделе Для разработчиков. Программа консольная и своего интерфейса у нее нет, поэтому запускать ее не имеет смысла.
1.2. Программа для редактирования графических файлов. Подойдет все, начиная от Paint и заканчивая Photoshop. Лично я для редактирования использую самый простейший графический редактор - Paint.net.
1.3. Онлайн редактор циферблатов

Пожалуйста войдите или зарегистрируйтесь для просмотра скрытого текста.

.

2. Скачиваем любой понравившийся циферблат (при необходимости извлекаем из архива).
2.1. Для того, чтобы распаковать bin файл циферблата необходимо его перенести мышкой на программу WatchFace.exe который находится в папке AmazfitBipTools.
2.2. В директории, где расположен bin файл появится новый каталог с аналогичным названием, в котором находятся распакованные ресурсы циферблата и файл с расширением json. Этот файл содержит в себе информацию о том, что у вас на циферблате, где находятся те или иные картинки и какая из картинок соответствует тому или иному элементу циферблата.
2.3. Теперь можно редактировать изображения и, при необходимости, json файл. Так как все элементы циферблата – это картинки, то изменяя их мы можем легко менять вешний вид итогового циферблата. Файл 000.png – это подложка циферблата. Ее размер соответствует размеру экрана часов и составляет 176х176 пикселей (1 пиксель это 1 точка), а цвет фона - будущему цвету фона циферблата. Для облегчения редактирования в графическом редакторе можно включить сетку, где каждая клеточка будет соответствовать 1 пикселю.
2.4. При необходимости добавления (исключения) отдельных элементов циферблата используется онлайн редактор циферблатов

Пожалуйста войдите или зарегистрируйтесь для просмотра скрытого текста.

. Открыв его, выбираем все png файлы в папке с распакованным циферблатом, нажав на кнопку Выбрать рядом с надписью Изображения (выделяем один файл и нажимаем Ctrl+A на клавиатуре).

Аналогичным образом выбираем json файл, нажав соответствующую кнопку.

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

На вкладке Редактор мы видим код нашего циферблата, где описывается расположение элементов, какие у них координаты, какие им соответствуют картинки и т.д. Здесь же можно добавить (исключить) отдельные элементы циферблата.

2.5. По окончании редактирования json файла нажимаем Скачать json на вкладке Расположение и выбираем место сохранения файла (можно сохранить в ту же исходную папку вместо имеющегося).
2.6. В итоге мы имеем папку со всеми рисунками циферблата и json файл.

3. Для сборки циферблата перетаскиваем файл *.json на файл WatchFace.exe который находится в папке AmazfitBipTools.
3.1. Создастся файл с названием *_packed.bin, *_packed.gif и *_packed.png .
*_packed.bin – это и есть наш отредактированный файл циферблата.

Важно! При редактировании файла json в нем не должно быть ссылок на несуществующие элементы, иначе запаковка циферблата будет заканчиваться ошибкой!

Хорошим тоном при размещении циферблатов на форуме считается если имена архива, упакованных файлов и циферблата совпадают, а из названия файлов убрано _packed.

Полезная информация:
Для корректного отображения цветов на экране часов все картинки должны состоять из 8 цветов, которые поддерживают часы.

Черный 0x000000
Синий 0x0000FF
Зеленый 0x00FF00
Красный 0xFF0000
Голубой 0x00FFFF
Пурпурный 0xFF00FF
Желтый 0xFFFF00
Белый 0xFFFFFF

Psineur · 14.04.18

Прозрачный 0xFEFE00

Предлагаю использовать как стандартный Paint (установленный в системе), так и для XP (отдельно скаченный).
В чем его отличия? Внизу слева имеется палитра с "нашими" цветами, которые поддерживаются часами. Это 6 цветов - от красного до пурпурного и еще 2 черный и белый.
В поддерживаемых цветах в палитре Paint в RGB должны быть цифры только 0 или 255.

Kutager · 14.04.18

@Psineur, Палитра для paint.net с совместимыми с bip цветами.

Kutager · 15.04.18

Для тех, кому нравится GIMP.
Цветовая палитра для GIMP: распаковать в %PROGRAMFILES%\GIMP 2\share\gimp\2.0\palettes.
Для применения выбрать его в меню Изображения - Режим - Индексируемый - Использовать заказную палитру (выбрать из выпадающего списка MiFit) и поставить галочку Удалить неиспользуемые цвета из цветовой карты. Далее нажимаем Преобразовать и сохраняем нужный файл

Psineur · 01.05.18

Структура файла JSON

Структура файла JSON состоит из блоков.
«Background» - фон. Его координаты по осям X и Y равны 0. Переменная «ImageIndex» определяет, в каком файле содержится фон. Если указан 0, значит это файл 000.png.

Код:

  "Background": {
    "Image": {
      "X": 0,
      "Y": 0,
      "ImageIndex": 0
    }
  },

«Time» - построение времени. Он состоит из «Hours» (часов) и «Minutes» (минут), которые, в свою очередь, имеют «Tens» (десятки) и «Ones» (единицы). Счетчик «ImagesCount» указывает длину массива. Таким образом в файлах 001.png – 010.png расположены цифры от 0 до 9.

Код:

  "Time": {
    "Hours": {
      "Tens": {
        "X": 9,
        "Y": 34,
        "ImageIndex": 1,
        "ImagesCount": 10
      },
      "Ones": {
        "X": 45,
        "Y": 34,
        "ImageIndex": 1,
        "ImagesCount": 10
      }
    },
    "Minutes": {
      "Tens": {
        "X": 96,
        "Y": 34,
        "ImageIndex": 1,
        "ImagesCount": 10
      },
      "Ones": {
        "X": 132,
        "Y": 34,
        "ImageIndex": 1,
        "ImagesCount": 10
      }
    }
  },

«Activity» – суточная активность

Код:

  "Activity": {
    "Steps": {
      "TopLeftX": 33,
      "TopLeftY": 154,
      "BottomRightX": 75,
      "BottomRightY": 170,
      "Alignment": "TopLeft",
      "Spacing": 2,
      "ImageIndex": 11,
      "ImagesCount": 10
    },
    "Pulse": {
      "TopLeftX": 33,
      "TopLeftY": 131,
      "BottomRightX": 57,
      "BottomRightY": 147,
      "Alignment": "TopLeft",
      "Spacing": 2,
      "ImageIndex": 11,
      "ImagesCount": 10
    },
    "Distance": {
      "Number": {
        "TopLeftX": 115,
        "TopLeftY": 154,
        "BottomRightX": 171,
        "BottomRightY": 170,
        "Alignment": "TopRight",
        "Spacing": 2,
        "ImageIndex": 11,
        "ImagesCount": 10
      },
      "SuffixImageIndex": 21,
      "DecimalPointImageIndex": 22
    }
  },

"Steps" – суточная активность в шагах
"Distance" – суточная активность в километрах
"Pulse" – пульс
"SuffixImageIndex" - иконка дистанции (Км)
"DecimalPointImageIndex" - точка, разделяющая десятые доли Км

«Date» – дата.

Код:

  "Date": {
    "MonthAndDay": {
      "Separate": {
        "Month": {
          "TopLeftX": 30,
          "TopLeftY": 6,
          "BottomRightX": 45,
          "BottomRightY": 21,
          "Alignment": "TopLeft",
          "Spacing": 2,
          "ImageIndex": 11,
          "ImagesCount": 10
        },
        "Day": {
          "TopLeftX": 6,
          "TopLeftY": 6,
          "BottomRightX": 21,
          "BottomRightY": 21,
          "Alignment": "TopRight",
          "Spacing": 2,
          "ImageIndex": 11,
          "ImagesCount": 10
        }
      },
      "TwoDigitsMonth": true,
      "TwoDigitsDay": true
    },
    "WeekDay": {
      "X": 52,
      "Y": 6,
      "ImageIndex": 23,
      "ImagesCount": 7
    }
  },

"Month" - месяц в цифровом значении
"Day" - день в цифровом значении
"WeekDay" - день недели
При выборе параметра "Дата в одну линию" результат выводится в формате MM/DD. Если хотите отображение в формате DD/MM, то выбирать нужно отдельными блоками: "Дата" и "Месяц" и ставить их раздельно.

«Weather» – погода

"Weather": {
"Icon": {
"CustomIcon": {
"X": 66,
"Y": 106,
"ImageIndex": 30,
"ImagesCount": 26
}
},
"Temperature": {
"Current": {
"Number": {
"TopLeftX": 112,
"TopLeftY": 120,
"BottomRightX": 149,
"BottomRightY": 141,
"Alignment": "CenterRight",
"Spacing": 2,
"ImageIndex": 56,
"ImagesCount": 10
},
"MinusImageIndex": 66,
"DegreesImageIndex": 67
},
"Today": {
"Separate": {
"Day": {
"Number": {
"TopLeftX": 145,
"TopLeftY": 109,
"BottomRightX": 171,
"BottomRightY": 125,
"Alignment": "TopRight",
"Spacing": 1,
"ImageIndex": 11,
"ImagesCount": 10
},
"MinusImageIndex": 68
},
"Night": {
"Number": {
"TopLeftX": 145,
"TopLeftY": 134,
"BottomRightX": 171,
"BottomRightY": 150,
"Alignment": "TopRight",
"Spacing": 1,
"ImageIndex": 11,
"ImagesCount": 10
},
"MinusImageIndex": 68
}
}
}
}
},

Код:

"Temperature" - температура сейчас
"Separate" - температура одна под другой (столбиком)
”OneLine“ - температура влинию одна за другой (обычно через косую черту)
"Today" - дневная температура (максимум)
"Night" - ночная температура (минимум)
"Icon" - иконки погоды
"MinusImageIndex" - иконка минуса
"DegreesImageIndex" - иконка градуса
"DelimiterImageIndex" - иконка разделителя (косая черта, слэш)
“AppendDegreesForBoth” - иконка градусов на одном или обоих показателей температуры в строчку (False, True)

«Battery» – заряд батареи

Код:

  "Battery": {
    "Text": {
      "TopLeftX": 33,
      "TopLeftY": 108,
      "BottomRightX": 55,
      "BottomRightY": 124,
      "Alignment": "TopLeft",
      "Spacing": 1,
      "ImageIndex": 11,
      "ImagesCount": 10
    },
    "Icon": {
      "X": 4,
      "Y": 109,
      "ImageIndex": 74,
      "ImagesCount": 12
    }
  }

"Text" - цифровой заряд
"Icon" - иконка заряда или ряд иконок (прогресс-бар), изменяющаяся с процентом заряда.

«Status» – статус устройства. Показывает включены или выключены "Bluetooth", будильник "Alarm", а также режим DND "DoNotDisturb" в виде меняющихся иконок.

Код:

  "Status": {
    "Bluetooth": {
      "Coordinates": {
        "X": 159,
        "Y": 6
      },
      "ImageIndexOn": 70,
      "ImageIndexOff": 71
    },
    "Alarm": {
      "Coordinates": {
        "X": 135,
        "Y": 6
      },
      "ImageIndexOn": 72
    },
    "DoNotDisturb": {
      "Coordinates": {
        "X": 76,
        "Y": 152
      },
      "ImageIndexOn": 73
    }
  },

«StepsProgress» – прогресс-бар количества шагов. Показывает пройденный путь в виде меняющегося количества иконок, обычно разноцветный для лучшего восприятия. Максимум сегментов, на которые делится дистанция - 20.

Код:

  "StepsProgress": {

    "Linear": {
      "StartImageIndex": 68,
      "Segments": [
        {
          "X": 0,
          "Y": 0
        },
        {
          "X": 20,
          "Y": 0
        }
        ]
        }
    },
      "GoalImage": {
      "X": 3,
      "Y": 149,
      "ImageIndex": 69
    }
  },

"Segments" - количество сегментов до 20. Для каждой иконки задаются свои координаты или, если координаты не меняются, но меняются сами иконки по размеру или цвету.
"GoalImage" - иконка достижения цели.

«AnalogDialFace» – аналоговые часы со стрелками. Аналоговые часы могут быть с разным количеством стрелок, как все вместе, так и выборочно.

Код:

  "AnalogDialFace": {
    "Hours": {
      "OnlyBorder": false,
      "Color": "0xFFFFFF",
      "Center": {
        "X": 88,
        "Y": 88
      },
      "Shape": [
        {
          "X": -17,
          "Y": -3
        },
        {
          "X": 54,
          "Y": -3
        },
        {
          "X": 54,
          "Y": 3
        },
        {
          "X": -17,
          "Y": 3
        }
      ]
    },
    "Minutes": {
      "OnlyBorder": false,
      "Color": "0xFFFFFF",
      "Center": {
        "X": 88,
        "Y": 88
      },
      "Shape": [
        {
          "X": -17,
          "Y": -3
        },
        {
          "X": 82,
          "Y": -3
        },
        {
          "X": 82,
          "Y": 3
        },
        {
          "X": -17,
          "Y": 3
        }
      ]
    },
    "Seconds": {
      "OnlyBorder": false,
      "Color": "0xFF0000",
      "Center": {
        "X": 88,
        "Y": 88
      },
      "Shape": [
        {
          "X": -21,
          "Y": -1
        },
        {
          "X": 82,
          "Y": -1
        },
        {
          "X": 82,
          "Y": 1
        },
        {
          "X": -21,
          "Y": 1
        }
      ]
    }
  }

"Hours" - часовая стрелка
"Minutes" - минутнаястрелка
"Seconds" - секундная стрелка
"Shape" - координаты стрелок. Они задаются не иконкой, а именно координатами точек изгиба

«AirPollution» - индекс качества воздуха AQI (air quatity index) . Задается в блоке Погода

Код:

  "Weather": {
    "AirPollution": {
      "Icon": {
        "X": 149,
        "Y": 113,
        "ImageIndex": 11,
        "ImagesCount": 14
      }
    }
  },

Psineur · 01.05.18

Значения элементов файла JSON

Координаты - параметр присутствует почти во всех элементах и задает местоположение элемента. Местоположение описывается двумя координатами - по оси X и Y.

"X": 0,

"Y": 0,

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

"X": 123,

"Y": 83,

От начала координат верхний левый угол элемента будет находиться по оси X (правее) на 123 пикселя и по оси Y (ниже) на 83 пикселя.

ImageIndex и ImagesCount - параметры присутствуют почти во всех элементах и задают параметры для определения какие иконки (картинки) файлы в формате PNG используются в данном элементе.
ImageIndex - параметр задает номер первой иконки элемента
ImagesCount - параметр задает количество иконок элемента.
Ниже приведен пример кода.

"ImageIndex": 21,

"ImagesCount": 7

Элемент начинается с иконки с именем "021.png" и будет содержать в себе этот файл и 6 последующих файлов. Итого 7 штук.

Alignment - параметр задает выравнивание элемента внутри блока.
Допускается запись двух видов: "Alignment": "18" и "Alignment": "TopLeft". Они равносильны между собой.
Все возможные значения.

Alignment": "18", "TopLeft - верхний левый

Alignment": "34", "BottomLeft - нижний левый

Alignment": "66", "CenterLeft - центральный левый

Alignment": "20", "TopRight - верхний правый

Alignment": "36", "BottomRight - нижний правый

Alignment": "68", "CenterRight - центральный правый

Alignment": "24", "TopCenter - верхний центральный

Alignment": "40", "BottomCenter - нижний центральный

Alignment": "72", "Center - центральный

TopLeftX и TopLeftY + BottomRightX и BottomRightY - параметры создания блоков.
Блоки необходимы для помещения в них элементов, значения которых скрыты до их достижения. К примеру количество шагов, погода, дата и другие. Блок указывает алгоритмам прошивки, что в этом блоке надо периодически обновлять данные.
TopLeftX и TopLeftY - задают верхнюю левую точку блока
BottomRightX и BottomRightY - задают нижнюю правую точку блока

"TopLeftX": 26,

"TopLeftY": 5,

"BottomRightX": 65,

"BottomRightY": 21,

На примере задан Блок с левой верхней точкой с координатами (26,5) и правой нижней точкой с координатами (65,21)

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

"Segments" - параметр, в котором задаются сегменты прогресс-бара. Например, Шаги, Батарея.

"Coordinates" - параметр, в котором задаются координаты (возможно упускать данный параметр и задавать координаты без него)

"ImageIndexOn" - параметр отображения иконки включения одного из статусов

"ImageIndexOff" - параметр отображения иконки выключения одного из статусов

"Color": "0xFF0000" - параметр, задающий цвет. Например, цвет 0xFF0000 стрелки в аналоговом циферблате.

Разберем пример кода:

"Steps": {

"TopLeftX": 26,

"TopLeftY": 5,

"BottomRightX": 65,

"BottomRightY": 21,

"Alignment": "TopLeft",

"Spacing": 3,

"ImageIndex": 1,

"ImagesCount": 10

- блок Суточная активность в шагах
- с координатами левой верхней точки (26,5) и правой нижней точкой с координатами (65,21)
- с выравниванием значений в нем по-верху слева
- с интервалом между значениями 3 точки
- значения элемента начинаются с иконки 001.png и включает в себя 10 иконок 001-010 (обычно, это цифры 0-9)

mrTvister · 26.07.18

Палитра для фотошопа - распаковать в удобное место.
Скачать
Изображение - Режим - Индексированные цвета - Палитра - Заказная - Загрузить. Выбираем распакованную ранее палитру 8col.ACT (для последующего применения нужно будет всего-навсего нажать на "предыдущую палитру").
Выбираем параметры дизеринга "Случайный" и меняя проценты смотрим на эффект (не забудьте галочку "Просмотр" и отодвинуть окошко от картинки

, чтобы видеть моментальные изменения)

Пример эффекта дизеринга.

Лучше так не делать, много лишних точек

Получилась довольно красивая картинка, лишнее можно убрать стерочкой или аккуратно подрисовать

Подходит только для мультяшных или однотонных изображений, иначе получается много шума

Инструкция по распаковке, редактированию и сборке файлов циферблатов для Amazfit Bip

Kutager

Творец

Psineur

Модератор

Вложения

Kutager

Творец

Вложения

Kutager

Творец

Вложения

Psineur

Модератор

Psineur

Модератор

mrTvister

Координатор

Вложения