You are reading a single comment by @HughB and its replies. Click here to read the full conversation.
  • 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
About

Avatar for HughB @HughB started