pebble / clay Goto Github PK
View Code? Open in Web Editor NEWPebble Config Framework
License: MIT License
Pebble Config Framework
License: MIT License
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.
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
}
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
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.)
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
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!
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.
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.
We need to add a CONTRIBUTING.md explaining how the community can contribute to Clay
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
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?
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 :
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.
If the default value for a color picker happens to be black then the display is not initialized correctly.
Sometimes the handles the "showConfiguration" event if autoHandleEvents is not false test fails with a timeout exceeded error.
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.
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.
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
Right now devs can use Clay.meta.ActiveWatchInfo
to swap in different configs based on language, however this is not exactly maintainable.
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.
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'
})
Allow the capabilities array to include values that include the prefix NOT_
for platforms that do not support the capability. eg NOT_HEALTH
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.
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.
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!');
});
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)
Unicode characters such as ๐ (should be encoded as 🎉
) throw an InvalidCharacterError instead of being encoded as an HTML entity.
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.
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?
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"
}
}
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...
For Cloudpebble :
CommonJS-style must be selected for the JS Handling setting
For local SDK :
enableMultiJS must be true in the appinfo.json
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)
Bake the version into the compiled JS file so developers can unsure they are running the correct Clay version
Add the ability to validate components such as input
, toggle
and checkboxgroup
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
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
Will you create a clay pebble-package for an easier integration in our projects ? :-p
Thanks !
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.
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.
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.
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
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.