Revisiting Beam Up for Pebble with SDK 3.0

According to the Pebble dev portal, the last version of Beam Up to be released was December 14th, 2014. If I remember correctly, that version was the much required update that rolled all the different versions (inverted, with date, with battery etc.) into one version. This was a move away from the SDK 1.x hangover where app config pages did not exist, so multiple apps were required.

The SDK has come a long way since then, with the latest release (3.0-dp9) released today, after much testing. The biggest change this time around is deprecating the InverterLayer element, popularly used to add a quick black-on-white effect to many watchfaces, as it no longer makes sense in a world of 64 colors.

How do you invert a color? As I found out during my degree course, techniques applied to colors (and even grayscale) cannot be easily applied to color in the same way. A prime example from that work was the techniques involved in Mathematical Morphology and utilized ordering of pixels heavily. A white pixel can be defined as ‘greater’ than a black pixel, a grayscale pixel with value 128 can be ‘lesser’ than one with a value of 238, and so on. This enabled the implementation of various filters that went on to enable the automatic counting of tree canopies. But the last part of the work was adapting these techniques for color images. The crucial question was this: how can you decide whether one color is ‘greater’ than another? There were several options, with no clear leader in terms of logic. Was the ‘greater’ color:

  • The one with the largest single component?
  • The one with the largest averaged value?
  • The one with the largest total component value?

The answer I chose was borne out of a piece I read arguing that the human eye is more sensitive to green light (perhaps a hangover from living in the verdant wilderness?), and so proposed that the colors be ordered with a preference for the green component, and this gave good results.

The same problem exists when placing a Pebble InverterLayer over another color in a Layer beneath it: what’s the inverse of yellow? Is it:

  • The inverted color according to classic opposites?
  • The inverted bits in the byte representation?
  • The inverted values of the RGB channels?

So it was removed, and APIs added to MenuLayer (the chief user of the InverterLayer in the system) to allows developers to specify their own choice of colors for menu items when each is selected. A more general approach I adopted to enable me to continue to develop Beam Up (a handy coincidence when I wanted to add color themes) is to have the developer specify two colors, and use the frame buffer API to invert then to each other wherever they appear. This approach worked really well, and enables any color combination desired as an artificial ‘inversion’; especially useful for adding themes to Beam Up. These take the form of pairs of colors, selectable in presets (for now!) in the app config page.

The image below shows three of the new themes in action: blue, green and midnight. Classic, Inverted Classic, Red, and Yellow are also initially available.


The new version is available on the Pebble appstore. On Aplite (Pebble, Pebble Steel) it behaves as it ever did, except now the config page remembers your choices from last time you saved. On Basalt, the new themes are available, using the new pseudo-InverterLayer, called InverterLayerCompat in the code. This is still available in full on GitHub!

  1. bsavarin said:

    Instead of themes, how can I get the users to choose any of the 64 background or foreground colours? I’m so close but it does not work the way I want it. Please look at my sample:
    What am I doing wrong?

    • I’m afraid I don’t have time to debug your code, but since each color on Pebble Time is a byte (2 bits per ARGB), simply transmit the byte representation of the user’s channel choices and that will be the selected color.

  2. Walther said:

    I have a couple of requests I’d love to see implemented
    1. Setting to always show battery bar
    2. Date options, like mm/dd dd/mm dd/mm/yy ect.
    3. Shake for weather
    4. Weather below date with just words(and current temp in c or f)instead of images, ie “sunny” instead of a picture of a sun.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: