Anti-Aliasing and Smoothing of GLCD images and fonts

Anti-Aliasing and Smoothing of GLCD images and fonts

Anti-aliasing or “font smoothing” is a process to make your images look smooth and your text more readable.

Anti-aliasing or font smoothing is a technique to make flat color images and text look smoother on grayscale GLCD screens. The font generator in the Bitmap2LCD tool features font smoothing for 16 grayscale OLED GLCD (4 bit pixel depth)
A graphic liquid crystal display shows an image in bitmap mode. It means that every image is really a bunch of tiny little squares that make up the image. In other words, fonts on monochrome GLCDs or monochrome fonts displayed on grayscale GLCDs, can’t display chars with smooth curves. With anti-aliasing, the curve is created with squares of color that are shaded darker or lighter depending on how much of the curve would take up that square. For instance, if a portion of a curve takes up 10% of a pixel, that pixel would be shaded with 10% of the color saturation of the curve, in fact in case of a 16 grayscale level GLCD, the nearest gray level of the 10%

Anti-aliasing Pros and Cons

Pros
  • Makes fonts look smoother
  • Rounded edges look round
  • Type is easier to read (for some) because it looks more like what printed type looks like
  • Some people feel it’s prettier

Cons

  • Small fonts become too fuzzy to read
  • Sharp edges may be fuzzy and not precise
  • You can’t print anti-aliased text as it comes out blurred
  • Images are generally larger
  • Type is easier to read (for some) because the blurring is reduced and the fonts are clear

Note : This post summarizes information found here and there on the web

 

Example of an Antialiased Character View in the Bitmap2LCD Font Panel

bitmap2lcd-antialiasing

 

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 !

 

 

 

Bitmap2LCD :: Generating International Fonts / Characters

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

Bitmap2LCD :: Generate International Fonts / Characters

Standard Edition Update V3.7c

There are different ways to select the Unicode characters to generate GLCD Font data.

  •  Enter Font Script Mode ( in the GLCD Font Main Menu ) , select the Unicode mode , the font, the font Size and Unicode Block.
  • Select the Chars to export with the mouse inside the grid ( Are selected = Teal Color )
  • Generate Data  Start

bitmap2lcd-unicode-font_1

way to generate GLCD Fonts, for example when more than 256 Chars :

  •  Enter Font Script Mode ( in the GLCD Font Main Menu ) , select the Unicode mode , the font, the font Size and Unicode Block.
  • Enable the Address Range Selection (red Arrow)
  • Enter the Start and End Hexadecimal Addresses ( From Hex and To Hex )
  • Generate Data  Start

bitmap2lcd-unicode-font_2

Then read the font script (see below) for the other settings to be defined first to generate Font Data : The data orientation, the endianness, the Font Size, if fixed or variable length etc…

bitmap2lcd-unicode-font_3

 

 

Bitmap2LCD : Shades of Gray

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

Shades of Gray

Update V4.7b

Bitmap2LCD supports the export data arrays for grayscale Graphic LCD.

The choice is 4 , 16, 32 or 256 gray levels.

Configuration settings

Color pickers for 32, 4 and 16 shades of gray modes :

Bitmap2LCD Grayscale Color Pickers

Example, in the 32 gray levels mode, the shades between the white color to the black color will output data per pixel from 0 to 31 decimal, or the opposite, from 31 to 0 decimal if you enable the Invert Grayscale Palette Parameter checkbox.

Grayscale Palettes

RGB (Red,Green,Blue) values in Hexadecimal :

4 Gray Shades Palette :

000000 555555 AAAAA FFFFFF

16 Gray Shades Palette :

RGB = 000000, 111111, 222222, 333333 until  FFFFFF

32 Gray Shades Palette :

RGB = FFFFFF, F7F7F7, EFEFEF, E7E7E7, DFDFDF, D7D7D7 , CFCFCF, C7C7C7,BFBFBF, B7B7B7, AFAFAF, A7A7A7, 9F9F9F, 979797,8F8F8F, 878787, 7F7F7F, 777777, 6F6F6F, 676767, 5F5F5F, 575757, 4F4F4F,474747, 3F3F3F, 373737, 2F2F2F, 272727, 1F1F1F, 171717, 0F0F0F, 000000

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

.

 

Animations on Graphic LCD (GLCD)

Animations on Graphic LCD (GLCD)

With Bitmap2LCD, you can easily edit and play GLCD animations.

