Watchface Ideas

Nm

Nm

Thanks! Yes, some nice segmented clocks would be cool. I guess there's always power usage being an issue for stuff that animated quickly, but you could always only make it do it when the screen as unlocked.

Also, I like the Nike watch face idea - should be pretty easy to find two matching fonts, one outlined, one not

Yes the Nike is really nice.
I also like this that you (@Gordon) had on your early gallery:
https://hackaday.io/project/175577/gallery#9479be5ae92b13efad064e26f02f3f4a

I guess that is from the original manufacturers software - or is this already realized on bangle?

I think its from the original software but could be done if someone fancies having a crack at it.

That was just a photoshop from the original manufacturer. I don't believe it even existed even on the original firmware - I think the reality might not be as good given the 3 bit display though!

nm

Nm

Nm

Nm

There's an example of making your own clock face with a font from Google fonts at http://www.espruino.com/Bangle.js+Clock+Font - so it should be pretty easy!

nm

nm

Nm

There's a slider in the font converter. Just slide that along to change font size. They can be a bit annoying as it depends on the font. Selecting 60 for one font might look more like 40 for another. It very much depends on the characteristics of the font. It can be a bit of trial an error.
Have a look at Pastel - as I allow the user to select 1 of 7 fonts via a settings menu.

Nm

Hi there @andiohn,

Its not that hard to get started. You can do an aweful lot in the emulator.
Personally I prefer to try running the code in RAM on the Bangle as it is truer to what it
will look like when finished.

The challenge is finding the best colour match and a good free
font. Once you have identified a font that looks like it works you then need to try it.

Below is some basic code to try:

g.clear();
g.setColor('#000');
g.fillRect(0,0,g.getWidth(), g.getHeight());

g.setFont('Vector',100);
g.setFontAlign(0,-1);

g.setColor('#f2f');
g.drawString("09", g.getWidth()/2, 0);

g.setColor('#fb8');
g.drawString("30", g.getWidth()/2, g.getHeight()/2);

This will produce a watch like this:

1 Attachment

Nm

Next you will want to muck about with fonts.
Read the font tutorial but basically you need to try fronts from fonts.google.com or search for FREE true type fonts.

I have just googled 'free square true type font'.
This has lead me to:

https://www.1001fonts.com/search.html?search=square
From there I have downloaded the zip file for square head and identified the file called:
SSFSquareHead.ttf

Next I load that file into the font coverter at:
https://www.espruino.com/Font+Converter

I adjust the slider to around 30 as I want to be able to scale the font up to 90 pixels and 3x90=90.
I click go and get the following bit for code:

