Watchface Ideas

Posted on
Page
of 5
  • Cool! I found some star wars fonts. These would make excellent watches.
    https://aurekfonts.github.io/?font=Almos­tThere (permissible license, good to go)


    https://aurekfonts.github.io/?font=Scele­tAF (I'll reach out)

    These following have interesting numerals for symbol watch faces. Some are similar, but could make really interesting watchfaces, the normal numbers in here are really cool too.
    https://aurekfonts.github.io/?font=ABEqu­inox (permissible license, good to go)
    https://aurekfonts.github.io/?font=Domab­eshConsole (license simply states: "This font is free for everyone, forever.

    ")
    https://aurekfonts.github.io/?font=Aurab­oo (permissible license, good to go)
    https://aurekfonts.github.io/?font=Aureb­eshAF (permissible license, good to go)
    https://aurekfonts.github.io/?font=Aureb­eshBloopsAF (permissible license, good to go)
    https://aurekfonts.github.io/?font=Aureb­eshEnglish (permissible license, good to go)
    https://aurekfonts.github.io/?font=Aureb­eshLU (permissible license, good to go)
    https://aurekfonts.github.io/?font=Aureb­eshPixel (permissible license, good to go)
    https://aurekfonts.github.io/?font=Aureb­eshRed (permissible license, good to go)
    https://aurekfonts.github.io/?font=KCDAu­rebesh (permissible license, good to go)
    https://aurekfonts.github.io/?font=SFoil­ (permissible license, good to go)
    https://aurekfonts.github.io/?font=Rogue­AF (I'll reach out)
    https://aurekfonts.github.io/?font=Siena­rAF (I'll reach out)
    https://aurekfonts.tumblr.com/post/66037­6760578408448/aurebesh-chart?is_related_­post=1 (I'll reach out)

  • Nice!

  • 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 @Gordon makes money with Bangle.js watches.

  • 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

  • Ya that's a good point. I can reach out and see what they say.
    EDIT: I updated the fonts that have permissible licenses. I'll reach out for the last few.
    -----Email Copy----
    Hello Aurek Fonts,
    I am emailing you about a watch which allows normal humans to make free watchfaces for. We were wondering if we could use the following fonts in a couple watchfaces. The fonts themselves must be converted, so there is no way for us to re-distribute the original watchface. We can do a link back to your page where the font was and attribute it to you.

    The watchfaces cannot be purchased but are simply downloaded and no one will make any money off of this, if you agree; we'd love to use these fonts. We'll make sure the name is maintained as well. The github is MIT licensed, and the watch OS is open source as well (https://github.com/espruino/BangleApps)

    I'm not affiliated with BangleJS, but I am a fan of your work and the Bangle and may start making watch faces of my own, perhaps with these fonts. Thank you for your time!

    https://aurekfonts.github.io/?font=Scele­tAF
    https://aurekfonts.github.io/?font=Rogue­AF
    https://aurekfonts.github.io/?font=Siena­rAF
    https://aurekfonts.tumblr.com/post/66037­6760578408448/aurebesh-chart?is_related_­post=1

    -John

  • I got an answer back!
    -----Email Answer----
    Hi John,

    Thanks for reaching out!

    All the fonts you indicated—Scelet AF, Sienar AF, Rogue AF, and Aurebesh AF—are free to use for non-commercial projects.

    From your email, it sounds as though the watch faces will be free to download. If that is the case, you're good to go!

    I would appreciate attribution to AurekFonts, as you suggested, (though I don't think these licenses technically require it).

    And lastly, I'd love to see what you make! Feel free to send me links or images when you have them! (You can also tag me on twitter @AurekFonts.)

    Again, thanks for reaching out. I can't wait to see what you make!

    Ender Smith
    (AurekFonts)

  • 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:tru­e}).clear();
    

    3 Attachments

  • That's looking pretty cool! Man, once I can get some time to make my own, it'll be fun.

  • I'd love one like this (hour is the number)

  • The orange one is really cool!

  • 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=jFXrw5UN­66M

  • Super cool! I love that it runs as if it was an actual command.

  • Here's another interesting one:

  • Another good one

  • Another!
    And another!

  • 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.

    1. I have a splash screen with a custom message on it.
    2. On button press I'd like to show the clock ( any watch face, I'm not picky) for 10 seconds.
    3. 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?

  • 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 :-)

  • 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!"....

  • 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.

  • 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

  • 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();
    
  • 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.

  • 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/AXs7tu27­dtxJB/IPeTHwQCD7BB/IPLCEAQrI2IP+Spw+HAQf­EIP5BbkwEDkIaSzo+JAQXYIP5BXpgEDpBcWIP5Bf­yYKIhI+VzMkk4+KAQdsIP5B/II4rSoQ+TL5INEIP­5BdYSlMBpjIJ2JB/IKUhHyWZCBo+JIP5BViQ+Pkw­QNyY+MIP5BVpAMLpjNOAYQ+NAQT0QIOitNkI4CyA­JEmRcOoQGDHxlpLJJB/IJgCZIKDdLIP5B/klkAYX­JHz4CBwgGEk5BKAQdspMyCwNtH0QCBkIGFIKIUCI­P5B/INICBoQGEzpBM7AbEIP5BC24EBiQdEyZBcpB­B/ILYKBsgqKmTLepxBL4hB/IJICB5InMzJEakM7I­JOJCQpB/IIwCB2VJku2Fp1MIi0mIIvYB45B/IP5B­KAQfJEhA1PiRNOFoWJBhBBUyB+VsgTQkJB/IP5BR­AQXZHCYCNM5ICEpBB/IKDLMAUxB/IKXbthB/IP4C­FDQe2IP5B+AQNJlpB/IP5EFDoLOEIP5B77MkyxB/­IP5BEtg7bv/kIP5B/IMQCDILv8IP5BkASW3/dtII­uf/5B/IN+3/4IG/5BBBAfJIIX//xB/IJQdHAR+SI­Kf/9oUG//9AoN/BwJB/INO/F4YICGQRBD2Ebt4IB­AApB/IP5BE7TaDDooCM/wCB2mSpJBQFgRBCtkAn5­AH//2IJ/f3oFDnZBK9utIJPfGov8gEAIJF2IJ/d2­oFDjZB/INf27drII23rZBKgEf//7tMkIJN/EYUvG­hH/IAJB/IJt9UAP/HYZBG9+2CQJBJkwLB3YNBFIh­BOgZBJcQRBDt5BGRwPWBYJBr1Nbt4HE7duFYKtCI­ItsEIV//VJIIUkzZJBII8kNQQAE/weCAAMPIK/tY­oRBuYoYWDIIqzC7dbEAd+HwQCBXIIXCCIIgDBwJB­HwBB/IJ1JII7BDA4bFB7//EAcBYou/IIjpDBwRB/­ILHt35CEIOInBAAf7pMltu+QZDvB+wFC79/EIg+C­AQMvC43//wODIAvgDwgABn6DGIIO2/bICPQIpDtp­BD7fAEAkCQZQnB+hBDpZBSQYY4CIJACEoBBrQYhB­+kmVHZQCE6AgFIIuSCglvIItJl4xC/BAGAAMfIP5­Bm1oUF1JNEFgloIJECDQgUC3xB/yVWIKsAhJBU7R­AIAAMBIJF/ZoPtFIjWC/pB0QZm0EBEEGoYXG6hBE­lYIBIP5BUTAJBMtAgJIJTFJEBZB/IP5BKyVWILlK­CgdqHwhBE7QfJgQyEILUJGosrIJYsBwBBJQcBBpp­NbIJdt2hBStupII9AIBQABgpB/IP5BhgEEGQdKCg­dqHwpBQgEWIP5BUtAeJIIgUD7Q+GAQOQIBpB/IJM­k1pBKUxbCFIJUgIBxB/IJSqEAQvQD5ZBHAQXUIKk­FDQRB/IItbEYanUCIREINAZfMIP5BLq3bqQ+GIKY­CEypBGAoOgIP5BVARhBVAQzRBtDGOixB/IP5BVkm­AILRfOAAdbIP5BeggaOyVIICBB/IKinMIJ5ARi3b­IP5BRoAfMcDIAIQBxB/AQWQD5xB/IOYfPcZxB/IO­kBEBtIISRB/IP5BSyBBdICQABIP5BtwBB/IMgeQg­hB/IP4ADiRB/IN4fSIJeSIP5B/yVIH6hB/IKACBo­AdWC5xB/IP5BeAQOQDqGAHrJB/AA5BOyVICwoLEH­b4AJgI+FGFJB/IP4A/AH4A/AH4A/ADA=")),0,0)­;
      else Bangle.setLCDOverlay();
    };
    Bangle.on('lock', locked => {
      Bangle.setLockScreen(locked);
    });
    Bangle.setLockScreen(Bangle.isLocked());­
    
  • 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?

  • 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

  • Post a reply
    • Bold
    • Italics
    • Link
    • Image
    • List
    • Quote
    • code
    • Preview
About

Watchface Ideas

Posted by Avatar for andiohn @andiohn

Actions