Properties of the main background image
The main images have a size of 176px x 176px with limited colors.
What colors can I use in the images?
The color palette is limited, with the following
- Black 0x000000
- Cyan 0x0000FF
- Green 0x00FF00
- Red 0xFF0000
- Blue 0x00FFFF
- Purple 0xFF00FF
- Yellow 0xFFFF00
- White 0xFFFFFF
- Transparent 0xFEFE00
Properties of the json
When we open the json we will see many attributes, each one of them specifies which objects will be located in the watchface and its position, so we will analyze the different attributes:
We will analyze one of the shared watchfaces in this web
Kero v6
- Definition of the background image
"Background": {
"Image": {
"X": 0,
"Y": 0,
"ImageIndex": 0 // indicating that the image will be called 000.png
}
}
- Definition of the data referring to the time
"Time": {
"Hours": {
"Tens": {
"X": 14, // position on the XY axis
"Y": 48,
"ImageIndex": 1, // we will indicate that the tens of hours
"ImagesCount": 10 // will go from the image 001.png to the image 010.png
},
"Ones": {
"X": 49, // position on the XY axis
"Y": 48,
"ImageIndex": 1, // we will indicate that the units of the hours
"ImagesCount": 10 // will go from the image 001.png to the image 010.png
}
},
"Minutes": {
"Tens": {
"X": 98, // position on the XY axis
"Y": 48,
"ImageIndex": 1, // we will indicate that the tens of hours
"ImagesCount": 10 // will go from the image 001.png to the image 010.png
},
"Ones": {
"X": 133, // position on the XY axis
"Y": 48,
"ImageIndex": 1, // we will indicate that the units of the hours
"ImagesCount": 10 // will go from the image 001.png to the image 010.png
}
}
}
- Definition of the data referring to the activity (under object “Activity”)
- Steps
"Steps": {
"TopLeftX": 118, // positioning using distances
"TopLeftY": 112, // to the different corners
"BottomRightX": 169,
"BottomRightY": 125,
"Alignment": "TopRight",
"Spacing": 3,
"ImageIndex": 11, // the images of the
"ImagesCount" counters : 10 // they go from 011.png to the image 020.png
},
- Calories
"Calories": {
"TopLeftX": 140, // positioning using distances
"TopLeftY": 154, // to the different corners
"BottomRightX": 169,
"BottomRightY": 167,
"Alignment": "TopRight",
"Spacing": 3,
"ImageIndex": 11, // the images of the
"ImagesCount" counters : 10 // they go from 011.png to the image 020.png
},
- Distance
"Distance": {
"Number": {
"TopLeftX": 118, // positioning using distances
"TopLeftY": 133, // to the different corners
"BottomRightX": 170,
"BottomRightY": 146,
"Alignment": "TopRight",
"Spacing": 1,
"ImageIndex": 11, // the images of the
"ImagesCount" counters : 10 // they go from 011.png to the image 020.png
},
- To handle the decimals we will indicate the images destined to represent the “.” And “km”
"SuffixImageIndex": 21, // image with the "km" in 022.png, in my case the image is super small and black
"DecimalPointImageIndex": 22 // image with the "." in 022.png
- Definition of the data referring to the day, month and day of the week under the object “Date”
"MonthAndDay": {
"Separate": {
"Month": {
"TopLeftX": 9, // positioning using distances
"TopLeftY": 27, // to the different corners
"BottomRightX": 55,
"BottomRightY": 40,
"Alignment": "TopRight",
"Spacing": 3,
"ImageIndex": 23, // the images of the
"ImagesCount" digits : 10 // they go from 023.png to the image 032.png
},
"Day": {
"TopLeftX": 9, // positioning using distances
"TopLeftY": 27, // to the different corners
"BottomRightX": 60,
"BottomRightY": 40,
"Alignment": "TopLeft",
"Spacing": 3,
"ImageIndex": 23, // the images of the
"ImagesCount" digits : 10 // they go from 023.png to the image 032.png
}
},
"TwoDigitsMonth": true, // true if we want the month in 2 digits
"TwoDigitsDay": true // true if we want the day in 2 figures
},
"WeekDay": {
"X": 133, // position on the XY axis
"Y": 26,
"ImageIndex": 33, // the images of the
"ImagesCount" digits : 7 // go from 033.png to the image 039.png
}
- Definition of the data referring to the weather icon, the images come according to the RES that you have installed
"Weather": {
"Icon": {
"Coordinates": {
"X": 8, // position on the XY axis where we will place the icon
"Y": 123
}
},
- Definition of the different temperature data under the object “Temperature”:
- Actual temperature
"Current": {
"Number": {
"TopLeftX": 82, // positioning using distances
"TopLeftY": 27, // to the different corners
"BottomRightX": 110,
"BottomRightY": 40,
"Alignment": "TopLeft",
"Spacing": 2,
"ImageIndex": 23, // the images of the
"ImagesCount" digits : 10 // they go from 023.png to the image 032.png
},
"MinusImageIndex": 40, // image with the symbol "-" in 040.png
"DegreesImageIndex": 41 // image with the symbol "º" in 041.png
},
- Maximum temperature during the day / night
"Today": {
"Separate": {
"Day": {
"Number": {
"TopLeftX": 41, // positioning using distances
"TopLeftY": 123, // to the different corners
"BottomRightX": 69,
"BottomRightY": 136,
"Alignment": "TopRight",
"Spacing": 3,
"ImageIndex": 11, // the images of the
"ImagesCount" digits : 10 // go from 011.png to the image 020.png
},
"MinusImageIndex": 42 // image with the minus sign in 042.png
},
"Night": {
"Number": {
"TopLeftX": 41, // positioning using distances
"TopLeftY": 144, // to the different corners
"BottomRightX": 69,
"BottomRightY": 157,
"Alignment": "TopRight",
"Spacing": 3,
"ImageIndex": 11, // the images of the
"ImagesCount" digits : 10 // go from 011.png to the image 020.png
},
"MinusImageIndex": 42 // image with the minus sign in 042.png
}
}
- Data referring to the corresponding icons that show the status of several functions of our clock, under the object “Status”
"Status": { "Bluetooth": { "Coordinates": { "X": 106, // position on the XY axis "Y": 6 }, "ImageIndexOn": 43, // On in image 043.png "ImageIndexOff": 44 // Off in image 044.png },
"Alarm": { "Coordinates": { "X": 25, // position on the XY axis "Y": 8 }, "ImageIndexOn": 45 // in image 045.png },
"Lock": { "Coordinates": { "X": 9, // position on the XY axis "Y": 8 }, "ImageIndexOn": 46 // in image 046.png },
"DoNotDisturb": { "Coordinates": { "X": 41, // position on the XY axis "Y": 8 }, "ImageIndexOn": 47 // in image 047.png } },
- Data referring to the information on the battery, under the object “Battery”
"Battery": {
"Text": {
"TopLeftX": 126, // positioning using distances
"TopLeftY": 8, // to the different corners
"BottomRightX": 136,
"BottomRightY": 16,
"Alignment": "TopRight",
"Spacing": 1,
"ImageIndex": 48, // the images of the
"ImagesCount" digits : 10 // they go from 048.png to the image 057.png
},
"Icon": {
"X": 150, // position on the XY axis
"Y": 8,
"ImageIndex": 58, // the different images of the
"ImagesCount" battery : 6 // go from 058.png to the image 063.png
}
}
How are the circles that are completing that appear in some watchfaces?
We will take as an example one of the last watchfaces I have made
The orange circle is completed as we walk
The lines to include these circles would have the following form:
“StepsProgress” : {
“Circle” : {
“CenterX” : 85 , // location according to X axes, and
“CenterY” : 114 ,
“RadiusX” : 33 , // Radius of the circle
“RadiusY” : 33 ,
“StartAngle” : 0 , // Where you start fill
“EndAngle” : 360 ,
“Width” : 8 , // Thickness of the circle
“Color” : “0xF3A806” // Color of the fill of the circle
}
} ,
How to specify that your watchface will give the time in 12h format?
You have to add a piece of code inside the object “Time”
“Time” : {
“Hours” : {
“Tens” : {
“X” : 40 ,
“Y” : 5 ,
“ImageIndex” : 1 ,
“ImagesCount” : 10
} ,
“Ones” : {
“X” : 62 ,
“Y” : 5 ,
“ImageIndex” : 1 ,
“ImagesCount” : 10
}
} ,
“Minutes” : {
“Tens” : {
“X” : 90 ,
“Y” : 5 ,
“ImageIndex” : 1 ,
“ImagesCount” : 10
} ,
“Ones” : {
“X” : 112 ,
“Y” : 5 ,
“ImageIndex” : 1 ,
“ImagesCount” : 10
}
} , “AmPm” : {
“X” : 0 , “Y” : 0 , “ImageIndexAm” : 11 , // Reference to the image with AM symbol “ImageIndexPm” : 12 // Reference to the image with PM symbol } } ,
Source: How to create / edit a watchface for Amazfit Bip by Kero – AmazfitBipWF
