Category Archives: GLCD Fonts

Export a List of Unicode Char(s) to Data

Bitmap2LCD is a tool for programming small Graphic LCDs in embedded systems and a programmable graphic and text processing tool.

For Unicode fonts :

Export a List of single Char Addresses and/or Ranges of chars to Data

Standard + Extended Edition

( V4.9b  )

Load a text file of a list of International Characters as a List of Hex Addresses or Address Ranges and export to Data in a single run.

Example of a mixed list of Unicode char addresses and ranges of addresses

0x0020-0x002F
0x0A96
0x0070-0x007F
0x0180-0x018f
0x03A8

Input Format : A single Unicode Char Address per line

Example : 0x0150 ( Or $0150 )

Input Format : A range of Unicode Chars Addresses per line

Example : 0x0150-0x155  ( with ‘-‘ as separator )

  1. Font panel -> Select Unicode, then Create/Load Font

2. Menu Unicode List / Load List of Unicode Chars button

3. Load the text file and export the data

4. Processing export to data…

Font Editor and Generator for Graphic LCD (GLCD)

About : Font panel and font generator data structures

Font Panel ( SVG / ANSI / UNICODE and Editable Fonts )

4 different font categories are available : ANSI and Unicode international System fonts (installed on Windows) , the SVG fonts (for grayscale 256) based on vector graphics for a better anti-aliasing quality, and Freely Editable Font, for customized bitmap glyphs.

^

Unicode block selection (green frame)

Font Panel ( EDITABLE Font )

An Editable Font can be an import of a system font + edits or created from scratch.

In this example only 5 chars

List of the existing Editable Fonts (blue frame)

Font Panel ( ANSI Font )

Font Settings in 3 panels : Structure, Header, and Data (green frames)

The parameters can be edited (when green background) in these 3 fields (red frame)

The chars selected in the Grid (blue frame) will be exported to data

Font panel > Structure Parameters

The Parameters in the green frame are separated for each Data Structure (1st Parameter of this list) These data are then present or not in the Descriptor blocs of the output data.

Font panel > Data Parameters

Font panel > Headers Parameters

The font headers such as the description and the font header code exported at the top of the data output.

Font panel > Font Data Structure

>.<

Data Structures :

Raw Data, Font Bloc, Structured and DMD struct are different outputs layouts for fonts.

The differences in headers, bitmap glyphs and descriptors

Example for “RAW Data” structure

Optional descriptors at the end

 

/*  >>> Code Header   */

 /* ( Bitmap Glyphs )  */

 /* @ 0 Char:’A’ Width in bits :10 */

 
 0x08 , 0x00 ,     /*  ____#___________  */

 0x14 , 0x00 ,     /*  ___#_#__________  */

 0x14 , 0x00 ,     /*  ___#_#__________  */

 0x14 , 0x00 ,     /*  ___#_#__________  */

 0x22 , 0x00 ,     /*  __#___#_________  */

 0x22 , 0x00 ,     /*  __#___#_________  */

 0x7F , 0x00 ,     /*  _#######________  */

 0x41 , 0x00 ,     /*  _#_____#________  */

 0x80 , 0x80 ,     /*  #_______#_______  */

 0x80 , 0x80 ,     /*  #_______#_______  */

 
 /* @ 20 Char:’B’ Width in bits :10 */

 
 0x7E , 0x00 ,     /*  _######_________  */

 0x41 , 0x00 ,     /*  _#_____#________  */

 0x41 , 0x00 ,     /*  _#_____#________  */

 0x41 , 0x00 ,     /*  _#_____#________  */

 0x7E , 0x00 ,     /*  _######_________  */

 0x41 , 0x00 ,     /*  _#_____#________  */

 0x41 , 0x00 ,     /*  _#_____#________  */

 0x41 , 0x00 ,     /*  _#_____#________  */

 0x41 , 0x00 ,     /*  _#_____#________  */

 0x7E , 0x00      /*  _######_________  */

 

};
                                          
 const uint8_t Arial_10_1252_(ANSI_-_latin_I)_Descriptors[][] PROGMEM = {                       
                                                              
  
 {0x41,0,10,10,100,160,0,30},                            /* ‘A’ */ 
 {0x42,20,10,10,100,160,0,30}                            /* ‘B’ */ 

>.<

Example for “Font BLOC” data structure

Optional Font Header at the top

Optional descriptors at the top of every bitmap glyph

const unsigned char Arial_10_1252_(ANSI_-_latin_I)_Bitmaps[] = {)                              
                                                                  

 0x00,0x3E,13,16,0x00,2, (font header)
 
 /* ‘A’ */

 0x41,0,10,10,100,160,0,30,
 0x08 , 0x00 ,     /*  ____#___________  */

 0x14 , 0x00 ,     /*  ___#_#__________  */

 0x14 , 0x00 ,     /*  ___#_#__________  */

 0x14 , 0x00 ,     /*  ___#_#__________  */

 0x22 , 0x00 ,     /*  __#___#_________  */

 0x22 , 0x00 ,     /*  __#___#_________  */

 0x7F , 0x00 ,     /*  _#######________  */

 0x41 , 0x00 ,     /*  _#_____#________  */

 0x80 , 0x80 ,     /*  #_______#_______  */

 0x80 , 0x80 ,     /*  #_______#_______  */

 
 
 /* ‘B’ */

 0x42,20,10,10,100,160,0,30,
 0x7E , 0x00 ,     /*  _######_________  */

 0x41 , 0x00 ,     /*  _#_____#________  */

 0x41 , 0x00 ,     /*  _#_____#________  */

 0x41 , 0x00 ,     /*  _#_____#________  */

 0x7E , 0x00 ,     /*  _######_________  */

 0x41 , 0x00 ,     /*  _#_____#________  */

 0x41 , 0x00 ,     /*  _#_____#________  */

 0x41 , 0x00 ,     /*  _#_____#________  */

 0x41 , 0x00 ,     /*  _#_____#________  */

 0x7E , 0x00       /*  _######_________  */

 

};

