Meses con letra en vez de con número by @Dieguinchi
Cuando queremos poner los meses en letra (enero, febrero, marzo, etc.) en vez de con números (1,2,3,etc.) hay que tener en cuenta una limitación muy importante. El firmware del reloj admite 10 imágenes por cada unidad y cada decena, como en la hora.
Eso se traduce que tenemos disponibles del 0 al 9 (10 imágenes) para representar 12 meses (12 imágenes).
Es obvio que si hacemos una imagen por cada mes, solo vamos a llegar a septiembre, que equivale a imágenes del 0 al 9. Octubre, noviembre y diciembre, que corresponden al mes 10, 11 y 12 quedan fuera y no se verían. De hecho, al llegar al mes 9, que es septiembre, se vería septiembre también en octubre, en noviembre y en diciembre.
Eso, definitivamente, no queda bien.
He usado el watchface de MrSimply para explicar cómo podemos meter 12 meses en 10 imágenes aprovechando las propiedades del JSON, así poder hacerlo cada uno de nosotros cuando queramos.
Todo este tutorial lo voy a escribir para tenerlo en PDF, por lo que podéis consultar el video o el PDF cuando lo necesitéis.
Lo primero que vamos a hacer es usar este fragmento de JSON:
"Date": {
"MonthAndDay": { "Separate": { "Month": {
"TopLeftX": -176, "TopLeftY": 0,
"BottomRightX": 176, "BottomRightY": 14, "Alignment": "TopLeft", "Spacing": -176,
"ImageIndex": 31, "ImagesCount": 10
}
},
"TwoDigitsMonth": false, }
},
De este fragmento puede variar el TopLeftY y el BottomRightY ya que podemos adaptarlo a la altura que necesitemos para nuestro WatchFace. También puede variar el ImageIndex dependiendo de cómo
hayamos numerado los meses.
ImageCount no se debe cambiar, ya que el firmware del reloj va a detectar 10 imágenes, recordemos del 0 al 9 como si tuviéramos números.
TwoDigitsMonth tampoco debe cambiar. Así si los meses son unidades no nos añadirá un cero delante (01 en vez de 1, 02 en vez de 2, etc.) y no nos liaremos con las imágenes.
Lo que debe permanecer inamovible y vamos a prestar atención para la explicación es lo siguiente:
"TopLeftX": -176,
"BottomRightX": 176,
"Alignment": "TopLeft",
"Spacing": -176,
Vamos a ir explicando estas propiedades a la vez que explicamos los casos de los meses uno por uno.
1. Enero
Vamos a mostrar paso a paso como vamos a conseguir Enero.
Lo primero es tener en cuenta que la primera imagen corresponde al 0. Como el primer mes es 1 entonces la primera imagen la saltamos. En nuestro caso la 031. Así que nos vamos a la 032.png
NOTA: He puesto un fondo gris para poder apreciar el nombre del mes porque tiene fondo transparente, y sobre fondo blanco no se vería.
Bien, analizando la imagen vemos que tiene un ancho de 352 pixeles, justo el doble que admite nuestro reloj, que son 176 pixeles. Nos tenemos que imaginar una línea que divida la imagen en 2, aunque en este mes la línea está clara, porque divide la parte negra de la parte transparente.
Ahora, sabiendo que Alignment es TopLeft, vamos a simular como quedaría en el reloj:
Y seguidamente vamos a aplicar las propiedades del JSON, que en resumidas cuentas es desplazar la imagen 176 pixeles en negativo. Entonces quedaría así:
La propiedad Spacing la obviamos hasta que nos encontramos con los meses de dos números. Eso quiere decir octubre, noviembre y diciembre, correspondiente al mes 10, 11 y 12.
Con esto, Enero lo tenemos terminado y bien colocado. Vamos a repetir la misma lógica hasta el mes de septiembre.
2. De Febrero a Septiembre
Número de imagen Sin propiedades de JSON Con propiedades de JSON
3. Octubre, primer mes de dos dígitos
Octubre es el primer mes de dos dígitos. Un 1 y 0, y en el reloj si fuesen números veríamos un 10.
Vamos a repetir la simulación, pero con dos números seguidos, y esta vez si hay que visualizar la propiedad
Spacing del JSON. Cogemos el número 1 y el 0 y los colocamos seguidos en el reloj:
Realizamos el desplazamiento de 176 pixeles en negativo como cualquier otro mes:
Y ahora aplicamos la propiedad Spacing: -176 entre los dos números.
¿Qué ha pasado aquí? Pues que al aplicar un spacing negativo de 176 pixeles hemos montado 176 pixeles del segundo número encima del primero.
Vamos a repetir el proceso completo para noviembre y diciembre, ya que es algo más difícil de entender.
4. Noviembre, segundo mes de dos dígitos
Noviembre es el segundo mes de dos dígitos. Un 1 y otro 1, y en el reloj si fuesen números veríamos un 11.
Vamos a repetir la simulación, pero con dos números seguidos, y esta vez si hay que visualizar la propiedad
Spacing del JSON. Cogemos el número 1 dos veces y los colocamos seguidos en el reloj:
Realizamos el desplazamiento de 176 pixeles en negativo como cualquier otro mes:
Y ahora aplicamos la propiedad Spacing: -176 entre los dos números.
Ha ocurrido lo mismo que con Octubre. Al aplicar un spacing negativo de 176 pixeles hemos montado 176 pixeles del segundo número encima del primero.
5. Diciembre, tercer y último mes de dos dígitos
Diciembre es el tercer y último mes de dos dígitos. Un 1 y un 2, y en el reloj si fuesen números veríamos un 12.
Vamos a repetir la simulación, pero con dos números seguidos, y esta vez si hay que visualizar la propiedad
Spacing del JSON. Cogemos el número 1 y el número 2 y los colocamos seguidos en el reloj:
Realizamos el desplazamiento de 176 pixeles en negativo como cualquier otro mes:
Y ahora aplicamos la propiedad Spacing: -176 entre los dos números.
Ha ocurrido lo mismo que con Octubre y Noviembre. Al aplicar un spacing negativo de 176 pixeles hemos montado 176 pixeles del segundo número encima del primero.
Al sobrepasar el mes 12 se reinicia el ciclo con el mes 1 y vuelta a empezar.
