Bangle.js Clock Face Fonts

You should have already been through the Bangle.js Clock tutorial to get an idea how to get started.

In that tutorial we used the 7x11Numeric7Seg font to create a 7 segment font.

But what if you wanted a more interesting font style? In this tutorial we'll show you how to quickly create your own custom font and add it to an app.

Note: The basic code in this tutorial is slightly different to the video above. It is more efficient (checking and updating the time only every minute).

Simple Clock

First, lets start with this as a base, displaying a simple clock with built-in fonts:

// timeout used to update every minute
var drawTimeout;

// schedule a draw for the next minute
function queueDraw() {
  if (drawTimeout) clearTimeout(drawTimeout);
  drawTimeout = setTimeout(function() {
    drawTimeout = undefined;
    draw();
  }, 60000 - (Date.now() % 60000));
}

function draw() {
  var x = g.getWidth()/2;
  var y = g.getHeight()/2;
  g.reset();
  // work out locale-friendly date/time
  var date = new Date();
  var timeStr = require("locale").time(date,1);
  var dateStr = require("locale").date(date);
  // draw time
  g.setFontAlign(0,0).setFont("Vector",48);
  g.clearRect(0,y-15,g.getWidth(),y+25); // clear the background
  g.drawString(timeStr,x,y);
  // draw date
  y += 35;
  g.setFontAlign(0,0).setFont("6x8");
  g.clearRect(0,y-4,g.getWidth(),y+4); // clear the background
  g.drawString(dateStr,x,y);
  // queue draw in one minute
  queueDraw();
}

// Clear the screen once, at startup
g.clear();
// draw immediately at first, queue update
draw();
// Stop updates when LCD is off, restart when on
Bangle.on('lcdPower',on=>{
  if (on) {
    draw(); // draw immediately, queue redraw
  } else { // stop draw timer
    if (drawTimeout) clearTimeout(drawTimeout);
    drawTimeout = undefined;
  }
});
// Show launcher when middle button pressed
Bangle.setUI("clock");
// Load widgets
Bangle.loadWidgets();
Bangle.drawWidgets();

Creating the font

We'll use the Font Converter page to convert our fonts. This is set up to convert 'Web Fonts'.

Luckily there are many easy ways to find web fonts. We'll use https://fonts.google.com/

So...

  • Go to https://fonts.google.com/
  • At the top, under Sentence, enter 123456789:. This'll give you an idea what the time might look like in that font.
  • Now scroll down and find a font you like. We'll use Audiowide
  • Click on the font, and then click + Select this style
  • You should see a pane on the right-hand side with some code in. If you don't, click the button in the top right labelled Show your selected families
  • Now copy the line starting <link ... to the clipboard

In our case it looks like this:

<link href="https://fonts.googleapis.com/css2?family=Audiowide&display=swap" rel="stylesheet">

Note: Ensure you don't select more than one family, or the link will contain two fonts and the font converter will only use the first.

  • Go to the Font Converter Page
  • Click on the text-box that shows <link, select all, and paste your new link in
  • Pull the Size slider up to 48
  • From the Range drop-down, choose Numeric
  • Click the Go! button

Now, you'll see a This is a test of the font line of text, a text box full of code, and a preview window at the bottom showing what the rendered font looks like.

At the top of the code pane, the actual font height is displayed. Often fonts won't be as high as is requested, as some characters like g have to drop below others. You may want to adjust the size so that the final font height is what you actually want.

Note: For such a large font, we choose Numeric only from the range because we don't want to waste memory storing characters we may not need.

Using the font

All you need to do is to create a function called Graphics.prototype.setFontYOURFONTNAME which contains the code from the font converter, then you just use g.setFont("YOURFONTNAME").

Below, I've added setFontAudiowide already...

  • Open the Web IDE at https://www.espruino.com/ide/ and connect to your Bangle
  • Ensure the Upload button (in the middle of the screen) is set to RAM ()
  • Copy the following into the editor on the right-hand side:
