Category Archives: GLCD Font Editor

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

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

The Tab names are Data and Struct

There’s a choice beetween 3 different GLCD data structures.

The Font character descriptors / Font Char Header informations / 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 adress.

Start Adress : Start Adress 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.

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.

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

>.<

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 )

Creating A GLCD Font

Creating A GLCD Font

Standard Edition , Update V3.7c

Bitmap2LCD can generate two different types of GLCD Fonts :

  • System Fonts : Fonts of the Operating System, like .TTF (True Type Fonts) , .FON
  • Editable Fonts : Fonts you can edit yourself (modifying the pixels) from a system font source, or Fonts you can create from scratch.

There are ANSI Fonts (system) , Unicode Fonts (system) and Editable Fonts (custom)

bitmap2lcd-font-menu

Choose the main menu GLCD Fonts tab, and click Enter Font Script Mode item to enter Font Creation Mode

Data Setting Parameters are located in Data tab. You can edit the values by clicking on parameter value of the parameter list, only when in Font Script Mode and with Standard Edition.

At the top of the font panel , the caption includes [Font Script Mode] when in Font creation Mode. Use the Door Icon exiz Button to exit this mode when willing to quit.

bitmap2lcd font creation

 

bitmap2lcd Font Panel 2

fontw Enter Font Script Mode

In Font Script Mode (see caption at the top) select a list of chars to export with the mouse (Orange arrow) or write or paste a list of characters into the field (blue arrow)

To delete the selected list , use the [Clr] button or the Clear Selected Chars List drop down menu item (Green arrow)

There are 3 different Font types : ANSI, Unicode or Editable (see Red Arrow)

A right side of the font panel, there’s a field where you can define the Font Export parameters (Purple arrows) in the Data tab -> See screenshot below

For example the Font Data Structure : Raw Font or Structured Font

NOTE : With Trial/Demo Version, there’s a limitation : Only Char “A” is generated as an example !

bitmap2lcd-font-parameters

Example : Modifying a Font Generator Parameter

 

Buttons

fontw Enter Font Script Mode

Start  convert selected List of chars to GLCD data

exiz  Exit Font Script Mode

toolSyntaxbig Font Settings

 

The Font Script (Red Arrow) can be found in the Script (or Name.FSC) Tab of the Text editors. The script itself is not editable. The parameters can be set in the Font Panel, and the orientation of data generation and endianness at the top of the script (Blue Arrow)

bitmap2lcd Font Script Panel 3

The GLCD data generated can be found in the Text editor, first Editor tab on the left

bitmap2lcd Font Gen

Next screenshot shows a comment block at the right side that shows the character of the generated data.  ( monochrome, 8 bit output only )

bitmp2lcd-font-output

 

Rotating A GLCD font charset with Bitmap2LCD

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

Rotating A GLCD font charset with Bitmap2LCD

Update V3.7c

Here’s an example on how to rotate a selected charset of a system font (90 degrees CW)

1.  In the GLCD font main menu, click on the Enter font Script Mode item

2.  Select the system Font, the font size and the fixed font option  (Green Arrow)

3. Select the set of chars you want to rotate Inside the font panel, for example here  ABCDE (Red Arrow)

bitmap2lcd-rotate-font_1

4.  in the Font Edition main menu , or on the Editors Panel click the Convert LCD Font script to an editable Font button ( Start editable font Orange Arrow fig 1)

 

Answer to the dialogs, until you see the open editable button in the dialog

–> A .EFF (Editable Font File) has been created

Then, you can see the editable font chars in the char list  (orange Arrow, fig. 2)

5. Rotate the chars 90 degrees clockwise (Purple Arrow )

bitmap2lcd-rotate-font_2

–> The font has been rotated

bitmap2lcd-rotate-font_3

6. Convert Font Script to Data ( Yellow Arrow)

7. Job done !

 

 

 

Families of Fonts in Bitmap2LCD

Families of Fonts in Bitmap2LCD

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

Update V3.7c

With Bitmap2LCD , you can of course write text and place symbols and glyphs inside the WORK CANVAS. by the way, Some system fonts families ARE collection of glyphs. You can find fonts on specialized websites like dafont.com and easily install them on you computer.

