pebble / pebblejs Goto Github PK

Whenever I try to make an ajax request to google maps using a valid url (it has been tested to work in the browser) it fails and gives an error.

Code: (api key removed)

var directionUrl = "http://maps.googleapis.com/maps/api/directions/json?key=APIKEYHERE";
directionUrl+="&origin="+lat+","+long+"&destination=\""+placeSubtitle+"\"";
console.log(directionUrl);
ajax(
{
url: directionUrl,
type:'json'
});

Example URL: (API KEY REMOVED)

http://maps.googleapis.com/maps/api/directions/json?key=APIKEYHERE&origin=40.79368928916826,-74.31703018031484&destination="43 South Livingston Avenue, Livingston"

Error:

send@[native code]
    at ajax (lib/ajax.js:114:11)
    at app.js:543:11
    at emitToHandlers (lib/emitter.js:121:21)
    at emit (lib/emitter.js:145:35)
    at emit (ui/window.js:273:24)
    at emit (ui/menu.js:301:14)
    at emitSelect (ui/menu.js:349:16)
    at onPacket (ui/simply-pebble.js:996:22)

Hi,
Pebble.js lack the feature of displaying long menuItems with a scroll (automatically, like a marquee), just like that : http://damianblog.com/2015/01/22/scroll_pebble_menus/
Is it a possible feature upgrade ?

This element is very useful. It has the property image that can be set to a string with the name of the resource to show.

For example to show an image fullscreen:

var window = new UI.Window();
var image = new UI.Image({ position: new Vector2(0, 0), size: new Vector2(144, 168), image: 'images/test.png'});
window.add(image);
window.show();

Is there any way to persist data on the Pebble itself using PebbleJs?

I know that I can use the Javascript Localstorage methods window.localStorage.setItem and window.localStorage.getItem to read and write data, but this is persistent on the phone and requires an active connection to the phone in order to display that data on the Pebble.

I also know that if I use C sdk I can use the persist_write_data and the persist_read_data methods to read and write data on the watch itself.

If there is no way to store data locally on the Pebble itself, can this be a feature request?

Currently maybe the biggest reason not to use PebbleJS is that one can't subscribe to tick timer service or define tick handlers. A timer API module for PebbleJS would be great. Would something like the following be possible?

Timer

Timer allows you to set a timer, show it in UI and attach event handlers to it.

Timer(opts)

Time strings have a range from -23:59:59 to 23:59:59.

var Timer = require('timer');
var Vector2 = require('vector2');

var t = new Timer();
var wind = new UI.Window();
var timerfield = new UI.TimerValue({
 position: new Vector2(0, 0),
 size: new Vector2(144, 168),
 font: 'GOTHIC_18_BOLD',
 text: '%HH:%MM:%SS'
});
wind.add(timerfield);
wind.show();
t.start();

If to is unspecified or null,

• a Timer counting up will count until 23:59:59, then stop and fire a timer end event.
• a Timer counting down will count until 00:00:00, then stop and fire a timer end event.
• a Timer counting down from a negative time value will count until -23:59:59, then stop and fire a timer end event.

Timer.on(time, callback)

Subscribe to Timer on event. The time parameter is a time string (format HH:MM:SS) or start or end.
The callback function will be passed an event with the following fields:

• type: Event type. start or end.
• time: Timer value at the time when the event fired. String formatted as HH:MM:SS.

var Timer = require('timer');
var Vibe = require('ui/vibe');
// second part of an excercise...
var t = new Timer({ from: '05:00:00',  to: '10:00:00' });
// declare event handlers to make something happen at specified times
t.on('06:00:00', Vibe.vibrate);
t.on('07:00:00', Vibe.vibrate);
t.on('08:00:00', Vibe.vibrate);
t.on('09:00:00', Vibe.vibrate));
t.on('end', function(e) { Vibe.vibrate('long'); });
t.start();

Timer.start()

Starts the timer. The timer start event is fired.

Timer.stop(trigger)

Stops the timer. If trigger is set to false, the timer end event is not fired. Default is true.

var Timer = require('timer');
var t = new Timer({ from: '05:00:00' });
// will trigger when timer value is '00:00:00'
t.on('end', makeSomething);
t.start();
// ...
if (unexpectedHappened) {
    // cancel the timer but don't makeSomething()
    t.stop(false);
}

Circle only draws a single pixel at the top left corner, regardless of backgroundColor and borderColor:

Reproduce by taking a working square rect and making it a circle:

new UI.Circle({
    position: new Vector2(10, 40),
    size: new Vector2(20, 20),
    backgroundColor: 'white',
    borderColor: 'white'
  });

How to detect hardware differences in js?
There is a solution similar to this?

#ifdef PBL_COLOR
  ...
#else
  ...
#endif

How to reproduce:

• Clone Pebblejs (tested with cd2a2dd)
• Replace app.js with the following code:

var UI = require('ui');
var Vector2 = require('vector2');