Graphics.prototype.setFontAudiowide = function() {
  // Actual height 33 (36 - 4)
  var widths = atob("CiAsESQjJSQkHyQkDA==");
  var font = atob("AAAAAAAAAAAAAAAAAAAAAPAAAAAAAfgAAAAAAfgAAAAAAfgAAAAAAfgAAAAAAPAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAAADgAAAAAAHgAAAAAAfgAAAAAA/gAAAAAD/gAAAAAH/gAAAAAf/AAAAAB/8AAAAAD/4AAAAAP/gAAAAAf/AAAAAB/8AAAAAD/4AAAAAP/gAAAAAf+AAAAAB/8AAAAAH/wAAAAAP/gAAAAA/+AAAAAB/8AAAAAD/wAAAAAD/gAAAAAD+AAAAAAD4AAAAAADwAAAAAADAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AAAAAA//+AAAAB///AAAAH///wAAAP///4AAAf///8AAA////+AAA/4AP+AAB/gAD/AAB/AA9/AAD+AB+/gAD+AD+/gAD+AD+/gAD8AH+fgAD8AP8fgAD8AP4fgAD8Af4fgAD8A/wfgAD8A/gfgAD8B/gfgAD8D/AfgAD8D+AfgAD8H+AfgAD8P8AfgAD8P4AfgAD8f4AfgAD8/wAfgAD8/gAfgAD+/gA/gAD+/AA/gAB/eAB/AAB/sAD/AAB/wAH/AAA////+AAAf///8AAAP///4AAAH///wAAAD///gAAAA//+AAAAAP/4AAAAAAAAAAAAAAAAAAAAAAAAAAAD8AAAAAAD8AAAAAAD8AAAAAAD8AAAAAAD8AAAAAAD8AAAAAAD/////gAD/////gAD/////gAD/////gAD/////gAD/////gAD/////gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//gAAAAH//gAAAAP//gAD8Af//gAD8A///gAD8B///gAD8B///gAD8B/AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD+D+AfgAD//+AfgAD//+AfgAB//8AfgAA//4AfgAAf/wAfgAAP/gAfgAAB8AAfgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD+B+A/gAD/////gAB/////AAB/////AAA////+AAAf///8AAAP///4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD//4AAAAD//8AAAAD//+AAAAD//+AAAAD//+AAAAD//+AAAAD//+AAAAAAB+AAAAAAB+AAAAAAB+AAAAAAB+AAAAAAB+AAAAAAB+AAAAAAB+AAAAAAB+AAAAAAB+AAAAAAB+AAAAAAB+AAAAAAB+AAAAAAB+AAAAAAB+AAAAAAB+AAAAAAB+AAAAAAB+AAAAAAB+AAAAD/////gAD/////gAD/////gAD/////gAD/////gAD/////gAD/////gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD//AAfgAD//wAfgAD//4AfgAD//8AfgAD//8AfgAD//+AfgAD8D+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B/A/gAD8B///gAD8B///gAD8A///AAD8A///AAAAAf/+AAAAAP/4AAAAAD/gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB///AAAAH///wAAAf///8AAAf///8AAA////+AAB/////AAB/h+H/AAD/B+B/gAD+B+A/gAD+B+A/gAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B/A/gAD8B///gAD8B///gAD8A///AAAAAf//AAAAAf/+AAAAAH/4AAAAAB/gAAAAAAAAAAAAAAAAAAAAAAAAAAD8AAAAAAD8AAAAAAD8AAAAAAD8AAAAAAD8AAAAgAD8AAABgAD8AAAHgAD8AAAfgAD8AAA/gAD8AAD/gAD8AAP/gAD8AA//gAD8AB//AAD8AH/8AAD8Af/wAAD8A//AAAD8D/+AAAD8P/4AAAD8f/gAAAD9//AAAAD//8AAAAD//wAAAAD//gAAAAD/+AAAAAD/4AAAAAD/wAAAAAD/AAAAAAD8AAAAAAA4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/gAAAAAH/4AAAAAP/8AAAH+f/+AAAf////AAA/////gAB/////gAB///A/gAD//+AfgAD//+AfgAD+D+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD+D+AfgAD//+AfgAD//+AfgAB///A/gAB/////gAA/////AAAP////AAAD+f/+AAAAAP/8AAAAAH/4AAAAAA+AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAH/AAAAAAf/wAAAAA//4AAAAB//8AAAAB//8AfgAD//+AfgAD/D+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD+B+A/gAD+B+A/gAD/B+B/gAB/////AAB/////AAA////+AAAf///8AAAP///4AAAH///wAAAB///AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAeAAPAAAA/AAfgAAA/AAfgAAA/AAfgAAA/AAfgAAAeAAPAAAAAAAAAAAAAAAAAAAAAAAAAA");
  var scale = 1; // size multiplier for this font
  g.setFontCustom(font, 46, widths, 48+(scale<<8)+(1<<16));
};