>.<

Example for *Structured” data structure

Bitmap glyphs in blocks, Descriptors in blocks at the end

/*  >>> Code Header   */

 /* ( Bitmap Glyphs )  */

static const uint8_t image_data_Arial_10_1252_(ANSI_-_latin_I)_0x41[20] =
{
 
 0x08 , 0x00 ,     /*  ____#___________  */

 0x14 , 0x00 ,     /*  ___#_#__________  */

 0x14 , 0x00 ,     /*  ___#_#__________  */

 0x14 , 0x00 ,     /*  ___#_#__________  */

 0x22 , 0x00 ,     /*  __#___#_________  */

 0x22 , 0x00 ,     /*  __#___#_________  */

 0x7F , 0x00 ,     /*  _#######________  */

 0x41 , 0x00 ,     /*  _#_____#________  */

 0x80 , 0x80 ,     /*  #_______#_______  */

 0x80 , 0x80      /*  #_______#_______  */

};

static const uint8_t image_data_Arial_10_1252_(ANSI_-_latin_I)_0x42[26] =
{
 
 0x7E , 0x00 ,     /*  _######_________  */

 0x41 , 0x00 ,     /*  _#_____#________  */

 0x41 , 0x00 ,     /*  _#_____#________  */

 0x41 , 0x00 ,     /*  _#_____#________  */

 0x7E , 0x00 ,     /*  _######_________  */

 0x41 , 0x00 ,     /*  _#_____#________  */

 0x41 , 0x00 ,     /*  _#_____#________  */

 0x41 , 0x00 ,     /*  _#_____#________  */

 0x41 , 0x00 ,     /*  _#_____#________  */

 0x7E , 0x00      /*  _######_________  */

};


 /*  >>> Optional Char Descriptors   */
 /* ( Char Adress  Start adress  Width in bits  Height in bits  Char Bytes  Size in bits  X Offset  Y Offset  Char Spacing bits )  */

static const tImage Arial_10_1252_(ANSI_-_latin_I)_array_[] = {

// character : ‘A’
{0x41,0,10,10,100,160,0,30 , &Arial_10_1252_(ANSI_-_latin_I)_0x41},

// character : ‘B’
{0x42,20,10,10,100,160,0,30 , &Arial_10_1252_(ANSI_-_latin_I)_0x42}

};

const tfont  Arial_10_1252_(ANSI_-_latin_I) = { 2 , Arial_10_1252_(ANSI_-_latin_I)_array };

>.<

Example for “DMD Struct” data structure

Optional Font Header at the top

Descriptors in blocks at the top (Here widths only )

static const uint8_t Arial_10_1252_(ANSI_-_latin_I)_Bitmaps[2][] PROGMEM = {  
                                                             

 0x00,0x30,13,16,0x00,2, (font header)
 /*  >>> Code Header   */

 /* ( Width in bits )  */

 
 10,                            /* ‘A’ */ 
 10                            /* ‘B’ */ 
,
 /* ( Bitmap Glyphs )  */

 /* @ 0 Char:’A’ Width in bits :10 */

 
 0x08 , 0x00 ,     /*  ____#___________  */

 0x14 , 0x00 ,     /*  ___#_#__________  */

 0x14 , 0x00 ,     /*  ___#_#__________  */

 0x14 , 0x00 ,     /*  ___#_#__________  */

 0x22 , 0x00 ,     /*  __#___#_________  */

 0x22 , 0x00 ,     /*  __#___#_________  */

 0x7F , 0x00 ,     /*  _#######________  */

 0x41 , 0x00 ,     /*  _#_____#________  */

 0x80 , 0x80 ,     /*  #_______#_______  */

 0x80 , 0x80 ,     /*  #_______#_______  */

 
 /* @ 20 Char:’B’ Width in bits :10 */

 
 0x7E , 0x00 ,     /*  _######_________  */

 0x41 , 0x00 ,     /*  _#_____#________  */

 0x41 , 0x00 ,     /*  _#_____#________  */

 0x41 , 0x00 ,     /*  _#_____#________  */

 0x7E , 0x00 ,     /*  _######_________  */

 0x41 , 0x00 ,     /*  _#_____#________  */

 0x41 , 0x00 ,     /*  _#_____#________  */

 0x41 , 0x00 ,     /*  _#_____#________  */

 0x41 , 0x00 ,     /*  _#_____#________  */

 0x7E , 0x00      /*  _######_________  */

 

};