The goal is to create buttons with status dependent graphic effects, device power on and power off splash screens, animated logos, moving icons, display of analog gauges, creating impressive GLCD demos, symbolic displays of actions in progress or to show the current machine operation,  or an animated hourglass cursor to name a few.

One of the many interesting features of Bitmap2LCD is the support of GIF files.

To summarize , the GIF format supports up to 8 colors per pixel depth (max 256 colors) and also supports animations and allows a separate palette of 256 colors for each frame.

wikipedia about GIF

Here’s an example of a short animation made with Bitmap2LCD called HalfEmptyGlass.gif ( Monochrome, 28 frames )

Click on the image if you want to play the animation

The animation sequence is made of frames that you can handle inside Bitmap2LCD as single images.

There’s a built in animation sequence player , similar to a video player with Play/ Stop / pause /rewind /next frame / previous frame buttons.

When the animation is ready, you can export the animation in one run and click to a set of data arrays, with or without data compression, in case of a monochrome data output.

A GIF animation is a collection of images

 

Animation features of Bitmap2LCD

  • Import all frames of a GIF file inside the Work Canvas
  • Import a single frame of a GIF file as graphic
  • Import single images one by one into an animation and save it as a GIF
  • Create an animation from scratch
  • Remove, insert, add  frames in the animation
  • Play the animation sequence
  • Export animation to data arrays in one run

 

Import a GIF animation

When clicking inside the File Explorer file-explorer on the filename of a GIF file, You can 1) import a single frame from inside a GIF as a single graphic, or 2) import all of the frames of the animations inside the Work Canvas (GIF Import button -> blue arrow)

In the Graphics Preview Window, you can also play the animation (purple arrow) , find a specific frame using the track bar (green arrow) or browse the GIF using the GIF Components Browser (red arrow)

P57BU2H9V2FH

bitmap2lcd-glcd-animation_1

1) Graphic Preview ) GIF Import button -> blue arrow

bitmap2lcd-glcd-animation_2

2) Work Canvas ) Paste button -> green arrow

bitmap2lcd-glcd-animation_3

3) Work Canvas ) Edit Animation -> Yellow arrow -> Red frame

4) Start Export animation to data arrays

bitmap2lcd-glcd-animation_data_array_1

5) Text editors ) Browse data array files (blue arrow)

bitmap2lcd-glcd-animation_data_array_2

6) Text editors ) Check the clip unit 

( Filename format : clip_ArtWorkName_NumberOfFrames.h )

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,     /* ________ */

Export Font Data to Binary File : Data Structure

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

Export Font Data to Binary File : Data Structure

Standard Edition , Update V4,0

When you export the Font Script to a Binary File, the data array is sent to the Hex Editor and saved as a .hex to Disk. ( For example for Data storage in EEprom )

Output + Settings Main Menu :

See below the data structure inside the Hex Editor.

In the following example the generated Font is Arial Unicode Size 10 , ANSI, Selected Chars are A B and C

Structure :

1st Line , red area 00 03 = Number of chars (decimal)

2nd Line, Character Info between 55 AA   ….  AA 55

00 01  Type of Font  >> 0001 = ANSI  >> 0002 = UNICODE  >> 0003 Editable Font

00 36  Char Data Count (decimal)

00 10 Char Width (decimal)

00 18 Char Height (decimal)

00 2D Char ASCII ( Optional > ANSI, Editable font ) or Unicode Char Address (hex)

00 50 First Address Next Char (hex)

Blue Area = Char Pixels data

Green Area = Data Filler, Forces next Char to begin from line begin

bitmap2lcd Font to Binary

About GLCD Data Compression

Bitmap2LCD is a tool for programming small Graphic LCDs in embedded systems.

 Update V3.9H

A simple data compression feature, for the output of GLCD data arrays is implemented in Bitmap2LCD

This function is only available for monochrome mode and 8 bit output format.

The 8 bit microcontrollers for price sensitive projects are circuits with often less onchip memory space than most of the 16 or 32 bit devices.

The target is to save as many as microcontroller flash memory as possible. As tables for full display patterns of for example a 128 x 64 dot matrix LCD need 1024 bytes each, the goal of this function was to save flash space for more code or graphics or just to reduce the overall flash capacity and therefore to sink the price of the MCU chip.

The microcontroller firmware has to be able to handle these tables with a special code, which decodes the compressed data. Processing time for decompression has to be allowed.

 

How does it work ?

Instead of only converting the black and white pixels found in the work canvas to a linear list of n bytes, with the data compression method explained here, the data array is split into two separate arrays in one single output file : one as usual for the data stream and another for the pointers of each data groups.

Compr1

