Possible to get old graphics font back?

Posted on
  • In one of the recent firmware updates, the default font for a graphics object was changed - it is now smaller than it was before.

    The new type is uncomfortably small on the Nokia5110 screen, but the vector font sizes of around the same character size are too thick (ie, they look like they're in bold ). Is there any way to get the old font back?

  • Not without recompiling I'm afraid. If you do recompile you need to change this file: https://github.com/espruino/Espruino/blo­b/master/libs/graphics/jswrap_graphics.c­ to use the 8x8 font (still included) rather than the 6x4.

    The reason for the change is I'm trying to cut down on the binary size, and switching fonts saved around 0.5k.

  • I agree to DrAzzy
    The new font is hard to read without magnifying glasses on a 5110.
    Vector font is hard to read because of being too thick.
    Is there any way to have fontdata available somewhere else and load if needed only ?

  • There was talk of adding a 'bitmap' class that could be used with graphics to draw arbitrary bitmaps.

    Even as it is, you could make a module to load the 8x8 font and then output it with setPixel.

    Problem is I've been here before. Even if I change it back someone will pop their head up and say 'I really liked that' :)

  • Could the vector font system be tweaked such that at small sizes, it doesn't make the lines 2 pixels wide? This results in the spaces between lines being too thin, such that it's hard to read. Try sizes around 8-12 on the Nokia5110 screen, and I think you'll see what +JumJum and I are talking about.

    It would be awesome if we could load a replacement bitmap font off the SD card, and use it with the drawString() methods - like setBitmapFont("8x8.fnt")

  • Well, you could write a library now, which would draw a font with setPixel. There's an outstanding issue in GitHub for an Image class which might make it faster though: https://github.com/espruino/Espruino/iss­ues/198

    It's hard about the Vector font - I could try using a font that was less bold I guess. As it is, it's just drawing polygons, so I don't think I could easily tweak the widths.

  • Or you could just use this. It should be trivial to turn into a library:

    Graphics.prototype.font8x8 = "\x00\x00\x00\x00\x00\x00\x00\x00\x00\x3­E\x41\x55\x41\x55\x49\x3E\x00\x3E\x7F\x6­B\x7F\x6B\x77\x3E\x00\x22\x77\x7F\x7F\x3­E\x1C\x08\x00\x08\x1C\x3E\x7F\x3E\x1C\x0­8\x00\x08\x1C\x2A\x7F\x2A\x08\x1C\x00\x0­8\x1C\x3E\x7F\x3E\x08\x1C\x00\x00\x1C\x3­E\x3E\x3E\x1C\x00\xFF\xFF\xE3\xC1\xC1\xC­1\xE3\xFF\x00\x00\x1C\x22\x22\x22\x1C\x0­0\xFF\xFF\xE3\xDD\xDD\xDD\xE3\xFF\x00\x0­F\x03\x05\x39\x48\x48\x30\x00\x08\x3E\x0­8\x1C\x22\x22\x1C\x00\x18\x14\x10\x10\x3­0\x70\x60\x00\x0F\x19\x11\x13\x37\x76\x6­0\x00\x08\x2A\x1C\x77\x1C\x2A\x08\x00\x6­0\x78\x7E\x7F\x7E\x78\x60\x00\x03\x0F\x3­F\x7F\x3F\x0F\x03\x00\x08\x1C\x2A\x08\x2­A\x1C\x08\x00\x66\x66\x66\x66\x00\x66\x6­6\x00\x3F\x65\x65\x3D\x05\x05\x05\x00\x0­C\x32\x48\x24\x12\x4C\x30\x00\x00\x00\x0­0\x00\x7F\x7F\x7F\x00\x08\x1C\x2A\x08\x2­A\x1C\x3E\x00\x08\x1C\x3E\x7F\x1C\x1C\x1­C\x00\x1C\x1C\x1C\x7F\x3E\x1C\x08\x00\x0­8\x0C\x7E\x7F\x7E\x0C\x08\x00\x08\x18\x3­F\x7F\x3F\x18\x08\x00\x00\x00\x70\x70\x7­0\x7F\x7F\x00\x00\x14\x22\x7F\x22\x14\x0­0\x00\x08\x1C\x1C\x3E\x3E\x7F\x7F\x00\x7­F\x7F\x3E\x3E\x1C\x1C\x08\x00\x00\x00\x0­0\x00\x00\x00\x00\x00\x18\x3C\x3C\x18\x1­8\x00\x18\x00\x36\x36\x14\x00\x00\x00\x0­0\x00\x36\x36\x7F\x36\x7F\x36\x36\x00\x0­8\x1E\x20\x1C\x02\x3C\x08\x00\x60\x66\x0­C\x18\x30\x66\x06\x00\x3C\x66\x3C\x28\x6­5\x66\x3F\x00\x18\x18\x18\x30\x00\x00\x0­0\x00\x06\x0C\x18\x18\x18\x0C\x06\x00\x6­0\x30\x18\x18\x18\x30\x60\x00\x00\x36\x1­C\x7F\x1C\x36\x00\x00\x00\x08\x08\x3E\x0­8\x08\x00\x00\x00\x00\x00\x30\x30\x30\x6­0\x00\x00\x00\x00\x3C\x00\x00\x00\x00\x0­0\x00\x00\x00\x00\x60\x60\x00\x00\x06\x0­C\x18\x30\x60\x00\x00\x3C\x66\x6E\x76\x6­6\x66\x3C\x00\x18\x18\x38\x18\x18\x18\x7­E\x00\x3C\x66\x06\x0C\x30\x60\x7E\x00\x3­C\x66\x06\x1C\x06\x66\x3C\x00\x0C\x1C\x2­C\x4C\x7E\x0C\x0C\x00\x7E\x60\x7C\x06\x0­6\x66\x3C\x00\x3C\x66\x60\x7C\x66\x66\x3­C\x00\x7E\x66\x0C\x0C\x18\x18\x18\x00\x3­C\x66\x66\x3C\x66\x66\x3C\x00\x3C\x66\x6­6\x3E\x06\x66\x3C\x00\x00\x18\x18\x00\x1­8\x18\x00\x00\x00\x18\x18\x00\x18\x18\x3­0\x00\x06\x0C\x18\x30\x18\x0C\x06\x00\x0­0\x00\x3C\x00\x3C\x00\x00\x00\x60\x30\x1­8\x0C\x18\x30\x60\x00\x3C\x66\x06\x1C\x1­8\x00\x18\x00\x38\x44\x5C\x58\x42\x3C\x0­0\x00\x3C\x66\x66\x7E\x66\x66\x66\x00\x7­C\x66\x66\x7C\x66\x66\x7C\x00\x3C\x66\x6­0\x60\x60\x66\x3C\x00\x7C\x66\x66\x66\x6­6\x66\x7C\x00\x7E\x60\x60\x7C\x60\x60\x7­E\x00\x7E\x60\x60\x7C\x60\x60\x60\x00\x3­C\x66\x60\x60\x6E\x66\x3C\x00\x66\x66\x6­6\x7E\x66\x66\x66\x00\x3C\x18\x18\x18\x1­8\x18\x3C\x00\x1E\x0C\x0C\x0C\x6C\x6C\x3­8\x00\x66\x6C\x78\x70\x78\x6C\x66\x00\x6­0\x60\x60\x60\x60\x60\x7E\x00\x63\x77\x7­F\x6B\x63\x63\x63\x00\x63\x73\x7B\x6F\x6­7\x63\x63\x00\x3C\x66\x66\x66\x66\x66\x3­C\x00\x7C\x66\x66\x66\x7C\x60\x60\x00\x3­C\x66\x66\x66\x6E\x3C\x06\x00\x7C\x66\x6­6\x7C\x78\x6C\x66\x00\x3C\x66\x60\x3C\x0­6\x66\x3C\x00\x7E\x5A\x18\x18\x18\x18\x1­8\x00\x66\x66\x66\x66\x66\x66\x3E\x00\x6­6\x66\x66\x66\x66\x3C\x18\x00\x63\x63\x6­3\x6B\x7F\x77\x63\x00\x63\x63\x36\x1C\x3­6\x63\x63\x00\x66\x66\x66\x3C\x18\x18\x1­8\x00\x7E\x06\x0C\x18\x30\x60\x7E\x00\x1­E\x18\x18\x18\x18\x18\x1E\x00\x00\x60\x3­0\x18\x0C\x06\x00\x00\x78\x18\x18\x18\x1­8\x18\x78\x00\x08\x14\x22\x41\x00\x00\x0­0\x00\x00\x00\x00\x00\x00\x00\x7F\x00\x0­C\x0C\x06\x00\x00\x00\x00\x00\x00\x00\x3­C\x06\x3E\x66\x3E\x00\x60\x60\x60\x7C\x6­6\x66\x7C\x00\x00\x00\x3C\x66\x60\x66\x3­C\x00\x06\x06\x06\x3E\x66\x66\x3E\x00\x0­0\x00\x3C\x66\x7E\x60\x3C\x00\x1C\x36\x3­0\x30\x7C\x30\x30\x00\x00\x3E\x66\x66\x3­E\x06\x3C\x00\x60\x60\x60\x7C\x66\x66\x6­6\x00\x00\x18\x00\x18\x18\x18\x3C\x00\x0­C\x00\x0C\x0C\x6C\x6C\x38\x00\x60\x60\x6­6\x6C\x78\x6C\x66\x00\x18\x18\x18\x18\x1­8\x18\x18\x00\x00\x00\x63\x77\x7F\x6B\x6­B\x00\x00\x00\x7C\x7E\x66\x66\x66\x00\x0­0\x00\x3C\x66\x66\x66\x3C\x00\x00\x7C\x6­6\x66\x7C\x60\x60\x00\x00\x3C\x6C\x6C\x3­C\x0D\x0F\x00\x00\x00\x7C\x66\x66\x60\x6­0\x00\x00\x00\x3E\x40\x3C\x02\x7C\x00\x0­0\x18\x18\x7E\x18\x18\x18\x00\x00\x00\x6­6\x66\x66\x66\x3E\x00\x00\x00\x00\x66\x6­6\x3C\x18\x00\x00\x00\x63\x6B\x6B\x6B\x3­E\x00\x00\x00\x66\x3C\x18\x3C\x66\x00\x0­0\x00\x66\x66\x3E\x06\x3C\x00\x00\x00\x3­C\x0C\x18\x30\x3C\x00\x0E\x18\x18\x30\x1­8\x18\x0E\x00\x18\x18\x18\x00\x18\x18\x1­8\x00\x70\x18\x18\x0C\x18\x18\x70\x00\x0­0\x00\x3A\x6C\x00\x00\x00\x00\x08\x1C\x3­6\x63\x41\x41\x7F";
    Graphics.prototype.drawString8 = function (s,px,py) {
      for (var i in s) {
        var ch = s.charCodeAt(i);
        for (var y=0;y<8;y++) {
          var l = this.font8x8.charCodeAt(ch*8+y);
          for (var x=0;x<8;x++)
            if (l&(128>>x)) this.setPixel(px+x,py+y,1);
        }
        px+=8;
      }
    };
    
    SPI1.setup({ baud: 1000000, sck:B3, mosi:B5 });
    var g = require("PCD8544").connect(SPI1,B6,B7,B8­, function() {
      g.clear();
      g.drawString8("Hello",0,0);
      g.drawLine(0,10,84,10);
      g.flip();
    });
    

    There are a whole bunch of fonts on: http://uzebox.org/wiki/index.php?title=F­ont_Bitmaps

    You'd have to write some code to convert the image to a string (or maybe use ImageMagick to export to raw 1 bit, and then http://www.espruino.com/File+Converter) and then you should be able to do libraries for all kinds of different fonts.

  • I just try to save a font on SD and read it back.
    First I created an array like
    font = new Uint8Array(2404); //found this here http://mbed.org/users/dreschpe/code/TFT_­fonts/file/76774250fcec/Arial12x12.h
    Next assigned Fontdata to this font.
    BTW, also tried to write this font as a variable and ran into out of memory.
    Saved this to SD by

    1. fs.writefile("font12.txt",font);
    2. fs.writefile("font12.json",JSON.stringif­y(font));
      I can read this by:
      t = fs.readFile(filename);
      But from this moment on I cannot create a new Uint8Array from the string.
      Tried this with both files.
    3. t = JSON.parse(fs.readFile(filename));
    4. t = fs.readFile(filename); f2 = eval(t);
    5. tried to create a new string to be prepared to eval
    6. tried to split the string
    7. and a lot of other combinations
      I ran into different problems like
    8. nothing happened
    9. out of memory
    10. total crash, where I had to reset
      What I would like to do is:
      Read the file, store it to flash and use it from there.

    Any idea how to do better ?

  • The issue is that to create a Uint8Array from that data with eval, Espruino first has to create a massive array - which causes it to run out of memory.

    Instead, do like I did and convert it into a string. Simply open that file in an editor, and 'replace all' , 0x with \x and then delete everything at the front and end. You could then create a Uint8Array and do arrayBuffer.set(myString).

    If you want to load the file from an SD card, save it as a binary file and then load it directly.

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

Possible to get old graphics font back?

Posted by Avatar for DrAzzy @DrAzzy

Actions