With Bitmap2LCD Standard Edition, you can also generate GLCD fonts to data arrays, in other words, convert the matrix of pixels of the glyphs into hexadecimal  data.

Families of Fonts

ANSI FONTS

Generate GLCD Fonts from System Fonts ( Glyphs are not editable )

fontw Open / create a Font     exiz Quit Font Script Mode

Directly select chars to convert to data inside the ASCII grid

bitmap2lcd-font-families

 

UNICODE FONTS ( International Characters Sets )

Generate GLCD Fonts from Unicode System Fonts ( Glyphs are not editable )

fontw Open / create a Font     exiz Quit Font Script Mode

bitmap2lcd-font-families-unicode

EDITABLE FONTS ( Freely Editable Fonts )

Create glyphs from scratch or export Chars from a System Font ( Glyphs are editable )

qervg2 List Editable Fonts  scratchw Create Editable Font From Scratch

exiz Quit Editable Font Script Mode

Bitmap2LCD Editable Font

 

ANTI-ALIASED FONTS

Generate anti-aliased Fonts, except in monochrome, 8 and 16 colors modes

bitmap2lcd-antialiased-font

 

Other buttons related to Fonts

Start  Create GLCD Font Data inside Text Editor

Start editable font  Export Selected Chars of a System Font to an Editable Font

exportcharw  Export the selected Char in the ASCII Grid to the WORK CANVAS

.

 

Bitmap2LCD : Info About The System Font Generator

Info About the System Font Generator

Standard Edition

Update V3.7c

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

Bitmap2lcd generates GLCD FONTS from UNICODE and ANSI SYSTEM FONTS  ( fonts currently installed in Windows ) and from EDITABLE FONTS, chars and symbols you can create yourself. Chars of a System Font can be exported to EDITABLE FONTS to be freely editable.

Font Chars can also be stretched. ( See below, the panel above the displayed Character A )

Info about Fonts in Bitmap2LCD

.

To Generate GLCD Font , ENTER and QUIT the Font Creation Mode, click the following buttons or the associated main menu items :

fontw Reload / Create Font Script

exiz Exit Special Mode > Exit Font Script

Start Generate the GLCD FONT DATA as defined in the FONT SCRIPT

bitmap2lcd-font-generator

bitmap2lcd-variable-and-fixed-fonts

Fig 1. At the left side, the FONT PANEL and and the right side, the FONT SCRIPT located in one of the TEXT EDITORS

Blue arrow : The FONT SCRIPT is NOT a directly editable script. The purple Parameters displayed  are defined with all the other arrows shown on the above screenshot.

Yellow Arrow : Select the SYSTEM Font , the Font Size, ANSI or UNICODE Chars ( script > Font Script Filename, Type, Name and Size )

Orange Arrow: Select the chars to generate in the ASCII Grid. Selected Chars are displayed in Color Aqua Blue. To clear all the selected chars in one click, click the Aqua Blue <Clr> button in the bar of icons. ( script > Selected Chars List )

Red Arrow: Font Height and Width limitations. A the right side, you can change from FIXED to VARIABLE LENGTH FONT. ( script > Font Size )

Green Arrow: Here you can move and frame all the chars in four directions. ( script > Font Size )

Purple Arrow: Here You select the direction of the GLCD Font data ( script > Font Orientation  )

FONT SCRIPTS (blue arrow) are saved to disk as [.FSC] files, and can easily be reloaded from inside the FILE EXPLORER (fig 2.). There’s a dedicated FONTS Folder (red arrow) . The font files there are filtered.

Bitmap2lcd GLCD Font Script Files

 

Example of Generated GLCD DATA for monochrome Display (Fixed Length 5×7 Font, Vertical Data Output)

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

0x20,     /* __#_____ */

0x50,     /* _#_#____ */

0x50,     /* _#_#____ */

0x70,     /* _###____ */

0x88,     /* #___#___ */

0x88,     /* #___#___ */

0x00,     /* ________ */

/* @ 7 Char:’B’ Width in bits :5 */

0xE0,     /* ###_____ */

0x90,     /* #__#____ */

0xE0,     /* ###_____ */

0x90,     /* #__#____ */

0x90,     /* #__#____ */

0xE0,     /* ###_____ */

0x00,     /* ________ */