The basic concept of this compression is based on making groups of consecutive identical data bytes in the data array.

 

Consecutive identical byte chains, and consecutive different byte chains are handled, the goal here is to save data bytes when a consecutive identical byte chain is found. While the first pointer of a consecutive different bytes chain is a loss of one data byte stored as a pointer, a consecutive identical byte chain of 10 bytes is a win of 8 bytes, the data being written only once in the data array. The count of them is then stored in the pointer byte array part.

The maximum count of consecutive data, identical or different is limited to 127 ( pointer bits 6 to 0 ). If a data count in a group reaches 127, a new group is encoded.

compr2

The bit 7 of the pointer byte is the flag for the compression decoder. A 1 (high) is for a chain of identical data bytes, and a 0 (low) is for an chain of different data.

 

When data compression is active, Bitmap2LCD converts all data and shows the compression rate in the compression statistics at the end of the output file.

 

This method of compression shows different results in vertical or horizontal orientation conversion, it depends of the LCD graphic !

If possible, before to choose the LCD controller and its specific data orientation in Display RAM , you could try both orientations and compare the possible compression ratios.

 

In the Header Include file, the example script below shows how to setup the compression table information.

( It is an example for a GNU-C compiler for ATMEL AVR family )

Everything after the tag [&COMPRESSION] is a script information for the data compression function.

The tag [&CNAME] is replaced in the output table name, by the data array name

with an additional suffix _x ( For example : Newfile_x )

The tag [&CSIZE] is not used yet (v2.3)

In the Header Include file :

[&COMPRESSION]
const prog_uint8_t [&CNAME][&CSIZE] = {

 Please also check the online forum for other topics about this function

Compression Decoder Example

The below example of a function in C language, decodes compressed data arrays converted with bitmap2LCD.

It is for an Atmel AVR target MCU with GCC compiler, a T6963C LCD controller ( horizontal byte orientation from left to right )
No buffer RAM.

Note : For LCD module widths greater than 255 dots, x and width variables should be long integers

 

// T6963 function for uncompressed bitmaps
 
void GLCD_Bitmap(unsigned char *bitmap, unsigned char x, unsigned char y, unsigned char width, unsigned char height)
{
unsigned char val;
uint8_t LcdX,LcdY,EndX,EndY;
long ip = 0; // table byte counter
LcdX=x; // LCD dot adress X
LcdY=y; // LCD dot adress Y
EndY=y+height-1;
EndX=x+width;
 
while (LcdY < EndY || LcdX < EndX)
{
GLCD_GraphicGoTo(LcdX, LcdY);
GLCD_WriteDisplayData(pgm_read_byte(bitmap + ip));
ip ++;
LcdX=LcdX+8;
if (( LcdX == EndX ) && ( LcdY<EndY ))
{
LcdY++;
LcdX=x;
}
}
 
}
 
 
// T6963 function for Bitmap2LCD compressed bitmaps
 
void GLCD_xBitmap(unsigned char *bitmap, unsigned char *pointer, unsigned char x, unsigned char y, unsigned char width, unsigned char height)
{
 
unsigned char val;
uint8_t p,pv,nb,LcdX,LcdY,EndX,EndY;
long ip = 0; // table byte counter
p = 0; // pointer
LcdX=x; // LCD dot adress X
LcdY=y; // LCD dot adress Y
EndY=y+height-1; // End pixel in Y
EndX=x+width; // End Pixel in X
 
while (LcdY < EndY || LcdX < EndX)
 
{
pv = (int)(pgm_read_byte(pointer + p)); // read the pointer byte
p++;
 
if (pv > 128) // bit 7 is logical high when identical bytes chain, low when different
{
val = pgm_read_byte(bitmap + ip);
ip++;
nb = pv – 128;
 
while ( nb > 0 ) // substract bit 7 value for number of bytes in chain
{
GLCD_GraphicGoTo(LcdX, LcdY); // bytes in chain are identical
GLCD_WriteDisplayData(val);
LcdX=LcdX+8;
nb–;
if (( LcdX == EndX ) && ( LcdY<EndY ))
{
LcdY++;
LcdX =x;
}
}
}
else // bytes in chain are different
{
while ( pv > 0 )
{
GLCD_GraphicGoTo(LcdX, LcdY);
GLCD_WriteDisplayData(pgm_read_byte(bitmap + ip));
ip ++;
LcdX=LcdX+8;
pv–;
if (( LcdX == EndX ) && ( LcdY<EndY ))
{
LcdY++;
LcdX=x;
}
}
}
}
}