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:

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:

final framed

 

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:

final result

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:

custom font

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í:

background

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…

final framed

Fuente aqui

Anuncios

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


En post  anteriores hemos hablado  que hoy en día  no  existe  ningún smartwatch  con la autonomía  que  goza un Pebble( normalmente una semana pero puede alargarse hasta 9 dias según el uso que se le haga),  pues ademas ese fue precisamente fue uno de los principios de su diseño  basado por cierto en sustituir la clásica pantalla oled por una de tinta electrónica.

Por si fuera poco,  tambien es factible personalizarlo fácilmente  usando c,  js ,java   y otros lenguajes.

En este post vamos  a ver como usando el lenguaje C  , y un entorno en nube  gratuito  podemos diseñar una nueva esfera básica buscando algo como esto:

final result

Primeros pasos

 

Ir a CloudPebble y haga clic en “Comenzar” para iniciar sesión con tu cuenta de Pebble, o crear uno nuevo si usted no tiene ya uno. A continuación, haga clic en “Crear” para crear un nuevo proyecto. Dele a su proyecto un nombre adecuado, tal como “Tutorial 1” y dejar el “Tipo de proyecto” como “Pebble C SDK ‘, con una’ plantilla ‘de« proyecto vacío “, ya que estaremos empezando desde cero para ayudar a maximizar su comprensión a medida que avanzamos.

Haz clic en “Crear” y verá la pantalla principal CloudPebble proyecto. El menú de la izquierda muestra todos los enlaces pertinentes que se necesitan para crear su su esfera. Haz clic en “Configuración” y verá el nombre que acaba de suministrar, junto con varias otras opciones. Como estamos creando un su esfera, cambie el ‘App Kind’ a ‘su esfera’.

La principal diferencia entre los dos tipos son que watchfaces son seleccionadas usando los botones Arriba y Abajo y sirven como la pantalla por defecto en el reloj. Esto también significa que estos botones no están disponibles para el comportamiento personalizado (Volver y Select también no están disponibles para watchfaces). Por el contrario, watchapps son lanzados desde el menú del sistema Pebble. Estos tienen más capacidades, tales como los clics de los botones y elementos de menú, pero vamos a llegar a los que más tarde.

Por último, establezca su “Nombre de la empresa ‘y podemos empezar a escribir algo de código!

Conceptos básicos de su esfera

Crear el primer archivo de origen haciendo clic en “Agregar nuevo” en el menú de la izquierda, seleccionando ‘archivo C’ como el tipo y la elección de un nombre adecuado, tal como main.c. Haz clic en “Crear” y se le mostrará la pantalla principal del editor.

Vamos a añadir los segmentos de código básicas que son requeridos por cada watchapp. La primera de ellas es la directiva principal para usar el SDK de Pebble en la parte superior del archivo, así:

  #include <pebble.h>

 

Después de esta primera línea, tenemos que empezar con la estructura de aplicación recomendado, específicamente un C estándar main() la función y otras dos funciones para ayudar a organizar la creación y destrucción de todos los elementos Pebble SDK. Esto ayuda a hacer la tarea de gestionar la asignación de memoria y desasignación tan simple como sea posible. Además, main() pide también app_event_loop()que permite a la espera watchapp de eventos del sistema hasta que sale.

La estructura recomendada se muestra a continuación, y se puede utilizar como base para su propio archivo de su esfera copiándolo en CloudPebble:

  #include <pebble.h>

 static void init () {

 }

 estática deinit void () {

 }

 int main (void) {
   init ();
   app_event_loop ();
   deinit ();
 }

 

Para añadir la primera Window primero declaramos un puntero estática a una Window variable, de modo que podamos acceder a él siempre que lo necesitamos, sobre todo en el init() y deinit() funciones. Añadir esta declaración a continuación #include con el prefijo s_ para denotar su static naturaleza static aquí significa que es accesible sólo dentro de este archivo):

  estática s_main_window Ventana *;

 

El siguiente paso es crear una instancia de Window para asignar a este puntero, lo que vamos a hacer eninit() utilizando las funciones de Pebble SDK apropiados. En este proceso también se le asigna dos funciones de controlador que proporcionan una capa adicional de abstracción para gestionar la posterior creación de la Window sub-elementos ‘s, de una manera similar a como init() y deinit() realizan esta tarea para el watchapp como entero. Estas dos funciones se deben crear por encima de init() y deben coincidir con las siguientes firmas (los nombres pueden variar, sin embargo):

  static void main_window_load (Ventana * ventana) {

 }

 static void main_window_unload (Ventana * ventana) {

 }

 

