pebble / clay Goto Github PK

Sometimes the handles the "showConfiguration" event if autoHandleEvents is not false test fails with a timeout exceeded error.

the change, disable, enable, hide and show events should only be triggered if the actual state of the item changes.

Why is this necessary? the following in the custom function would result in an infinite loop.

clayConfig.getItemById('name').on('change', function() {
  this.set('whoops!');
});

The getValue of a checkboxgroup returns an array of strings

{"enableBackground":1,"background":65280,"font_size":"2","test":["sushi","burgers"]}

If we let Clay handle 'showConfiguration' and 'webviewclosed' events, an array of bytes is sent to the watchapp for the test key containing :
['s','u','s','h','i','b','u','r','g','e','r','s']

So without javascript convertion, it is really not easy to use this in the C code.
Clay should also return \0 character like that :

{"enableBackground":1,"background":65280,"font_size":"2","test":["sushi",0,"burgers",0]}

so the string delimiter will permit to split the result in C.

https://github.com/pebble/clay/blob/master/index.js#L165

No need to decode it again, and this will create problem if the decoded string contains % characters for example

I'm on android 3.13.0

The culprit is here https://github.com/pebble/clay/blob/master/src/scripts/components/color.js#L117-L126

Provide an API to update the values stored in localStorage. Something like:

clay.setSettings('key', 'value') 

// Or for multiple:
clay.setSettings({
  key1: 'value-1',
  key2: 'value-2'
}) 

The first time the config page is shown (after an installation) the checkboxgroup is correctly displayed.
If I close and open the config page again, the item is not visible anymore...
Probably related with the \0 separators...

The color picker should allow custom layouts as well as presets of color, gray and black & white.
It should also automatically choose the correct layout based on the platform of the watch connected.

I think Clay is missing the option to dynamically manipulate a ClayItem at run-time.

For example:
The user needs to login to a server, then the settings page fetches some data from the server.
According to the fetched data I need to manipulate the options property of a select ClayItem.

I would wish, that there is some kind of rebuild function available for ClayItems

For example

var roomSelect = clayConfig.getItemByAppKey("room");
var options = roomSelect.config.options;
var rooms = functionToGetRooms();
rooms.forEach(function(room, idx, arr) {
         options.push({
                label: room.name,
                value: room.uuid
        })
});
roomSelect.config.options = options;
roomSelect.rebuild(); //-> Rebuilds the ClayItem and also updates the DOM

I copied the example code for Toggle elements, which includes the 'required' html attribute, but this doesn't make much sense for a checkbox/toggle and actually behaves differently on iPhone vs Android. iPhone ignores this attribute and works as if the 'required' attribute was not there, but Android treats it as meaning it will only submit the settings if the toggle is 'on' and simply does nothing (not even show a message) if the toggle is 'off' as if the submit button is disabled.

So I would suggest using a different example for the attribute and perhaps not include any html attributes in the example code for Toggles.

As I understand it, the framework autosaves the settings into localStorage and automatically reloads the values when subsequently displaying settings. For applications like where passwords need to be entered, I think it would be good to have an option where the application code handles saving settings so that, for example, a token could be stored instead of the password in plaintext when it isn't possible to do this with the custom function.

Could there be a constructor option to turn off autosave and pass the previous settings back to the config page manually so it could show the username and other settings, etc?

When using a generic button and listening for the click event, the whole item responds (including description) instead of just the button itself.

Temporary workaround:

use buttonItem.$manipulatorTarget.on('click', fn)

If I remove a setting from the configuration (config.json), when I press Save on the new config page, 'Clay' tries to send the old setting (cached in the localstorage or something like that)

[14:34:26] javascript> Unknown message key 'toto', you should add it in your appinfo.json/appKeys file, for now it'll be removed from the final message sent.

Priority low :p

Once #19 gets merged, we will have access to the .meta property on the ClayConfig. We should allow developers to pass arbitrary information into this object as .userData or something. These can be added as an additional option in the options parameter of Clay constructor.

Unicode characters such as 🎉 (should be encoded as 🎉) throw an InvalidCharacterError instead of being encoded as an HTML entity.

This is only an issue when running clay on the desktop via the emulator.

I'm missing methods or properties for hiding, showing and removing items/item groups or parts like options of a select. I like to do this to react to hardware platforms (e.g. remove dropdown items related to health for Aplite) or hide and show options related to certain selections (e.g. hide date related options if none of the slots in a watchface is configured to show a date)

The current behavior is kind of unexpected as modifying Clay.config will have unexpected side effects. We should do a deep copy of then object then expose it.

The new SDK uses messageKey now so clay should support that too.

We will also need to support the new array syntax to message keys

