Suggestion: Add 1px white outline around elements on dithered sidebar (S/W Pebble) for increased legibility and clarity

[trashbytes]

Hi!

Have a look at this comparison (imgur) I just threw together in Photoshop. I think adding a 1px white outline around the elements in the dithered sidebar would greatly increase the legibility.

What do you guys think?

[plarus]

It seems difficult with Pebble graphics API... Do you know if this was already done in a Pebble watch app?

[trashbytes]

Take a look at a clone of TimeStyle called "Sidebar". It looks like he is doing something similar, although not quite as crisp as my mockup. Seems like he is using a 2px outline with rounded corners, my example is 1px outline with sharp corners. Also he uses white fonts with dark outlines.

The simplest I could think of would be to duplicate the image behind it, make it white and move it 1px in every direction.

I've demonstrated something like this in this JSFiddle using text shadows. I have no idea however what that would be in terms of drawing calls and needed extra computation power.

[plarus]

@Spitemare who made this "sidebar" watchface may tell us how he has done this change from timestyle app.

Yes this can be done for images. But texts and numbers are not pictures but fonts. As the app is not made in html we cannot do what you made with CSS styles.

[trashbytes]

Yes, I am certainly aware that there is no CSS but it would be possible to render the font several times with an offset (1px in every of the 8 directions plus the center in black) to achieve the same result. Alternatively one could create image resources to get the same look but that doesn't seem right..

[dmorgan81]

I did it in Sidebar just like @trashbytes said: I draw the font in the outline color multiple times, offset by two pixels in eight directions. Then I draw the font in the foreground color right in the center.

static inline void prv_draw_outline_text(GContext *ctx, GFont font, char *s, GRect bounds, GPoint offset) {
    graphics_draw_text(ctx, s, font, GRect(bounds.origin.x + offset.x, bounds.origin.y + offset.y, bounds.size.w, bounds.size.h),
        GTextOverflowModeWordWrap, GTextAlignmentCenter, NULL);
}

void graphics_draw_outline_text(GContext *ctx, GFont font, char *s, GRect bounds, GColor outline_color, GColor text_color) {
    graphics_context_set_text_color(ctx, outline_color);
    prv_draw_outline_text(ctx, font, s, bounds, GPoint(2, 0));
    prv_draw_outline_text(ctx, font, s, bounds, GPoint(-2, 0));
    prv_draw_outline_text(ctx, font, s, bounds, GPoint(0, 2));
    prv_draw_outline_text(ctx, font, s, bounds, GPoint(0, -2));
    prv_draw_outline_text(ctx, font, s, bounds, GPoint(1, 1));
    prv_draw_outline_text(ctx, font, s, bounds, GPoint(-1, -1));
    prv_draw_outline_text(ctx, font, s, bounds, GPoint(1, -1));
    prv_draw_outline_text(ctx, font, s, bounds, GPoint(-1, 1));
    graphics_context_set_text_color(ctx, text_color);
    prv_draw_outline_text(ctx, font, s, bounds, GPoint(0, 0));
}

Here is how it looks if you comment out the last call to prv_draw_outline_text():

You can see that the outline text by itself is just a chunky blob. Putting the foreground text over it gives the illusion of outlined text.

Thankfully this works pretty well for the system Gothic font. Some other fonts don't get as good of an effect.

I did not try this on the time font since it's drawn using pebble-fctx, just like TimeStyle does. The same technique might work but it could have some weird side effects during a timeline peek.

[trashbytes]

Thank you, Spitemare, for tuning in.

I just opened PS again and didn't use the layer styles this time. I just duplicated the sidebar contents 4 times behind itself and made them white. Then moved each layer so that each of them ended up being either one pixel north-west, south-west, north-east or south-east and the result is exactly the same, so I think 4 copies should be enough, if we only want a 1px outline, at least with this kind of font.

[tilden]

Interesting! That probably would improve readability.

BTW @Spitemare: If you want your sidebar icons to look more like the "real" timeline ones with thinner border lines, you need to modify the svg2pdc script to pass the "precise = True" parameter when running it.