Giter VIP home page Giter VIP logo

pebble-clay-preview-component's Introduction

pebble-clay-preview-component

This is a custom component for the Pebble Clay configuration package.

Getting Started

So that your SVG and CSS can be kept in their own files, you should install the very tiny raw-loader for webpack as a devDependency of your project.

npm install raw-loader --save-dev

Then in your app.js you can load and register the Preview component as follows.

var Preview = require('pebble-clay-preview-component');
var previewTemplate = require('raw!./preview.svg');
var previewStyle = require('raw!./preview.css');
var previewComponent = new Preview(previewTemplate, previewStyle);
...
clay.registerComponent(previewComponent); 

Preview

Manipulator: val

This component allows the user to provide a dynamic preview of their watch face or app on the Clay configuration page. The user supplies an SVG template and the component provides options to modify the SVG dynamically in response to changes in the configuration.

Properties
Property Type Description
type string Set to preview.
id string (unique) Set this to a unique string to allow this item to be looked up using Clay.getItemById() in your custom function.
messageKey string (unique) The AppMessage key matching the messageKey item defined in your package.json. Set this to a unique string to allow this item to be looked up using Clay.getItemsByMessageKey() in your custom function. You must set this if you wish for the value of this item to be persisted after the user closes the config page.
defaultValue string The default value of the dropdown menu. Must match a value in the options array.
sunlight boolean Use the color-corrected sunlight color palette if true, else the uncorrected version. Defaults to true if not specified.
bindings array of objects How should preview elements change in response to configuration changes. Each binding is an object with source, selector, set and map properties.
capabilities array Array of features that the connected watch must have for this item to be present
group string  Set this to allow this item, along with other items sharing the same group to be looked up using Clay.getItemsByGroup() in your custom function
Bindings
Property Type Description
source string The messageKey or id of the config item to monitor. id values must be prefixed with a # sign.
selector string A CSS selector to identify which elements of the preview to modify.
set string The name of the property to set on the selected preview elements. This name follows the Minified.js conventions for .set(name, value)
map string OR object Specifies the mapping from the values read from the source item to the values set on the selected preview elements. If map is specified as an object, then the keys of the object correspond to the possible values of the source and the values are the corresponding values to set on the preview element. If map is specified as a string, then this string is the name of a built-in map function.
Map functions
Function Description
color Converts integer color values to CSS RGB hex values and optionally converts to the sunlight palette according to the sunlight property of the preview item.
show Converts truthy values to block and falsy values to none. Appropriate for setting the $display property.
hide Converts truthy values to none and falsy values to block. The opposite of show.
Example

SVG Template

<svg role="img" class="component component-preview" width="144" height="168" viewBox="0 0 144 168">
    <rect class="background" stroke="none" fill="currentColor" width="100%" height="100%" />
    <text class="text" id="time" stroke="none" fill="currentColor">4:20</text>
    <text class="text" id="date" stroke="none" fill="currentColor">04/20</text>
    <circle class="bluetooth" stroke="none" fill="currentColor" r="20" />
</svg>

Clay Config

{
    "type": "color",
    "messageKey": "BACKGROUND_COLOR",
    "label": "Background Color"
},
{
    "type": "color",
    "messageKey": "TEXT_COLOR",
    "label": "Text Color"
},
{
    "type": "toggle",
    "messageKey": "SHOW_DATE",
    "label": "Show Date"
}
{
    "type": "select",
    "messageKey": "BLUETOOTH",
    "label": "Bluetooth Status",
    "options": [
        { "label": "None", "value": 0 },
        { "label": "Visual", "value": 1 },
        { "label": "Visual+Vibration", "value": 2 }
    ]
}
{
    "type": "preview",
    "bindings": [
        {
            "source": "BACKGROUND_COLOR",
            "selector": ".background",
            "set": "$color",
            "map": "color"
        },
        {
            "source": "TEXT_COLOR",
            "selector": ".text",
            "set": "$color",
            "map": "color"
        },
        {
            "source": "SHOW_DATE",
            "selector": "#date",
            "set": "$display",
            "map": "show"
        },
        {
            "source": "SHOW_BLUETOOTH",
            "selector": ".bluetooth",
            "set": "$display",
            "map": { "0": "none", "1": "block", "2": "block" }
        }
    ]
}

pebble-clay-preview-component's People

Contributors

jrmobley avatar

Stargazers

 avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.