var wind = new UI.Window();
var rect = new UI.Rect({ size : new Vector2(20,20) });

wind.show();

wind.add(rect);
rect.animate({ position : new Vector2(40,40) });

• Build and install the app. I'm using the following command:
  pebble build pebble install && build/pebblejs-master.pbw
• Application will start. Show a rectangle on the top-left corner and run the animation. When the animation finishes the application crashes.
• No error appears on pebble logs.

Tested with SDK3 dp8 and beta-10 (using a modified version of pebbleJS to make it compatible) on OS X 10.10.2 (14C1514)

Hi !

I'm currently working on a line chart. I successfully display points (with squares), but I didn't found a way to display lines (maybe by using lot of 1px squares).

Would it be possible to add drawable lines ?

Here is my (current) code for drawing my temperature chart :

                var temperatureObjects = JSON.parse(subReq.responseText);
                var maxVal = 0;
                var minVal = 100;
                temperatureObjects.forEach(function(notification) {
                    if (notification.tmp > maxVal) maxVal = notification.tmp;
                    if (notification.tmp < minVal) minVal = notification.tmp;
                });


                var pointList = [];
                var difference = maxVal - minVal;
                var screenHeight = 144;
                var screenWidth = 168;
                var screenHeightAdjust = 20;
                var screeWidthAdjust = 20;
                var totalElts = temperatureObjects.length;
                var startX = parseInt(screeWidthAdjust / 2);
                // if (screeWidthAdjust > 0) startX = parseInt((screenWidth - screeWidthAdjust) / 2);
                var step = parseInt((screenWidth - screeWidthAdjust) / totalElts);
                temperatureObjects.forEach(function(notification) {
                  var stdVal = notification.tmp - minVal;
                  var x = startX;
                  var y = screenHeight-parseInt((stdVal*screenHeight)/difference) + screenHeightAdjust;
                  // console.log(notification.tmp + ' -> ' +y);
                  startX += step;
                  pointList.push({x: x, y: y});
                });

                var chart = new UI.Window();
                pointList.forEach(function(point) {
                  var element = new UI.Rect({ position: new Vector2(0, 0), size: new Vector2(5, 5) });
                  element.backgroundColor('white');
                  element.borderColor('white');
                  chart.add(element);
                  element.animate('position', new Vector2(point.x, point.y), 1000);
                });
                //var rect = new UI.Rect({ position: new Vector2(2, ), size: new Vector2(5, 5) });
                //chart.add(rect);
                chart.show();

Hello,
Is there an antialiasing option in Pebble.js like in C ?
My circles are not very pretty for the moment...

Thanks

I can't seem to get the splash image to display. Is this hard-coded or anything I need todo in the app.js to get it to display?

Thanks.

I think this is a great dev kit for your product, but support for determining direction doesn't exist! Native pebble app can access a compass service that provides this information. Pebble.js should too.

The forums have their theories to explain why support doesn't exist, but I am opening this issue to get an answer.

This is just an enhancement request.

Is there a possibility to add the support for colors on the menu? I wrote a watchapp using pebblejs, but if I add a colored icon on the menu, the result is:

As you can see, when the item is selected, the icon disappears.

Some of my users are reporting that they are unable to use my app, and all they get is a "Disconnected run the Pebble Phone app" message on the Pebble screen.

Two of the users with issues are using a Samsung Galaxy S4 phone, and all of the other users who have issues are using Android phones.

When scrolling quickly in a menu, the items sometimes "Dissappear" or don't load. I'm assuming this is the way you manage rendering large dynamic lists, considering the pebble has limited working memory. However this is an issue when scrolling quickly as it can almost seem like the app is lagging or broken. A few of my users have reported it to me but it appears it wasn't on my end.

Here is a gif of the issue in action: http://i.gyazo.com/a4254d50539cba1643a678035aecf424.gif

Perhaps a work around can be to render x-n and x+n menu items, so when you scroll there's always a buffer of items ahead of you, and then as you scroll down the the upcoming x+n menu item is rendered and ready to go, while the x-n menu item is destroyed?

I am trying to make an HTTP GET request to my server:

ajax({ url: 'www.ravinsardal.me/pebble/sparkcorecontrol/h.php?token='+TOKEN+'&id='+DEVICE_ID +'&function='+ FUNCTION_NAME + ''});

When I make the request I get this error in the logs:

[PHONE] pebble-app.js:?: JS: Spark Core Control: JavaScript Error:
send@[native code]
    at ajax (lib/ajax.js:114:11)
    at app.js:70:7
    at emitToHandlers (lib/emitter.js:121:21)
    at emit (lib/emitter.js:141:39)
    at emit (ui/window.js:273:24)
    at emitClick (ui/window.js:289:21)
    at onPacket (ui/simply-pebble.js:962:23)

I know for sure that there is nothing wrong with the script on my server because I am able to successfully make a request to it using cURL.

When posting data through ajax with the following setup:

