[#PEBBLE] How to use a JS file from the pebble

Hello!

One of capabilities makes the Pebble, powerful is the ability to execute JS files. This has a bit because it is not actually the smart watch that executes the JavaScript code. It runs on the smartphone which is paired with the pebble. Then to communicate the pebble and the smartwatch have an array of messages in format dictionary (key / value), that we can use for this.

The following example shows how according to the hold button on the Pebble, register a debug message from the Pebble and sent a message to the JS with the information of the button pressed. In the JS, this message will be processed and recorded a new debug message.

1 I think an example project from Cloudpebble.net with the template for “Button Sample”

2. in the settings of the project, add a new Message Key called “exchangeData”

3. inside of the main code we modified the button_click.c file with the code-sharing at the end. In it we can see a specific section specific to create a Tuple (key / value) which is which we will then send to the JS. Then click, we send a different message for each button.

4. in the main project add a new file type JavaScript file.

Important the file always has to be “pebble-js-app.js”

5. in the JS file and C we modified with the following code

	#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();
	}

view raw

PebbleJSInteractionSample01C

hosted with ❤ by GitHub

	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);
	}
	}
	);

view raw

PebbleJSInteractionSample01Js

hosted with ❤ by GitHub

6. We compile, deploy, and activate the logs

The content we will be similar to the following lines, after pressing the button UP, SELECT and 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

If you look at the Pebble file (.)(C), we will see that it sends a different message for each click of each button, creating a dictionary and processing this with app_message_outbox_begin () and app_message_outbox_send () (lines 11-18).

Then within the JS, the reception of the message is processed with a listener at the event of type “appmessage” (line 6) and displays a different message according to the content of the message received from the Pebble.

Within these lines of debug, we can see how the Debug “jumps” from the pebble to the smartphone and in each case the corresponding debug message is processed.

Reference: https://developer.getpebble.com/2/api-reference/group___app_message.html

Saludos @ Home

El Bruno