Digole UART/I2C/SPI Display Library

Pictos has 16x16 pngs, wonder if one could run a script to convert them all to bmp, then clean them up…I’ll try a few and see how they turn out. I contacted Pictos about bmp versions but no response.

Edit: Ran them through Automator, and of course the more detailed ones look like crap, but the simpler ones seem ok. At least it cuts down the manual work significantly.

I tried importing bitmaps but they don’t converter cleanly, I had to try to copy the designs manually get sharp images.

RWB, if the bitmat is not in 1bit color or not the right size then importing is next to impossible. What were you trying to import?

I was just trying to import bitmap black and white icon images I found online. I just tried it to see if it was that easy to import images. I got them to import but they were fuzzy but they could be used as a blurry template to draw pixel by pixel in Graphics Gale.

I just found it easier to use Graphics Gale to get it looking how I want it, its kinda fun to play with in my opinion.

RWB, I really like graphics gale. The trick is to create your images with 1bit color to start with. It sounds like the “black & white” images you imported may have been grayscale. I really like GraphicsGale also and it does amazing stuff. :smile:

Yea I was importing bitmap vector images from www.vectorstock.com (I buy vector art from there and use it on my Laser etching machine & to do CNC carvings).

I then took the image and converted it to correct bitmap size and to simple black or white pixels and then exported the file and imported it to Graphics gale. It didn’t look so hot because the image was from a much higher resolution and there was really no good way to keep that sharpness on the 128x64 pixel display.

Yup, low res sucks. So manual it is!

Manual pixel art work is kinda fun. It’s kinda like preschool art work.

1 Like

Guys, I just got a wild hair and wrote a python script to convert images to BDF files. So far, it takes a list of files as args and will create a char for each color in the image (to do color separated glyphs). It is very VERY rough around the edges as I just whipped it up and haven’t spent much time debugging, but I thought it might help as is.

Anyways, it is python and uses the Python Image Library. To use it, run ./fontalizer all_my_images.png are_argument.gif to_the_script.jpg > this_is_my_fontfile.bdf

Get the gist?

The script just outputs to stdout, so redirect that to a file of your choice.
I have tested gif and png files but anything that PIL supports should work just fine.

This should work on windows and Mac, but I haven’t tried it.

Let me know if it helps and when I get some more time, I am going to clean it up a bunch and make it much better/user friendly.

Oh, one last thing, since it is doing color separation, a B&W image will generate two chars. If you want just one, use an alpha channel, as I am ignoring any pixels with alpha channels. Next rev, I might allow specifying a BG color.

1 Like

Ok, so I have made some tweaks and it is looking good to go from the BDF stand point. Sometime this w/e, I should be able to test converting it to a binary font and uploading it to the spark. In the meantime, I took a few icons from famfam and converted them.

As you can see, the images are indexed gifs (30ish channels each!!!), so each of the gradations is on a separate char. That said, if you started with monochrome images, it would be cleaner. The black and white solid outlines and fills turned out nicely though. Next step is custom icons!!!