{
  "type": "input",
  "messageKey": "THING[1]",
  "label": "Some Thing",
  "defaultValue": "foo"
}

checkboxgroups get to be particularly fun now.

{
  "type": "checkboxgroup",
  "messageKey": "FAVORITE_FOOD[]",
  "label": "Favorite Food",
  "defaultValue": ["sushi", "burgers"],
  "options": [
    { 
      "label": "Sushi", 
      "value": "sushi" 
    },
    { 
      "label": "Pizza", 
      "value": "pizza" 
    },
    { 
      "label": "Burgers", 
      "value": "burgers" 
    }
  ]
}

C Code would use an accessor like MESSAGE_KEY_FAVORITE_FOOD + 2 would be equal to 1 in this default case

The old appKey syntax can be migrated with something like

if (!item.mesageKey && item.appKey) {
  item.messageKey = item.appKey
}

Chrome 49 removes the :before and :after sudo elements from ::-webkit-slider-thumb resulting in the slider component now looking like:

we now need to use a new trick to show the progress. One idea is to use javascript to set a linear gradient on .input:before

If we enter an default value for the color item that is not one of the 64 Pebble colors, the colorpicker is gray.
Maybe the nearest pebble color for the default value should be displayed instead.

See kevincon/sprinkles#3 , Kevin needs this :-p

We need to add a CONTRIBUTING.md explaining how the community can contribute to Clay

Add the ability to validate components such as input, toggle and checkboxgroup

The readme suggest different file extensions (config.json versus config.js). Is the a reason for this? If not suggest they be documented as the same. As an example; I attempted to import a watchface (that looks like it was developed withthe SDK) into cloudpebble and had problems seeing/editing the config file.

I'm using Cloudpebble with PebbleJS to write a simple app and integrated Clay in there.

It seems to work fine when it comes to building the config page from the configuration file. But when saving the settings, Cloudpebble is logging this error:

