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

[Kutager]

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

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]

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

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

Background

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

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

Time 24 часа

  "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
      }
    }
  },

Time 12 часов

  "Time": {
    "Hours": {
      "Tens": {
        "X": 27,
        "Y": 92,
        "ImageIndex": 1,
        "ImagesCount": 3
      },
      "Ones": {
        "X": 48,
        "Y": 92,
        "ImageIndex": 4,
        "ImagesCount": 10
      }
    },
    "Minutes": {
      "Tens": {
        "X": 75,
        "Y": 92,
        "ImageIndex": 4,
        "ImagesCount": 10
      },
      "Ones": {
        "X": 96,
        "Y": 92,
        "ImageIndex": 4,
        "ImagesCount": 10
      }
    },
    "AmPm": {
      "X": 27,
      "Y": 80,
      "ImageIndexAm": 14,
      "ImageIndexPm": 15
    }
  },

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

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
    },
    "Calories": {
      "TopLeftX": 63,
      "TopLeftY": 131,
      "BottomRightX": 87,
      "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" – пульс
"Calories" - каллории
"SuffixImageIndex" - иконка дистанции (Км)
"DecimalPointImageIndex" - точка, разделяющая десятые доли Км

«Date» – дата.

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": false
    },
    "WeekDay": {
      "X": 52,
      "Y": 6,
      "ImageIndex": 23,
      "ImagesCount": 7
    }
  },

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

«Weather» – погода

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

  "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", блокировка экрана "Lock", а также режим DND "DoNotDisturb" в виде меняющихся иконок.

Status

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

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

StepsProgress линейный

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

StepsProgress круговой

  "StepsProgress": {
    "Circle": {
    “CenterX” : 85 ,
    “CenterY” : 114 , 
    “RadiusX” : 33 ,
    “RadiusY” : 33 , 
    “StartAngle” : 0 ,
    “EndAngle” : 360 , 
    “Width” : 8 ,
    “Color” : “0xF3A806” 
        }
    },
      "GoalImage": {
      "X": 3,
      "Y": 149,
      "ImageIndex": 69
    }
  },

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

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

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) . Задается в блоке Погода

AirPollution

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

 

[Psineur]

Значения элементов файла 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)