RETURN 0;
미 밴드 4 워치 페이스 만들기 - 2편: 코드 파헤치기 1 [기본 기능편] 본문
들어가며
저번 글에서는 간단하게 워치 페이스 안의 이미지를 교체하는 방법에 대해 알려드렸습니다. 워치 페이스 bin파일을 압축 해제하면 나오는 JSON 코드를 살펴보려 합니다. 아래는 예시로 사용할 워치 페이스입니다. "https://amazfitwatchfaces.com"에 게시되어 있는 synar가 제작한 워치 페이스입니다. 아래 코드는 이전 글에 사용한 AmazfitBipTools를 기반으로 설명드립니다. 다른 버전이나 다른 툴을 사용하시면 코드가 조금 상이할 수 있습니다.
1. 배경화면 (Background)
"Background": {
"Image": {
"X": 0,
"Y": 0,
"ImageIndex": 0
}
},미 밴드 4는 120X240 해상도의 화면을 가지고 있고 워치 페이스도 이 크기에 맞추어 120X240의 이미지를 사용해야 합니다. 워치 페이스에서 움직이지 않는 부분들을 배경에 포함해서 제작되어 있습니다. 배경의 이미지 인덱스는 0이고 파일음 0000.png입니다.
2. 시간 표시 (Time)
"Time": {
"Hours": {
"Tens": {
"X": 0,
"Y": 23,
"ImageIndex": 1,
"ImagesCount": 10
},
"Ones": {
"X": 28,
"Y": 23,
"ImageIndex": 1,
"ImagesCount": 10
}
},
"Minutes": {
"Tens": {
"X": 68,
"Y": 23,
"ImageIndex": 1,
"ImagesCount": 10
},
"Ones": {
"X": 96,
"Y": 23,
"ImageIndex": 1,
"ImagesCount": 10
}
},
},시간 표현입니다. Hours, Minutes로 각각의 항목은 Tens, Ones로 구성되어 있습니다. 이미지 크기에 맞추어서 X, Y 위치를 설정해주면 됩니다. "ImageIndex"는 각각의 숫자를 표현하기 위한 이미지들 중 맨 처음 인덱스를 넣으면 됩니다. 그리고 "ImageCount"는 총 사용할 이미지의 개수, 여기서는 한자리의 숫자를 표현하므로 총 0~9까지 10개의 이미지를 사용합니다.
각 항목에 대해서 서로 다른 이미지를 사용할 수 있습니다. (대신 그만큼 이미지를 다양하게 만들어야 합니다.) 예를 들어 "시간의 각 자릿수를 모두 다른 색으로 만들고 싶다"라고 하면 시/분 각각 2개씩이므로 총 40개의 이미지가 필요합니다.
3. 날짜 (Date) - MonthAndDay, Weekday, DayAmPm
a. 날짜 "MonthAndDay"
"Date": {
"MonthAndDay": {
"Separate": {
"Month": {
"TopLeftX": 46,
"TopLeftY": 83,
"BottomRightX": 53,
"BottomRightY": 93,
"Alignment": "TopLeft",
"Spacing": 2,
"ImageIndex": 54,
"ImagesCount": 10
},
"Day": {
"TopLeftX": 15,
"TopLeftY": 83,
"BottomRightX": 24,
"BottomRightY": 93,
"Alignment": "TopLeft",
"Spacing": 2,
"ImageIndex": 54,
"ImagesCount": 10
}
},
"TwoDigitsMonth": true,
"TwoDigitsDay": true
},"Date"에 들어갈 수 있는 첫 번째 항목은 "MonthAndDay"입니다. 코드에서는 "Separate"항목 안으로 월과 일을 구분해서 표현하지만 "OneLine"으로 한 번에 처리할 수도 있습니다.
영역 지정. - 월과 일을 각각 원하는 위치를 표현하는 방법은 이 항목이 표시될 영역을 지정해주는 것입니다. TopLeft, BottomRight를 사용하면 됩니다.
Alignment -지정해 둔 영역 안에서 배치를 결정합니다. 배치 관련한 값은 아래와 같습니다. 만약에 실제 이미지가 차지하는 영역보다 지정된 영역이 작은 경우에는 아무런 변화가 없을 것입니다.
| TopLeft | Top | TopRight |
| Left | Center | Right |
| BottomLeft | Bottom | BottomRight |
Spacing - 두 자리 이상 표현될 때 이미지 사이의 간격을 정해줄 수 있습니다.
TwoDigits* - 두 자리 이하 일 때 앞에 0을 넣으려면 true, 넣지 않으려면 false입니다. true라면 "1월 1일"은 "01월 01일"로 표현됩니다.
b. 요일 "WeekDay"
"WeekDay": {
"X": 75,
"Y": 83,
"ImageIndex": 64,
"ImagesCount": 21
}요일은 간단하게 위치만 지정해 주면 됩니다. 다만 여기서 중요한 점은 요일 한 세트(7개)만 쓰는 것이 아니라 총 3개 세트, 21개 이미지가 필요합니다. 이유는 중국 간체+중국 번체+다른 언어 이렇게 구성되어 있으므로 중국어를 사용하지 않더라도 의미 없는 이미지를 14개 채워야 합니다. 보통 영어 패치를 해서 쓰시거나 정발판의 경우는 한국어로 세팅되어 있으므로 맨 마지막 7개에 원하시는 이미지를 넣으면 됩니다.
c. 오전/오후 표시 "DayAmPm"
"DayAmPm": {
"TopLeftX": 0,
"TopLeftY": 0,
"ImageIndexAMCN": 0,
"ImageIndexPMCN": 0,
"ImageIndexAMEN": 0,
"ImageIndexPMEN": 0,
}예제 워치 페이스에는 오전 오후 표시가 없어서 코드만 따로 가져왔습니다. "DayAmPm" 안에 위치와 오전 오후 각각의 이미지 인덱스를 지정해두면 끝입니다. CN버전과 EN버전은 같은 이미지를 사용해도 무방합니다.
4. 활동 (Activity)
"Activity": {
"Steps": {
"Step": {
"TopLeftX": 27,
"TopLeftY": 207,
"BottomRightX": 119,
"BottomRightY": 236,
"Alignment": "TopRight",
"Spacing": 3,
"ImageIndex": 11,
"ImagesCount": 10
}
},
"Calories": {
"Number": {
"TopLeftX": 30,
"TopLeftY": 140,
"BottomRightX": 120,
"BottomRightY": 161,
"Alignment": "TopRight",
"Spacing": 3,
"ImageIndex": 11,
"ImagesCount": 10
},
"DelimiterImageIndex": 52
},
"Pulse": {
"Number": {
"TopLeftX": 30,
"TopLeftY": 107,
"BottomRightX": 119,
"BottomRightY": 127,
"Alignment": "TopRight",
"Spacing": 3,
"ImageIndex": 11,
"ImagesCount": 10
},
"DelimiterImageIndex": 53
},
"Distance": {
"Number": {
"TopLeftX": 30,
"TopLeftY": 174,
"BottomRightX": 122,
"BottomRightY": 195,
"Alignment": "TopRight",
"Spacing": 3,
"ImageIndex": 11,
"ImagesCount": 10
},
"SuffixImageIndex": 50,
"DecimalPointImageIndex": 51
}
},활동에는 걸음수, 심박수, 거리, 칼로리를 표현할 수 있습니다. 위치 표현은 위에서 본 날짜와 동일합니다. 다른 점은 DelimiterImageIndex를 통해서 구분 기호(.,/. etc)를 넣을 수 있습니다. 거리 부분 코드를 보면 SuffixImageIndex로 접미사를 표현할 수 있습니다. 예를 들면 KM나 Mi 등 이미지를 지정하면 뒤에 자동으로 붙게 됩니다. DecimalPointImageIndex는 거리 표현에 사용되는 소수점을 이미지로 지정할 수 있습니다.
5. 상태 (Status)
a. 방해금지, 잠금, 블루투스
"Status": {
"Alarm": {
"Coordinates": {
"X": 4,
"Y": 2,
},
"ImageIndexOn": 48
},
"Lock": {
"Coordinates": {
"X": 21,
"Y": 2,
},
"ImageIndexOn": 49
},
"Bluetooth": {
"Coordinates": {
"X": 38,
"Y": 2,
},
"ImageIndexOff": 47
},Alarm - 방해 금지 기능을 켰을 때
Lock - 잠금 기능이 활성화되었을 때
Bluetooth - 휴대폰과의 블루투스 연결이 끊어졌을 때
각각에 해당하는 이미지 값을 넣으면 됩니다.
b. 배터리
"Battery": {
"Text": {
"TopLeftX": 50,
"TopLeftY": 3,
"BottomRightX": 79,
"BottomRightY": 13,
"Alignment": "TopRight",
"Spacing": 2,
"ImageIndex": 21,
"ImagesCount": 10
},
"Icon": {
"X": 96,
"Y": 2,
"ImageIndex": 31,
"ImagesCount": 9
}
}배터리는 이미지와 텍스트 중 선택해서 사용할 수 있습니다. 텍스트는 배터리 표시에 사용될 숫자 이미지를 넣으면 되고 아이콘은 배터리 양이 늘어나는 순서대로 이미지를 제작하면 됩니다.
6. 나머지
이 항목은 "Other" 아래에 위치한 영역입니다.
a. 진행상태 표시 "StepProgress"
"StepsProgress": {
"Linear": {
"StartImageIndex": 40,
"Segments": [
{
"X": 0,
"Y": 239
},
{
"X": 0,
"Y": 239
},
{
"X": 0,
"Y": 239
},
{
"X": 0,
"Y": 239
},
{
"X": 0,
"Y": 239
},
{
"X": 0,
"Y": 239
},
{
"X": 0,
"Y": 239
}
]
}
},이미지 맨 아래를 보면 현재 걸음 수를 표현해주는 바(bar)가 있습니다. 이를 표현하는 방법은 진행 상태의 부분별로 이미지를 만들고 맨 처음 인덱스를 지정한 다음에 각각의 이미지의 위치를 나열하면 됩니다. 만약에 원형의 "StepProgress"를 만든다고 하면 고리를 조각낸 여러 개의 이미지를 정확한 위치를 지정해주기만 하면 됩니다.
마치며
이렇게 기본적인 기능들에 대해 어떻게 코드가 이루어져 있는지 알아보았습니다. 본인이 원하는 시계에 맞춰 다양하게 만들 수 있습니다. 애니메이션과 아날로그시계를 적용시키는 방법은 다음 글에서 설명하겠습니다.
[워치페이스 만들기 시리즈]
2019/08/26 - [전자기기/미밴드] - 미 밴드 4 워치 페이스 만들기 - 1편: 워치 페이스 간단 수정하기
2019/08/27 - [전자기기/미밴드] - 미 밴드 4 워치 페이스 만들기 - 2편: 코드 파헤치기 1 [기본 기능편]
2019/09/16 - [전자기기/미밴드] - 미 밴드 4 워치 페이스 만들기 - 3편: 코드 파헤치기 2 [부가기능편]
'전자기기 > 미밴드' 카테고리의 다른 글
| 미 밴드 4, 아이폰 건강앱에서 데이터 집계 방식 (0) | 2019.09.04 |
|---|---|
| iOS AmazTools 사용법 정리 _ 미 밴드 4 연동 (0) | 2019.08.29 |
| 미 밴드 4 워치 페이스 만들기 - 1편: 워치 페이스 간단 수정하기 (9) | 2019.08.26 |
| 심봉사가 눈 뜬 느낌 - 미 밴드4 정발판 한글 폰트 패치 전/후 비교 by Amaztools (iOS) (0) | 2019.08.25 |
| 컬러 디스플레이 품었다. 3년만에 다시 구입한 미 밴드! [샤오미 미밴드4 개봉기] (0) | 2019.08.25 |