Con este hecho, podemos completar la creación de la Window elemento, haciendo referencia a estas dos nuevas funciones de controlador que se llaman por el sistema cada vez que la Window se está construyendo. Este proceso se muestra a continuación, y tiene lugar en init()

  static void init () {
   // Crear principal elemento ventana y asignar al puntero
   s_main_window window_create = ();

   // Manipuladores Set para gestionar los elementos dentro de la Ventana
   window_set_window_handlers (s_main_window, (WindowHandlers) {
     . Load = main_window_load,
     . Unload = main_window_unload
   });

   // Mostrar la ventana en el reloj, con animada = true
   window_stack_push (s_main_window, true);
 }

 

Un buen mejores prácticas para aprender en esta primera etapa es para que coincida con todos los SDK de Pebble _create() llamada a la función con el equivalente _destroy() función para asegurarse de que toda la memoria utilizada se devuelve al sistema cuando la aplicación se cierra. Vamos a hacer esto ahora endeinit() para nuestro principal Window elemento:

  estática deinit void () {
     // Destruye Ventana
     WINDOW_DESTROY (s_main_window);
 }

 

Ahora podemos compilar y ejecutar este su esfera, pero no vamos a mostrar algo interesante todavía.También es una buena práctica para comprobar que nuestro código sigue siendo válido después de cada cambio iterativo, así que vamos a hacer esto ahora.

Primero Compilación e instalación

Para compilar el su esfera, asegúrese de que ha guardado el archivo C haciendo clic en el icono ‘Guardar’ en la derecha de la pantalla del editor y luego proceder a la pantalla ‘Compilación’ haciendo clic en el enlace correspondiente en la parte izquierda de la pantalla. Haga clic en “Build Ejecutar” para iniciar el proceso de compilación y esperar el resultado. Esperemos que el estado debe convertirse en “correcta”, es decir, el código es válido y se puede ejecutar en el reloj.

Con el fin de instalar su su esfera en el Callao, primera instalación del Developer Connection Pebble.Asegúrese de que está utilizando la última versión de la aplicación de Pebble.

Haga clic en “Instalar y Ejecutar” y esperar a que la aplicación para instalar.

¡Felicidades! Usted debe ver que usted tiene un nuevo elemento en el carrusel de su esfera, pero es totalmente en blanco!

 

Vamos a cambiar eso con la siguiente etapa hacia una su esfera básica – la TextLayer elemento.

Mostrando Algunos de texto

Vaya de nuevo al editor de código CloudPebble y abrir su archivo principal C para continuar añadiendo código.

La mejor manera de mostrar un poco de texto en un su esfera o watchapp es utilizar un TextLayerelemento. El primer paso al hacer esto es seguir un procedimiento similar al utilizado para la creación de laWindow con un puntero, idealmente añadido a continuación s_main_window

  estática s_time_layer TextLayer *;

 