// timeout used to update every minute
var drawTimeout;

// schedule a draw for the next minute
function queueDraw() {
  if (drawTimeout) clearTimeout(drawTimeout);
  drawTimeout = setTimeout(function() {
    drawTimeout = undefined;
    draw();
  }, 60000 - (Date.now() % 60000));
}


function draw() {
  var x = g.getWidth()/2;
  var y = g.getHeight()/2;
  g.reset();  
  // work out locale-friendly date/time
  var date = new Date();
  var timeStr = require("locale").time(date,1);
  var dateStr = require("locale").date(date);
  // draw time
  g.setFontAlign(0,0).setFont("Audiowide");
  g.clearRect(0,y-30,g.getWidth(),y+30); // clear the background
  g.drawString(timeStr,x,y);
  // draw date
  y += 35;
  g.setFontAlign(0,0).setFont("6x8");
  g.clearRect(0,y-4,g.getWidth(),y+4); // clear the background
  g.drawString(dateStr,x,y);
  // queue draw in one minute
  queueDraw();
}

// Clear the screen once, at startup
g.clear();
// draw immediately at first, queue update
draw();
// Stop updates when LCD is off, restart when on
Bangle.on('lcdPower',on=>{
  if (on) {
    draw(); // draw immediately, queue redraw
  } else { // stop draw timer
    if (drawTimeout) clearTimeout(drawTimeout);
    drawTimeout = undefined;
  }
});
// Show launcher when middle button pressed
Bangle.setUI("clock");
// Load widgets
Bangle.loadWidgets();
Bangle.drawWidgets();

Two fonts

You probably noticed in the image above that the font for the date is still the standard Bangle.js font - but never fear, you can change that too.

  • Go back to the font converter site, with the same font as before
  • Pull the size slider back to 16
  • Choose ASCII from the Range drop-down.
  • Click Go!
  • Now, copy the code created and paste it into a function called setFontAudiowideSmall, and now use font AudiowideSmall this instead of setFont("6x8"):
