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:

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:

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:

Fuente aqui