Watchface Ideas #5886

espruino-discuss2 · 2025-02-12T15:20:59Z

espruino-discuss2
Feb 12, 2025
Maintainer

Posted at 2021-12-13 by fanoushs-punching-bag

Nm

espruino-discuss2 · 2025-02-12T15:21:02Z

espruino-discuss2
Feb 12, 2025
Maintainer Author

Posted at 2021-12-14 by fanoushs-punching-bag

Nm

Posted at 2021-12-14 by @gfwilliams

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

Posted at 2021-12-14 by Mi

Yes the Nike is really nice.
I also like this that you (@gfwilliams) 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?

Posted at 2021-12-14 by HughB

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

Posted at 2021-12-15 by @gfwilliams

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!

Posted at 2021-12-15 by fanoushs-punching-bag

nm

Posted at 2021-12-15 by fanoushs-punching-bag

Nm

Posted at 2021-12-15 by fanoushs-punching-bag

Nm

Posted at 2021-12-15 by fanoushs-punching-bag

Nm

Posted at 2021-12-16 by @gfwilliams

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!

Posted at 2021-12-16 by fanoushs-punching-bag

nm

Posted at 2021-12-16 by fanoushs-punching-bag

nm

Posted at 2021-12-16 by fanoushs-punching-bag

Nm

Posted at 2021-12-16 by HughB

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.

Posted at 2021-12-22 by fanoushs-punching-bag

Nm

Posted at 2021-12-22 by HughB

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:

Attachments:

download (1).png

Posted at 2021-12-22 by fanoushs-punching-bag

Nm

Posted at 2021-12-22 by HughB

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:

Attachments:

download (2).png

Posted at 2021-12-22 by HughB

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.

Posted at 2021-12-23 by fanoushs-punching-bag

nm

Posted at 2021-12-23 by fanoushs-punching-bag

nm

Posted at 2021-12-23 by fanoushs-punching-bag

Nm

Posted at 2021-12-28 by fanoushs-punching-bag

nm

Posted at 2021-12-28 by fanoushs-punching-bag

Nm

Posted at 2021-12-29 by fanoushs-punching-bag

Nm

Posted at 2021-12-29 by fanoushs-punching-bag

nm

Posted at 2021-12-29 by HughB

Might be good if you could share screenshots. The one I liked is:

Attachments:

google_watch.png

Posted at 2021-12-30 by fanoushs-punching-bag

nm

Posted at 2021-12-30 by fanoushs-punching-bag

nm

Posted at 2022-01-05 by @gfwilliams

I love the one above - if anyone needs a hand to implement it let me know! I think it should be reasonably easy with an offscreen Graphics buffer and transparency.

Posted at 2022-01-05 by HughB

@andiohn - I'd have a go at that (10:09) if you can find the right fonts on fonts.google.com or 1001 fonts.

Posted at 2022-01-05 by fanoushs-punching-bag

Nm

Posted at 2022-01-05 by HughB

I think maybe Lato for the steps etc. Probably 2 different sizes.
Can you post the link for the Inter Black 900 - I could not find it.

Posted at 2022-01-05 by fanoushs-punching-bag

Nm

Posted at 2022-01-14 by fanoushs-punching-bag

nm

Posted at 2022-01-18 by myxor

This is the watchface from the Garmin fenix 7 watch.
I will try to build something similar to this in the future.

I once started working on this - it's far from looking good or being complete but i don't have the time to continue this. Maybe someone is motivated to make a watch out of this.

Attachments:

Posted at 2022-01-18 by fanoushs-punching-bag

nm

Posted at 2022-01-19 by fanoushs-punching-bag

Nm

Posted at 2022-01-20 by Mark_M

My Nerdic binary watch.
Currently it is experimental on Bangle2, that is why this is B/W.
For Bangle1 it will simulate red, green or blue LEDs.
Or may be red for hours, green for minutes and blue for seconds.
Or it will be too colorful? What do you think?

Attachments:

screenshot.png

Posted at 2022-01-20 by Serj

@Mark_M Hi! How about adding a setting to switch between a color version and a black and white version? I would choose black and white ver.

Posted at 2022-01-20 by Mark_M

