Hola!
Una de las capacidades que hace potente al Pebble, es la capacidad de ejecutar archivos JS. Esto tiene un poco de trampa porque en realidad no es el smart watch el que ejecuta el código JavaScript. El mismo se ejecuta en el smartphone que está emparejado con el pebble. Luego para comunicar el pebble y el smartwatch tenemos un array de mensajes en formato diccionario (clave y valor), que podemos utilizar para esto.
El siguiente ejemplo muestra cómo de acuerdo al botón presionado en el Pebble, se registrará un mensaje de debug desde el Pebble y se enviará un mensaje al JS con la información del botón presionado. En el JS se procesará este mensaje y se registrará un nuevo mensaje de debug.
1. Creo un proyecto de ejemplo desde Cloudpebble.net con la plantilla para “Button Sample”
2. En las settings del proyecto, agrego una nueva Message Key llamada “exchangeData”
3. Dentro del código principal modificamos el archivo button_click.c con el código compartido al final. Dentro del mismo podemos ver una sección específica específica para crear un Tuple (clave / valor) que es el que luego enviaremos al JS. Luego en el click , enviamos un mensaje diferente para cada botón.
4. En el proyecto principal agregamos un nuevo archivo de tipo JavaScript file.
Importante el nombre del archivo SIEMPRE TIENE QUE SER “pebble-js-app.js”
5. En el archivo JS y en el C modificamos con el siguiente código
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #include <pebble.h> | |
| static Window *window; | |
| static TextLayer *text_layer; | |
| enum { | |
| KEY_EXCHANGEDATA = 0, | |
| }; | |
| // START Interaction with JS | |
| void send_int(uint8_t key, uint8_t cmd) | |
| { | |
| DictionaryIterator *iter; | |
| app_message_outbox_begin(&iter); | |
| Tuplet value = TupletInteger(key, cmd); | |
| dict_write_tuplet(iter, &value); | |
| app_message_outbox_send(); | |
| } | |
| void select_click_handler(ClickRecognizerRef recognizer, void *context) { | |
| APP_LOG(APP_LOG_LEVEL_DEBUG, "click SELECT"); | |
| text_layer_set_text(text_layer, "Select"); | |
| send_int(0, 1); | |
| } | |
| void up_click_handler(ClickRecognizerRef recognizer, void *context) { | |
| APP_LOG(APP_LOG_LEVEL_DEBUG, "click UP"); | |
| text_layer_set_text(text_layer, "Up"); | |
| send_int(0, 2); | |
| } | |
| void down_click_handler(ClickRecognizerRef recognizer, void *context) { | |
| APP_LOG(APP_LOG_LEVEL_DEBUG, "click DOWN"); | |
| text_layer_set_text(text_layer, "Down"); | |
| send_int(0, 3); | |
| } | |
| void click_config_provider(void *context) { | |
| window_single_click_subscribe(BUTTON_ID_SELECT, select_click_handler); | |
| window_single_click_subscribe(BUTTON_ID_UP, up_click_handler); | |
| window_single_click_subscribe(BUTTON_ID_DOWN, down_click_handler); | |
| } | |
| void window_load(Window *window) { | |
| Layer *window_layer = window_get_root_layer(window); | |
| GRect bounds = layer_get_bounds(window_layer); | |
| text_layer = text_layer_create((GRect) { .origin = { 0, 72 }, .size = { bounds.size.w, 20 } }); | |
| text_layer_set_text(text_layer, "Press a button"); | |
| text_layer_set_text_alignment(text_layer, GTextAlignmentCenter); | |
| layer_add_child(window_layer, text_layer_get_layer(text_layer)); | |
| } | |
| void window_unload(Window *window) { | |
| text_layer_destroy(text_layer); | |
| } | |
| void init(void) { | |
| window = window_create(); | |
| window_set_click_config_provider(window, click_config_provider); | |
| window_set_window_handlers(window, (WindowHandlers) { | |
| .load = window_load, | |
| .unload = window_unload, | |
| }); | |
| const bool animated = true; | |
| window_stack_push(window, animated); | |
| app_message_open(app_message_inbox_size_maximum(), app_message_outbox_size_maximum()); //Largest possible input and output buffer sizes | |
| } | |
| void deinit(void) { | |
| window_destroy(window); | |
| } | |
| int main(void) { | |
| init(); | |
| app_event_loop(); | |
| deinit(); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Pebble.addEventListener('ready', | |
| function (e) { | |
| console.log("JS4 Pebble.addEventListener ready "); | |
| }); | |
| Pebble.addEventListener("appmessage", | |
| function (e) { | |
| try { | |
| console.log(JSON.stringify(e.payload)); | |
| if (e.payload["exchangeData"] == 1) | |
| { | |
| console.log("Button SELECT"); | |
| } | |
| if (e.payload["exchangeData"] == 2) | |
| { | |
| console.log("Button UP"); | |
| } | |
| if (e.payload["exchangeData"] == 3) | |
| { | |
| console.log("Button DOWN"); | |
| } | |
| } catch (exc) { | |
| console.log("exception" + exc.message); | |
| } | |
| } | |
| ); |
6. Compilamos, desplegamos y activamos los logs
El contenido que tendremos será similar a las siguientes líneas, después de presionar el boton UP, SELECT y DOWN
[PHONE] pebble-app.js:?: {'runhost client uuid' = 00000000-0000-0000-0000-000000000000}:{'webapp uuid' = 1fb036ee-6679-4978-a22d-33dc75b0f626}: ++_JS_LIFECYCLE_++:LAUNCHING
[PHONE] pebble-app.js:?: JavaScript_Sample_04__1/pebble-js-app.js:3 JS4 Pebble.addEventListener ready
[PHONE] pebble-app.js:?: {'runhost client uuid' = 12501411-9e26-4ac7-bf1c-f39baef5580c}:{'webapp uuid' = 1fb036ee-6679-4978-a22d-33dc75b0f626}: ++_JS_LIFECYCLE_++:READY-RUNNING
[DEBUG] button_click.c:27: click UP
[PHONE] pebble-app.js:?: {'runhost client uuid' = 00000000-0000-0000-0000-000000000000}:{'webapp uuid' = 1fb036ee-6679-4978-a22d-33dc75b0f626}: ++_JS_LIFECYCLE_++:PREVIOUSLY-RUNNING
[PHONE] pebble-app.js:?: JavaScript_Sample_04__1/pebble-js-app.js:9 {"exchangeData":2}
[PHONE] pebble-app.js:?: JavaScript_Sample_04__1/pebble-js-app.js:16 Button UP
[DEBUG] button_click.c:21: click SELECT
[PHONE] pebble-app.js:?: {'runhost client uuid' = 00000000-0000-0000-0000-000000000000}:{'webapp uuid' = 1fb036ee-6679-4978-a22d-33dc75b0f626}: ++_JS_LIFECYCLE_++:PREVIOUSLY-RUNNING
[PHONE] pebble-app.js:?: JavaScript_Sample_04__1/pebble-js-app.js:9 {"exchangeData":1}
[PHONE] pebble-app.js:?: JavaScript_Sample_04__1/pebble-js-app.js:12 Button SELECT
[DEBUG] button_click.c:33: click DOWN
[PHONE] pebble-app.js:?: {'runhost client uuid' = 00000000-0000-0000-0000-000000000000}:{'webapp uuid' = 1fb036ee-6679-4978-a22d-33dc75b0f626}: ++_JS_LIFECYCLE_++:PREVIOUSLY-RUNNING
[PHONE] pebble-app.js:?: JavaScript_Sample_04__1/pebble-js-app.js:9 {"exchangeData":3}
[PHONE] pebble-app.js:?: JavaScript_Sample_04__1/pebble-js-app.js:20 Button DOWN
Si analizamos el archivo de Pebble (.C), veremos que el mismo envía un mensaje diferente para cada click de cada boton, creando un diccionario y procesandolo con app_message_outbox_begin() y app_message_outbox_send() (líneas 11 a 18).
Luego dentro del JS la recepción del mensaje se procesa con un listener en el evento de tipo “appmessage” (línea 6) y se muestra un mensaje diferente de acuerdo al contenido del mensaje recibido desde el Pebble.
Dentro de estas líneas de debug, podemos ver como el Debug “salta” del pebble al smartphone y en cada caso se procesa el mensaje de debug correspondiente.
Referencia: https://developer.getpebble.com/2/api-reference/group___app_message.html
Saludos @ Home
El Bruno
 |
 |
 |
El Bruno 
Leave a comment