Configuration Menu

[lucasholucasho]

I've built a few Pebble apps with Simply.js but I would like to add a configuration menu to one of them. How would I do so? I took a look at the Pebble guides on how to do so but was wondering if the procedure changes for an app built on just Simply. Thanks!

[Meiguro]

Yes, if you're using Simply.js on CloudPebble, you can use the webview as documented in PebbleKit JS. There is a little known demo of it here: https://github.com/pebble-hacks/js-configure-demo/blob/master/src/js/pebble-js-app.js

Lately I have been working on the successor to Simply.js, Pebble.js, which wraps this functionality in an arguably simpler API: http://pebble.github.io/pebblejs/#settings. You can start a Pebble.js project on CloudPebble just as you would a Simply.js one. If you do, you can port your Simply.js project to Pebble.js by using the Card window, or take advantage of the new dynamic Window or Menu. (Rest assured I still have plans for Simply.js, so I've not dropped support for it.)

If you are using Simply.js from the App store, it may be possible to set simply.settingsUrl to your own url and register a "webviewclosed" handler, but I have not tried this. It can be problematic since Simply.js's "webviewclosed" handler is still registered. If you've forked Simply.js locally, you can remove Simply.js' handler.

[lucasholucasho]

Thanks for your response! Would you recommend I migrate Simply.js apps to Pebble.js? Also, just to make sure - the "Settings" section in the Simply.js link is the configuration menu portion, right?

[Meiguro]

Do you mean the "Settings" section in the Pebble.js link? Yes, Settings.config sets up the configurable webview. Usually developers transfer options to and from localStorage and the configurable webview, which is why Settings can also handle options. I'll see if I can make the documentation more clear.

Pebble.js is definitely worth migrating to if you'd like to create a menu much like Pebble's system menus, or if you would like to make a hybrid watchface/watchapp. As of right now I'm unsure of porting back functionality to Simply.js in a compatible API, but I'm happy to hear feedback about the API differences. Pebble.js is definitely more OO in some places, but is generally meant to be more modular.

[lucasholucasho]

OK, thanks! Also, I think there's a syntax error in the sample code (see attached screenshot). There should be commas that separate the function arguments. The code should read: Settings.config( { url: 'http://www.example.com' }, function(e) { console.log('opening configurable'); Settings.option('color', 'red'); }, function(e) { console.log('closed configurable'); } );

[Meiguro]

Ah, sorry about that! It's been fixed.

[lucasholucasho]

Hey! I'm using PebbleJS and would like to save the radio buttons that the user selects across usages (like saving cookies). I've tried the "var options = { color: 'white', border: true }; document.location = 'pebblejs://close#' + encodeURIComponent(JSON.stringify(options));" approach along with using "Settings.option()" but neither has worked. What am I doing wrong?

[Meiguro]

I just tested Pebble.js against Simply.js's configurable page to make sure everything is working.

Simply.js's configurable is written somewhat in a way in that can be used as an example (although it pulls in a bunch of external resources that should be removed). You can check it out here: http://meiguro.com/simplyjs/settings.html

You can test it out with this Pebble.js Settings config code snippet:

Settings.config(
  'http://meiguro.com/simplyjs/settings.html',
  function open(e) {
    console.log('open: ' + JSON.stringify(e.options));
  },
  function close(e) {
    console.log('close: ' + JSON.stringify(e.options));
  }
);

What should happen is after hitting the "Save" button in the webview, the close handler will print out the new scriptUrl setting, and Settings.option('scriptUrl') should also return that new script URL. e.options in close is only the new options returned and not all options saved in Settings.option().

As you'll notice, the webview doesn't pull in Simply.js or Pebble.js so it has no convenience library. The page in the webview uses document.location = 'pebblejs://close#' + encodeURIComponent(JSON.stringify(options)); to both close the webview and send information back to PebbleKit JS. Pebble.js Settings.config defaults autoSave to true so if it is able to parse the options, they'll be accessible via Settings.option.

Let me know if this still does not work! There could be something else missing.

[lucasholucasho]

Thanks, figured it out!

[ltpitt]

Hello there!

I would like to make a simple configuration page for my CloudPebble App in my Pebble Android application... I managed to show the gear icon in the android app but I can't find information or tutorial about how to build the setting page and how to send it to the phone...

Thanks for this great software :)