Graphics.prototype.setFontSFSquareHead = function(scale) {
  // Actual height 26 (29 - 4)
  g.setFontCustom(atob("AAAAPAAAAADwAAAAA8AAAAAPAAAAAAAAAAAAAAAAAAOAAAAAfwAAAB/8AAAH//AAAP//AAA//8AAD//4AAA//gAAAP+AAAAD8AAAAAQAAAAAAAAAAAD////AA////wAP///8AD////AA8AADwAPAAA8ADwAAPAA8AADwAPAAA8ADwAAPAA8AADwAPAAA8ADwAAPAA8AADwAPAAA8ADwAAPAA8AADwAPAAA8ADwAAPAA8AADwAPAAA8ADwAAPAA8AADwAP///8AD////AA////wAP///8AAAAAAAAAAAAAAPAAA8ADwAAPAA8AADwAPAAA8ADwAAPAA8AADwAPAAA8ADwAAPAA8AADwAPAAA8ADwAAPAA////wAP///8AD////AA////wAAAAA8AAAAAPAAAAADwAAAAA8AAAAAPAAAAADwAAAAA8AAAAAPAAAAADwAAAAA8AAAAAPAAAAADwAAAAAAAAAAAAAA8B//wAPAf/8ADwH//AA8B//wAPAeA8ADwHgPAA8B4DwAPAeA8ADwHgPAA8B4DwAPAeA8ADwHgPAA8B4DwAPAeA8ADwHgPAA8B4DwAPAeA8ADwHgPAA8B4DwAPAeA8ADwHgPAA8B4DwAPAeA8AD//gPAA//4DwAP/+A8AD//gPAAAAAAAAAAAAAADwHgPAA8B4DwAPAeA8ADwHgPAA8B4DwAPAeA8ADwHgPAA8B4DwAPAeA8ADwHgPAA8B4DwAPAeA8ADwHgPAA8B4DwAPAeA8ADwHgPAA8B4DwAPAeA8ADwHgPAA8B4DwAPAeA8ADwHgPAA8B4DwAP///8AD////AA////wAP///8AAAAAAAAAAAAAAP/+AAAD//gAAA//4AAAP/+AAAAAHgAAAAB4AAAAAeAAAAAHgAAAAB4AAAAAeAAAAAHgAAAAB4AAAAAeAAAAAHgAAAAB4AAAAAeAAAAAHgAAAAB4AAAAAeAAAAAHgAAAAB4AAAAAeAAAAAHgAAA////wAP///8AD////AA////wAAAAAAAAAAAAAA//4DwAP/+A8AD//gPAA//4DwAPAeA8ADwHgPAA8B4DwAPAeA8ADwHgPAA8B4DwAPAeA8ADwHgPAA8B4DwAPAeA8ADwHgPAA8B4DwAPAeA8ADwHgPAA8B4DwAPAeA8ADwHgPAA8B4DwAPAeA8ADwH//AA8B//wAPAf/8ADwH//AAAAAAAAAAAAAAD////AA////wAP///8AD////AA8B4DwAPAeA8ADwHgPAA8B4DwAPAeA8ADwHgPAA8B4DwAPAeA8ADwHgPAA8B4DwAPAeA8ADwHgPAA8B4DwAPAeA8ADwHgPAA8B4DwAPAeA8ADwHgPAA8B4DwAPAf/8ADwH//AA8B//wAPAf/8AAAAAAAAAAAAAAPAAAAADwAAAAA8AAAAAPAAAAADwAAAAA8AAAAAPAAAAADwAAAAA8AAAAAPAAAAADwAAAAA8AAAAAPAAAAADwAAAAA8AAAAAPAAAAADwAAAAA8AAAAAPAAAAADwAAAAA8AAAAAPAAAAADwAAAAA////wAP///8AD////AA////wAAAAAAAAAAAAAA////wAP///8AD////AA////wAPAeA8ADwHgPAA8B4DwAPAeA8ADwHgPAA8B4DwAPAeA8ADwHgPAA8B4DwAPAeA8ADwHgPAA8B4DwAPAeA8ADwHgPAA8B4DwAPAeA8ADwHgPAA8B4DwAPAeA8AD////AA////wAP///8AD////AAAAAAAAAAAAAAD//gPAA//4DwAP/+A8AD//gPAA8B4DwAPAeA8ADwHgPAA8B4DwAPAeA8ADwHgPAA8B4DwAPAeA8ADwHgPAA8B4DwAPAeA8ADwHgPAA8B4DwAPAeA8ADwHgPAA8B4DwAPAeA8ADwHgPAA8B4DwAP///8AD////AA////wAP///8AAAAAAAAAAAAAAAAeA8AAAHgPAAAB4DwAAAeA8AAAAAAAAAAAAA"), 46, atob("BgwdHR0dHR0dHR0dBg=="), 38+(scale<<8)+(1<<16));
}

Now instead of using the Vector font I use:

g.setFontSFSquareHead(3);

Now I get a clock that will look like this:

1 Attachment

So you might want to giggle the starting x,y coordinates a bit to get the font digits to look properly aligned. Or you can adjust the size of the font in the font converter until its scales better.

Colour control on the Bangle 2 is a bit limited. Color is set using 3 flags for a colour mix
of RED,GREEN, BLUE.

So

g.setColor('#f00'); 

Means set RED. You can also dither the color a bit by setting the RED value from 0,1,,, through to f.

I just used a color mixer app at:
https://www.rapidtables.com/web/color/RGB_Color.html

I dragged to a color selection I wanted.

The output for a 24bit color was #F6D1D5
I just converted this to FDD or FB8, which is what I used in the code above.

You can then turn this into a full clock.
Start with the code for Anton Clock.
Change the font and replace the draw() function and you are pretty much there.

The difficult part is finding nice colors and fonts that look really good.

I hope that gets you started. Dive in and have a go, plenty of help available on this forum if you get stuck.

nm

nm

Nm

nm

Nm