Hi Serj, sure, it should not be a problem. I'll need to add app settings.

Posted at 2022-01-20 by Serj

Rosewright A Watchface from Pebble

Attachments:

Posted at 2022-01-20 by fanoushs-punching-bag

Nm

Posted at 2022-01-20 by HughB

The B2 screen has limitations in terms of how crisp images can be made, so many of these watch faces will look pretty dissappointing when attempted. The B2 has a 178x178 display where as most of these watches will be 380x380 or 400x400. The Amazfit GTS2 is 348x442.

Posted at 2022-01-20 by HughB

Like it ! Could you have an option to put the time at the bottom, for when you can't be bothered to work it out :)

Posted at 2022-01-20 by HughB

this looks like a photoshop job, it almost feels like you could peel the sticker off the front of the watch :)

Posted at 2022-01-20 by fanoushs-punching-bag

nm

Posted at 2022-01-20 by Mark_M

LOL yes, exactly, I've added that "normal time" to top, but removed for this screenshot :)

I am thinking about couple of options for the normal time hint:
a - configurable to always show on screen
b - show on some activity like swipe or tap or shake
c - show if one holds watch in "looking" position for too long, like 3-5 sec.

what do you think?

(I do not have experience with the events above, so it will be a learning curve for me)

Posted at 2022-01-21 by Serj

Here more realistic version :)

Attachments:

Posted at 2022-01-21 by HughB

Close to LARS clock

Posted at 2022-01-21 by fanoushs-punching-bag

Pretty cool!

Posted at 2022-01-26 by Mark_M

I've uploaded Nerdic binary watch to my github App Loader https://markmal.github.io/BangleApps/#nerdic
You can try it from there.
I need to find out how to merge it to main App Loader.

Note1: double-tap to see decimal time hint
Note2: "Try in emulator" works for the main app. But unfortunately it does not load settings.

Posted at 2022-01-26 by fanoushs-punching-bag

nm

Posted at 2022-01-26 by Mark_M

what is your watch? I have B2. Hint is fine there. No garbage.
I'll try to simulate in B1 emulator.
All sizes currently are adjusting to display resolution automatically.
I'll think on the locked update frequency. But even without this optimization my watch runs for days.

Posted at 2022-01-26 by fanoushs-punching-bag

nm

Posted at 2022-01-26 by Mark_M

Hi andiohn,
I have top and bottom widgets. (Bottom one draws garbage in main menu. But this is issue with menu).
The application draws up and down from center. So it is kind of widget agnostic.
I'll make it bigger right to the side edges.
ALso I'll make "hide seconds" feature.

Posted at 2022-01-26 by fanoushs-punching-bag

Nm

Posted at 2022-01-26 by HughB

I saw the time at the bottom get half cut off at one point. Can't reproduce now, otherwise would send a screenshot.

Posted at 2022-01-26 by fanoushs-punching-bag

Ya, that's what I'm getting too.

Posted at 2022-01-26 by Mark_M

I cannot reproduce it.
hmm .... may be it is after installation, when there is no settings file yet. I'll check.

Posted at 2022-01-26 by Serj

Pretty smart!
source: https://github.com/VFLashM/TetrisTime

Attachments:

tetristime.gif

Posted at 2022-01-26 by fanoushs-punching-bag

Nm

Posted at 2022-01-26 by fanoushs-punching-bag

nm

Posted at 2022-01-26 by Serj

Cool! There are a lot of interesting watchfaces on Pebble!

Posted at 2022-01-26 by HughB

here you go. Left it running for 30 minues.
Also does not look like it has an icon for the launcher.

Attachments:

Posted at 2022-01-26 by fanoushs-punching-bag

nm

Posted at 2022-01-26 by myownself

Wow, that one is impressive!

Posted at 2022-01-26 by Mark_M

I see. it is weird issue. Need to take a look ...
Same weird is with the icon. Should icon data be 46 x 46?

Posted at 2022-01-26 by HughB

Should icon data be 46 x 46?

48x48

Posted at 2022-01-26 by Mark_M

oh, I see ...

Posted at 2022-01-27 by Mark_M

I've modified the app:

