Is it possible to display a settings page and communicate with a phone using Pebble.js and CloudPebble?

Question

Is it possible to get user input on the phone and do something with it and then display some result onto the pebble watch using only Pebble.js and the CloudPebble?

For this case I think I would need PebbleKit JS or PebbleKit Android/iOS in order to communicate between the phone and watch.. right?

Answer 1

Pebble.js is built using PebbleKit JS, so anything you can do with PebbleKit JS can be done in Pebble.js, including settings pages.

Answer 2

To use CloudPebble, you'll have to make a few changes to your config page. First, you'll host the page on the web as you would with a regular app. But, for Pebble.js and CloudPebble testing, you'll need to use the return_to query string value passed to you from CloudPebble to send the config data back to your emulator.

Here is an example (on the configuration web page in a script section at the top)

function getQuerystring(key, default_) {
  if (default_ == null) default_ = "";
  key = key.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
  var regex = new RegExp("[\\?&]" + key + "=([^&#]*)");
  var qs = regex.exec(window.location.href);
  if (qs == null)
    return default_;
  else
    return qs[1];
}

// set this value from the "options" query string value.
// This is the value of the options that you'll receive from your app
var optionsString = getQuerystring("options", "{username:''}");
var options = JSON.parse(optionsString);

// get the return to value from query string. Set it to blank if it's not there
var returnTo = getQuerystring("return_to","");

function sendConfigData() {

    var options = { username: txtUsername.value };
    if (returnTo != '') {
        document.location = returnTo + JSON.stringify(options);
    }
    else {
        document.location = 'pebblejs://close#' + encodeURIComponent(JSON.stringify(options));
    }
}

function cancel() {
    if (returnTo != '') {
        document.location = returnTo;
    }
    else {
        document.location = "pebblejs://close";
    }
}

Then, in your form, set the submit buttons to call the appropriate functions.

<input type="text" id="txtUsername" placeholder="User Name" />
<input type="button" value="Save" onclick="sendConfigData()" />
<input type="button" value="Cancel" onclick="cancel()" />

At the bottom of your config web form, put the following JavaScript:

txtUsername.value = options.username;

In your app.js file in CloudPebble, here is how you call the config screen:

var options = { username : 'default' };
var OPTIONS_SETTING_KEY = 0;

function showConfiguration(){
  console.log("showing configuration");
  Pebble.openURL('http://yourwebsite.com/PebbleConfig?options=' + encodeURIComponent(JSON.stringify(options)));
}

Pebble.addEventListener("showConfiguration", function() {
  showConfiguration();
});

Pebble.addEventListener("webviewclosed", function(e) {
  console.log("configuration closed");
  // webview closed
  //Using primitive JSON validity and non-empty check
  console.log('response: ' + e.response);
  if (e.response.charAt(0) == "{" && e.response.slice(-1) == "}" && e.response.length > 5) {
    options = JSON.parse(decodeURIComponent(e.response));
    // Write a key with associated value
    localStorage.setItem(OPTIONS_SETTING_KEY, JSON.stringify(options));

    console.log("Options = " + JSON.stringify(options));
  } else {
    console.log("Cancelled");
  }
});

var optionString = localStorage.getItem(OPTIONS_SETTING_KEY);
if(optionString === null || optionString === ''){
  console.log('Using default username');
}
else {
  options = JSON.parse(optionString);
  console.log('Set username: ' + options.username);
}

Now you can use your options throughout your app. When you deploy this app to production on the app store, the web page will detect that the return_to query string is missing and will use the appropriate closing mechanism (document.location = 'pebblejs://close#' + encodeURIComponent(JSON.stringify(options));) and send the configuration back to your watch.