Este será el primer elemento añadido a nuestra Window por lo que hará la función de Pebble SDK llama a crearlo en main_window_load() Después de llamar text_layer_create() llamamos a otras funciones con nombres ingleses de civil que describen exactamente lo que hacen, lo que es para ayudar a propiedades de diseño de instalación para el texto mostrado en la TextLayer incluyendo colores, alineación y tamaño de fuente. También incluimos una llamada a text_layer_set_text() con “00:00” para que podamos verificar que el TextLayer está configurado correctamente. Por lo tanto main_window_load() se convierte en:

  static void main_window_load (Ventana * ventana) {
   // Crear TextLayer tiempo
   s_time_layer = text_layer_create (GRect (0, 55, 144, 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");

   // Mejorar el diseño para ser más como un su esfera
   text_layer_set_font (s_time_layer, fonts_get_system_font 
   text_layer_set_text_alignment (s_time_layer, GTextAlignmentCenter);

   // Añadir como una capa secundaria a la capa de la raíz de la Ventana
   layer_add_child (window_get_root_layer (ventana), text_layer_get_layer (s_time_layer));
 }

 

Tenga en cuenta el uso de los valores de SDK como GColorBlack y FONT_KEY_BITHAM_42_BOLDque permiten el uso de características y comportamientos incorporados. Estos ejemplos son el color negro y un sistema incorporado en la fuente del sistema. Más adelante hablaremos de la carga de un archivo fuente personalizada, que se puede utilizar para sustituir este valor.

Al igual que con Window debemos estar seguros de destruir cada elemento que creamos. Haremos esto enmain_window_unload() para mantener la gestión del TextLayer completamente dentro de la carga y descarga de la Window que está asociado. Esta función ahora debería tener este aspecto:

  static void main_window_unload (Ventana * ventana) {
     // Destruye TextLayer
     text_layer_destroy (s_time_layer);
 }

 

Esto completa la configuración del diseño básico su esfera. Si regresa a ‘Compilación’ e instalar una nueva construcción, ahora debería ver lo siguiente:

TextLayer

El paso final es conseguir la hora actual y mostrarlo usando el TextLayer Esto se hace con elTickTimerService

Decir la hora

El TickTimerService es un servicio de eventos que permite el acceso a la hora actual mediante la suscripción de una función que se ejecute siempre que cambie el tiempo. Normalmente esto puede ser cada minuto, pero también puede ser cada hora, o cada segundo. Sin embargo, este último incurrirá en costos de baterías adicionales, por lo que usarlo con moderación. Podemos hacer esto llamandotick_timer_service_subscribe() pero primero tenemos que crear una función para dar el servicio de llamar siempre que cambie el tiempo, y debe coincidir con esta firma:

  estática tick_handler void (struct tm * tick_time, TimeUnits units_changed) {

 }

 

Esto significa que cada vez que el tiempo cambia, contamos con una estructura de datos de tipo struct tmcontiene la hora actual en varias formas, así como constantes TimeUnits valor que nos dice que la unidad ha cambiado, para permitir el filtrado de la conducta. Con nuestra TickHandler creado, podemos registrarlo con el servicio de sucesos en init() así:

  // Regístrate con TickTimerService
 tick_timer_service_subscribe (MINUTE_UNIT, tick_handler);

 

La lógica para actualizar el tiempo TextLayer se creará en una llamada de función update_time() lo que nos permite llamar tanto desde el TickHandler así como main_window_load() para asegurarse de que está mostrando la vez desde el principio.

Esta función utilizará strftime() (Ver aquí para el formato) para extraer las horas y los minutos de la struct tm estructura de datos y escribir en un búfer de caracteres. Este tampón es requerido por TextLayer ser de larga vida, siempre y cuando el texto se va a mostrar, ya que no se copia en la TextLayer sino que simplemente hace referencia. Logramos esto haciendo el buffer static por lo que persiste a través de múltiples llamadas a update_time() Por lo tanto, esta función debe ser creado antes demain_window_load() y el siguiente aspecto:

  estática update_time void () {
   // Obtener una estructura tm
   temp time_t = tiempo (NULL); 
   struct tm * tick_time = localtime (y temporal);

   // Crear un buffer de larga duración
   char buffer estático [] = "00:00";

   // Escribir las horas actuales y minutos en el búfer
   si (clock_is_24h_style () == true) {
     // Usar el formato de 24 horas
     strftime (tampón, sizeof ("00:00"), "% H:% M", tick_time);
   } Else {
     // Usar formato de 12 horas
     strftime (tampón, sizeof ("00:00"), "% I:% M", tick_time);
   }

   // Muestra este tiempo en el TextLayer
   text_layer_set_text (s_time_layer, tampón);
 }

 

Nuestra TickHandler sigue a la firma de la función correcta y contiene sólo una sola llamada aupdate_time() para hacer precisamente eso:

  estática tick_handler void (struct tm * tick_time, TimeUnits units_changed) {
   update_time ();
 }

 

Por último, init() debe ser modificada incluyen una llamada a update_time() despuéswindow_stack_push() para garantizar el tiempo se muestra correctamente cuando se carga su esfera:

  // Asegúrese de que el tiempo se muestra desde el principio
 update_time ();

 

Desde ahora podemos mostrar el tiempo que puede quitar la llamada a text_layer_set_text() enmain_window_load() ya que ya no es necesario para poner a prueba la disposición.

Vuelva a compilar y volver a instalar el su esfera en el Callao, y debería tener este aspecto:

final result

 

Fuente aqui