Diseñe su propia esfera para Pebble ( parte 2 de 2)

En un post anterior  vimos como ómo crear un nuevo proyecto Pebble, con  la función de generar  una esfera básica y utilizar TickTimerService para mostrar la hora actual. Sin embargo, el diseño era bastante básico, así que vamos a  intentar mejorar con un poco de personalización!

Para ello vamos a utilizar algunos conceptos nuevos SDK Guijarro, incluyendo:

• Administracion de recursos
• Fuentes personalizadas (usando GFont
• Imágenes (usando GBitmap y BitmapLayer

Estos nos permitirá cambiar completamente el aspecto y la sensación del su esfera. Nosotros ofrecemos algunos materiales de muestra a utilizar, pero una vez que entienda el proceso,asegúrese de reemplazar éstos con su propia  personalización para realmente hacer sus  propios diseños.

Una vez que hayamos terminado, usted debe terminar con un su esfera con este aspecto:

Primeros pasos

Para continuar desde la última parte, puede modificar su proyecto Pebble existente o crear uno nuevo, utilizando el código de principal de ese proyecto .c archivo como una plantilla inicial. Como referencia, que debe mirar algo como esto.

Puedes crear un nuevo proyecto CloudPebble partir de esta plantilla por hacer clic aquí.

El resultado de la primera parte debería ser algo como esto – una visualización de la hora básica:

Mejoremoslo!

Adición de una fuente personalizada

Para agregar un recurso de fuente personalizado a utilizar para la visualización de la hora TextLayer haga clic en “Agregar nuevo” a la izquierda del editor CloudPebble. Ajuste el “Tipo de recurso” a la “fuente TrueType ‘y cargar un archivo de fuentes. Elija un “identificador”, que es el valor que se utilizará para hacer referencia al recurso de fuente en el .c archivo. Esto debe terminar con el tamaño deseado de la fuente, que debe ser lo suficientemente pequeño para mostrar una amplia tiempo como ’23: 50 ‘en elTextLayer Si no encaja, siempre se puede volver aquí para probar otro tamaño. Haga clic en Guardar y la fuente se agregará a su proyecto.

Un archivo fuente personalizada debe ser un TrueType fuente en el .ttf formato de archivo. He aquí un ejemplo de fuente a utilizar (fuente).

Ahora vamos a sustituir la fuente del sistema utilizado antes FONT_KEY_BITHAM_42_BOLD para nuestro hijo de un recién importado. Para ello, vamos a declarar una GFont crear y destruir enmain_window_load() y main_window_unload() respectivamente.

  s_time_font GFont estática;

A continuación, añadimos la creación y sustitución de la nueva GFont en la llamada existente paratext_layer_set_font() en main_window_load() Aquí se muestra un identificador ejemplo utilizado al cargar la fuente anterior, FONT_PERFECT_DOS_48 que siempre es pre-fijada con RESOURCE_ID_

  // Crear GFont
 s_time_font = fonts_load_custom_font (resource_get_handle (RESOURCE_ID_FONT_PERFECT_DOS_48));

 // Aplicar para TextLayer
 text_layer_set_font (s_time_layer, s_time_font);

y finalmente, la destrucción segura de la GFont en main_window_unload()

  // Unload GFont
 fonts_unload_custom_font (s_time_font);

Usando el ejemplo de fuente proporcionado, el aumento de tamaño de la fuente requiere un ligero cambio en el GRect suministra a text_layer_create() para convertirse en:

  s_time_layer = text_layer_create (GRect (5, 52, 139, 50));

Después de volver a compilar y volver a instalar (ya sea utilizando el botón verde ‘Play’ de la parte superior derecha del editor CloudPebble, o haciendo clic en ‘Build Run “y” Instalar y Ejecutar “en la pantalla” Compilación “), el su esfera debería figurar una fuente mucho más interesante.

Un ejemplo de pantalla se muestra a continuación:

Adición de un mapa de bits

El SDK de Pebble también le permite utilizar una imagen de mapa de bits de 2 colores (blanco y negro) en su proyecto de su esfera. Puede asegurarse de que usted cumple con este requisito mediante la comprobación de los ajustes de exportación en su paquete de gráficos, o simplemente utilizando sólo el blanco #FFFFFF y negro #000000 en la creación de la imagen. Otra alternativa es utilizar una herramienta de tramado tales como HyperDither. Esto se carga desde los recursos de la su esfera en unGBitmap estructura de datos antes de ser mostrados utilizando un BitmapLayer elemento. Estos dos se comportan de una manera similar a GFont y TextLayer así que vamos a empezar.

El primer paso es el mismo que el uso de una fuente personalizada; importar el mapa de bits en CloudPebble como un recurso haciendo clic en “Agregar nuevo” al lado de “Recursos” en la parte izquierda de la pantalla proyecto CloudPebble. Asegúrese de que el ‘tipo de recurso’ es ‘PNG imagen “, elija un identificador para el recurso y que cargarlo.

Al igual que antes, aquí es un ejemplo de mapa de bits que hemos creado para que usted utilice, que se ve así:

Una vez que esto se ha añadido al proyecto, volver a su .c archivo y declarar dos punteros más, uno cada uno de GBitmap y BitmapLayer cerca de la parte superior del archivo:

  estática s_background_layer BitmapLayer *;
 estática s_background_bitmap GBitmap *;

Ahora vamos a crear dos de estos en main_window_load() Una vez creados los dos elementos, nos fijamos el BitmapLayer utilizar nuestro GBitmap y luego agregarlo como un hijo de la principalWindow como lo hicimos para el TextLayer

Sin embargo, se debe señalar que la BitmapLayer debe ser añadido a la Window antes de que elTextLayer Esto asegurará que el texto se dibuja en la parte superior de la imagen. De lo contrario, el texto se dibujará detrás de la imagen y permanecen invisibles para nosotros. Aquí está ese proceso en su totalidad, de ser lo más claro posible:

  // Crear GBitmap, a continuación, establezca a creado BitmapLayer
 s_background_bitmap = gbitmap_create_with_resource (RESOURCE_ID_IMAGE_BACKGROUND);
 s_background_layer = bitmap_layer_create (GRect (0, 0, 144, 168));
 bitmap_layer_set_bitmap (s_background_layer, s_background_bitmap);
 layer_add_child (window_get_root_layer (ventana), bitmap_layer_get_layer (s_background_layer));

 // Crear TextLayer tiempo
 s_time_layer = text_layer_create (GRect (5, 52, 139, 50));
 text_layer_set_background_color (s_time_layer, GColorClear);
 text_layer_set_text_color (s_time_layer, GColorBlack);
 text_layer_set_text (s_time_layer, "00:00");

Como siempre, el último paso debe ser asegurar que liberar la memoria consumida por estos nuevos elementos en main_window_unload()

  // Destruye GBitmap
 gbitmap_destroy (s_background_bitmap);

 // Destruye BitmapLayer
 bitmap_layer_destroy (s_background_layer);

Con todo esto en su lugar, la imagen de ejemplo fondo bien debe enmarcar el tiempo y que coincida con el estilo de la nueva fuente personalizada. Por supuesto, si usted ha usado su propia fuente y de mapa de bits (muy recomendable!) Entonces  su esfera no sera exactamente así,pero en todo caso será suya…

Fuente aqui