ajax(
{
  url: URL,
  method: 'post',
  type: 'json',
  data: {
    auth : 'test'
  }
},
function(data) {
  // Success!
  console.log(JSON.stringify(data));
},
function(error) {
  // Failure!
  console.log('no response');
}
);

Php is not receiving any post data. Shouldn't the Content-Type header be application/x-www-form-urlencoded as it is sending data? Now it is specifically set to 'application/json' in the code, which doesn't post the data?

The post data is send when the type is 'html'.

Please help me out, because I really dig Pebble.js

Sometime i need to delete items from a menu, without losing the current selection. The code that I need to write now is something like:

var items = myMenu.sections[sectionIndex].items;
items.splice(itemIndex, 1);
myMenu.items(sectionIndex, items);

IMHO, it would be very nice to have a function Menu.deleteItem(sectionIndex, itemIndex) that implements this kind of behaviour.
The proposed implementation is very dumb, I'm sure that the authors will make something better, if it's accepted 😄:

Menu.prototype.deleteItem = function(sectionIndex, itemIndex) {
  var section = this.state.sections[sectionIndex];
  if (! section || ! section.items[itemIndex])
    return;

  section.items.splice(itemIndex, 1);

  this._resolveSection({ sectionIndex: sectionIndex }, true);
  return this;
};

add a event that fires when a window is destroyed. Use case: I start navigator.geolocation.watchPosition() when I initiate a window, and use it to populate a field in the window. When the user leaves the window (opens a new window or goes back to previous), there’s no more need to watch position. How should the developer know when the window is no longer active?

Could you add e.g. window.on('destroy', handler) or window.ondestroy(handler) functionality to all window objects (also to cards and menus)?

This new Pebble API is very interesting for pebble.js. We should have an API for it.

Hi, I am just adapting my WatchApp for the Pebble Time and I noticed that there is no way to set the textColor of a UI.Card. I cant find anything documented.

Hi I like to connect to openremote and they support jsonp instead of json.
references:
http://en.wikipedia.org/wiki/JSONP
http://www.openremote.org/display/docs/Controller+2.0+HTTP-REST-JSONP

do you think of supporting this in the ajax function call in the near future?

I would like to make my font style 'mono' on my UI Card but it seems to be stuck at 'small' which is the default style.

Here is the code used to make that card.

var card = new UI.Card();
card.body('i want this to be in mono font');
card.scrollable(true);
card.fullscreen(true);
card.style('mono');
card.show();

Here is a screen shot of the Pebble's screen:

In a previous app I used mono font and this is how it looked, but I had made it in simply.Js:

Hi guys!

I'm trying to make this work on SDK 3 but it is not working.

1. pebble convert-project
2. Pebble generated a new wscript that I merged with the old one

When I build the project I get lots of errors in simply. It seems that those errors are related to bitmap and colors.

I updated to the latest pebble SDK (Beta10) and also have the latest pebblejs code. Now all item icons are not anymore inverted when selected:

It should look like this:

This looks like a bug:

static void handle_vibe_packet(Simply *simply, Packet *data) {
  VibePacket *packet = (VibePacket*) data;
  switch (packet->type) {
    case VibeShort: vibes_short_pulse(); break;
    case VibeLong: vibes_short_pulse(); break;
    case VibeDouble: vibes_double_pulse(); break;
  }
}

Currently, window.show() pushes the window to the stack with an animation (and similar with hide). Can this be made an option? E.g. window.show(false /* animated */) and window.hide(false /* animated */).

Is it possible to display a PNG on a distant server ?

Didin't succeed in doing this, opened a thread : http://forums.getpebble.com/discussion/17903/pebble-js-display-image-from-distant-server

Tried several ways, without success

Menu returns to the top when not displayed and updating items. Cursor stays where it was and gets off screen.

Try the following:

var UI = require('ui');

var menu1 = new UI.Menu({
  sections: [{
    title: 'Section 1',
    items: [{
      title: 'Scroll down'
    }, {
      title: 'Scroll down'
    }, {
      title: 'Scroll down'
    }]
  }, {
    title: 'Section 2',
    items: [{
      title: 'Click here'
    }]
  }]
});

var menu2 = new UI.Menu({
  sections: [{
    items: [{
      title: 'Go back now'
    }]
  }]
});

menu1.on('select', function(e) {
  menu2.show();
  menu1.items(0, [{
    title: 'Menu returned'
  }, {
    title: 'to the top'
  }, {
    title: 'cursor didn\'t'
  }]);
});

menu1.show();

The Pebble.JS documentation for the Menu.on('select', callback) function says this:

"Registers a callback called when an item in the menu is selected. The callback function will be passed an event with the following fields:"

For Menu.on('longSelect', callback), we have this (including a missing quote mark):

