Watchface Ideas

Posted on
Page
of 5
/ 5
Last Next
  • Hey All,
    I have a lot of ideas from my pebble watch that would be cool to organize, so I'm going to do it here. I'm starting with just ideas but I'll be trying to make some designs in paint.net to organize my ideas. Then I'll get to coding but anyone can make some out of these ideas too.

    Also, there are more from anime that look really 'retro-futurist', so I'll put those here too. One already looks close to the NGE active time remaining, the simple segmented clock. Take a look.

    https://i.imgur.com/Sv2mDtn.mp4
    https://i.imgur.com/3n02vCe.mp4

    Also, interesting interface examples like this could make some excellent watch faces:
    https://i.imgur.com/GghyTP1.mp4
    https://i.imgur.com/jj5r4WN.mp4
    https://i.imgur.com/J0p9lgk.mp4
    https://i.imgur.com/jkc5KNj.mp4
    https://i.imgur.com/BTKLxnE.gif)
    https://i.imgur.com/UOtErG0.mp4
    https://i.imgur.com/FDAHgm6.mp4
    https://i.imgur.com/U4CKjXS.mp4
    https://i.imgur.com/kljitRl.mp4
    https://i.imgur.com/jY9AD2k.mp4
    https://i.imgur.com/zDeJusV.mp4
    https://i.imgur.com/rcatzAJ.mp4
    https://i.imgur.com/bb0U0lR.mp4
    https://i.imgur.com/ckT5KHg.mp4
    https://i.imgur.com/r0RJyAp.mp4
    https://i.imgur.com/PGnyiVo.mp4
    https://i.imgur.com/1JuIEQS.mp4


    https://i.imgur.com/ql70xFi.mp4
    https://i.imgur.com/UTJ7u8M.mp4

    These are all from this dump: https://imgur.com/a/uDeBs

  • This is a screenshot of a recreation of the Nike Apple Watch face, this would be a good one to create:

  • 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/galle­ry#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!

  • Ok, I found an excellent interesting font for a clock from Google fonts, so it has a permissible license. https://fonts.google.com/specimen/Chakra­+Petch

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

  • Ya, I saw that Anton was a google font; it'd be cool if that one was like multi-clock, where tapping on the bottom right changes the font (in multi-clock it changes the layout).
    I might be able to figure out how to do that with some time. In the meantime, I'll see about making a google font clock. Thanks @Gordon

  • Ya, I was able to load the font, pretty cool. However it was the same size as the example, and I couldn't find where I could go to make it work with like 66 size font.

  • More reading for me. Thanks for your help @Gordon

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

  • Here's another idea, make the new pixel watchfaces.





    https://9to5google.com/2021/12/15/likely­-watchfaces-google-pixel-watch-fitbit-vi­deo/

    Also, I'm not just going to dump stuff in here. When I have some time to read up, I'll try to make these. Also, I'll try to make mockups if I don't have the skill to make them myself.

  • 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

    • download (1).png
  • WOW! That's super cool man :D

  • 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?se­arch=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("AAAAPAAAAADwAAAAA8­AAAAAPAAAAAAAAAAAAAAAAAAOAAAAAfwAAAB/8AA­AH//AAAP//AAA//8AAD//4AAA//gAAAP+AAAAD8A­AAAAQAAAAAAAAAAAD////AA////wAP///8AD////­AA8AADwAPAAA8ADwAAPAA8AADwAPAAA8ADwAAPAA­8AADwAPAAA8ADwAAPAA8AADwAPAAA8ADwAAPAA8A­ADwAPAAA8ADwAAPAA8AADwAPAAA8ADwAAPAA8AAD­wAP///8AD////AA////wAP///8AAAAAAAAAAAAAA­PAAA8ADwAAPAA8AADwAPAAA8ADwAAPAA8AADwAPA­AA8ADwAAPAA8AADwAPAAA8ADwAAPAA////wAP///­8AD////AA////wAAAAA8AAAAAPAAAAADwAAAAA8A­AAAAPAAAAADwAAAAA8AAAAAPAAAAADwAAAAA8AAA­AAPAAAAADwAAAAAAAAAAAAAA8B//wAPAf/8ADwH/­/AA8B//wAPAeA8ADwHgPAA8B4DwAPAeA8ADwHgPA­A8B4DwAPAeA8ADwHgPAA8B4DwAPAeA8ADwHgPAA8­B4DwAPAeA8ADwHgPAA8B4DwAPAeA8ADwHgPAA8B4­DwAPAeA8AD//gPAA//4DwAP/+A8AD//gPAAAAAAA­AAAAAAADwHgPAA8B4DwAPAeA8ADwHgPAA8B4DwAP­AeA8ADwHgPAA8B4DwAPAeA8ADwHgPAA8B4DwAPAe­A8ADwHgPAA8B4DwAPAeA8ADwHgPAA8B4DwAPAeA8­ADwHgPAA8B4DwAPAeA8ADwHgPAA8B4DwAP///8AD­////AA////wAP///8AAAAAAAAAAAAAAP/+AAAD//­gAAA//4AAAP/+AAAAAHgAAAAB4AAAAAeAAAAAHgA­AAAB4AAAAAeAAAAAHgAAAAB4AAAAAeAAAAAHgAAA­AB4AAAAAeAAAAAHgAAAAB4AAAAAeAAAAAHgAAAAB­4AAAAAeAAAAAHgAAA////wAP///8AD////AA////­wAAAAAAAAAAAAAA//4DwAP/+A8AD//gPAA//4DwA­PAeA8ADwHgPAA8B4DwAPAeA8ADwHgPAA8B4DwAPA­eA8ADwHgPAA8B4DwAPAeA8ADwHgPAA8B4DwAPAeA­8ADwHgPAA8B4DwAPAeA8ADwHgPAA8B4DwAPAeA8A­DwH//AA8B//wAPAf/8ADwH//AAAAAAAAAAAAAAD/­///AA////wAP///8AD////AA8B4DwAPAeA8ADwHg­PAA8B4DwAPAeA8ADwHgPAA8B4DwAPAeA8ADwHgPA­A8B4DwAPAeA8ADwHgPAA8B4DwAPAeA8ADwHgPAA8­B4DwAPAeA8ADwHgPAA8B4DwAPAf/8ADwH//AA8B/­/wAPAf/8AAAAAAAAAAAAAAPAAAAADwAAAAA8AAAA­APAAAAADwAAAAA8AAAAAPAAAAADwAAAAA8AAAAAP­AAAAADwAAAAA8AAAAAPAAAAADwAAAAA8AAAAAPAA­AAADwAAAAA8AAAAAPAAAAADwAAAAA8AAAAAPAAAA­ADwAAAAA////wAP///8AD////AA////wAAAAAAAA­AAAAAA////wAP///8AD////AA////wAPAeA8ADwH­gPAA8B4DwAPAeA8ADwHgPAA8B4DwAPAeA8ADwHgP­AA8B4DwAPAeA8ADwHgPAA8B4DwAPAeA8ADwHgPAA­8B4DwAPAeA8ADwHgPAA8B4DwAPAeA8AD////AA//­//wAP///8AD////AAAAAAAAAAAAAAD//gPAA//4D­wAP/+A8AD//gPAA8B4DwAPAeA8ADwHgPAA8B4DwA­PAeA8ADwHgPAA8B4DwAPAeA8ADwHgPAA8B4DwAPA­eA8ADwHgPAA8B4DwAPAeA8ADwHgPAA8B4DwAPAeA­8ADwHgPAA8B4DwAP///8AD////AA////wAP///8A­AAAAAAAAAAAAAAAeA8AAAHgPAAAB4DwAAAeA8AAA­AAAAAAAAAA"), 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

    • download (2).png
  • 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/RG­B_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.

  • I got to here; but I can't set the background black. I also can't get it larger like yours. I'm using the Anton clock and Squarepixel7 font from your link at 90 scale. I'll try with your font and Anton.

    Graphics.prototype.setFontsquarepixel7 = function(scale) {
      // Actual height 45 (66 - 22)
     g.setFontCustom(atob("AAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAD/gAAAAAAAAAAAAD/gAAAAAAAAAAAAD/gA­AAAAAAAAAAAD/gAAAAAAAAAAAAD/gAAAAAAAAAAA­AD/gAAAAAAAAAAAAD/gAAAAAAAAAAAAD/gAAAAAA­AAAAAAD/gAAAAAAAAAAAAD/gAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAD/gAAAAAAAAAAAAD/gA­AAAAAAAAAAAD/gAAAAAAAAAAAB//gAAAAAAAAAAA­B//gAAAAAAAAAAAB//gAAAAAAAAAAAB//gAAAAAA­AAAAAB//gAAAAAAAAAAAf//gAAAAAAAAAAAf/4AA­AAAAAAAAAAf/4AAAAAAAAAAAAf/4AAAAAAAAAAAP­//4AAAAAAAAAAAP//4AAAAAAAAAAAP/8AAAAAAAA­AAAAP/8AAAAAAAAAAAAP/8AAAAAAAAAAAD//8AAA­AAAAAAAAD//AAAAAAAAAAAAD//AAAAAAAAAAAAD/­/AAAAAAAAAAAB///AAAAAAAAAAAB///AAAAAAAAA­AAB//gAAAAAAAAAAAB//gAAAAAAAAAAAB//gAAAA­AAAAAAAf//gAAAAAAAAAAAf/4AAAAAAAAAAAAf/4­AAAAAAAAAAAAf/4AAAAAAAAAAAP//4AAAAAAAAAA­AP//4AAAAAAAAAAAP/8AAAAAAAAAAAAP/8AAAAAA­AAAAAAP/8AAAAAAAAAAAD//8AAAAAAAAAAAD//AA­AAAAAAAAAAD//AAAAAAAAAAAAD//AAAAAAAAAAAA­D//AAAAAAAAAAAAD//AAAAAAAAAAAAD/gAAAAAAA­AAAAAD/gAAAAAAAAAAAAD/gAAAAAAAAAAAAD/gAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAD///////gAAAAAAD///////gAAAAAAD////­///gAAAAAAD///////gAAAAAAD///////gAAAAAA­D///////gAAAAAAD///////gAAAAAAD///////gA­AAAAAD///////gAAAAAAD/gAAf//gAAAAAAD/gAA­f//gAAAAAAD/gAAf//gAAAAAAD/gAP///gAAAAAA­D/gAP///gAAAAAAD/gAP///gAAAAAAD/gAP///gA­AAAAAD/gAP///gAAAAAAD/gD////gAAAAAAD/gD/­/D/gAAAAAAD/gD//D/gAAAAAAD/gD//D/gAAAAAA­D/h///D/gAAAAAAD/h///D/gAAAAAAD/h//gD/gA­AAAAAD/h//gD/gAAAAAAD/h//gD/gAAAAAAD////­gD/gAAAAAAD///4AD/gAAAAAAD///4AD/gAAAAAA­D///4AD/gAAAAAAD///4AD/gAAAAAAD///4AD/gA­AAAAAD//8AAD/gAAAAAAD//8AAD/gAAAAAAD//8A­AD/gAAAAAAD///////gAAAAAAD///////gAAAAAA­D///////gAAAAAAD///////gAAAAAAD///////gA­AAAAAD///////gAAAAAAD///////gAAAAAAD////­///gAAAAAAD///////gAAAAAAD///////gAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/gAAAD/gA­AAAAAD/gAAAD/gAAAAAAD/gAAAD/gAAAAAAD/gAA­AD/gAAAAAAD/gAAAD/gAAAAAAD/gAAAD/gAAAAAA­D/gAAAD/gAAAAAAD/gAAAD/gAAAAAAD/gAAAD/gA­AAAAAD///////gAAAAAAD///////gAAAAAAD////­///gAAAAAAD///////gAAAAAAD///////gAAAAAA­D///////gAAAAAAD///////gAAAAAAD///////gA­AAAAAD///////gAAAAAAD///////gAAAAAAAAAAA­AD/gAAAAAAAAAAAAD/gAAAAAAAAAAAAD/gAAAAAA­AAAAAAD/gAAAAAAAAAAAAD/gAAAAAAAAAAAAD/gA­AAAAAAAAAAAD/gAAAAAAAAAAAAD/gAAAAAAAAAAA­AD/gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAD/gD////gAAAAAA­D/gD////gAAAAAAD/gD////gAAAAAAD/gD////gA­AAAAAD/gD////gAAAAAAD/gD////gAAAAAAD/gD/­///gAAAAAAD/gD////gAAAAAAD/gD////gAAAAAA­D/gD/gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/gD/gA­AAAAAD/gD/gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/­gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/gD/gAAAAAA­D/gD/gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/gD/gA­AAAAAD/gD/gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/­gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/gD/gAAAAAA­D/gD/gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/gD/gA­AAAAAD/gD/gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/­gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/gD/gAAAAAA­D/gD/gD/gAAAAAAD/gD/gD/gAAAAAAD////gD/gA­AAAAAD////gD/gAAAAAAD////gD/gAAAAAAD////­gD/gAAAAAAD////gD/gAAAAAAD////gD/gAAAAAA­D////gD/gAAAAAAD////gD/gAAAAAAD////gD/gA­AAAAAD////gD/gAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAD/gAAAD/gAAAAAAD/gAAAD/gA­AAAAAD/gAAAD/gAAAAAAD/gD/gD/gAAAAAAD/gD/­gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/gD/gAAAAAA­D/gD/gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/gD/gA­AAAAAD/gD/gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/­gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/gD/gAAAAAA­D/gD/gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/gD/gA­AAAAAD/gD/gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/­gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/gD/gAAAAAA­D/gD/gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/gD/gA­AAAAAD/gD/gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/­gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/gD/gAAAAAA­D/gD/gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/gD/gA­AAAAAD/gD/gD/gAAAAAAD///////gAAAAAAD////­///gAAAAAAD///////gAAAAAAD///////gAAAAAA­D///////gAAAAAAD///////gAAAAAAD///////gA­AAAAAD///////gAAAAAAD///////gAAAAAAD////­///gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAD////gAAAAAAAAAD////gAAAAAAAAAD////­gAAAAAAAAAD////gAAAAAAAAAD////gAAAAAAAAA­D////gAAAAAAAAAD////gAAAAAAAAAD////gAAAA­AAAAAD////gAAAAAAAAAAAAD/gAAAAAAAAAAAAD/­gAAAAAAAAAAAAD/gAAAAAAAAAAAAD/gAAAAAAAAA­AAAD/gAAAAAAAAAAAAD/gAAAAAAAAAAAAD/gAAAA­AAAAAAAAD/gAAAAAAAAAAAAD/gAAAAAAAAAAAAD/­gAAAAAAAAAAAAD/gAAAAAAAAAAAAD/gAAAAAAAAA­AAAD/gAAAAAAAAAAAAD/gAAAAAAAAAAAAD/gAAAA­AAAAAAAAD/gAAAAAAAAAAAAD/gAAAAAAAAAAAAD/­gAAAAAAAAAAAAD/gAAAAAAAAAAAAD/gAAAAAAAAA­AAAD/gAAAAAAAAAAAAD/gAAAAAAAAAAAAD/gAAAA­AAAAAAAAD/gAAAAAAAAAAAAD/gAAAAAAAAAAAAD/­gAAAAAAAAAD///////gAAAAAAD///////gAAAAAA­D///////gAAAAAAD///////gAAAAAAD///////gA­AAAAAD///////gAAAAAAD///////gAAAAAAD////­///gAAAAAAD///////gAAAAAAD///////gAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD////­gD/gAAAAAAD////gD/gAAAAAAD////gD/gAAAAAA­D////gD/gAAAAAAD////gD/gAAAAAAD////gD/gA­AAAAAD////gD/gAAAAAAD////gD/gAAAAAAD////­gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/gD/gAAAAAA­D/gD/gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/gD/gA­AAAAAD/gD/gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/­gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/gD/gAAAAAA­D/gD/gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/gD/gA­AAAAAD/gD/gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/­gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/gD/gAAAAAA­D/gD/gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/gD/gA­AAAAAD/gD/gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/­gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/gD/gAAAAAA­D/gD////gAAAAAAD/gD////gAAAAAAD/gD////gA­AAAAAD/gD////gAAAAAAD/gD////gAAAAAAD/gD/­///gAAAAAAD/gAP//4AAAAAAAD/gAP//4AAAAAAA­D/gAP//4AAAAAAAD/gAP//4AAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAD///////gAAAAAA­D///////gAAAAAAD///////gAAAAAAD///////gA­AAAAAD///////gAAAAAAD///////gAAAAAAD////­///gAAAAAAD///////gAAAAAAD///////gAAAAAA­D/gD/gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/gD/gA­AAAAAD/gD/gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/­gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/gD/gAAAAAA­D/gD/gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/gD/gA­AAAAAD/gD/gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/­gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/gD/gAAAAAA­D/gD/gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/gD/gA­AAAAAD/gD/gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/­gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/gD/gAAAAAA­D/gD/gD/gAAAAAAD/gD/gD/gAAAAAAD/gD////gA­AAAAAD/gD////gAAAAAAD/gD////gAAAAAAD/gD/­///gAAAAAAD/gD////gAAAAAAD/gD////gAAAAAA­D/gD////gAAAAAAD/gD////gAAAAAAD/gD////gA­AAAAAD/gD////gAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAD/gAAAAAAAAAAAAD/gAAAAAAA­AAAAAD/gAAAAAAAAAAAAD/gAAAAAAAAAAAAD/gAA­AAAAAAAAAAD/gAAAAAAAAAAAAD/gAAAAAAAAAAAA­D/gAAAAAAAAAAAAD/gAAAAAAAAAAAAD/gAAAAAAA­AAAAAD/gAAAAAAAAAAAAD/gAAAAAAAAAAAAD/gAA­AAAAAAAAAAD/gAAAAAAAAAAAAD/gAAAAAAAAAAAA­D/gAAAAAAAAAAAAD/gAAAAAAAAAAAAD/gAAAAAAA­AAAAAD/gAAAAAAAAAAAAD/gAAAAAAAAAAAAD/gAA­AAAAAAAAAAD/gAAAAAAAAAAAAD/gAAAAAAAAAAAA­D/gAAAAAAAAAAAAD/gAAAAAAAAAAAAD/gAAAAAAA­AAAAAD/gAAAAAAAAAAAAD/gAAAAAAAAAAAAD/gAA­AAAAAAAAAAD/gAAAAAAAAAAAAD/gAAAAAAAAAAAA­D/gAAAAAAAAAAAAD/gAAAAAAAAAAAAD/gAAAAAAA­AAAAAD/gAAAAAAAAAAAAD///////gAAAAAAD////­///gAAAAAAD///////gAAAAAAD///////gAAAAAA­D///////gAAAAAAD///////gAAAAAAD///////gA­AAAAAD///////gAAAAAAD///////gAAAAAAD////­///gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAD///////gAAAAAAD///////gAAAAAAD////­///gAAAAAAD///////gAAAAAAD///////gAAAAAA­D///////gAAAAAAD///////gAAAAAAD///////gA­AAAAAD///////gAAAAAAD/gD/gD/gAAAAAAD/gD/­gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/gD/gAAAAAA­D/gD/gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/gD/gA­AAAAAD/gD/gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/­gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/gD/gAAAAAA­D/gD/gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/gD/gA­AAAAAD/gD/gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/­gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/gD/gAAAAAA­D/gD/gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/gD/gA­AAAAAD/gD/gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/­gD/gAAAAAAD///////gAAAAAAD///////gAAAAAA­D///////gAAAAAAD///////gAAAAAAD///////gA­AAAAAD///////gAAAAAAD///////gAAAAAAD////­///gAAAAAAD///////gAAAAAAD///////gAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD////­gD/gAAAAAAD////gD/gAAAAAAD////gD/gAAAAAA­D////gD/gAAAAAAD////gD/gAAAAAAD////gD/gA­AAAAAD////gD/gAAAAAAD////gD/gAAAAAAD////­gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/gD/gAAAAAA­D/gD/gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/gD/gA­AAAAAD/gD/gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/­gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/gD/gAAAAAA­D/gD/gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/gD/gA­AAAAAD/gD/gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/­gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/gD/gAAAAAA­D/gD/gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/gD/gA­AAAAAD/gD/gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/­gD/gAAAAAAD/gD/gD/gAAAAAAD/gD/gD/gAAAAAA­D///////gAAAAAAD///////gAAAAAAD///////gA­AAAAAD///////gAAAAAAD///////gAAAAAAD////­///gAAAAAAD///////gAAAAAAD///////gAAAAAA­D///////gAAAAAAD///////gAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAf8Af8AAAAAAAAAAf8Af8AAAAAAAAAAf8Af8AAA­AAAAAAAf8Af8AAAAAAAAAAf8Af8AAAAAAAAAAf8A­f8AAAAAAAAAAf8Af8AAAAAAAAAAf8Af8AAAAAAAA­AAf8Af8AAAAAAAAAAf8Af8AAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAA=="), 46, 50, 90+(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();
      var date = new Date();
      var timeStr = require("locale").time(date,1);
      var dateStr = require("locale").date(date).toUpperCase­();
      var dowStr = require("locale").dow(date).toUpperCase(­);
      // draw time
      g.setFontAlign(0,-1).setFont("squarepixe­l7");
      g.clearRect(0,y-40,g.getWidth(),y+35); // clear the background
      g.setColor('#f00');
    g.drawString("09", g.getWidth()/2, -05);
    g.setColor('#0ff');
    g.drawString("30", g.getWidth()/2, +42);
      // draw date
      y += 67;
      g.setFontAlign(0,0).setFont("6x8",2);
      g.clearRect(0,y-8,g.getWidth(),y+8); // clear the background
      g.drawString(dateStr,x,y);
      //draw day of week
      y += 14;
      g.clearRect(0,y-8,g.getWidth(),y+8); // clear the background
      g.drawString(dowStr,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();
    

    1 Attachment

    • screenshot (1).png
  • Oh I found out how you scaled it with

    g.setFontAlign(0,-1).setFontsquarepixel7­(2);
    
  • This is getting closer to what I want. I need the background black, and I need the number of the day of the month to be added after the name of the day of the week with a space separating them. Then it'll be a cool watch I think.

    EDIT: This works great on the watch. I'd like to find out how to do a short weekday and put it within the second minute character. Currently, this puts the day on top of the bottom row of the time, which actually looks good on the watch.

    Graphics.prototype.setFontsquarepixel7 = function(scale) {
      // Actual height 40 (59 - 20)
      g.setFontCustom(atob("AAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AAAAAAAA­AAAA/wAAAAAAAAAAAP8AAAAAAAAAAAD/AAAAAAAA­AAAA/wAAAAAAAAAAAP8AAAAAAAAAAAD/AAAAAAAA­AAAA/wAAAAAAAAAAAP8AAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAP8AAAAAAAAAAAD/AAAAAAAA­AAAA/wAAAAAAAAAAD/8AAAAAAAAAAA//AAAAAAAA­AAAP/wAAAAAAAAAAD/8AAAAAAAAAAP//AAAAAAAA­AAD/8AAAAAAAAAAA//AAAAAAAAAAAP/wAAAAAAAA­AA//8AAAAAAAAAAP/wAAAAAAAAAAD/8AAAAAAAAA­AA//AAAAAAAAAAD//wAAAAAAAAAA//AAAAAAAAAA­AP/wAAAAAAAAAAD/8AAAAAAAAAAP//AAAAAAAAAA­D/8AAAAAAAAAAA//AAAAAAAAAAAP/wAAAAAAAAAA­//8AAAAAAAAAAP/wAAAAAAAAAAD/8AAAAAAAAAAA­//AAAAAAAAAAD//wAAAAAAAAAA//AAAAAAAAAAAP­/wAAAAAAAAAAD/8AAAAAAAAAAP//AAAAAAAAAAD/­8AAAAAAAAAAA//AAAAAAAAAAAP/wAAAAAAAAAAD/­8AAAAAAAAAAA/wAAAAAAAAAAAP8AAAAAAAAAAAD/­AAAAAAAAAAAA/wAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/­/////wAAAAAA//////8AAAAAAP//////AAAAAAD/­/////wAAAAAA//////8AAAAAAP//////AAAAAAD/­/////wAAAAAA//////8AAAAAAP8AAP//AAAAAAD/­AAD//wAAAAAA/wAA//8AAAAAAP8AD///AAAAAAD/­AA///wAAAAAA/wAP//8AAAAAAP8AD///AAAAAAD/­AP///wAAAAAA/wD/8P8AAAAAAP8A//D/AAAAAAD/­AP/w/wAAAAAA/w//8P8AAAAAAP8P/wD/AAAAAAD/­D/8A/wAAAAAA/w//AP8AAAAAAP///wD/AAAAAAD/­//AA/wAAAAAA///wAP8AAAAAAP//8AD/AAAAAAD/­//AA/wAAAAAA//8AAP8AAAAAAP//AAD/AAAAAAD/­/wAA/wAAAAAA//////8AAAAAAP//////AAAAAAD/­/////wAAAAAA//////8AAAAAAP//////AAAAAAD/­/////wAAAAAA//////8AAAAAAP//////AAAAAAD/­/////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAA/wAAAP8AAAAAAP8AAAD/AAAAAAD/­AAAA/wAAAAAA/wAAAP8AAAAAAP8AAAD/AAAAAAD/­AAAA/wAAAAAA/wAAAP8AAAAAAP8AAAD/AAAAAAD/­/////wAAAAAA//////8AAAAAAP//////AAAAAAD/­/////wAAAAAA//////8AAAAAAP//////AAAAAAD/­/////wAAAAAA//////8AAAAAAP//////AAAAAAAA­AAAA/wAAAAAAAAAAAP8AAAAAAAAAAAD/AAAAAAAA­AAAA/wAAAAAAAAAAAP8AAAAAAAAAAAD/AAAAAAAA­AAAA/wAAAAAAAAAAAP8AAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAA/wD///8AAAAAAP8A////AAAAAAD/­AP///wAAAAAA/wD///8AAAAAAP8A////AAAAAAD/­AP///wAAAAAA/wD///8AAAAAAP8A////AAAAAAD/­AP8A/wAAAAAA/wD/AP8AAAAAAP8A/wD/AAAAAAD/­AP8A/wAAAAAA/wD/AP8AAAAAAP8A/wD/AAAAAAD/­AP8A/wAAAAAA/wD/AP8AAAAAAP8A/wD/AAAAAAD/­AP8A/wAAAAAA/wD/AP8AAAAAAP8A/wD/AAAAAAD/­AP8A/wAAAAAA/wD/AP8AAAAAAP8A/wD/AAAAAAD/­AP8A/wAAAAAA/wD/AP8AAAAAAP8A/wD/AAAAAAD/­AP8A/wAAAAAA/wD/AP8AAAAAAP8A/wD/AAAAAAD/­AP8A/wAAAAAA/wD/AP8AAAAAAP///wD/AAAAAAD/­//8A/wAAAAAA////AP8AAAAAAP///wD/AAAAAAD/­//8A/wAAAAAA////AP8AAAAAAP///wD/AAAAAAD/­//8A/wAAAAAA////AP8AAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/­AAAA/wAAAAAA/wAAAP8AAAAAAP8AAAD/AAAAAAD/­AP8A/wAAAAAA/wD/AP8AAAAAAP8A/wD/AAAAAAD/­AP8A/wAAAAAA/wD/AP8AAAAAAP8A/wD/AAAAAAD/­AP8A/wAAAAAA/wD/AP8AAAAAAP8A/wD/AAAAAAD/­AP8A/wAAAAAA/wD/AP8AAAAAAP8A/wD/AAAAAAD/­AP8A/wAAAAAA/wD/AP8AAAAAAP8A/wD/AAAAAAD/­AP8A/wAAAAAA/wD/AP8AAAAAAP8A/wD/AAAAAAD/­AP8A/wAAAAAA/wD/AP8AAAAAAP8A/wD/AAAAAAD/­AP8A/wAAAAAA/wD/AP8AAAAAAP8A/wD/AAAAAAD/­AP8A/wAAAAAA/wD/AP8AAAAAAP8A/wD/AAAAAAD/­AP8A/wAAAAAA//////8AAAAAAP//////AAAAAAD/­/////wAAAAAA//////8AAAAAAP//////AAAAAAD/­/////wAAAAAA//////8AAAAAAP//////AAAAAAD/­/////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAP///wAAAAAAAAD/­//8AAAAAAAAA////AAAAAAAAAP///wAAAAAAAAD/­//8AAAAAAAAA////AAAAAAAAAP///wAAAAAAAAD/­//8AAAAAAAAAAAD/AAAAAAAAAAAA/wAAAAAAAAAA­AP8AAAAAAAAAAAD/AAAAAAAAAAAA/wAAAAAAAAAA­AP8AAAAAAAAAAAD/AAAAAAAAAAAA/wAAAAAAAAAA­AP8AAAAAAAAAAAD/AAAAAAAAAAAA/wAAAAAAAAAA­AP8AAAAAAAAAAAD/AAAAAAAAAAAA/wAAAAAAAAAA­AP8AAAAAAAAAAAD/AAAAAAAAAAAA/wAAAAAAAAAA­AP8AAAAAAAAAAAD/AAAAAAAAAAAA/wAAAAAAAAAA­AP8AAAAAAAAAAAD/AAAAAAAAAAAA/wAAAAAAAAD/­/////wAAAAAA//////8AAAAAAP//////AAAAAAD/­/////wAAAAAA//////8AAAAAAP//////AAAAAAD/­/////wAAAAAA//////8AAAAAAP//////AAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAA////AP8AAAAAAP///wD/AAAAAAD/­//8A/wAAAAAA////AP8AAAAAAP///wD/AAAAAAD/­//8A/wAAAAAA////AP8AAAAAAP///wD/AAAAAAD/­AP8A/wAAAAAA/wD/AP8AAAAAAP8A/wD/AAAAAAD/­AP8A/wAAAAAA/wD/AP8AAAAAAP8A/wD/AAAAAAD/­AP8A/wAAAAAA/wD/AP8AAAAAAP8A/wD/AAAAAAD/­AP8A/wAAAAAA/wD/AP8AAAAAAP8A/wD/AAAAAAD/­AP8A/wAAAAAA/wD/AP8AAAAAAP8A/wD/AAAAAAD/­AP8A/wAAAAAA/wD/AP8AAAAAAP8A/wD/AAAAAAD/­AP8A/wAAAAAA/wD/AP8AAAAAAP8A/wD/AAAAAAD/­AP8A/wAAAAAA/wD/AP8AAAAAAP8A////AAAAAAD/­AP///wAAAAAA/wD///8AAAAAAP8A////AAAAAAD/­AP///wAAAAAA/wAP//AAAAAAAP8AD//wAAAAAAD/­AA//8AAAAAAA/wAP//AAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/­/////wAAAAAA//////8AAAAAAP//////AAAAAAD/­/////wAAAAAA//////8AAAAAAP//////AAAAAAD/­/////wAAAAAA//////8AAAAAAP8A/wD/AAAAAAD/­AP8A/wAAAAAA/wD/AP8AAAAAAP8A/wD/AAAAAAD/­AP8A/wAAAAAA/wD/AP8AAAAAAP8A/wD/AAAAAAD/­AP8A/wAAAAAA/wD/AP8AAAAAAP8A/wD/AAAAAAD/­AP8A/wAAAAAA/wD/AP8AAAAAAP8A/wD/AAAAAAD/­AP8A/wAAAAAA/wD/AP8AAAAAAP8A/wD/AAAAAAD/­AP8A/wAAAAAA/wD/AP8AAAAAAP8A/wD/AAAAAAD/­AP8A/wAAAAAA/wD/AP8AAAAAAP8A/wD/AAAAAAD/­AP8A/wAAAAAA/wD///8AAAAAAP8A////AAAAAAD/­AP///wAAAAAA/wD///8AAAAAAP8A////AAAAAAD/­AP///wAAAAAA/wD///8AAAAAAP8A////AAAAAAD/­AP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAP8AAAAAAAAAAAD/­AAAAAAAAAAAA/wAAAAAAAAAAAP8AAAAAAAAAAAD/­AAAAAAAAAAAA/wAAAAAAAAAAAP8AAAAAAAAAAAD/­AAAAAAAAAAAA/wAAAAAAAAAAAP8AAAAAAAAAAAD/­AAAAAAAAAAAA/wAAAAAAAAAAAP8AAAAAAAAAAAD/­AAAAAAAAAAAA/wAAAAAAAAAAAP8AAAAAAAAAAAD/­AAAAAAAAAAAA/wAAAAAAAAAAAP8AAAAAAAAAAAD/­AAAAAAAAAAAA/wAAAAAAAAAAAP8AAAAAAAAAAAD/­AAAAAAAAAAAA/wAAAAAAAAAAAP8AAAAAAAAAAAD/­AAAAAAAAAAAA/wAAAAAAAAAAAP8AAAAAAAAAAAD/­AAAAAAAAAAAA/wAAAAAAAAAAAP8AAAAAAAAAAAD/­/////wAAAAAA//////8AAAAAAP//////AAAAAAD/­/////wAAAAAA//////8AAAAAAP//////AAAAAAD/­/////wAAAAAA//////8AAAAAAP//////AAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAA//////8AAAAAAP//////AAAAAAD/­/////wAAAAAA//////8AAAAAAP//////AAAAAAD/­/////wAAAAAA//////8AAAAAAP//////AAAAAAD/­AP8A/wAAAAAA/wD/AP8AAAAAAP8A/wD/AAAAAAD/­AP8A/wAAAAAA/wD/AP8AAAAAAP8A/wD/AAAAAAD/­AP8A/wAAAAAA/wD/AP8AAAAAAP8A/wD/AAAAAAD/­AP8A/wAAAAAA/wD/AP8AAAAAAP8A/wD/AAAAAAD/­AP8A/wAAAAAA/wD/AP8AAAAAAP8A/wD/AAAAAAD/­AP8A/wAAAAAA/wD/AP8AAAAAAP8A/wD/AAAAAAD/­AP8A/wAAAAAA/wD/AP8AAAAAAP8A/wD/AAAAAAD/­AP8A/wAAAAAA/wD/AP8AAAAAAP//////AAAAAAD/­/////wAAAAAA//////8AAAAAAP//////AAAAAAD/­/////wAAAAAA//////8AAAAAAP//////AAAAAAD/­/////wAAAAAA//////8AAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/­//8A/wAAAAAA////AP8AAAAAAP///wD/AAAAAAD/­//8A/wAAAAAA////AP8AAAAAAP///wD/AAAAAAD/­//8A/wAAAAAA////AP8AAAAAAP8A/wD/AAAAAAD/­AP8A/wAAAAAA/wD/AP8AAAAAAP8A/wD/AAAAAAD/­AP8A/wAAAAAA/wD/AP8AAAAAAP8A/wD/AAAAAAD/­AP8A/wAAAAAA/wD/AP8AAAAAAP8A/wD/AAAAAAD/­AP8A/wAAAAAA/wD/AP8AAAAAAP8A/wD/AAAAAAD/­AP8A/wAAAAAA/wD/AP8AAAAAAP8A/wD/AAAAAAD/­AP8A/wAAAAAA/wD/AP8AAAAAAP8A/wD/AAAAAAD/­AP8A/wAAAAAA/wD/AP8AAAAAAP8A/wD/AAAAAAD/­AP8A/wAAAAAA//////8AAAAAAP//////AAAAAAD/­/////wAAAAAA//////8AAAAAAP//////AAAAAAD/­/////wAAAAAA//////8AAAAAAP//////AAAAAAD/­/////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAD/AP8AAAAAAAAA­/wD/AAAAAAAAAP8A/wAAAAAAAAD/AP8AAAAAAAAA­/wD/AAAAAAAAAP8A/wAAAAAAAAD/AP8AAAAAAAAA­/wD/AAAAAAAAAP8A/wAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA­AAAAAAAAA="), 46, 44, 80+(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();
      var date = new Date();
      var timeStr = require("locale").time(date,1);
      var dateStr = require("locale").date(date).toUpperCase­();
      var dowStr = require("locale").dow(date).toUpperCase(­);
      var dowshortStr = dowStr.toString().split(' ')[0];
      // draw time
      g.setFontAlign(0,-5).setFontsquarepixel7­(2);
      g.setColor('#fff');
      g.clearRect(0,y-40,g.getWidth(),y+35); // clear the background
      g.setColor('#0f0');
    g.drawString("09", g.getWidth()/2+3, -16);
    g.setColor('#0ff');
    g.drawString("30", g.getWidth()/2+3, +60);
        g.setColor('#000');
      // draw date
      y += 82;
      g.setFontAlign(0,0).setFont("6x8",2);
     // g.clearRect(0,y-00,g.getWidth(),y+8); // clear the background
    //  g.drawString(dateStr,x,y);
      //draw day of week
    //  y += 11;
      //g.clearRect(0,y-8,g.getWidth(),y+8); // clear the background
      g.drawString(dowshortStr,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();
    

    1 Attachment

    • screenshot (2).png
  • More ideas:


    More!

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

Watchface Ideas

Posted by Avatar for andiohn @andiohn

Actions