seconds can be set to show: 0-never, 1-when unlocked, 2-always (default)
app icon shows up in menu (it was 1-bit B/W, had to make it RGB)
decimal time hint set to be black digits on white background. This can overlap with bottom widgets. Sometimes widgets may draw on top of the hint. I take it as ok-ish, because next second the hint will be repainted by the app again. But if you know how to stop bottom widgets to draw please let me know.
Also they draw in main menu mode, and leave artefacts when menu is scrolled.

https://markmal.github.io/BangleApps/#nerdic

I cannot reproduce the issue with hint artefact. This is the code. Vars T SW,SH
There are couple of global vars (defined as `var T=0;' for example) have simple names like T, W etc. Can it be that same vars are used by widgets or menu, or any other program? Should I make sure my global variable names are unique in entire environment?

Posted at 2022-01-28 by fanoushs-punching-bag

nm

Posted at 2022-01-29 by Mark_M

issue confirmed
Yes the hint box is white, font is black. I cannot reproduce issue with covering seconds row. What version of firmware do you have? Mine is 2.11.
issue confirmed

Posted at 2022-01-31 by fanoushs-punching-bag

nm

Posted at 2022-02-02 by fanoushs-punching-bag

nm

Posted at 2022-02-02 by Serj

Nice!

Posted at 2022-02-03 by myxor

Just notices that some fonts of your list are licensed with "free for personal but not commercial use". I don't know if including them into BangleApps would violate the license because @gfwilliams makes money with Bangle.js watches.

Posted at 2022-02-03 by @gfwilliams

I guess we're ok? We're not selling the watchfaces, and I'm not selling watches with them preinstalled.

However we might have to be careful with the licensing as the BangleApps repo is MIT. It might be we just have to ask them

Posted at 2022-02-03 by fanoushs-punching-bag

nm

Posted at 2022-02-03 by fanoushs-punching-bag

nm

Posted at 2022-02-03 by HughB

What do reckon ?
To install on your watch.
Install the Simplest clock from the app loader.
Download the file called simplest.app.naboo.js as simplest.app.js
Upload the file through the IDE to the storage as simplest.app.js
Go to your launcher and launch simplest clock.

I think the orange one looks closer to your screenshot.
To get the orange colour, use this line when setting the theme.

g.setTheme({bg:"#000",fg:"#f80",dark:true}).clear();

Attachments:

Posted at 2022-02-04 by fanoushs-punching-bag

nm

Posted at 2022-02-04 by fanoushs-punching-bag

nm

Posted at 2022-02-05 by Alessandro

The orange one is really cool!

Posted at 2022-02-14 by InnerCode

Hi,
Received my Bangle Saturday. I always wanted a CLI face which emulates user input. So I build it myself. Demo: https://www.youtube.com/watch?v=jFXrw5UN66M

Posted at 2022-02-17 by fanoushs-punching-bag

nm

Posted at 2022-06-21 by fanoushs-punching-bag

Nm

Posted at 2022-06-21 by fanoushs-punching-bag

Nm

Posted at 2022-06-21 by fanoushs-punching-bag

Nm

Posted at 2022-07-27 by Jferrari6803

I have an idea for a watch face, but I can't figure out the code. I know almost no JavaScript. Here's what I want to do.

I have a splash screen with a custom message on it.
On button press I'd like to show the clock ( any watch face, I'm not picky) for 10 seconds.
Then revert back to the splash screen.

Something like:
Run function 1
On button press Run function 2
After 10, seconds break and return to function 1

Any suggestions?

Posted at 2022-07-27 by @fanoush

Any suggestions?

This functionality looks almost like what the lock widget does however now it only shows lock in the corner. When changing lock widget to show splash screen instead of small lock it would do what you want. By pressing button watch is unlocked and watchface is shown.

Not sure how practical this is, at least for me it is good when watch shows the time :-)

Posted at 2022-07-27 by @gfwilliams

Sounds like a neat idea... Not for everyone but I can see the attraction

A widget that covers the screen would be a good idea but may end up being a bit hard to implement right now (since you want to keep track of what's going on 'under' it when the screen is locked).

Assuming you have some code like you'd get at the end of https://www.espruino.com/Bangle.js+Clock+Font then what you want to do is:

when locked, clear the drawTimeout timeout and draw your splash screen
when unlocked, call draw again

So you just copy the final code from that tutorial, then add this code right to the end:

// delete the call to 'draw()' in the previous code

function drawSplash() {
  var R = Bangle.appRect;
  g.reset().clearRect(R);
  g.setFont("Vector:40").setFontAlign(0,0).drawString("Boo!", R.x + R.w/2, R.y + R.h/2);
  // or draw an image?
}

Bangle.on('lock', locked => {
  if (locked) {
    if (drawTimeout) clearTimeout(drawTimeout);
    drawTimeout = undefined;
    drawSplash();
  } else { // unlocked
    draw();
  }
});
// draw the correct start screen
if (Bangle.isLocked()) {
  if (drawTimeout) clearTimeout(drawTimeout);
  drawTimeout = undefined;
  drawSplash();
} else draw();

In a way, for the splash screen I'd suggest it's better to make a 176x152 image and then use https://www.espruino.com/Image+Converter to convert it to the watch (then g.drawImage(img,R.x,R.y) instead of drawString("Boo!"....

Posted at 2022-07-27 by Hank

Something i always missed with my pebble was a privacy mode. Even when DND was active, the messages were shown. I like the idea of a widget blanking everything out while the watch is locked. In the settings menu it could even provide a function to quickly turn this function on and off.
BTW: another neat feature would be to have an option to turn widgets on and off in general in the settings menu without the need of uninstalling them.

Posted at 2022-07-27 by @gfwilliams

another neat feature would be to have an option to turn widgets on and off in general in the settings menu without the need of uninstalling them.

I know, but at some point we've got to say that this is quite a constrained device. And honestly it only takes a few seconds to uninstall/reinstall something if you don't like it - and the watch will be a lot faster if you uninstall the widgets you don't want rather than hiding them

Posted at 2022-07-27 by Jferrari6803

So... this is what I've got so far.
It just flashes back and forth between the "Zen" splash and the clock.
I think we're almost there.
Any Suggestions?

// This is my Zen Splash Screen
function zen(){
setInterval(function() {
g.clear(1);
  //Draw Text
g.setFont("Vector",45);
g.drawString("Now",42,70);
     }, 5000);
    }

// clock from your tutorial
function time(){
// Load fonts

// position on screen
const X = 170, Y = 110;

function draw() {
  // work out how to display the current time
  var d = new Date();
  var h = d.getHours(), m = d.getMinutes();
  var time = (" "+h).substr(-2) + ":" + ("0"+m).substr(-2);
  // Reset the state of the graphics library
  g.reset();
  // draw the current time
  g.setFont("Vector",55);
  g.setFontAlign(40,40); // align right bottom
  g.drawString(time, X, Y, true /*clear background*/);
  
  // draw the date, in a normal font
  g.setFont("Vector",20);
  g.setFontAlign(0,1); // align center bottom
  // pad the date - this clears the background if the date were to change length
  var dateStr = "    "+require("locale").date(d)+"    ";
  g.drawString(dateStr, g.getWidth()/2, Y+15, true /*clear background*/);
}

// Clear the screen once, at startup
g.clear();
// draw immediately at first
draw();
var secondInterval = setInterval(draw, 1000);
// Stop updates when LCD is off, restart when on
Bangle.on('lcdPower',on=>{
  if (secondInterval) clearInterval(secondInterval);
  secondInterval = undefined;
  if (on) {
    secondInterval = setInterval(draw, 1000);
    draw(); // draw immediately
  }
});
// Show launcher when middle button pressed
Bangle.setUI("clock");
// Load widgets
Bangle.loadWidgets();
Bangle.drawWidgets();

//revert to zen splashscreen
myTimeout = setTimeout (zen, 3000);
}
// run clock
time();

Posted at 2022-07-27 by Jferrari6803

sorry, I thought the code would display like yours.

The only thing I'm missing is the button event to run the time function. I just stuck time() at the end to see what would happen.

Posted at 2022-07-27 by @gfwilliams

I thought the code would display like yours.

All you need is three backticks before and after - or highlight it and click the </> code button in the editor. I just edited your post :)

I think your code might have some issues with the way you're calling Bangle.loadWidgets(); multiple times (it's likely to eat up all your memory). Using the code I'd suggested above (with drawSplash replaced with your code) would likely work better.

Another option is I just added some code to the firmware (in cutting edge builds) to handle overlays.

So as a result, if you've got the latest firmware and you copy the following code into lockscreen.boot.js, every time your bangle locks, it'll overwrite the whole screen with a sunset picture, regardless of which app you're in.

Bangle.setLockScreen = on => {
  if (on) Bangle.setLCDOverlay(require("heatshrink").decompress(atob("2Gw4f/hswln1qVo1Xqlv+2uw5v+9vhkmSpIC/AX4C/AX4C/AX4C/AXs7tu27dtxJB/IPeTHwQCD7BB/IPLCEAQrI2IP+Spw+HAQfEIP5BbkwEDkIaSzo+JAQXYIP5BXpgEDpBcWIP5BfyYKIhI+VzMkk4+KAQdsIP5B/II4rSoQ+TL5INEIP5BdYSlMBpjIJ2JB/IKUhHyWZCBo+JIP5BViQ+PkwQNyY+MIP5BVpAMLpjNOAYQ+NAQT0QIOitNkI4CyAJEmRcOoQGDHxlpLJJB/IJgCZIKDdLIP5B/klkAYXJHz4CBwgGEk5BKAQdspMyCwNtH0QCBkIGFIKIUCIP5B/INICBoQGEzpBM7AbEIP5BC24EBiQdEyZBcpBB/ILYKBsgqKmTLepxBL4hB/IJICB5InMzJEakM7IJOJCQpB/IIwCB2VJku2Fp1MIi0mIIvYB45B/IP5BKAQfJEhA1PiRNOFoWJBhBBUyB+VsgTQkJB/IP5BRAQXZHCYCNM5ICEpBB/IKDLMAUxB/IKXbthB/IP4CFDQe2IP5B+AQNJlpB/IP5EFDoLOEIP5B77MkyxB/IP5BEtg7bv/kIP5B/IMQCDILv8IP5BkASW3/dtIIuf/5B/IN+3/4IG/5BBBAfJIIX//xB/IJQdHAR+SIKf/9oUG//9AoN/BwJB/INO/F4YICGQRBD2Ebt4IBAApB/IP5BE7TaDDooCM/wCB2mSpJBQFgRBCtkAn5AH//2IJ/f3oFDnZBK9utIJPfGov8gEAIJF2IJ/d2oFDjZB/INf27drII23rZBKgEf//7tMkIJN/EYUvGhH/IAJB/IJt9UAP/HYZBG9+2CQJBJkwLB3YNBFIhBOgZBJcQRBDt5BGRwPWBYJBr1Nbt4HE7duFYKtCIItsEIV//VJIIUkzZJBII8kNQQAE/weCAAMPIK/tYoRBuYoYWDIIqzC7dbEAd+HwQCBXIIXCCIIgDBwJBHwBB/IJ1JII7BDA4bFB7//EAcBYou/IIjpDBwRB/ILHt35CEIOInBAAf7pMltu+QZDvB+wFC79/EIg+CAQMvC43//wODIAvgDwgABn6DGIIO2/bICPQIpDtpBD7fAEAkCQZQnB+hBDpZBSQYY4CIJACEoBBrQYhB+kmVHZQCE6AgFIIuSCglvIItJl4xC/BAGAAMfIP5Bm1oUF1JNEFgloIJECDQgUC3xB/yVWIKsAhJBU7RAIAAMBIJF/ZoPtFIjWC/pB0QZm0EBEEGoYXG6hBElYIBIP5BUTAJBMtAgJIJTFJEBZB/IP5BKyVWILlKCgdqHwhBE7QfJgQyEILUJGosrIJYsBwBBJQcBBppNbIJdt2hBStupII9AIBQABgpB/IP5BhgEEGQdKCgdqHwpBQgEWIP5BUtAeJIIgUD7Q+GAQOQIBpB/IJMk1pBKUxbCFIJUgIBxB/IJSqEAQvQD5ZBHAQXUIKkFDQRB/IItbEYanUCIREINAZfMIP5BLq3bqQ+GIKYCEypBGAoOgIP5BVARhBVAQzRBtDGOixB/IP5BVkmAILRfOAAdbIP5BeggaOyVIICBB/IKinMIJ5ARi3bIP5BRoAfMcDIAIQBxB/AQWQD5xB/IOYfPcZxB/IOkBEBtIISRB/IP5BSyBBdICQABIP5BtwBB/IMgeQghB/IP4ADiRB/IN4fSIJeSIP5B/yVIH6hB/IKACBoAdWC5xB/IP5BeAQOQDqGAHrJB/AA5BOyVICwoLEHb4AJgI+FGFJB/IP4A/AH4A/AH4A/ADA=")),0,0);
  else Bangle.setLCDOverlay();
};
Bangle.on('lock', locked => {
  Bangle.setLockScreen(locked);
});
Bangle.setLockScreen(Bangle.isLocked());

Posted at 2022-07-27 by Jferrari6803

Thanks for the advice on displaying code.

I like the lock screen idea, but I'm trying to go another route. I want to run the "zen", on button press or screen touch run "time" for 5 seconds, then return to "zen".

-Run Zen
-On Btn run Time
-10 sec
-Resume Zen

Can this be done?

Posted at 2022-07-28 by @gfwilliams

Yes, it can be done pretty easily.

But... can't you just set the 'lock timeout' to 10 seconds in the watch settings, and then the code above does exactly what you want?

I'm just thinking that if the watch was unlocked but it's still in zen mode, pressing the button would just go to the launcher. It all gets a bit more confusing

Posted at 2022-07-28 by Jferrari6803

Good point. That would work perfectly if I could use my code snippet, or save it as a jpg, in place of the sunset.

Posted at 2022-11-11 by @gfwilliams

Just a note that a slidey clock got mentioned in https://forum.espruino.com/comments/16328196/ and it's now available at https://banglejs.com/apps/?id=slopeclock

Posted at 2022-11-11 by fanoushs-punching-bag

Nm

Posted at 2023-05-07 by Jferrari6803

I finally have the code for my Existentialist's Watch. The watchface shows the word "Now" in the center of the screen. If you find a need for the terrestrial time, press the button and the current time will display for five seconds, then revert back to "Now".

// Display the "Now" message on the Bangle.js 2 watch
function showNow() {
  g.clear();
  g.setFontAlign(0, 0);
  g.setFont("Vector", 48);
  g.drawString("Now", g.getWidth() / 2, g.getHeight() / 2);
  return true;
}

// Display the current time on the Bangle.js 2 watch
function showTime() {
  // Get the current time
  var date = new Date();
  var hours = date.getHours();
  var minutes = date.getMinutes();


  // Format the time as a string
  var timeString = hours.toString().padStart(2, "0") + ":" +
                   minutes.toString().padStart(2, "0") + ":" +;

  // Display the time on the screen
  g.clear();
  g.setFontAlign(0, 0);
  g.setFont("Vector", 42);
  g.drawString(timeString, g.getWidth() / 2, g.getHeight() / 2);

  // Revert to the "Now" display after 5 seconds
  setTimeout(showNow, 5000);
}

// Set up a button listener to display the time
setWatch(showTime, BTN1, { repeat: true });

// Display the "Now" message on start-up
showNow();

It's simplistic, no widgets and such, but I'm sure somebody will jazz it up if they want.
This is the main reason I bought the Bangle.js 2. So happy now.

Posted at 2023-05-07 by Jferrari6803

Here it is.

Attachments:

PXL_20230507_062316667~3.jpg

Posted at 2023-05-09 by @gfwilliams

Nice idea, thanks! How about adding it to http://www.espruino.com/Bangle.js+App+Loader ?

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Espruino JavaScript

Watchface Ideas #5886

{{title}}

Replies: 1 comment

{{title}}

Select a reply

Espruino JavaScript

Watchface Ideas #5886

espruino-discuss2 Feb 12, 2025 Maintainer

Replies: 1 comment

espruino-discuss2 Feb 12, 2025 Maintainer Author

espruino-discuss2
Feb 12, 2025
Maintainer

espruino-discuss2
Feb 12, 2025
Maintainer Author