Después de rebuscar he conseguido descifrar cómo podemos realizar nuestros WatchFace para la Xiaomi Smart Band 7. No ha sido fácil, por el momento no hay una aplicación que nos permita trabajar directamente sobre un tema para la Xiaomi Smart Band 7, por lo que el proceso va a través de modificar o trabajar directamente sobre una de la Xiaomi Band 6, y a posterior migrarla (autmáticamente) para que sea compatible con la nuestra.
Qué necesitamos:
- Conseguir el archivo .bin de otra WatchFace, pero para la miBand 6, podemos conseguirla aquí: Enalce patrocinado.
- Hemos de encontrar una que sea la base para la que vamos a hacer/modificar, de esta manera podemos aprovechar los números, e iconos y así solo nos centramos en cambiar/añadir una imagen.
- Yo he escogido una base sencilla, en la que puedo mover fácilmente los iconos/números, y así me queda esapcio para poner la imagen que yo quiera.
- Posteriormente hemos de acceder a esta web: Editor Online (enlace patrocinado), y seleccionar en el menú de la izquierda el modelo de Band con la que queremos trabajar, en este caso la Versión 6.
- Selector de formato Plantilla en base la a «esfera» que queremos realizar.
- Open Bin: es para importar el archivo BIN de la esfera Base que tenemos, una vez abierto, veremos la esferam la «programación» de los elementos y los elementos por separado.
- Una vez hemos acabado la edición, hemos de exportar a BIN (versión 6), y guardarla para futuros usos.
- Convierte el trabajo realizado en versión 6, a la versión 7.
- Nos descarga todas las imágenes en un ZIP, de esta manera las podemos editartranquilamente.
- Si ya tenemos todas las imágenes editadas, podemos subirlas todas de golpe, importante: mantener el nombre y la extensión.
- No lo he probado aún, pero debe de se para que el programa Zeep, pueda mostrar las imágenes.
- Editar las imágenes que tenemos descargadas, pero con unas condiciones:
- Respetar el tamaño de la 0000.png, que será la imangen de fondodonde tendremos los elementos que no cambian.
- Respetar el nombre de cada imagen, por ejemplo (aplicable al ejemplo descargado:
- 0000: Backgound
- 0001 a 0003: camputuras de muestra para la presentación de la watchface en las Apps.
- 0004 a 0013: equivalente al % gráfico de los pasos realizados en base al objetivo diario configurado.
- 0014 a 0023: números del 0 al 9 para las horas y minutos.
- 0024 a 0033: números del 0 al 9 para la fecha (Mes / Día)
- 0034 a 0040: Días de la semana
- 0041: AM
- 0042: PM
- 0043: Bloqueo
- 0044: No molestar activado
- 0045: Conexión Bluetooth desconectada
- 0046 a 0055: Números del 0 al 9 para el % de Batería.
- 0056: Símbolo % Batería
- 0057 a 0066: Números del 0 al 9 para las pulsaciones.
- 0067: Sin datos
- 0068: Sin datos registrados
- 0069 a 0075: Equivalente al porcentaje de pulsaciones.
Entender como se posicionas los elementos en la pantalla
- La resolución de la pantalla es de 152×486 píxeles.
- Nos movemos por Coordenadas: X,Y, siendo la coordenada 0,0 la esquina superior izquierda, y la coodenada 152,486, la esquina inferior derecha:
- Por lo qué, en la primera imagen, 0000.png (Background), ésta estará siempre en las coordenadas 0,0.
- El resto de elementos, como los números se posicionarán en base a las coordenadas x,y que le pongamos. Como ayuda, si ponemos el ratón sobre la presentación preliminar, no dirá las coordenadas de ese punto, en el ejemplo, veremos que que ese punto coincide con las coordenas programadas para las decenas de las horas, y así con tooooooooooooooooooooodos los elemntos que se pueden mover por la pantalla:
Edición imágenes
-
- 0000.png: BACKGROUND, edición básica, vamos a editarla con el mismo PAINT de Windows, en este caso vamos a a cambiar de STEPS a PASOS, y vamos a quitar los BPM, ya que a mi no me interesa ese dato, pero si dejaré la barra inferior rosa, también vamos a bajar los puntos que separan las horas y la «/» de la fecha para así tener espacio para una imagen, eso sí manteniendo la posición de la coordena X igual, de manera que solo tengamos que mover la coordenada Y en la programación.
- Vamos poner la foto de un León… y nos quedaría tal que así en crudo, y al lado sin mover nada, es lo que veríamos en la presentación previa en la web que antes hemos comentadom ahora toca desplazar todo lo que tenemos en la cara del León para abajo y quitar los BPM:
 |
 |
- Código Original:
{"Background": { "Image": { "X": 0, "Y": 0, "ImageIndex": 0 }, "PreviewEN": { "X": 31, "Y": 113, "ImageIndex": 2 }, "PreviewCN": { "X": 31, "Y": 113, "ImageIndex": 3 }, "PreviewCN2": { "X": 31, "Y": 113, "ImageIndex": 1 } }, "Time": { "Hours": { "Tens": { "X": 15, "Y": 213, "ImageIndex": 14, "ImagesCount": 10 }, "Ones": { "X": 44, "Y": 213, "ImageIndex": 14, "ImagesCount": 10 } }, "Minutes": { "Tens": { "X": 84, "Y": 213, "ImageIndex": 14, "ImagesCount": 10 }, "Ones": { "X": 113, "Y": 213, "ImageIndex": 14, "ImagesCount": 10 } }, "DrawingOrder": false }, "Activity": { "Steps": { "Number": { "TopLeftX": 13, "TopLeftY": 108, "BottomRightX": 139, "BottomRightY": 66, "Alignment": "HCenter", "SpacingX": 2, "SpacingY": 0, "ImageIndex": 57, "ImagesCount": 10 }, "SuffixImageIndex": 67 }, "Pulse": { "Number": { "TopLeftX": 13, "TopLeftY": 360, "BottomRightX": 139, "BottomRightY": 126, "Alignment": "HCenter", "SpacingX": 2, "SpacingY": 0, "ImageIndex": 57, "ImagesCount": 10 }, "NoDataImageIndex": 68, "SuffixImageIndex": 67 }, "UnknownV7": 0 }, "Date": { "MonthAndDayAndYear": { "Separate": { "Month": { "TopLeftX": 88, "TopLeftY": 277, "BottomRightX": 13, "BottomRightY": 96, "Alignment": "TopLeft", "SpacingX": 0, "SpacingY": 0, "ImageIndex": 24, "ImagesCount": 10 }, "Day": { "TopLeftX": 118, "TopLeftY": 277, "BottomRightX": 13, "BottomRightY": 96, "Alignment": "TopLeft", "SpacingX": 0, "SpacingY": 0, "ImageIndex": 24, "ImagesCount": 10 } }, "TwoDigitsMonth": true, "TwoDigitsDay": true }, "DayAmPm": { "X": 13, "Y": 277, "ImageIndexAMCN": 41, "ImageIndexPMCN": 42, "ImageIndexAMEN": 41, "ImageIndexPMEN": 42 }, "ENWeekDays": { "X": 38, "Y": 277, "ImageIndex": 34, "ImagesCount": 7 }, "CNWeekDays": { "X": 38, "Y": 277, "ImageIndex": 34, "ImagesCount": 7 }, "CN2WeekDays": { "X": 38, "Y": 277, "ImageIndex": 34, "ImagesCount": 7 } }, "StepsProgress": { "Linear": { "StartImageIndex": 4, "Segments": [ { "X": 13, "Y": 27 }, { "X": 13, "Y": 27 }, { "X": 13, "Y": 27 }, { "X": 13, "Y": 27 }, { "X": 13, "Y": 27 }, { "X": 13, "Y": 27 }, { "X": 13, "Y": 27 }, { "X": 13, "Y": 27 }, { "X": 13, "Y": 27 }, { "X": 13, "Y": 27 } ] } }, "Status": { "DoNotDisturb": { "Coordinates": { "X": 15, "Y": 193 }, "OnImageIndex": 44 }, "Lock": { "Coordinates": { "X": 32, "Y": 193 }, "OffImageIndex": 43 }, "Bluetooth": { "Coordinates": { "X": 49, "Y": 193 }, "OffImageIndex": 45 } }, "Battery": { "BatteryText": { "Number": { "TopLeftX": 13, "TopLeftY": 193, "BottomRightX": 138, "BottomRightY": 96, "Alignment": "TopRight", "SpacingX": -1, "SpacingY": 0, "ImageIndex": 46, "ImagesCount": 10 }, "SuffixImageIndex": 56 } }, "HeartProgress": { "Linear": { "StartImageIndex": 69, "Segments": [ { "X": 13, "Y": 422 }, { "X": 13, "Y": 422 }, { "X": 13, "Y": 422 }, { "X": 13, "Y": 422 }, { "X": 13, "Y": 422 }, { "X": 13, "Y": 422 }, { "X": 13, "Y": 422 } ] } } }
Código Modificado:
{
"Background": {
"Image": {
"X": 0,
"Y": 0,
"ImageIndex": 0
},
"PreviewEN": {
"X": 31,
"Y": 113,
"ImageIndex": 2
},
"PreviewCN": {
"X": 31,
"Y": 113,
"ImageIndex": 3
},
"PreviewCN2": {
"X": 31,
"Y": 113,
"ImageIndex": 1
}
},
"Time": {
"Hours": {
"Tens": {
"X": 15,
"Y": 323,
"ImageIndex": 14,
"ImagesCount": 10
},
"Ones": {
"X": 44,
"Y": 323,
"ImageIndex": 14,
"ImagesCount": 10
}
},
"Minutes": {
"Tens": {
"X": 84,
"Y": 323,
"ImageIndex": 14,
"ImagesCount": 10
},
"Ones": {
"X": 113,
"Y": 323,
"ImageIndex": 14,
"ImagesCount": 10
}
},
"DrawingOrder": false
},
"Activity": {
"Steps": {
"Number": {
"TopLeftX": 13,
"TopLeftY": 108,
"BottomRightX": 139,
"BottomRightY": 66,
"Alignment": "HCenter",
"SpacingX": 2,
"SpacingY": 0,
"ImageIndex": 57,
"ImagesCount": 10
},
"SuffixImageIndex": 67
},
"Pulse": {
"Number": {
"TopLeftX": -1,
"TopLeftY": -1,
"BottomRightX": -139,
"BottomRightY": -126,
"Alignment": "HCenter",
"SpacingX": 2,
"SpacingY": 0,
"ImageIndex": 57,
"ImagesCount": 10
},
"NoDataImageIndex": 68,
"SuffixImageIndex": 67
},
"UnknownV7": 0
},
"Date": {
"MonthAndDayAndYear": {
"Separate": {
"Month": {
"TopLeftX": 115,
"TopLeftY": 390,
"BottomRightX": 13,
"BottomRightY": 96,
"Alignment": "TopLeft",
"SpacingX": 0,
"SpacingY": 0,
"ImageIndex": 24,
"ImagesCount": 10
},
"Day": {
"TopLeftX": 87,
"TopLeftY": 390,
"BottomRightX": 13,
"BottomRightY": 96,
"Alignment": "TopLeft",
"SpacingX": 0,
"SpacingY": 0,
"ImageIndex": 24,
"ImagesCount": 10
}
},
"TwoDigitsMonth": true,
"TwoDigitsDay": true
},
"DayAmPm": {
"X": 13,
"Y": 390,
"ImageIndexAMCN": 41,
"ImageIndexPMCN": 42,
"ImageIndexAMEN": 41,
"ImageIndexPMEN": 42
},
"ENWeekDays": {
"X": 38,
"Y": 390,
"ImageIndex": 34,
"ImagesCount": 7
},
"CNWeekDays": {
"X": 38,
"Y": 390,
"ImageIndex": 34,
"ImagesCount": 7
},
"CN2WeekDays": {
"X": 38,
"Y": 390,
"ImageIndex": 34,
"ImagesCount": 7
}
},
"StepsProgress": {
"Linear": {
"StartImageIndex": 4,
"Segments": [
{
"X": 13,
"Y": 27
},
{
"X": 13,
"Y": 27
},
{
"X": 13,
"Y": 27
},
{
"X": 13,
"Y": 27
},
{
"X": 13,
"Y": 27
},
{
"X": 13,
"Y": 27
},
{
"X": 13,
"Y": 27
},
{
"X": 13,
"Y": 27
},
{
"X": 13,
"Y": 27
},
{
"X": 13,
"Y": 27
}
]
}
},
"Status": {
"DoNotDisturb": {
"Coordinates": {
"X": 15,
"Y": 300
},
"OnImageIndex": 44
},
"Lock": {
"Coordinates": {
"X": 32,
"Y": 300
},
"OffImageIndex": 43
},
"Bluetooth": {
"Coordinates": {
"X": 49,
"Y": 300
},
"OffImageIndex": 45
}
},
"Battery": {
"BatteryText": {
"Number": {
"TopLeftX": 13,
"TopLeftY": 300,
"BottomRightX": 138,
"BottomRightY": 96,
"Alignment": "TopRight",
"SpacingX": -1,
"SpacingY": 0,
"ImageIndex": 46,
"ImagesCount": 10
},
"SuffixImageIndex": 56
}
},
"HeartProgress": {
"Linear": {
"StartImageIndex": 69,
"Segments": [
{
"X": 13,
"Y": 422
},
{
"X": 13,
"Y": 422
},
{
"X": 13,
"Y": 422
},
{
"X": 13,
"Y": 422
},
{
"X": 13,
"Y": 422
},
{
"X": 13,
"Y": 422
},
{
"X": 13,
"Y": 422
}
]
}
}
}
Resultado:
Todo esto es para conseguir un diseño rápido, aprovechando los caractéres y tipografias, si quieres cambiar el tipo de letra, o poner los días en castellano, tienes que editar cada una de las imágenes asociadas y subirlas, y, sobre todo, que luego no se pisen entre ellas.
Guardar Diseño
Ahora tenemos que dar al botón de EXPORT BIN, nos lo guardará en formato para la MI6, lo hemos de guardar por si mañana queremos retocarlo o usarlo de base para otro.
Seguidamente, damos al botón CONVERT TO BAND 7, y ese será el archivo que tendremos que pasar a nuestro teléfono.
En breve miraré de hacer un vídeo, paso a paso y otro artículo para instalar nuestra personalización en la SmartBand 7.
