Privacy Policy · Cookie Policy
  • Home
  • Tutorials
  • Get the SDK
  • Guides
  • Documentation
  • Examples
  • Community
  • Blog
  • More
  • Tutorials
  • Learn C Basics
  • Create a C Watchface
  • Create a JS Watchapp
  • Add More Features
  • Go Beyond
  • PebbleKit Android Tutorial
  • PebbleKit iOS Tutorial
  • Learn C Basics
  • Learning C for the Pebble SDK
  • A Simple C Program
  • Hello, Pebble!
  • More C Concepts
  • Create a C Watchface
  • Build Your Own Watchface
  • Customize Your Watchface
  • Adding Content From The Web
  • Create a JS Watchapp
  • Build A Watchapp with Pebble.js
  • Expanded Weather Forecasts
  • Adding More Details
  • Add More Features
  • Add a Date View
  • Add a Battery Meter
  • Add Connection Alerts
  • Go Beyond
  • Vector Animations
  • PebbleKit Android Tutorial
  • Integrating with Android
  • Controlling Apps From Pebble
  • Rock, Paper, Scissors with Pebble
  • PebbleKit iOS Tutorial
  • Integrating with iOS
  • Controlling Apps From Pebble
  • Rock, Paper, Scissors with Pebble
  • Guides
  • App Resources
  • Appstore Publishing
  • Best Practices
  • Communication
  • Debugging
  • Design and Interaction
  • Events and Services
  • Graphics and Animations
  • Migrating Older Apps
  • Pebble Packages
  • Pebble Timeline
  • Smartstraps
  • Tools and Resources
  • User Interfaces
  • App Resources
  • Animated Images
  • App Assets
  • Converting SVG to PDC
  • Fonts
  • Images
  • Pebble Draw Command File Format
  • Platform-specific Resources
  • Raw Data Files
  • System Fonts
  • Appstore Publishing
  • Appstore Analytics
  • Appstore Assets
  • Preparing a Submission
  • Publishing an App
  • iOS App Whitelisting
  • Best Practices
  • Building for Every Pebble
  • Conserving Battery Life
  • Modular App Architecture
  • Communication
  • Advanced Communication
  • Datalogging
  • Sending and Receiving Data
  • PebbleKit Android
  • PebbleKit iOS
  • PebbleKit JS
  • Sports API
  • Debugging
  • Common Runtime Errors
  • Common Syntax Errors
  • Debugging with App Logs
  • Debugging with GDB
  • Design and Interaction
  • Benefits of Design Guidelines
  • Core Experience Design
  • Example Implementations
  • Round App Design
  • One Click Actions
  • Recommended Guidelines and Patterns
  • Events and Services
  • Accelerometer
  • Background Worker
  • Buttons
  • Compass
  • Dictation
  • Event Services
  • Pebble Health
  • Persistent Storage
  • Wakeups
  • Graphics and Animations
  • Animations
  • Drawing Primitives, Images and Text
  • Framebuffer Graphics
  • Vector Graphics
  • Migrating Older Apps
  • SDK 3.x on Aplite Migration Guide
  • SDK 3.x Migration Guide
  • SDK 4.x Migration Guide
  • SDK 2.x Migration Guide
  • PebbleKit iOS 3.0 Migration Guide
  • Pebble Packages
  • Creating Pebble Packages
  • Using Pebble Packages
  • Pebble Timeline
  • Creating Pins
  • Service Architecture
  • Managing Subscriptions
  • Libraries for Pushing Pins
  • Public Web API
  • Smartstraps
  • Hardware Specification
  • Protocol Specification
  • Talking To Pebble
  • Talking To Smartstraps
  • Tools and Resources
  • App Metadata
  • CloudPebble
  • Color Picker Tool
  • Developer Connection
  • Hardware Information
  • Internationalization
  • Command Line Tool
  • User Interfaces
  • App Configuration
  • App Exit Reason
  • AppGlance C API
  • AppGlance in PebbleKit JS
  • AppGlance REST API
  • Layers
  • Round App UI
  • Unobstructed Area
  • Documentation
  • Pebble C
  • Pebble JavaScript API (beta)
  • PebbleKit JavaScript
  • PebbleKit iOS
  • PebbleKit Android
  • Pebble C
  • Pebble JavaScript API (beta)
  • PebbleKit JavaScript
  • PebbleKit iOS
  • PebbleKit Android
  • Community
  • Events
  • Online Communities
  • Example Apps
  • Tools
  • Libraries
  • Events
  • Developer Retreat 2014
  • Developer Retreat 2015
  • Example Apps
  • Hello
  • Caltrain
  • HeroBoard
  • Multi Timer
  • Resistor Time
  • Tools
  • App Message Bridge
  • Appstore Badge Generator
  • GPath.svg
  • pBuild Travis CI Build Tool
  • Sublime Text Plugin
  • Watchface Generator
  • Watch Status
  • Libraries
  • Color Selector
  • Custom Status Bar for Pebble
  • EffectLayer
  • GBitmap Colour Palette Manipulator
  • Java Pebble Timeline
  • JS Message Queue
  • Pebble Timeline API for DotNet (C#)
  • Pebble API PHP
  • PebbleTimeline API Ruby
  • PHPebbleTimeline
  • PinPusher
  • pypebbleapi
  • Simple Dithering Library
  • T3 Keyboard
  • ToastLayer Library
  • More
  • Examples
  • App Inspiration
  • Contact
  • Build Tools
pebble
  • Tutorials
  • Get the SDK
  • Guides
  • Documentation
  • Examples
  • Community
  • Blog
  • More
Privacy
Cookies
Publish
Get Updates
Follow Us
Subscribe to the Newsletter

Pebble.js - Pebble Package Edition!

  • 22 December 2016
  • Jon Barlow
  • Freshly Baked
  • Comments

We're pleased to announce that Pebble.js has now been published as a Pebble Package. Pebble.js lets developers easily create Pebble applications using JavaScript by executing the JavaScript code within the mobile application on a user's phone, rather than on the watch.

Pebble.js as a Pebble Package

Making Pebble.js a Pebble Package means Pebble.js projects can be converted to standard Pebble C projects. This gives benefits like the ability to easily utilize other Pebble Packages, such as Clay for Pebble, or easily importing and exporting the project with CloudPebble.

The Pebble.js package is using the develop branch from the Pebble.js repository on Github, and can be updated independently from CloudPebble deployments.

It also supports the Diorite platform!.

Creating a New Project

The initial steps vary if you're using CloudPebble or the Local SDK. Follow the appropriate steps below to create a new project.

CloudPebble

If you're using CloudPebble, follow these initial steps:

  1. Create a new project:

    • Project Type = Pebble C SDK
    • Template = Empty Project
  2. Add the following dependency:

    • Package Name = pebblejs
    • Version = 1.0.0
  3. Add a new main.c file and an index.js file.

Now continue to add the default project files.

Local SDK

If you're using the Local SDK, just create a new C project with Javascript support:

$ pebble new-project PROJECTNAME --javascript

Now continue to add the default project files.

Default Project Files

Copy and paste these default project files into your project, replacing any existing file contents:

your-main.c

#include <pebble.h>
#include "pebblejs/simply.h"

int main(void) {
  Simply *simply = simply_create();
  app_event_loop();
  simply_destroy(simply);
}

index.js

require('pebblejs');
var UI = require('pebblejs/ui');

var card = new UI.Card({
  title: 'Hello World',
  body: 'This is your first Pebble app!',
  scrollable: true
});

card.show();

At this point you should be able to compile and run your new project.

Migrating an Existing Project

Unfortunately there isn't an automated way to migrate your existing Pebble.js project, but the steps are fairly straightforward.

  1. Create a new project, following the steps above.

  2. Change the project settings to match your old project settings, including the UUID.

  3. Copy your project resources (images, fonts etc.), and source files into the new project.

  4. Compile and enjoy your new C project with Pebble.js support.

Note: index.js is a direct replacement for app.js, which may be your old Javascript file.

Next Steps?

Want to add Clay support to your project? It's now easy by following the standard Clay Getting Started instructions!

If you have any questions or problems, post the details on the developer forum or Discord.

Happy Holidays!

Jon Barlow + Team #PEBBLExFITBIT


Get Updates
Follow Us
Subscribe to the Newsletter

Overview

  • Creating a New Project
  • CloudPebble
  • Local SDK
  • Default Project Files
  • Migrating an Existing Project
  • Next Steps?

Categories

  • All Posts
  • #makeawesomehappen
  • At the Pub
  • Beautiful Code
  • CloudPebble
  • Down the Rabbit Hole
  • Freshly Baked
  • Timeline

Authors

  • Thomas Sarlandie
  • Niharika Bedekar
  • Jon Barlow
  • Katharine Berry
  • Cherie Williams
  • Chris Lewis
  • Team Pebble
  • Cat Haines
  • Katherine McAuliffe
  • Alex Lin
  • Alexey Komissarouk
  • Brad Murray
  • Kirby Kohlmorgen
  • Ryan Case
  • Ryan Perry-Nguyen
  • Tom Maremaa
  • Meiguro
  • Keegan Lillo
  • Łukasz Zalewski

Subscribe to the Pebble Developers Newsletter