Single Line Chars Data for monochrome Small fonts

From Update V4.5

For small monochrome font chars, a single line per char data output has been implemented :

Basic conditions :

  • Monochrome or Monochrome Inverted schemes
  • Fixed fonts only ( Fixed Chars length )
  • Raw Font Structure
  1. Enter Font Script Mode ( click Create / Load Font Button )

2. Then select some chars in the chars grid or type them inside the list of chars ( selected chars are displayed in light blue A…H )

  • Set Data Structure to RAW DATA in the Struct Parameters
  • Set Horizontal Chars Data to TRUE the Data Parameters >> Font Type parameter is then automatically set to FIXED
  • Then move Font Up/Down and Set Chars Height and/or Chars Width values
  • When font ready , click on the Export Font to Data button
  • Click Show Font Data button to watch the generated Font data

>.<

GLCD Font Generator : SVG Vector Graphics Fonts output

Update V4.3

To get GLCD fonts with better antialiasing rendering quality, in apps with grayscale TFT displays (256 gray shades) Bitmap2LCD can output Scalable Vector Graphics (SVG fonts)

>.<

GLCD Font generator : Data and Structure parameters

Update V4.6

The Data format and Data Structure Parameters for the export of Graphic LCD Fonts have been extended and split in two tabs on the Font Panel.

The Tab names are Data and Struct and Header

There’s a choice between 4 different GLCD data structures.

The Font character descriptors / Font Char Header information / can optionally be enabled or disabled and their order of appearance in the code defined.

Character Descriptors / Font Char Header

Switch the needed descriptors to True or False, if you need them or not in your code export. the adjust then order of their appearance in the code at the right.

Char Adress : It’s the Ascii Code of the Char (In the case of Editable Custom Fonts, you can adjust the Ascii Offset in the Data Parameters to adjust the Char address.

Start Address : Start Address of the Data array of the char.

Char Width Bits : Width in bits of the char.

Char Height Bits : Height in bits of the char.

Char Size Bytes : Size in bytes of the char.

Char Size Bits : Size in bits of the char. Example : If the bottom right pixel of the char is X18 , Y31 (in the Char Grid of the Font Panel) + the X0 Y0 bits, so 19 bits in width x 32 bits in height, the Char size in Bits is 19 x 32 = 608 pixels

An X and Y Offset system is available to remove lines of blank pixels in the code ( char background ) and save memory space. The blank lines at the top and at the bottom of the data are removed from the code output and replaced by Offsets in the descriptors.

Char Spacing : Spacing adjustment in pixels chars.

For this subject, also read this article about character spacing with kerning pairs :

An optional Terminator Code can be inserted as last byte at the end of the code.

>.<

Font Descriptors / Global Font Header

An optional 4 bytes global Font Header outputs data at the top of the Font Bloc structure.

Data such as global Char Height and Width and Number of Chars can be exported there.

>.<

More to read :

System Codepage ( ANSI Fonts )

Extended Edition Only

There’s a default/active Codepage installed in your basic Windows installation. The active Codepage depends on your Region/geographic location.

On the ANSI Font Panel, a System Codepage combobox allows a quick selection of the ANSI Font character encoding without the need to modify the Windows installation.

A code page is a character encoding and as such it is a specific association of a set of printable characters and control characters with unique numbers…

Read more about Codepage on Wikipedia

Export of the Kerning Pairs for GLCD

Export of the Kerning Pairs for GLCD

In typography, kerning is the process of adjusting the spacing between characters in a proportional font, usually to achieve a visually pleasing result. Kerning adjusts the space between individual letter forms…

https://en.wikipedia.org/wiki/Kerning

From Version 4.0 Extended Edition , a new Kerning feature has been implemented in the Bitmap2LCD software tool.

For its use on microsystems with Graphic LCD (GLCD) , the table of Kerning Pairs (1st char, 2nd Char, Pixel Shift in X) corresponding to a particular Font Name, its size and style (Bold, italic..) can be exported to a file as source code

Export > Bitmap2LCD Extended Edition only !

  • Click Grids/Excel Button
  • Load the Kerning Pairs List for the current Font and Font Size
  • Export the Kerning Pairs List to Source/Text file

Kerning Pairs Export inside the Editor (Graphics Preview and Editors Window)

Generate a One Line Array per Char Font

 

Generate a One Line Array per Char Font (with bitmap2LCD)

( from Version 3.8G build 8 )

1. Enter Font Script Mode

2. Select the chars, here from 0 to 9 ( green arrow )

3. Shift the whole Font up to eliminate white pixel lines ( blue arrow )

4. Specify Max Height in the Parameters ( red arrow )

-> This example is for horizontal data direction, see the bar with buttons with arrows on screenshot below !

5. Set One Line Array Parameter to True ( purple arrow )

6. Click Export Font To data button

 

In the output file, data array for each char takes one single line ( orange arrow )

( in this example, it is a 16 bit data array format )