[PHONE] pebble-app.js:?: JavaScript Error:
Error: Unknown message key 'access_token'
    at Error (native)
    at sendAppMessage (eval at <anonymous> (runtime/internal/proxy:4:52)
    at Pebble.<anonymous> (clay.js:3:1196)

I added the appKey to my appinfo.json which I assume is what I'm supposed to do, but the Clay documentation is not very clear about this. Where does one define what in order to save the UI settings to the actual Pebble phone settings? And how would one do that when developing in Cloudpebble?

This is the configuration file used to build the config interface.

Sometimes it is useful to separate options of Select element into subgroups, HTML Select element <optgroup> element to group related options. Would love to see it added to Clay

For Habits I need to add and remove new form elements for each Habit that the user wants to manage. I've looked through the readme, but it doesn't sound like this is supported in Clay.

Is this something that can be considered and added to the roadmap?

Allow the capabilities array to include values that include the prefix NOT_ for platforms that do not support the capability. eg NOT_HEALTH

Currently, the only way to display a description for a component is to use the 'text' component but it doesn't look good.
I would like to use a 'description' that would be displayed under the component with a smaller font.

Do you see a better solution ? I tried to play with html in the "label" but the ... tags don't seem to work

I would like to hide color options if the watch of the user is aplite.
I want to hide 'square' options or display cursom options if the watch is 'chalk'

With this commit, we will be able to make such customization in the custom js but it would be cool to describe this behaviour in the config.json

[
{
  "type": "section",
  "items": [
    { "type": "heading", "defaultValue": "Enamel Demo" },
    {
      "type": "toggle",
      "id": "enableBackground",
      "appKey": "enableBackground",
      "label": "Enable Background",
      "capabilities" : ["aplite"] // this item will be displayed only for aplite
    },
    {
      "type": "color",
      "id": "background",
      "appKey": "background",
      "defaultValue": "FF0000",
      "label": "Background Color",
      "sunlight": true,
      "capabilities" : ["color"] // this item will be displayed only for watch with color
    },
    {
      "type": "select",
      "id": "font_size",
      "appKey": "font_size",
      "defaultValue": "1",
      "label": "Text Size",
      "capabilities" : ["bw", "rect"] // this item will be displayed only for rectangular watch without color
      "options": [
        { 
          "label": "Small", 
          "value": 0
        },
        { 
          "label": "Normal",
          "value": 1 
        },
        { 
          "label": "Large",
          "value": 2 
        }
      ]
    },
...

The list of capabilities would be :

• color
• bw
• aplite/basalt/chalk
• round
• rect
• health
• ...

In the latest release that changed appKey to messageKey there appears to have been a fundamental change in that the messageKey keys now have to be defined in the app json.

I understand the reason for the main use case where the settings are being passed automatically to the C code, but in my watch face there is not a one to one mapping of settings to message keys as I perform some actions on settings in the JS before passing to the C code. In the previous versions of Clay I was able to define an independent set of appKey keys, which then took care of saving and returning the setting as JSON and with autoHandleEvents set to false I could then perform various actions before sending data to the C code.

Since my config.js messageKeys do not match my app json message keys, when I call clay.getSettings(e.response) in the latest version I get the following output, which was a little confusing at first:

{"NaN":0}

Unless I am missing something it seems that to replicate the previous behavior I would have to switch to using IDs only with userData and a custom function to restore and retrieve all the settings, which will be quite tedious with all the settings I have.

Any chance the previous behavior can be restored somehow, like through a setting?

(It could also do with throwing an error if a messageKey is not found instead of returning the JSON above.)

Right now devs can use Clay.meta.ActiveWatchInfo to swap in different configs based on language, however this is not exactly maintainable.

Proposed solution:

Allow properties like label, description or defaultValue to be an object where the key is the ISO code for that locale and the value is the translation

{
  type: 'input',
  label: {
    en_US: 'Hello',
    fr_FR: 'Bonjour'
    // etc
  }
}

If there is no translation available for the user's language then the en_US value will be used. (This is the behavior of the native Pebble app and Pebble appstore)

There is no ETA for this and so please feel free to comment on any other solutions you think would work.

Often it is difficult to debug javascript issues on the generated config page. We should wrap the entire thing in a try/catch and output any errors to the html. This will be a setting that developers can turn off but will enabled by default.

I discovered an issue.

When I execute clayConfig.build() the new generated page gets appended to the already existing page.
So I basically have double content.

Is this going to be possible? I'm converting an old style config page to Clay, and this is one option I can't find out how to do.

Great project/product!

It would be useful if in the config you could tie the state of a component to a toggle. For example:

{
  "type": "toggle",
  "appKey": "ShowDate",
  "label": "Show Date",
  "defaultValue": true,
  "bind": [ "color-date" ]
},
{
  "type": "color",
  "id": "color-date",
  "appKey": "ColorDate",
  "label": "Date Color",
  "defaultValue": "FFFFFF",
  "sunlight": false
}

ColorDate would then be disabled if ShowDate is off.

I know such a thing can be done with a custom function, but it feels like a behavior used often enough to bake it into the framework.

• No matter what element you tap (even non-interactive ones), the component is highlighted
• Divider line is missing from items in a section where the section does not have a heading as the first item.
• Auto Prefixer doesn't seem to be working
• Checkboxes behave weird on older versions of android
• Color picker missing value display on old android
• Submit button misaligned
• Select component not showing value

It is possible to fill a shape with a 'gray' color on aplite (dithered gray) but the colorpickers on aplite config pages only allow to choose white or black.

I don't know if the colorpicker should propose also this new color or if the developer needs to specify its own palette in the config.json

I would like to configure my Select like below (with integers as values) and I want to get the selected item as an integer and not a string.
It would be easier to play with integers in the watchapp if I want different behaviors accordking to the chosen option.
Will it be possible to handle this use case ?

{
  "type": "select",
  "appKey": "flavor",
  "defaultValue": "grape",
  "label": "Favorite Flavor",
  "options": [
    { 
      "label": "", 
      "value": 0 
    },
    { 
      "label": "Berry",
      "value": 1 
    },
    { 
      "label": "Grape",
      "value": 2
    },
    { 
      "label": "Banana",
      "value": 3 
    }
  ],
  "attributes": {
    "required": "required"
  }
}

For Cloudpebble :
CommonJS-style must be selected for the JS Handling setting

For local SDK :
enableMultiJS must be true in the appinfo.json

Bake the version into the compiled JS file so developers can unsure they are running the correct Clay version

When you're building a Timeline app, you usually need to send the user form data back to your server for processing - so it can be used to send pins to the user.

I know it's possible to inject JS so I'm assuming we could manually catch the form submission somewhere in the chain and POST off the data before it's returned to the user, but it'd be nice if that could be automatic. So all we need to do is define the endpoint URL and it'll send the data there for processing.

It'll also need to send the Pebble Account token, and Timeline token for obvious reasons. The latter is critical, and also really annoying to get from a config page at the moment.

At least on iPhone (don't have Android to test), when the "time" type html attribute is specified for an Input element the styling seems a little off (time text is not vertically centered and the color doesn't match other elements). I think it would also look a little better if it was on the same line as the label. For now I am just using two separate Select elements for hour and minute. Nice framework though.

Will you create a clay pebble-package for an easier integration in our projects ? :-p

Thanks !

If the default value for a color picker happens to be black then the display is not initialized correctly.

For the developers that still require their config pages to be hosted, Clay should be available as a stand-alone library that developers can include to make building their custom pages easier.