Alright, I really should go to bed, but I took a fontset (http://www.icojam.com/blog/?p=148) and converted it to bdf. I committed the bdf file to the git repo, but it looks pretty good to me. Many of the other icon set actually use a ton of alpha and slight gradations, so they turn out pretty awful. I may add the ability to down sample in that case so you could end up with a true bitmapped image.

It looks like it will be pretty easy to add direct output of u8g binary fonts. Let me know if there is interest and I will add it otherwise I can just use the stand-alone utilty.

1 Like

billprozac, that would be cool, especially if it’s easy to add. :smile:

@peekay123 Done!

Ok, quick tutorial on custom glyph fonts.

  1. Using gimp or whatever tool you want, create an image of the glyph size you want (16x16, 32x32, 16x32, whatever).
  2. Set the color mode to indexed. If doing a B&W image, set the index to 1-bit. If doing color separation, set just the colors you NEED.
  3. Draw the image you want.
  4. Keep in mind the color you are using for background. For B&W, this is either one. For color, you can use any color that is not part of the image. This color will be “transparent” in the final font.
  5. Save the image(s) into a folder. If you prefer a specific order in the font, name that so they are in alphabetical order the way you want. (01-warning.jpg, 02-notification.jpg, 03-coolassicon.jpg, etc)
  6. Use the newest version of the tool, Fontalizer.py, from the gitrepo.
    The sytax is:
    fontalizer.py -H <height> -W <width> -n <basename for fonts> [-o outputBDF file if you want it] -u [u8blib font file if you want it] -c <RGB background color eg. ffffff> -i <starting char number> <all of your image files to convert>

An example is:
fontalizer.py -H 16 -W 16 -o -u -n myfont -c ffffff -s 65 testfiles/*.gif
This will create two files, myfont.bdf and myfont.u8g

There are some more "experimental’ options in the script for doing things related to alpha channels. If you stay away from using alpha channels then you should have no issues. Also, unlike before, now I am properly computing the BBOX, which means that thin images (those that are fewer bytes wide that the fonts default width) will use less memory. So a vertical pipe ‘|’, in a 16x16 font will only take 8 bits per row, not 16.

I have verified that a BDF generated checks out with Fony and the converted bytestream from the converter tool matches what I am outputting, so give it a try and let me know.

One important thing to know is how to calculate the expected font size. multiply the number of bytes wide (not bits!) by the height and add 6 bytes per glyph. Then add a 17 bytes header. As you can see, the 2K per font goes pretty quick if you have large fonts. I think for 16x16, you get 53 glyphs in 2048B. Also keep inb mind that the space is based on the byte boundary, not bit boundary, so a 14x14 font would take the same space as a 16x16. no advantage is gained until you get down to 16x8 or 8x8.

Enjoy!

2 Likes

@peekay123 @billprozac @bko @BDub

Hey guys I came across a update to the Adafruit GFX library that allows you to add and use fonts other than the stock Adafruit GFX library font. Using other fonts Adafruits GFX lib still is not supported by the official Adafruit GFX Library.

I ended up getting the Sharp 2.7 Inch Memory Displays working on the Teensy 3.1 which has 96Kb or SRAM + 256Kb of program memory which is more than enough to run the larger screen and hold tons of sprite animations. Now I need to figure out how to add the new fonts to the Adafruit GFX library via the update and I came here to see if you guys could take a look at this update and tell me what you think since you understand this all better than I do.

Here is the Github link to the updated Adafruit GFX library code that allows the use of new fonts. https://github.com/adafruit/Adafruit-GFX-Library/pull/32

And here is a free app that allows you to create new fonts quickly and easily from the fonts you have installed on your computer. We just need to set the font pixel dimensions and export it to be used with the GFX library: http://www.mikroe.com/glcd-font-creator/

Who ever helps me understand how to use this will receive a free Spark Core with Chip Antenna. I have a few coming from Sparks next batch of Cores that are about to ship out and I have a total of 5 Spark Cores so giving one away is not a problem :smiley:

Man that Sharp display is a beauty! Very, well, sharp! Can I ask where you are getting the Sharp displays? Do they have backlights or just reflective?

The changes to the Adafruit library are not that bad–it looks like the fonts (there are two) have a slightly different structure and are now variable width, which is nice. So instead of just a 5x7 font, you could have a 16x20 or similar. There are some comments about kerning (pushing certain letter combinations closer together so it looks better) but there does not seem to be per character kerning, just one common number per font.

The font creator software is a PC thing and I will have a hard time helping out with that part unless I do it at work–which is a no-no! Maybe one of the other guys can help you out.

Hey @Bko the displays have a very high resolution. This 2.7 inch screen is 400 x 240 pixels.

I get the screens from Mouser but they are all sold out right now. The 1.26 inch screens are instock though, same as used in the Pebble watch and a few others actually. The key is that they only consume micro amps while holding a static image.

I get the backpacks here: https://www.tindie.com/products/kuzyatech/sharp-memory-lcd-breakout-a2/

About the 2 fonts, yes it looks like it makes it easy to use any new sized font. I’m just wanting others to check it out before I dig in a screw something up and waste a few days in the process.

I was wondering what the Kerning was all about. Thanks for the info.

RWB, after some fiddling I was able to get the new GFX library to compile. I was recently testing a 320x240 ILI9341 LCD recently with the standard GFX library so it was a perfect testing platform.

I imported a times new roman font into glcd-font-creator and did an export of the “C” code with an 11x14 font size. I then cleaned up the resulting code, added the necessary metric bytes at the start of the font arrary, put into the library and added a new font descriptor for the font, compiled and sent it to display and BOOM… no go. The fonts come out garbled. I will be doing more testing, including testing TheDotFactory to see if I can get a working font. :smile:

@peekay123 Thanks for taking a look and testing it out real quick. I’m dying to get this working since it should allow us to use just about any font we could ever desire with the screens.

Were you able to get the 2 Alternative fonts that are built into the code to work?

Are you testing this on the Arduino Platform also?

I tried to get help from the guy who wrote this updated code but no response yet. Here is that forum post, I can’t seem to directly PM people with Adafruits new forum. https://forums.adafruit.com/viewtopic.php?f=25&t=52643&p=269899#p269899

Also when you reply use the @RWB so I get an email notification of your reply please.

@RWB, I have it going but I am having a snot of a time understanding why I can’t import a new font created by TheDotFactory. I am testing everything on a Spark of course! There are only two fonts that come with his modified library. I have only tried one (the default) but the second one is the same font with less characters so I don’t see the point! I can’t seem to get TheDotFactory to put out the data in the right format. A different font would be the real test.