setting the configuration page to specific defaults already saved in the Pebble 3.0 SDK

Question

I am trying to have my watch face's configuration page to default to what the user has already saved in the configuration page previously. Currently, I have a watch face that can have a choice of 15 colors from a list via the settings configuration web page and a pebble-ja-app.js. The user submits what color they want and then the watch face changes color, when the use goes back to the configuration web page the site has the list of colors just like it was the first time they went to the web page. I wanted to have the web page start on the color they choose before.

any help or suggestions would be greatly appreciated. All my source code is available at https://github.com/palian/BlueFuturistic

Answer 1

You could use localstorage for this.

function getConfigData() {
    var backgroundColorPicker = document.getElementById('background_color_picker');
    var highContrastCheckbox = document.getElementById('high_contrast_checkbox');

    var options = {
      'background_color': backgroundColorPicker.value,
      'high_contrast': highContrastCheckbox.checked
    };
    // Save for next launch
    localStorage['background_color'] = options['background_color'];
    localStorage['high_contrast'] = options['high_contrast'];
    console.log('Got options: ' + JSON.stringify(options));
    return options;
  }

Use a self-invoking JavaScript function to set the GUI state after loading the config page:

(function() {
    var backgroundColorPicker = document.getElementById('background_color_picker');
    var highContrastCheckbox = document.getElementById('high_contrast_checkbox');
    // Load any previously saved configuration, if available
    if(localStorage['high_contrast']) {
      highContrastCheckbox.checked = JSON.parse(localStorage['high_contrast']);
      backgroundColorPicker.value = localStorage['background_color'];
    }
  })();

(Examples from https://github.com/pebble-examples/slate-config-example)