Category Archives: 13-pebbleclock

Bryce Summers

25 Jan 2015

Conceptual Sketch and Notes

Sketches by Bryce

Sketches by Bryce

Process

My goal was to represent the time of day using a set of “suns” moving across the screen from left to right. I wanted to represent hours, minutes, and seconds that had elapsed with each of the spheres and show some sort of spatial relationship between them. I started out trying to display some beautiful light transport by converting grayscale values to monochrome. My first attempt used random dithering, which resulted in very lots of flickering and was not very pleasant to look at. I then looked online for better dithering algorithms: http://en.wikipedia.org/wiki/Dither . I decided to try out Floyd–Steinberg dithering dithering, which tries to compensate for errors by propagating them to adjacent pixels that have not been computed yet.

For some examples of images that I have programmatically dithered outside of the pebble watch, please see: https://www.flickr.com/photos/126728013@N08/sets/72157650061774259/

Although this got my heart pumping, I could not get the pebble watch to run any of my programs that involved arrays, so my plans came to an abrupt halt. If I could have gotten arrays to work with the pebble watch, then I was also toying with the idea of writing an integer raytracer for the pebble.

Since Arrays did not work for me, I decided to change my approach and I have settled for a watch face that displays the isobars for the pixel distance relation between the three points.

I feel somewhat successful in that I have learned about dithering and got it to work in an external programming language, but I was looking forward to exploiting the monochrome display and trying to show detailed images. I have learned great stuff from this project, but am a bit dejected that I could not use things as fundamental as arrays with the pebble watch.

Visual and Aural Documentation

Here is an example screenshot for my watchface at the current time of this writing, e.g. 5:22 pm 1/25/2015

PebbleScreenshot 5:23pm

PebbleScreenshot 5:23pm

Here is a diagram of the previous image showing which circles correspond to the hours, minutes, and seconds that have elapsed since the start of the day.

diagram

5:23pm with diagrammatic annotations

 

Here are some other screenshots of how my watch face would look like at other times of the day.

 

8:30:10pm

8:30:10pm

12:10:20pm

12:10:20pm

12-00am (Midnight)

12-00am (Midnight)

Here is a Youtube video that seems to have the beginning clipped off, it also seems to have some visual display problems.

 

The Source code for this watchface can be found here:

https://github.com/Bryce-Summers/Pebble-Isobars-watchface

Alex Sciuto – Pebble Watch

My goal for this project was to create a clock the encoded naturalistic time based on a human’s life. I wanted a watch that didn’t tell me where I was at in terms of abstract quantity like minutes and hours, but instead would tell me where I’m at in terms of rising and setting of the sun or my own birth and expected death. I wanted this watch to be normative and tell me what I should be doing based on these biological rhythms. I wanted a watch to slow me down, not speed me up.

This was my first time coding in C, and it greatly limited the my design palette. I spent a lot of time learning about pointers and references, and learning how to manage floats and doubles. Because of this, sketching became much more important as a way to get myself out of programming deadends. I often felt like I was a running back and C were people trying to bring me down.

sketch-pebble-1

I originally wanted to juxtapose the proportion of my life completed with the number of texts, calls, and emails I received in a day. I could not figure out how to get this data, and so I abandoned the telling-time by communication concept. I sketched ideas showing a variety of time juxtapositions on one screen. Time until dinner, time until death, how long I’ve been in a relationship, Time until the next season begins. The sketches didn’t feel right, and they didn’t have a lot of motion to them.

sketch-pebble-2

I arrived at a concept for a simple particle system that pulses at various frequencies throughout the day. As the day begins, small dots wander the screen. By midday, the dots breathe in and out faster and faster. By the end of the day, the dots again wander, but they have grown larger filling the screen with blackness.

All things considered, I am pleased with the final design. Using the watch for a few days, the watchface feels like reading tea leaves. I look at it and I want it to give me permission to slow down in the evening. Are the dots pulsing more slower? Or is that my imagination I think. I would have liked this to be the first part of a larger watchface. I saw a number of watchface that use taps and motion to show different views of time, I would have liked to have gotten an juxtaposed watchface working.

dantasse

25 Jan 2015

(some tips copied from my programming blog)

My goal: a Pokemon watch, that shows a pokemon each minute instead of the numerical minute. I figured I’d get 144×144 images, and then just display one each minute. The challenges:

1. You need black and white (not grayscale) images. This is easily solved with a tool like HyperDither, which uses “dithering” to create shades of gray using only black and white pixels.
For example, changes this color Bulbasaur into this black and white one:

This is nice. HyperDither has a batch mode, which works, but it actually makes slightly smaller PNGs if you do it one at a time.

2. Saving space. You get 24kb RAM per app and 96kb storage for images/fonts per app. It’s not easy to fit all the images you need in 96kb. I wanted 60 images, so I had to average ~1.5kb per image. Luckily, black/white 144×144 PNGs are not so big. Using HyperDither, I got pretty close to 96kb, but not quite: I’d have 90kb of PNGs locally, but when I uploaded them to the Pebble, it converted them to “pbi” files, which are almost double the size.

(also note that if you include too many pictures that are over 96kb, you’ll get a cryptic error: it’ll compile fine, but then will say “Installation failed. Check your phone for details.” but no real way to check your phone for details, and no hints about why it fails. You’ll get a similar cryptic error if you upload an image but never reference it in your code (stack overflow related question).

Spriting
So I figured there was some overhead per-image, so I tried spriting, or combining multiple images into one big image, like so: (created with InstantSprite, which is awesome and free)

and then you just take a subset of that image at a time. Pebble provides a call,gbitmap_create_as_sub_bitmap, to do exactly that. However, a few problems:
– if you make an image that is too big (like 10 pokemon at a time, or 1440×144), then gbitmap_create_as_sub_bitmap just crashes the app with no feedback. I found that 6 pokemon (864×144) worked, while 1440×144 didn’t. Not sure what the actual limit is.
– it doesn’t even make the images smaller! 10 PNGs with 6 pokemon each is not really any smaller than 60 PNGs with 1 pokemon each.

uPNG. Forget Spriting.
So, forget spriting. I then found Matthew Hungerford’s port of uPNG, which is a library that lets you use raw PNG files instead of converting them to PBI first. Just include the .c and .h files, use gbitmap_create_with_png_resource instead of gbitmap_create_with_resource, and then edit your appinfo.json file to change the type of each image from “png” to “raw”.
(editing your appinfo.json may require pushing your code from CloudPebble to Github, then cloning it locally, editing the file, committing and pushing your change. also, you might have to move your image files from resources/images/foo.png to resources/data/foo.png. anyway, this is nice, because you can then upload a bunch of images by editing a text file instead of uploading through the GUI a lot.)

He also provides scripts to transform images to B/W or dithered first, which ended up saving a few kb in my case.

In the end, thanks to uPNG, I had 80kb of images that actually stayed 80kb. (plus a little bit of overhead per image, but didn’t matter.) Success! Here’s my watch code on Github.

Other Tips
– Use logging, like: APP_LOG(APP_LOG_LEVEL_DEBUG, “hello”); – this took me too long to discover.