Graphics.prototype.setFontAudiowide = function() {
  // Actual height 33 (36 - 4)
  var widths = atob("CiAsESQjJSQkHyQkDA==");
  var font = atob("AAAAAAAAAAAAAAAAAAAAAPAAAAAAAfgAAAAAAfgAAAAAAfgAAAAAAfgAAAAAAPAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAAADgAAAAAAHgAAAAAAfgAAAAAA/gAAAAAD/gAAAAAH/gAAAAAf/AAAAAB/8AAAAAD/4AAAAAP/gAAAAAf/AAAAAB/8AAAAAD/4AAAAAP/gAAAAAf+AAAAAB/8AAAAAH/wAAAAAP/gAAAAA/+AAAAAB/8AAAAAD/wAAAAAD/gAAAAAD+AAAAAAD4AAAAAADwAAAAAADAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AAAAAA//+AAAAB///AAAAH///wAAAP///4AAAf///8AAA////+AAA/4AP+AAB/gAD/AAB/AA9/AAD+AB+/gAD+AD+/gAD+AD+/gAD8AH+fgAD8AP8fgAD8AP4fgAD8Af4fgAD8A/wfgAD8A/gfgAD8B/gfgAD8D/AfgAD8D+AfgAD8H+AfgAD8P8AfgAD8P4AfgAD8f4AfgAD8/wAfgAD8/gAfgAD+/gA/gAD+/AA/gAB/eAB/AAB/sAD/AAB/wAH/AAA////+AAAf///8AAAP///4AAAH///wAAAD///gAAAA//+AAAAAP/4AAAAAAAAAAAAAAAAAAAAAAAAAAAD8AAAAAAD8AAAAAAD8AAAAAAD8AAAAAAD8AAAAAAD8AAAAAAD/////gAD/////gAD/////gAD/////gAD/////gAD/////gAD/////gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//gAAAAH//gAAAAP//gAD8Af//gAD8A///gAD8B///gAD8B///gAD8B/AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD+D+AfgAD//+AfgAD//+AfgAB//8AfgAA//4AfgAAf/wAfgAAP/gAfgAAB8AAfgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD+B+A/gAD/////gAB/////AAB/////AAA////+AAAf///8AAAP///4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD//4AAAAD//8AAAAD//+AAAAD//+AAAAD//+AAAAD//+AAAAD//+AAAAAAB+AAAAAAB+AAAAAAB+AAAAAAB+AAAAAAB+AAAAAAB+AAAAAAB+AAAAAAB+AAAAAAB+AAAAAAB+AAAAAAB+AAAAAAB+AAAAAAB+AAAAAAB+AAAAAAB+AAAAAAB+AAAAAAB+AAAAAAB+AAAAD/////gAD/////gAD/////gAD/////gAD/////gAD/////gAD/////gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD//AAfgAD//wAfgAD//4AfgAD//8AfgAD//8AfgAD//+AfgAD8D+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B/A/gAD8B///gAD8B///gAD8A///AAD8A///AAAAAf/+AAAAAP/4AAAAAD/gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB///AAAAH///wAAAf///8AAAf///8AAA////+AAB/////AAB/h+H/AAD/B+B/gAD+B+A/gAD+B+A/gAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B/A/gAD8B///gAD8B///gAD8A///AAAAAf//AAAAAf/+AAAAAH/4AAAAAB/gAAAAAAAAAAAAAAAAAAAAAAAAAAD8AAAAAAD8AAAAAAD8AAAAAAD8AAAAAAD8AAAAgAD8AAABgAD8AAAHgAD8AAAfgAD8AAA/gAD8AAD/gAD8AAP/gAD8AA//gAD8AB//AAD8AH/8AAD8Af/wAAD8A//AAAD8D/+AAAD8P/4AAAD8f/gAAAD9//AAAAD//8AAAAD//wAAAAD//gAAAAD/+AAAAAD/4AAAAAD/wAAAAAD/AAAAAAD8AAAAAAA4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/gAAAAAH/4AAAAAP/8AAAH+f/+AAAf////AAA/////gAB/////gAB///A/gAD//+AfgAD//+AfgAD+D+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD+D+AfgAD//+AfgAD//+AfgAB///A/gAB/////gAA/////AAAP////AAAD+f/+AAAAAP/8AAAAAH/4AAAAAA+AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAH/AAAAAAf/wAAAAA//4AAAAB//8AAAAB//8AfgAD//+AfgAD/D+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD+B+A/gAD+B+A/gAD/B+B/gAB/////AAB/////AAA////+AAAf///8AAAP///4AAAH///wAAAB///AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAeAAPAAAA/AAfgAAA/AAfgAAA/AAfgAAA/AAfgAAAeAAPAAAAAAAAAAAAAAAAAAAAAAAAAA");
  var scale = 1; // size multiplier for this font
  g.setFontCustom(font, 46, widths, 48+(scale<<8)+(1<<16));
};
Graphics.prototype.setFontAudiowideSmall = function() {
// Actual height 16 (15 - 0)
var widths = atob("BQQGDAkOCwMHBwkJBAkDCw8GDAwMDAwKDAwEBAgJCAsLDQ0MDQwMDQ4EDA0MDw4ODQ4NDAwNDBANDQsGCwYHCwkKCwoLCgkLCwQECwUOCwsLCwkKCQsLDwsLCgcEBwoI");
var font = atob("AAAAAAAAAAAAAAAA/7D/sAAAeAB4AAAAeAB4AAAAAAABgBnwH/D/wPmAGfAf8P+A+YAZAAAAHgA+wD7A9vD28DfAN4ACAAAAAAA8AH4AZhB+cD3wA8APAD3gc/BDMAOwAfAAwACAP+B/8GYwZjBmMGAwYPAB4AGAAAAAAHgAeAAAAD/A//Dw+MA8AAwABAAEAAzAHPD8//A/wAAAAABuAHwA/wD/AHwAbgAAAAAABgAGAAYAP8A/wAYABgAGAAAAAAQAPAA4AAAAAAYABgAGAAYABgAGAAYAAAAAAAAwADAAAAAQAHAB8APADwA+APgA4ADAAAAAAAA/wH/g8PDh8MOwxzDPMM4w3DD4cPjwf+A/wAAAwADAAP/w//AAAAAAAAAD8MfwxjDGMMYwxjDGMOYw/jB8MAAAAADGMMYwxjDGMMYwxjDmMP/wf+AAAAAAAAD+AP4ABgAGAAYABgAGAAYA//D/8AAAAAD8MP4wxjDGMMYwxjDGMMYwx/DD4ACAAAA/wH/g5nDGMMYwxjDGMMYwx/AD4AAAwADAEMBwwfDD4M+A/gD4AOAAQAAAAAPgf/D/cMYwxjDGMMYw/3B/8APgAAA4AH4A/jDGMMYwxjDGMMYw5nB/4D/AAAAAABgwGDAAAAAIGHgYcAAABgAPAB8AO4BxwGDAQEAAAAAAGYAZgBmAGYAZgBmAGYAAAAAAQEBgwHHAO4AfAA4ABADAAMAAwADHsMewxgDGAP4A/gA4AAAAA4Af8BnwH/AfwB/AH8AfwB/AB4AAAAAAH/B/8HGA4YDhgMGAwYDBgMGA//D/8AAAAAD/8P/wwDDGMMYwxjDGMM4w/zB/8APgAAAAAH/g//DAMMAwwDDAMMAwwDDAMMAwAAAAAP/w//DAMMAwwDDAMMAw4HDw8H/gP8AAAAAA/+D/8MZwxjDGMMYwxjDGMMYwwDAAAAAA//D/8MAAxgDGAMYAxgDGAMYAwAAAAAAAf+D/8MAwxjDGMMYwxjDGMMYwx/DH8AAAAAD/8P/wBgAGAAYABgAGAAYABgD/8P/wAAAAAAAA//D/8AAAADAAMAAwADAAMAAwADAAcP/w/+AAAAAAAAD/8P/wAAAGAA8AH4A/wHng8PDgcMAQAAAAAP/w//AAMAAwADAAMAAwADAAMAAwAAAAAP/w//B8AB8AB8AB8ADwAfAHwB8AfAD/8P/wAAAAAP/w//BwADgAHgAPAAeAA8AB4P/w//AAAAAAAAA/wH/g8PDgcMAwwDDAMMAw4HDgcH/gP8AAAAAAf/D/8OAAwYDBgMGAwYDBgOOA/4B/AAAAAAA/wH/g4HDgcMAwwDDAMMA44Hzw/H/kP8AAAAAA//D/8MAAwwDDgMPAw8DD4Mdw/zB+EAAAAAB8MP4w5jDGMMYwxjDGMMYwx3DH8APgwADAAMAAwADAAP/w//DAAMAAwADAAMAAAAD/gP/gAOAAcABwADAAMAAwADD/8P/wAACAAOAA+AA/AA/AA/AA8APgD4B+APgA4ACAAP4A//AP8AHwB8AfADwAPAAfAAfAA+AP8P/w/gCAAIAQ4HDw8HngP8APAB+AP8B54OBwwDCAEAAAAAD+AP8ABwADAAPwA/AD8AMABwD/AP4AAAAAAMBwwPDB8MPwx7DeMPww+DDwMOAwAAD//P/8gBwADAAMgADAAPAAfAAeAAeAA+AA8AAwABAAAAAAAAwADP/8//wAADwAcADgAOAAeAA8AAAAAAAABgAGAAYABgAGAAYABgAGAAYAAAAAgACAAMAAwADAAAAAAAAAAAHgA/AbMBswGzAbMBswH/AP4AAAAAD/4P/wAHAYMBgwGDAYMB/wD+ADgAAAD+Af8BgwGDAYMBgwGDAYMAAAAAAP4B/wHHAYMBgwGDAYMP/w/+AAAAAAD+Af8BgwGbAZsBmwGbAfgA8AAAD/8P/wwACYAJgAmACYAJgAAAAP4B/wGDMYMxgzGDMcNx//D/4AAAAA//D/8AAAGAAYABgAGAAf8A/wB/AAAJ/wn/AAAAAHn/+f/gAAAAD/8P/wAwAHgAfAD+Ac8BhwEDAQEAAA/+D/8ABwADAP8B/wH/AYABgAGAAf8B/wHAAYABwAH/AP8AAAD/Af8B/wGAAYABgAGAAcAB/wD/AAAAAAD+Af8BgwGDAYMBgwHHAf8A/gAAAAAA/+H/4cABgwGDAYMBgwH/AP4AOAAAAP4B/wGDAYMBgwGDAcMB/+D/4AAAAAD/Af8BwAGAAYABgAGAAYAAAADzAfMBswGzAbMBswG/AZ4ADAGAAYABgA//D/8BgAGAAYABgAAAAf4B/wAHAAMAAwADAAMB/wH/AAAAAAH/Af8ABwAHAA4AHgA8AfgB4AGAAAAB/wH/AB4APAB4AP4B/wH/AA4AHgB4AfABwAEAAQEBgwHHAf4A/AB4AP4B7wGHAQMAAQAAAf4B/wAHAAMwAzADMAMx//H/4f+BggGHAY8BnwG/AfsB8wHDAYMAAABgAHAP/4//yAHAAMAAAAAP/8//wAAAAAAAyAHP/8//gHAAYAAAAHAAYABgAHAAcAAwADAAcABgAAADAAMAAAACAAMAAAAAAA");
var scale = 1; // size multiplier for this font
g.setFontCustom(font, 32, widths, 16+(scale<<8)+(1<<16));
}