See Menu.on('select, callback)

However, I discovered that the callback function is actually passed 3 parameters for 'select'

• the event as documented
• a string with the value "select"
• a number with the value 0

For a 'longSelect' event, we get a similar parameter set

• the event as documented
• a string with the value "longSelect"
• a number with the value 0

Can the documentation please be updated to show all 3 parameters that are passed to the callback function, and what their significance is?
The "select"/"longSelect" is obvious, but could that 0 ever be something else?

If a character with an accent is present in the title of a menu item, the entire title is empty.

menu.items(0, [{
  title: 'Some accént'
}])

Hi,

I was trying to compile and build the app before changing any code, but I got these errors:

$ pebble --version
PebbleSDK 3.0-dp9
$ 
$ git clone https://github.com/pebble/pebblejs
Cloning into 'pebblejs'...
remote: Counting objects: 4026, done.
remote: Compressing objects: 100% (106/106), done.
remote: Total 4026 (delta 55), reused 0 (delta 0), pack-reused 3920
Receiving objects: 100% (4026/4026), 992.59 KiB | 555.00 KiB/s, done.
Resolving deltas: 100% (2703/2703), done.
Checking connectivity... done.
$ cd pebblejs/
$ pebble build
Setting top to                           : /Users/saung/pebble-dev/jsprojects/pebblejs 
Setting out to                           : /Users/saung/pebble-dev/jsprojects/pebblejs/build 
Found Pebble SDK for basalt in:          : /Users/saung/pebble-dev/PebbleSDK-3.0-dp9/Pebble/basalt 
Checking for program gcc,cc              : arm-none-eabi-gcc 
Checking for program ar                  : arm-none-eabi-ar 
Found Pebble SDK for aplite in:          : /Users/saung/pebble-dev/PebbleSDK-3.0-dp9/Pebble/aplite 
Checking for program gcc,cc              : arm-none-eabi-gcc 
Checking for program ar                  : arm-none-eabi-ar 
'configure' finished successfully (0.055s)
Waf: Entering directory `/Users/saung/pebble-dev/jsprojects/pebblejs/build'
[ 1/63] Start build for basalt: 
[ 2/63] subst: ../../PebbleSDK-3.0-dp9/Pebble/common/pebble_app.ld.template -> build/basalt/pebble_app.ld.auto
[ 3/63] timeline_resources.json: appinfo.json -> build/basalt/timeline_resources.json
[ 4/63] appinfo.auto.c: appinfo.json -> build/basalt/appinfo.auto.c
[ 5/63] menu_icon.png: resources/images/menu_icon.png -> build/resources/basalt/images/menu_icon.png
[ 6/63] logo_splash.png: resources/images/logo_splash.png -> build/resources/basalt/images/logo_splash.png
[ 7/63] tile_splash.png: resources/images/tile_splash.png -> build/resources/basalt/images/tile_splash.png
[ 8/63] UbuntuMono-Regular.ttf.MONO_FONT_14.pfo: resources/fonts/UbuntuMono-Regular.ttf ../../PebbleSDK-3.0-dp9/Pebble/common/tools/font/fontgen.py -> build/resources/basalt/fonts/UbuntuMono-Regular.ttf.MONO_FONT_14.pfo
[ 9/63] resource_ids.auto.h: ../../PebbleSDK-3.0-dp9/Pebble/common/tools/generate_resource_code.py -> build/basalt/src/resource_ids.auto.h
[12/63] app_resources.pbpack.data: build/resources/basalt/images/menu_icon.png build/resources/basalt/images/logo_splash.png build/resources/basalt/images/tile_splash.png build/resources/basalt/fonts/UbuntuMono-Regular.ttf.MONO_FONT_14.pfo ../../PebbleSDK-3.0-dp9/Pebble/common/tools/pbpack_meta_data.py -> build/basalt/app_resources.pbpack.data
[12/63] app_resources.pbpack.manifest: build/resources/basalt/images/menu_icon.png build/resources/basalt/images/logo_splash.png build/resources/basalt/images/tile_splash.png build/resources/basalt/fonts/UbuntuMono-Regular.ttf.MONO_FONT_14.pfo ../../PebbleSDK-3.0-dp9/Pebble/common/tools/pbpack_meta_data.py -> build/basalt/app_resources.pbpack.manifest
[12/63] app_resources.pbpack.table: build/resources/basalt/images/menu_icon.png build/resources/basalt/images/logo_splash.png build/resources/basalt/images/tile_splash.png build/resources/basalt/fonts/UbuntuMono-Regular.ttf.MONO_FONT_14.pfo ../../PebbleSDK-3.0-dp9/Pebble/common/tools/pbpack_meta_data.py -> build/basalt/app_resources.pbpack.table
[13/63] app_resources.pbpack: build/basalt/app_resources.pbpack.manifest build/basalt/app_resources.pbpack.table build/basalt/app_resources.pbpack.data -> build/basalt/app_resources.pbpack
[17/63] Start build for aplite: 
[18/63] timeline_resources.json: appinfo.json -> build/aplite/timeline_resources.json
[18/63] subst: ../../PebbleSDK-3.0-dp9/Pebble/common/pebble_app.ld.template -> build/aplite/pebble_app.ld.auto
[18/63] appinfo.auto.c: appinfo.json -> build/aplite/appinfo.auto.c
[20/63] menu_icon.pbi: resources/images/menu_icon.png ../../PebbleSDK-3.0-dp9/Pebble/common/tools/bitmapgen.py -> build/resources/aplite/images/menu_icon.pbi
[21/63] tile_splash.pbi: resources/images/tile_splash.png ../../PebbleSDK-3.0-dp9/Pebble/common/tools/bitmapgen.py -> build/resources/aplite/images/tile_splash.pbi
[21/63] logo_splash.pbi: resources/images/logo_splash.png ../../PebbleSDK-3.0-dp9/Pebble/common/tools/bitmapgen.py -> build/resources/aplite/images/logo_splash.pbi
[22/63] UbuntuMono-Regular.ttf.MONO_FONT_14.pfo: resources/fonts/UbuntuMono-Regular.ttf ../../PebbleSDK-3.0-dp9/Pebble/common/tools/font/fontgen.py -> build/resources/aplite/fonts/UbuntuMono-Regular.ttf.MONO_FONT_14.pfo
[22/63] resource_ids.auto.h: ../../PebbleSDK-3.0-dp9/Pebble/common/tools/generate_resource_code.py -> build/aplite/src/resource_ids.auto.h
[24/63] Start bundling: 
[24/63] pebble-js-app.js: src/js/app.js src/js/clock/clock.js src/js/clock/index.js src/js/lib/ajax.js src/js/lib/emitter.js src/js/lib/image.js src/js/lib/myutil.js src/js/lib/safe.js src/js/lib/struct.js src/js/lib/util2.js src/js/lib/vector2.js src/js/loader.js src/js/main.js src/js/settings/index.js src/js/settings/settings.js src/js/simply/simply.js src/js/smartpackage/package-pebble.js src/js/smartpackage/package.js src/js/ui/accel.js src/js/ui/card.js src/js/ui/circle.js src/js/ui/element.js src/js/ui/image.js src/js/ui/imageservice.js src/js/ui/index.js src/js/ui/inverter.js src/js/ui/light.js src/js/ui/menu.js src/js/ui/propable.js src/js/ui/rect.js src/js/ui/resource.js src/js/ui/simply-pebble.js src/js/ui/simply.js src/js/ui/stage.js src/js/ui/tests.js src/js/ui/text.js src/js/ui/timetext.js src/js/ui/vibe.js src/js/ui/window.js src/js/ui/windowstack.js src/js/vendor/moment.js src/js/vendor/png.js src/js/vendor/zlib.js src/js/wakeup/index.js src/js/wakeup/wakeup.js -> build/src/js/pebble-js-app.js
[25/63] c: src/simply/simply_menu.c -> build/src/simply/simply_menu.c.29.o
[26/63] c: src/simply/simply_wakeup.c -> build/src/simply/simply_wakeup.c.28.o
[27/63] c: src/simply/simply_msg.c -> build/src/simply/simply_msg.c.29.o
[28/63] c: src/main.c -> build/src/main.c.29.o
[29/63] c: src/simply/simply_accel.c -> build/src/simply/simply_accel.c.29.o
[30/63] c: src/simply/simply.c -> build/src/simply/simply.c.29.o
[31/63] c: src/simply/simply_window_stack.c -> build/src/simply/simply_window_stack.c.29.o
[32/63] c: build/aplite/appinfo.auto.c -> build/aplite/appinfo.auto.c.29.o
[33/63] app_resources.pbpack.data: build/resources/aplite/images/menu_icon.pbi build/resources/aplite/images/logo_splash.pbi build/resources/aplite/images/tile_splash.pbi build/resources/aplite/fonts/UbuntuMono-Regular.ttf.MONO_FONT_14.pfo ../../PebbleSDK-3.0-dp9/Pebble/common/tools/pbpack_meta_data.py -> build/aplite/app_resources.pbpack.data
[34/63] c: src/simply/simply_window_stack.c -> build/src/simply/simply_window_stack.c.28.o
[35/63] c: src/simply/simply_menu.c -> build/src/simply/simply_menu.c.28.o
[36/63] c: src/simply/simply.c -> build/src/simply/simply.c.28.o
[37/63] c: src/simply/simply_splash.c -> build/src/simply/simply_splash.c.29.o
In file included from ../src/simply/simply_window.h:8:0,
                 from ../src/simply/simply_window_stack.h:3,
                 from ../src/simply/simply_window_stack.c:1:
/Users/saung/pebble-dev/jsprojects/pebblejs/src/util/status_bar_layer.h:33:67: error: unknown type name 'StatusBarLayer'
/Users/saung/pebble-dev/jsprojects/pebblejs/src/util/status_bar_layer.h:56:72: error: unknown type name 'StatusBarLayer'
In file included from ../src/simply/simply_window_stack.h:3:0,
                 from ../src/simply/simply_window_stack.c:1:
../src/simply/simply_window.h:17:3: error: unknown type name 'StatusBarLayer'
In file included from ../src/simply/simply_window.h:8:0,
                 from ../src/simply/simply_stage.h:3,
                 from ../src/simply/simply.c:6:
/Users/saung/pebble-dev/jsprojects/pebblejs/src/util/status_bar_layer.h:33:67: error: unknown type name 'StatusBarLayer'
/Users/saung/pebble-dev/jsprojects/pebblejs/src/util/status_bar_layer.h:56:72: error: unknown type name 'StatusBarLayer'
In file included from ../src/simply/simply_stage.h:3:0,
                 from ../src/simply/simply.c:6:
../src/simply/simply_window.h:17:3: error: unknown type name 'StatusBarLayer'
In file included from ../src/simply/simply_window.h:8:0,
                 from ../src/simply/simply_menu.h:3,
                 from ../src/simply/simply_menu.c:1:
/Users/saung/pebble-dev/jsprojects/pebblejs/src/util/status_bar_layer.h:33:67: error: unknown type name 'StatusBarLayer'
/Users/saung/pebble-dev/jsprojects/pebblejs/src/util/status_bar_layer.h:56:72: error: unknown type name 'StatusBarLayer'
In file included from ../src/simply/simply_menu.h:3:0,
                 from ../src/simply/simply_menu.c:1:
../src/simply/simply_window.h:17:3: error: unknown type name 'StatusBarLayer'
Waf: Leaving directory `/Users/saung/pebble-dev/jsprojects/pebblejs/build'
Build failed
 -> task in 'basalt/pebble-app.elf' failed (exit status 1): 
    {task 4415802768: c simply_window_stack.c -> simply_window_stack.c.28.o}
['arm-none-eabi-gcc', '-std=c99', '-mcpu=cortex-m3', '-mthumb', '-ffunction-sections', '-fdata-sections', '-g', '-Os', '-D_TIME_H_', '-Wall', '-Wextra', '-Werror', '-Wno-unused-parameter', '-Wno-error=unused-function', '-Wno-error=unused-variable', '-Wno-address', '-Wno-type-limits', '-Wno-missing-field-initializers', '-fPIE', '-I/Users/saung/pebble-dev/jsprojects/PebbleSDK-3.0-dp9/Pebble/basalt/include', '-I/Users/saung/pebble-dev/PebbleSDK-3.0-dp9/Pebble/basalt/include', '-I/Users/saung/pebble-dev/jsprojects/pebblejs/build', '-I/Users/saung/pebble-dev/jsprojects/pebblejs', '-I/Users/saung/pebble-dev/jsprojects/pebblejs/build/src', '-I/Users/saung/pebble-dev/jsprojects/pebblejs/src', '-I/Users/saung/pebble-dev/jsprojects/pebblejs/build/basalt', '-I/Users/saung/pebble-dev/jsprojects/pebblejs/basalt', '-DRELEASE', '-DPBL_PLATFORM_BASALT', '-DPBL_COLOR', '-D__FILE_NAME__="simply_window_stack.c"', '../src/simply/simply_window_stack.c', '-c', '-o', 'src/simply/simply_window_stack.c.28.o']
 -> task in 'basalt/pebble-app.elf' failed (exit status 1): 
    {task 4415801232: c simply.c -> simply.c.28.o}
['arm-none-eabi-gcc', '-std=c99', '-mcpu=cortex-m3', '-mthumb', '-ffunction-sections', '-fdata-sections', '-g', '-Os', '-D_TIME_H_', '-Wall', '-Wextra', '-Werror', '-Wno-unused-parameter', '-Wno-error=unused-function', '-Wno-error=unused-variable', '-Wno-address', '-Wno-type-limits', '-Wno-missing-field-initializers', '-fPIE', '-I/Users/saung/pebble-dev/jsprojects/PebbleSDK-3.0-dp9/Pebble/basalt/include', '-I/Users/saung/pebble-dev/PebbleSDK-3.0-dp9/Pebble/basalt/include', '-I/Users/saung/pebble-dev/jsprojects/pebblejs/build', '-I/Users/saung/pebble-dev/jsprojects/pebblejs', '-I/Users/saung/pebble-dev/jsprojects/pebblejs/build/src', '-I/Users/saung/pebble-dev/jsprojects/pebblejs/src', '-I/Users/saung/pebble-dev/jsprojects/pebblejs/build/basalt', '-I/Users/saung/pebble-dev/jsprojects/pebblejs/basalt', '-DRELEASE', '-DPBL_PLATFORM_BASALT', '-DPBL_COLOR', '-D__FILE_NAME__="simply.c"', '../src/simply/simply.c', '-c', '-o', 'src/simply/simply.c.28.o']
 -> task in 'basalt/pebble-app.elf' failed (exit status 1): 
    {task 4415801488: c simply_menu.c -> simply_menu.c.28.o}
['arm-none-eabi-gcc', '-std=c99', '-mcpu=cortex-m3', '-mthumb', '-ffunction-sections', '-fdata-sections', '-g', '-Os', '-D_TIME_H_', '-Wall', '-Wextra', '-Werror', '-Wno-unused-parameter', '-Wno-error=unused-function', '-Wno-error=unused-variable', '-Wno-address', '-Wno-type-limits', '-Wno-missing-field-initializers', '-fPIE', '-I/Users/saung/pebble-dev/jsprojects/PebbleSDK-3.0-dp9/Pebble/basalt/include', '-I/Users/saung/pebble-dev/PebbleSDK-3.0-dp9/Pebble/basalt/include', '-I/Users/saung/pebble-dev/jsprojects/pebblejs/build', '-I/Users/saung/pebble-dev/jsprojects/pebblejs', '-I/Users/saung/pebble-dev/jsprojects/pebblejs/build/src', '-I/Users/saung/pebble-dev/jsprojects/pebblejs/src', '-I/Users/saung/pebble-dev/jsprojects/pebblejs/build/basalt', '-I/Users/saung/pebble-dev/jsprojects/pebblejs/basalt', '-DRELEASE', '-DPBL_PLATFORM_BASALT', '-DPBL_COLOR', '-D__FILE_NAME__="simply_menu.c"', '../src/simply/simply_menu.c', '-c', '-o', 'src/simply/simply_menu.c.28.o']
[ERROR   ] A compilation error occurred

Any help would be appreciated.

-Sithu

It could be nice to use #hexa values for the colors, and not only the labels.

Hey there,

I was wondering if it would be possible to add a sliding/scrolling animation for menu titles whose names are too long. For example my app creates dynamic menu items based off of some Meetup Event names from Meetup.com, however some of these names are too long. Some of them begin with "Pebble smartwatch..." Where the title should be "Pebble Smartwatch Houston Meetup" however the truncated version of the title doesn't really provide much information about the Meetup group. I could just remove "Pebble Smartwatch" from the title of the group, but the scrolling banner would be more optimal plus this would not work for every menu item, since they don't all begin with that specific string

Here is what I mean by a scrollable menu title: http://l.wigflip.com/LsSwtWlM/signbot.gif (this kind of concept)

Here is an example of the menu items being truncated: http://i.gyazo.com/b55d0b073a3e8eac9aefd35bc02524bc.png

Thanks in advanced!

I have an application that requires the user to navigate through multiple menus to make selections. They can currently use the back button to go back to a previous menu to revise their selections. Once they make their final selection, I would like to call hide() on all of the old windows. This would prevent the user from trying to go back and make any more changes, and it would also allow the user to quickly exit from the application with one push of the back button (rather than hitting it multiple times to backup through all of the windows).

Currently, the only way to accomplish this would be to hard code calls to hide() all of the windows, or I could try and maintain my own list of which windows are on the stack. Both of these are less than ideal. It would be great to have some sort of each(callback) function that iterates over each window on the stack.

Hi,

its not possible for me to change the body of a UI.Card element within a click handler or ajax callback. I try something like that:

var screen = new UI.Card({
      title: 'Name',
      body: 'Test',
      action: {
        up: 'images/action_icon_plus.png',
        down: 'images/action_icon_minus.png'
      }
    }); 

screen.on('click', 'up', function() {
    screen.body('Test2');
});

screen.show();

The body changes to 'Test2' but the app crashes with no log output.
Whats wrong with my attempt?

Im using cloudpebble with a Pebble Steel (latest firmware).

Is it possible to check the device type so Basalt can display colored images instead of Grayscale ?
https://github.com/pebble/pebblejs/blob/master/src/js/lib/image.js#L169
https://github.com/pebble/pebblejs/blob/master/src/js/lib/image.js#L13

Images that are referenced in animation queue (setting the image to a new image) are shown blank, unless they were previously referenced.

So initiating the animation with "up" shows "ballsub3" then each step in the animation queue that does not use "ballsub3" shows blank, as soon as the animation switches the image back to "ballsub3" the image shows correctly.

So if the image "ballsub3" is changed to "ballsub1" then when the "ballsub1" shows in the animation it is shown correctly but blank otherwise. If no image changes are made in the animation queue, animation runs as expected.

Demonstrated in this code
https://github.com/robgithub/PebbleMagic8Ball

Noted at dev forums
http://forums.getpebble.com/discussion/25981/swapping-images-in-animations-with-pebble-js-something-weird-happens#latest

p.s. Best to see on Pebble Time device or Aplite as Basalt will often not even cause the console.log('up pressed'); command to execute.

Hi,
I recently updated to the latest Version of pebblejs and now I am having a big problem. My application crashes when I try to display a GUI.Menu() with the following content.

{
    "sections": [
        {
            "title": "Controls",
            "data": {
                "type": "controls"
            },
            "items": [
                {
                    "title": "name",
                    "data": {
                        "type": "command",
                        "cmd": "cmd",
                        "icon": "icon"
                    }
                }
            ]
        }
    ],
    "fullscreen": true,
    "backgroundColor": "white",
    "textColor": "black",
    "highlightBackgroundColor": "black",
    "highlightTextColor": "white",
    "scrollable": false,
    "id": 2
}

The errormessage I am getting is:

[INFO    ] E ault_handling.c:78 App fault! {133215f0-ce20-4c05-997b-3c9be5a64e5b} PC: 0x806bdd2 LR: 0x8fd
[WARNING ]    Program Counter (PC):  0x806bdd2 ???
[WARNING ]      Link Register (LR):      0x8fd /Users/MyName/AnfFolder/MyApp/build/../src/simply/simply_menu.c:441
[INFO    ] JS: stopping app: 133215F0-CE20-4C05-997B-3C9BE5A64E5B MyApp

Does this have something to do with the default properties:

"backgroundColor": "white",
"textColor": "black",
"highlightBackgroundColor": "black",
"highlightTextColor": "white",
"scrollable": false,
"id": 2

It seems that there is a problem with the wscript: if I update my app.coffee file, it will not be bundled in the new app.pbw file. No problems with normal *.js files.

To test this behaviour it is sufficient to rename the app.js to app.coffee and see that if it gets modified, the next pebble build will have the outdated version:

rm src/js/app.js
echo 'console.log "old value"' > src/js/app.coffee

pebble build
pebble install

you will see old value in the output. Then run:

echo 'console.log "new value"' > src/js/app.coffee

pebble build
pebble install

and you will still see old value in the log. The only way to get the new version bundled is to run a pebble clean before building.

I recently upgraded my SDK to 3.0. I have a pebblejs app that was compiling and installing fine onto my pebble (original) with the 2.x SDK. However, with the 3.0, it compiles fine but upon installation says
Error: Cannot find module 'clock'

(http://puu.sh/gKiFg/f689c6369a.png)

I thought it might be a problem with my code -- tried compiling and installing with the pebble js sample github code, and received the same error upon installation. Is there a known workaround to this?
Downgraded to 2.9, same issue.

I fix it , please see this: b6f4519 commit in my fork.

https://github.com/songfei/pebblejs

There is no output for a console.log when I use the emulator (SDK 3.0-dp4) on my mac. On cloudpebble it's working without problems. Is this a known problem? Is there a workaround?

Hi,

First of all, great job building this SDK ! I really enjoyed reading the docs.

I would like to develop apps for Pebble smartwatches, but as node.js developer who have not used C for years, the language barrier is quite a challenge for me (and the snake_case too, lol)... Pebblejs seems to be the solution.

I read the online doc and one of the first thing written is :

Please be aware that as a result of Bluetooth round-trips for all actions, Pebble.js apps will use more power and respond slower to user interaction than a similar native app.

And I really did notice significant delays when running the provided default app. Sometimes, when I click a physical button on my watch, the action can take seconds to be effective.

So, before I start, I'd like to know a few things :

• Is it just that my phone's Bluetooth sucks ? (I don't think so, because I encounter the same problem on the CloudPebble emulator)
• Is there any chance the responsiveness of on-phone javascript pebble apps will get better in the future ? (i.e. shorter delays)
• Is there a way to "compile" a javascript application to make it a native pebble app ?
• Can I at least display a "loading" visual clue between user physical button and the end of the Bluetooth round-trip ?
• Can Pebblejs apps run without a phone connected ? (I guess not)

Also, I plan to have a charting feature in my app (the current lack of line/path UI.Element is not a problem, I'll just make bar charts for now), so I'd like to know if complex UI.Windows (with lots of UI.Elements in it) could take significantly more time to be displayed ?

Thanks for reading :-)

Eswak

Hey there,

Would it be possible to reduce the menu items when there is no subtitle ?

Here is the Pebble setup menu :

Here is a screenshot of my application, with no subtitles :

What do you think about that ?

Pebblejs can't compile using PebbleSDK 3.0-dp9 because the InverterLayer has been removed.

I know this features is undocumented and probably not supported, but I can't seem to be able to load a remote image properly with the following code on app.js

var UI = require('ui');
var Vector2 = require('vector2');

var win = new UI.Window({
  backgroundColor: 'darkGreen'
});
var img = new UI.Image({
    image: {
      url : 'http://assets.getpebble.com.s3-website-us-east-1.amazonaws.com/pebble-faces/cherie.png'
    },
    borderColor: 'red',
    size: new Vector2(144, 144),
    position: new Vector2(0, 0)
  });

win.show();
win.add(img);

I'm getting the following result on the Basalt emulator:

(the Aplite emulator crashes when trying to load the image)

The image I'm using comes from the pebble-faces example, so it's optimized for Pebble.

Is there something I'm missing here?