[#PEBBLE] Trabajando con botones (III) y algunas animaciones

Hola! Después del post anterior donde mostraba cómo suscribirnos a los eventos de click de los botones del Pebble, hoy voy a seguir un poco con el ejemplo, haciendo una app un poco más interactiva. Lo primero es agregar un par de imágenes que son las que utilizaremos en la app. Utilizando MetroStudio (excelente app con muchos ejemplos gratuitos de iconos, escribí aquí al respecto), he agregado la siguiente imagen, un png de 48×48 pixeles de tamaño. Solo con colores blanco y negro. He definido el identificador de este recurso como [FOOTBALL] También he agregado otra imagen más pequeña, que es la que utilizaré como icono de la aplicación. En este caso, la imagen también es un PNG con colores blanco y negro, y de tamaño 24×24 pixeles. Para definirlo como imagen de la app en Pebble, accedemos al menu Settings y luego seleccionamos la imagen para la opción [Menu Image] Luego en el video veremos como queda en la app. Retomo un poco el detalle del post, la idea es agregar esta imagen en el centro del Pebble y utilizando los botones Up y Down, mover la misma hacia o hacia abajo. El código de la app final es el siguiente

	#include <pebble.h>

	Window *window;
	GBitmap *nino_bitmap;
	BitmapLayer *nino_layer;
	int imageYLocation;
	int difY;

	void on_animation_stopped(Animation anim, bool finished, void context)
	{
	//Free the memoery used by the Animation
	property_animation_destroy((PropertyAnimation*) anim);
	}

	void animate_layer(Layer layer, GRect start, GRect *finish, int duration, int delay)
	{
	//Declare animation
	PropertyAnimation *anim = property_animation_create_layer_frame(layer, start, finish);

	//Set characteristics
	animation_set_duration((Animation*) anim, duration);
	animation_set_delay((Animation*) anim, delay);

	//Set stopped handler to free memory
	AnimationHandlers handlers = {
	//The reference to the stopped handler is the only one in the array
	.stopped = (AnimationStoppedHandler) on_animation_stopped
	};
	animation_set_handlers((Animation*) anim, handlers, NULL);

	//Start animation!
	animation_schedule((Animation*) anim);
	}

	/* Buttons Handlers */
	void up_click_handler(ClickRecognizerRef recognizer, void *context)
	{
	difY = imageYLocation – 10;
	if(difY >= 0)
	{
	GRect start = GRect(60, imageYLocation, 48, 48);
	GRect finish = GRect(60, difY, 48, 48);
	animate_layer(bitmap_layer_get_layer(nino_layer), &start, &finish, 300, 500);
	imageYLocation = difY;
	APP_LOG(APP_LOG_LEVEL_DEBUG, "Button Up ! Y: " + imageYLocation);
	}
	}

	void down_click_handler(ClickRecognizerRef recognizer, void *context)
	{
	int difY = imageYLocation + 10;
	if(difY <= 120)
	{
	GRect start = GRect(60, imageYLocation, 48, 48);
	GRect finish = GRect(60, difY, 48, 48);
	animate_layer(bitmap_layer_get_layer(nino_layer), &start, &finish, 300, 500);
	imageYLocation = difY;
	APP_LOG(APP_LOG_LEVEL_DEBUG, "Button Down ! Y: " + imageYLocation);
	}
	}

	void select_click_handler(ClickRecognizerRef recognizer, void *context)
	{
	APP_LOG(APP_LOG_LEVEL_DEBUG, "Button Select !");
	vibes_double_pulse();
	}
	void click_config_provider(void *context)
	{
	window_single_click_subscribe(BUTTON_ID_UP, up_click_handler);
	window_single_click_subscribe(BUTTON_ID_DOWN, down_click_handler);
	window_single_click_subscribe(BUTTON_ID_SELECT, select_click_handler);
	}

	void handle_init(void) {
	// Create a window and text layer
	window = window_create();

	//Load bitmaps into GBitmap structures
	//The ID you chose when uploading is prefixed with 'RESOURCE_ID_'
	nino_bitmap = gbitmap_create_with_resource(RESOURCE_ID_FOOTBALL);

	//Create BitmapLayers to show GBitmaps and add to Window
	nino_layer = bitmap_layer_create(GRect(60, 60, 48, 48));
	bitmap_layer_set_bitmap(nino_layer, nino_bitmap);
	layer_add_child(window_get_root_layer(window), bitmap_layer_get_layer(nino_layer));
	imageYLocation = 60;

	// buttons handlers
	window_set_click_config_provider(window, click_config_provider);

	// Push the window
	window_stack_push(window, true);
	}

	void handle_deinit(void) {

	//Destroy GBitmaps and BitmapLayers
	gbitmap_destroy(nino_bitmap);
	bitmap_layer_destroy(nino_layer);

	// Destroy the window
	window_destroy(window);
	}

	int main(void) {
	handle_init();
	app_event_loop();
	handle_deinit();
	}

view raw

PebbleSampleButtons03

hosted with ❤ by GitHub

En el mismo es posible ver lo siguiente:

Defino bitmap y un bitmap layer (líneas 4 y 5) que son los que utilizaré para mostrar la imagen. En el handle_Init(74) inicializo y creo la imagen.
Importante: la forma de referenciar el recurso que he agregado antes y que he llamado se hace uniedo el nombre del recurso al prefijo [RESOURCE_ID], el resultado es [RESOURCE_ID_FOOTBAL] en la línea 80.
En el manejador de click del botonUp(36) o BotonDown (49), valido la posición actual del layer, y activo una animación para moverlo hacia arria o abajo.
Las funciones on_animation_stopped (9), animate_layer (15) las copie de este post y la verdad que son las bases para la creación y movimiento del layer con la imagen

En el siguiente video es posible ver la app Saludos @ La Finca El Bruno