// timeout used to update every minute
var drawTimeout;

// schedule a draw for the next minute
function queueDraw() {
  if (drawTimeout) clearTimeout(drawTimeout);
  drawTimeout = setTimeout(function() {
    drawTimeout = undefined;
    draw();
  }, 60000 - (Date.now() % 60000));
}

function draw() {
  var x = g.getWidth()/2;
  var y = g.getHeight()/2;
  g.reset();  
  // work out locale-friendly date/time
  var date = new Date();
  var timeStr = require("locale").time(date,1);
  var dateStr = require("locale").date(date);
  // draw time
  g.setFontAlign(0,0).setFont("Audiowide");
  g.clearRect(0,y-30,g.getWidth(),y+30); // clear the background
  g.drawString(timeStr,x,y);
  // draw date
  y += 35;
  g.setFontAlign(0,0).setFont("AudiowideSmall");
  g.clearRect(0,y-9,g.getWidth(),y+9); // clear the background
  g.drawString(dateStr,x,y);
  // queue draw in one minute
  queueDraw();
}

// Clear the screen once, at startup
g.clear();
// draw immediately at first, queue update
draw();
// Stop updates when LCD is off, restart when on
Bangle.on('lcdPower',on=>{
  if (on) {
    draw(); // draw immediately, queue redraw
  } else { // stop draw timer
    if (drawTimeout) clearTimeout(drawTimeout);
    drawTimeout = undefined;
  }
});
// Show launcher when middle button pressed
Bangle.setUI("clock");
// Load widgets
Bangle.loadWidgets();
Bangle.drawWidgets();

Next Steps

To get this app permanently on your watch, check out the rest of the Bangle.js Clock tutorial.

This page is auto-generated from GitHub. If you see any mistakes or have suggestions, please let us know.